Android Styles And Themes

From bibbleWiki
Jump to navigation Jump to search

Styling Views

Basics

The following are defined by Android.

  • Colors colors.xml
  • Dimensions dimens.xml
  • Strings strings.xml
  • Styles of views styles.xml

Apply a Style (css class)

So we can create a style in the styles.xml e.g.

<resources>
...
<style name="MyRadioButton">
<item name="android:fontFamily">cursive</item>
<item name="android:textColor">#F00</item>
<item name="android:textSize">30sp</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:text">My Radio Button</item>
</style>
</resources>

And use it attach it to the controls using the

...
<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:gravity="center" 
    android:orientation="vertical" 
    android:padding="20dp" 
   
 tools:context="com.sriyanksiddhartha.stylesandthemesdemo.MainActivity">
...
    <RadioButton style="@style/MyRadioButton"/>
...

As a bonus here is how to add shadow to a control

<TextView 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:textSize="50sp" 
    android:textStyle="bold" 
    android:text="Shadow" 
    android:textColor="#616161" 
    android:shadowColor="#5000" 
    android:shadowDx="10" 
    android:shadowDy="10" 
    android:shadowRadius="10"/>

Selectors

These allow you to set styles based on states. We can do this with colors, drawables etc.

We do this by

  • Creating a selector
  • Assigning selector to control

Here is a selelctor in drawable

<selector xmlns:android="http://schemas.android.com/apk/res/android">
   <item 
      android:state_pressed="true" 
      android:drawable="@drawable/btn_pressed"/>

   <item 
      android:drawable="@drawable/btn_default"/>
</selector>

Here is a layout

<Button 
    android:id="@+id/button" 
    android:layout_width="250dp" android:layout_height="40dp" 
    android:layout_gravity="center_horizontal" 
    android:background="@drawable/button_background_selector" 
    android:text="Button One" 
    android:textColor="@android:color/white"/>