Android layout background with two colors

Question

I want to make 2 colour(half white, half red) layout background for my android app. By now I see that layout can only be one colour or gradient. Is it possible to achieve two colour background as I want it?

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context="dealy.com.client.SettingsActivity$PlaceholderFragment"
android:background="#ff4344">

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/avatar"
    android:minHeight="120dp"
    android:minWidth="120dp"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Text NAME"
    android:id="@+id/user_name"
    android:textSize="25dp"
    android:layout_below="@+id/avatar"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Уровень: Профи"
    android:id="@+id/textView11"
    android:textSize="20dp"
    android:layout_below="@+id/user_name"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Посещения: 30"
    android:id="@+id/textView12"
    android:textSize="20dp"
    android:layout_below="@+id/textView11"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true" />

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/imageButton"
    android:minHeight="0dp"
    android:minWidth="0dp"
    android:nestedScrollingEnabled="false"
    android:src="@drawable/gift"
    android:background="#ff4344"
    android:layout_alignBottom="@+id/textView12"
    android:layout_alignRight="@+id/facebook_switch"
    android:layout_alignEnd="@+id/facebook_switch" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Бронировать с Facebook"
    android:id="@+id/user_facebook"
    android:layout_centerVertical="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:textSize="19dp" />

<Switch
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/facebook_switch"
    android:layout_centerVertical="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Режим инкогнито"
    android:id="@+id/user_invisible"
    android:layout_below="@+id/facebook_switch"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:textSize="19dp"
    android:layout_marginTop="5dp" />

<Switch
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/switch4"
    android:layout_alignTop="@+id/user_invisible"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true" />

<EditText
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:inputType="phone"
    android:ems="10"
    android:id="@+id/editText"
    android:phoneNumber="true"
    android:text="+7"
    android:layout_below="@+id/user_invisible"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true" />

Create main layout in 2 inner layout. In this 2 inner layout in one layout for background color set white & other layout for background color set red. — Jigar Shekh, Dec 23 '14 at 09:37
This might help you. http://stackoverflow.com/questions/8727238/banded-background-with-two-colors — max59, Dec 23 '14 at 09:42

akohout · Accepted Answer · 2014-12-23T11:03:18.770

4

Each ViewGroup can only have one background color, but you can easily achieve what you want by creating two ViewGroup elements.

Something like the following:

<LinearLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <FrameLayout
       android:layout_width="0dp"
       android:layout_height="match_parent"
       android:layout_weight="1"

       android:background="#ff0000"/>

    <FrameLayout
       android:layout_width="0dp"
       android:layout_height="match_parent"
       android:layout_weight="1"

       android:background="#00ff00"/>

</LinearLayout>

edited Dec 23 '14 at 11:03

answered Dec 23 '14 at 09:40

akohout

1,802
3
23
42

Thanks for the comment, but my second layout still have main layout background borders. – Frosty Dec 23 '14 at 10:04
It would help if you could post your layout sources. – akohout Dec 23 '14 at 10:25
Ok, I see two solutions for your problem. The first is to use Jay's answer and simple create a drawable that has your color format. The second option is creating a new layout by using two ViewGroups (as suggested in my solution). – akohout Dec 23 '14 at 11:05

score 2 · Answer 2 · answered Dec 23 '14 at 09:38

2

Try creating a custom drawable in xml format using layer-list. It will give you the ability to not just use two colors but more.

answered Dec 23 '14 at 09:38

Jay

1,478
1
10
9

Android layout background with two colors

2 Answers2