Layouts with two different colors

Question

I am trying to obtain something like this:

by using A RelativeLayout with light grey (#EEEEEE) and a LinearLayout with a bit darker grey (`#9E9E9E), but despite the difference in color I am not obtaining a visible contrast...

My code:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:orientation="vertical" >
    <!--android:background="@mipmap/background_poly"-->
    <RelativeLayout  android:id="@+id/account_det"
        android:layout_width="match_parent" android:layout_height="wrap_content"
        android:background="#EEEEEE">

        <de.hdodenhof.circleimageview.CircleImageView
            android:id="@+id/usrAvatar"
            android:layout_width="90dp" android:layout_height="90dp"
            android:src="@mipmap/aka"
            android:layout_marginLeft="10dp"
            android:layout_marginStart="10dp"
            android:layout_marginTop="38dp" />

        <TextView android:id="@+id/usrName"
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:layout_marginLeft="8dp" android:layout_marginStart="8dp"
            android:layout_marginTop="2dp"
            android:text="Cris"
            android:textColor="#000000" android:textSize="14sp" android:textStyle="normal"
            android:layout_toEndOf="@id/usrAvatar"
            android:layout_toRightOf="@id/usrAvatar"
            android:layout_alignTop="@id/usrAvatar" />
            <!--android:layout_alignBaseline="@id/usrAvatar"-->

        <TextView android:id="@+id/usrEmail"
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:layout_marginTop="6dp"
            android:textColor="#000000"
            android:textSize="16sp"
            android:textStyle="normal"
            android:text="nickname@email.com"
            android:layout_alignLeft="@id/usrName"
            android:layout_alignStart="@id/usrName"
            android:layout_below="@id/usrName" />
    </RelativeLayout>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent" android:layout_height="match_parent"
        android:background="#BDBDBD"
        android:layout_below="@+id/account_det">

    </LinearLayout>
</RelativeLayout>

The result:

enter image description here

How can I obtain the targeted design?

Answer 1

I think this will help you. The file name is layout_background.xml you will call like this android:background="@drawable/layout_background"

xml file is here ->

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="@color/colorDefClickEffect"
tools:targetApi="lollipop"> 

 <item android:id="@android:id/mask">
    <shape android:shape="rectangle">
        <solid android:color="@android:color/white" />
        <corners android:radius="@dimen/radius_btn_credential" />
    </shape>
</item>

<item android:id="@android:id/background">
    <shape android:shape="rectangle">
        <corners android:radius="@dimen/radius_btn_credential" />
        <gradient android:endColor="@color/colorBtnWhiteFg"
            android:startColor="@color/colorBtnPrimaryBg"
            android:angle="45" />
    </shape>
</item>

Answer 2

One possible solution to create custom Drawable with layer-list :

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:top="128dp">
        <shape android:shape="rectangle" >   
            <solid android:color="#66C2C2C2" />
            <size android:height="128dp" />
        </shape>
    </item>

    <item>
        <shape android:shape="rectangle" >   
            <solid android:color="#66EEEEEE" />
        </shape>
    </item>

</layer-list>

And use this Drawable as background for your layout.