Two colors background Android


Keywords:android 


Question: 

I am programming an Android activity and it should have a background of a color in its upper side and another color in its bottom side.

The relative layout used is padded.

What I usually do is using non padded relative layout and dividing it in in upper and bottom relative layout, these u/l are divided in other padded relative layout.

This assure me that all the activity area has the background color that it should have. The padded area assures that the widgets are around the centre of the activity.

But now I have an already programmed activity and the upper side widgets and the bottom side ones are related each other so I can't divide the relative layout easily.

Any advice?


2 Answers: 

Have a look on this layout for your activity. There is only one RelativeLayout with two backgrounds. One is set to the layout itself, the other is set to an empty View that is positioned under the views on the top. The only disadvantage is you have to remove padding from the RelativeLayout and replace it with margin set to your views. I guess it's not a big deal.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#59C2F2">

    <!-- This is the last TextView of top part, below it the bg will be different -->
    <TextView
        android:id="@+id/top_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:text="This represents top elements"/>

    <!-- This View must be placed before any elements from the bottom part -->
    <View
        android:id="@+id/bottom_background"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/top_text"
        android:layout_alignParentBottom="true"
        android:background="#004892" />

    <!-- Now you can place your bottom elements and align them with the to ones -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@id/bottom_background"
        android:layout_alignLeft="@+id/top_text"
        android:layout_marginTop="16dp"
        android:textColor="#fff"
        android:text="This is the bottom part"/>

</RelativeLayout>
 

First add this to your /values/attrs.xml. If the file doesn't exists, create it as a resource type.

<declare-styleable name="TwoColoredView">
    <attr name="topColor" format="color"/>
    <attr name="bottomColor" format="color"/>
    <attr name="topColorHeightPercent" format="integer"/>
</declare-styleable>

Next create a TwoColoredView class and put it somewhere where you keep your custom views

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;

import your.package.R;

/**
 * Created by Bojan on 27.4.2015.
 */

public class TwoColoredView extends View {

    private int measuredWidth, measuredHeight;
    private Paint topPaint, bottomPaint;
    final int defaultTopColor = 0xFFFF0000;
    final int defaultBottomColor = 0xFF0000FF;
    private int topHeight = 40;

    public TwoColoredView(Context context) {
        super(context);
        init(context, null, 0);
    }

    public TwoColoredView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs, 0);
    }

    public TwoColoredView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs, defStyleAttr);
    }

    private void init(Context context, AttributeSet attributeSet, int style) {

        TypedArray typedArray = context.obtainStyledAttributes(attributeSet, R.styleable.TwoColoredView, style, style);

        int topColor = typedArray.getColor(R.styleable.TwoColoredView_topColor, defaultTopColor);
        int bottomColor = typedArray.getColor(R.styleable.TwoColoredView_bottomColor, defaultBottomColor);
        topHeight = typedArray.getInteger(R.styleable.TwoColoredView_topColorHeightPercent, 40);

        typedArray.recycle();

        topPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        topPaint.setStyle(Paint.Style.FILL);
        topPaint.setColor(topColor);

        bottomPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        bottomPaint.setStyle(Paint.Style.FILL);
        bottomPaint.setColor(bottomColor);
    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        measuredHeight = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);
        measuredWidth = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);

        setMeasuredDimension(measuredWidth, measuredHeight);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        canvas.drawRect(0, 0, measuredWidth, measuredHeight * 0.01f * topHeight, topPaint);
        canvas.drawRect(0, measuredHeight * 0.01f * topHeight, measuredWidth, measuredHeight, bottomPaint);
    }
}

Now create a layout for your fragment/layout

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <your.package.TwoColoredView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:topColorHeightPercent="40"
        app:topColor="#FFFF0000"
        app:bottomColor="#FF0000FF"/>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!-- Other stuff goes here -->

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:gravity="center"
            android:textColor="@android:color/white"
            android:textSize="20sp"
            android:text="Hehe.. I'm the middle bro!"/>

    </RelativeLayout>

</FrameLayout>

And this is the final result

preview