Create custom background for Views - Blog Android

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


Borneo08

About Borneo08

Author Description here.. Nulla sagittis convallis. Curabitur consequat. Quisque metus enim, venenatis fermentum, mollis in, porta et, nibh. Duis vulputate elit in elit. Mauris dictum libero id justo.

Subscribe to this Blog via Email :

More links

Related Posts Plugin for WordPress, Blogger...