CODEWITHSUNDEEP
androidbackground
andysando
andysando

Reputation: 1192

How to use common background for multiple items?

If I want to get a look as below, what do I do? More specifically, how do I set the white background around multiple items? EDIT: The grey is the background for the whole screen, and the white is like a "box" placed on the grey background, together with the buttons, divider and textview.

Example of what I want to get

I'm thinking like this:

<TableLayout
android:background="#eae8e8>
...
<WhiteBox
    android:layout_width="fill_parent"
    android:layout_height="300dp"
    android:layout_margin="16dp"
    android:background="#FFFFFF/>

    <TextView>
    ...
    <Divider>
    ...
    <Button>
    ...
    <Button>
    ...

</WhiteBox>
</TableLayout>

Where "WhiteBox" of course is something else, but would it be possible to do something like this?

Upvotes: 0

Views: 598

Answers (3)

khubaib
khubaib

Reputation: 535

Yes you can go ahead with your approach.just give margin to your inner layout to which your background is set to white.and you can also set the background to white for the text views and buttons you are using inside your inner layout.Set the text color as gray for text view and button.eg:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#eae8e8">

<RelativeLayout 
    android:layout_width="200dp"
    android:layout_margin="30dp"
android:layout_height="200dp"
android:background="#FFFFFF"

    >
<TextView 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/text"
    android:layout_margin="50dp"
    android:text="TextView"
    android:textColor="@android:color/darker_gray"
    android:background="#FFFFFF"
    />
<Button 
    android:layout_marginTop="20dip"
    android:text="Button"
    android:textColor="@android:color/darker_gray"
    android:layout_below="@+id/text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/button1"
    android:background="#FFFFFF"
    />


</RelativeLayout>

</LinearLayout>

Upvotes: 0

khubaib
khubaib

Reputation: 535

By default when you create an xml with no backgrounds applied to your parent layout and if the widgets inside also does not have any background image/color set.it renders white on the screen.Just don't add any image/color as background.You can also set the background as white.

android:background="#FFFFFF" set this to your widgets in xml. like button or text view etc to have it appear white.

Upvotes: 0

JRomero
JRomero

Reputation: 4868

I would recommend leaving as many of the elements as possible transparent to prevent overdraw issues but it depends on your overall needs. By using @null backgrounds you can change the base background element and everything drawn over it would change accordingly (true transparent).

Layout

<?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:background="@color/white" 
    android:padding="10dp">

    <EditText
        android:id="@+id/editText1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@null"
        android:ems="10"
        android:gravity="center"
        android:inputType="text"
        android:text="Test"
        android:textColor="#CCC" >

        <requestFocus />
    </EditText>

    <View
        android:id="@+id/divider"
        android:layout_below="@+id/editText1"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#CCC" />

    <LinearLayout
        android:id="@+id/buttons"
        android:layout_marginTop="10dp"
        android:layout_below="@+id/divider"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight=".5"
            android:background="@drawable/testbutton"
            android:text="BUTTON 1"
            android:textColor="#CCC" />

        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight=".5"
            android:background="@drawable/testbutton"
            android:text="BUTTON 2"
            android:textColor="#CCC" />
    </LinearLayout>

</RelativeLayout>

Button style

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

    <item android:state_pressed="true">
        <shape>
            <solid android:color="@null" />
            <stroke android:width="1dp" android:color="#CCC" />
        </shape>    
    </item>
    <item>
        <shape>
            <solid android:color="@null" />
            <stroke android:width="1dp" android:color="#CCC" />
        </shape>
    </item>
</selector>

Upvotes: 1

Related Questions