Thursday, August 2, 2012

Create custom background for Views

This exercise demonstrate how to create custom background, which can be applied on various views such as TextView, Button, ImageButton...etc.

custom background

Create /res/drawable/mybackground.xml to define our custom background.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true" >
        <shape>
            <gradient
                android:startColor="#FF0000"
                android:endColor="#FF00FF"
                android:angle="180" />
            <stroke
                android:width="3dp"
                android:color="@android:color/background_dark" />
            <corners
                android:radius="3dp" />
            <padding
                android:left="50dp"
                android:top="10dp"
                android:right="50dp"
                android:bottom="10dp" />
        </shape>
    </item>

    <item android:state_focused="true" >
        <shape>
            <gradient
                android:startColor="@android:color/background_light"
                android:endColor="@android:color/background_dark"
                android:angle="180" />
            <stroke
                android:width="3dp"
                android:color="@android:color/background_dark" />
            <corners
                android:radius="3dp" />
            <padding
                android:left="50dp"
                android:top="10dp"
                android:right="50dp"
                android:bottom="10dp" />
        </shape>
    </item>

    <item>        
        <shape>
            <gradient
                android:startColor="@android:color/background_light"
                android:endColor="@android:color/background_dark"
                android:angle="180" />
            <stroke
                android:width="3dp"
                android:color="@android:color/background_dark" />
            <corners
                android:radius="3dp" />
            <padding
                android:left="50dp"
                android:top="10dp"
                android:right="50dp"
                android:bottom="10dp" />
        </shape>
    </item>
</selector>


Use the custom background in layout file.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello, it's a TextView"
        android:clickable="true"
        android:background="@drawable/mybackground"
        android:layout_margin="5dp" />
    
 <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello, it's a Button"
        android:background="@drawable/mybackground"
        android:layout_margin="5dp" />
        
    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher"
        android:background="@drawable/mybackground"
        android:layout_margin="5dp" />

</LinearLayout>


Download the files.

Related:
- Create custom Button using StateListDrawable


1 comment: