Custom Style for Different Android UI Components

You can create your own custom style in Android for different UI components for your applications. Here I am going to create custom style for RadioButton, EditText, CheckBox and Button. Of course we can use custom style for any UI elements for Android application.

Basic steps:

1. Create the drawables:

Inside res/drawable folder, create different xml file for different components.

checkbox_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
	<item android:state_checked="true" android:drawable="@drawable/cc" />
	<item android:state_checked="false" android:drawable="@drawable/cuc" />
</selector>

radiobutton_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
	<item android:state_checked="true" android:drawable="@drawable/radio_on" />
	<item android:state_checked="false" android:drawable="@drawable/radio_off" />
</selector>

bg_edittext.xml

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

    <item android:state_pressed="true"><shape android:shape="rectangle">
            <solid android:color="#822DA1" />

            <stroke android:width="3dp" android:color="#4AA02C" />

            <corners android:radius="20dp" />

            <padding android:bottom="7dp" android:left="15dp" android:right="10dp" android:top="6dp" />
        </shape></item>
    <item android:state_focused="true"><shape>
            <solid android:color="#822DA1" />

            <stroke android:width="3dp" android:color="#4AA02C" />

            <corners android:radius="20dp" />

            <padding android:bottom="7dp" android:left="15dp" android:right="10dp" android:top="6dp" />
        </shape></item>
    <item><shape>
            <solid android:color="#565051" />

            <stroke android:width="1dp" android:color="#4AA02C" />

            <corners android:radius="20dp" />

            <padding android:bottom="7dp" android:left="15dp" android:right="10dp" android:top="6dp" />
        </shape></item>

</selector>

button_selector.xml

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

		<item android:state_pressed="true"
		android:drawable="@drawable/green_button" /> 
		
		<!-- <item android:state_focused="true"
		android:drawable="@drawable/button_focused" /> --> 
		
		<item android:drawable="@drawable/black_button" />
</selector>

2. Create layout xml file

Inside res/layout folder of your project, create layout file for new the screen. Add this selector as android:button attribute.
activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#565051"
    android:orientation="vertical" >

    <RadioGroup
        android:id="@+id/group1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/question"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="@string/lblRadiogroup"
            android:textColor="#ffffff"
            android:textStyle="bold" />

        <RadioButton
            android:id="@+id/easySetting"
            android:button="@drawable/radiobutton_selector"
            android:checked="false"
            android:text="@string/lblRadioOne"
            android:textColor="#ffffff" />

        <RadioButton
            android:id="@+id/mediumSetting"
            android:button="@drawable/radiobutton_selector"
            android:checked="false"
            android:text="@string/lblRadioTwo"
            android:textColor="#ffffff" />

        <RadioButton
            android:id="@+id/hardSetting"
            android:button="@drawable/radiobutton_selector"
            android:checked="false"
            android:text="@string/lblRadioThree"
            android:textColor="#ffffff" />
    </RadioGroup>
    
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:orientation="vertical"
        android:paddingBottom="5dip"
        android:paddingTop="5dip" >

        <TextView
            android:id="@+id/qnumber"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="@string/txtSample1"
            android:textColor="#ffffff"
            android:textStyle="bold" />

        <EditText
            android:id="@+id/editText1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:background="@drawable/bg_edittext"
            android:hint=""
            android:textColor="#fff" >
        </EditText>

        <TextView
            android:id="@+id/qtime"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="@string/txtSample2"
            android:textColor="#ffffff"
            android:textStyle="bold" />

        <EditText
            android:id="@+id/editText2"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:background="@drawable/bg_edittext"
            android:hint=""
            android:textColor="#fff" >
        </EditText>

        <CheckBox
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:button="@drawable/checkbox_selector"
            android:text="@string/lblChk1"
            android:textColor="#fff" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:orientation="horizontal"
        android:paddingBottom="5dip"
        android:paddingTop="5dip" >

        <Button
            android:id="@+id/nextBtn"
            android:layout_width="80dip"
            android:layout_height="wrap_content"
            android:background="@drawable/button_selector"
            android:paddingBottom="5dip"
            android:paddingTop="5dip"
            android:text="@string/btnUpdate"
            android:textColor="#ffffff" />
    </LinearLayout>

</LinearLayout>

3. Create the main activity class.

Inside MainActivity class we need to put something like this in order to use our layout:
MainActivity.java

public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
	}
}

Screenshot:
android_custom_ui_style

You can download all android example from here.

 

admin

Hello! I am Md. Abdul Bari; founder and admin of javaknowledge; currently providing training as a J2EE faculty in The Computers Ltd. Dhaka, Bangladesh under an IT Scholarship project provided by IDB-BISEW. I am a self learner and passionate about training and writing. I am always trying my best to share my knowledge through my blog.

More Posts - Website

Follow Me:
TwitterFacebookGoogle Plus

6,142` Total Views

Leave a Reply

Your email address will not be published. Required fields are marked *


+ 7 = thirteen