Android Styles And Themes

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"/>

Styles and Inheritance

We can have two types of Inheritance, implicit and explicit. Both style approach can be overridden in the code.

Implicit

With implicit we can chain styles together to inherit from it's parent.

<resources>
  <style name="AppFont">
    <item name="android:fontFamily">monospace</item>
  </style>
  <style name="AppFont.AppFontColorPrimary">
    <item name="android:textColor">#616161</item>
  </style>
  <style name="AppFont.AppFontColorLight">
    <item name="android:textColor">#909090</item>
  </style>
  <style name="AppFont.AppFontColorPrimary.AppSmallText">
    <item name="android:textSize">12sp</item>
  </style>
  <style name="AppFont.AppFontColorPrimary.AppMediumText">
    <item name="android:textSize">15sp</item>
  </style>
  <style name="AppFont.AppFontColorPrimary.AppLargeText">
    <item name="android:textSize">18sp</item>
  </style>
...

Explicit

We specify the parent using the keyword "parent"

<resources>
  <style name="AppFont">
    <item name="android:fontFamily">monospace</item>
  </style>
  <style name="AppFontColorPrimary" parent="AppFont">
    <item name="android:textColor">#616161</item>
  </style>
  <style name="AppFontColorLight" parent="AppFont">
    <item name="android:textColor">#909090</item>
  </style>
  <style name="AppSmallText" parent="AppFontColorPrimary">
    <item name="android:textSize">12sp</item>
  </style>
  <style name="AppMediumText" parent="AppFontColorPrimary">
    <item name="android:textSize">15sp</item>
  </style>
  <style name="AppLargeText" parent="AppFontColorPrimary">
    <item name="android:textSize">18sp</item>
  </style>
...

Themes

When we use themes we must be aware that they are referenced in the Manifest file

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="nz.co.bibble.stylingandroid">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.StylingAndroid">

We probably want to support a light and dark mode theme. To do this we create a values-night/themes.xml