Styling Android UI component

Today we will learn how to style some UI components using styles.xml.


Radio Button :- Radio button has states like Normal(not Selected),Activated(Selected) so to change the color according to custom theme follow the below steps Add below code in styles.xml

<style name="MyRadioButton" parent="Widget.AppCompat.CompoundButton.RadioButton">
<item name="android:colorControlNormal">@color/colorPrimary</item>
<item name="android:colorControlActivated">@android:color/holo_orange_light</item>
<item name="android:textAppearance">@style/TextAppearance.AppCompat</item>
</style>

To use MyRadioButton in layout.xml :

<RadioGroup
android:layout_width="wrap_content"
android:orientation="horizontal"
android:layout_height="wrap_content">

<RadioButton
android:layout_width="wrap_content"
android:text="Male"
android:theme="@style/MyRadioButton"
android:id="@+id/one_radio_button"
android:layout_height="wrap_content" />

<RadioButton
android:layout_width="wrap_content"
android:text="Female"
android:theme="@style/MyRadioButton"
android:layout_height="wrap_content" />

</RadioGroup>

 CheckBox :- CheckBox has states like Normal(not Selected),Activated(Selected) so to change the color according to custom theme follow the below steps Add below code in style.xml

<style name="MyCheckBox" parent="Base.Widget.AppCompat.CompoundButton.CheckBox">
<item name="android:textColor">@color/colorPrimary</item>
<item name="android:colorControlNormal">@color/colorPrimary</item>
<item name="android:colorControlActivated">@android:color/holo_orange_light</item>
<item name="android:textAppearance">@style/TextAppearance.AppCompat</item>
</style>

To use MyCheckBox in layout.xml

<CheckBox
android:layout_width="wrap_content"
android:text="Demo Check Box"
android:theme="@style/MyCheckBox"
android:layout_height="wrap_content" />

  The output will be as below: