Home › Uncategorized

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.

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>