Thursday 2 August 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


No comments:

Post a Comment