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

Backward Compatibility

To implement this with styles we create folders under resource which contain the SDK specific definitions. E.g. values-v21/styles.xml will contain style definitions for devices of level SDK 21 And above and the values/styles.xml will contain the style definitions compatible with all devices. There is more on this on the Materials wiki page I think
So for API 21 and above

<resources>
<!--  Implement API 21+ Platform specific features  -->
<style name="MyAppTheme" parent="MyBaseAppTheme">
<item name="android:windowActivityTransitions">true</item>
</style>
</resources>

And for below API 21

<resources>
<!--  Implement features for API below 21  -->
<!--  Base application theme.  -->
<style name="MyBaseAppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!--  Customize your theme here  -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="android:textViewStyle">@style/AppMediumText</item>
<!-- <item name="android:buttonStyle">@style/xyz</item> -->
<!-- <item name="android:editTextStyle">@style/abc</item> -->
</style>
<style name="MyAppTheme" parent="MyBaseAppTheme">
<!--  Referred from Manifest.xml  -->
</style>
</resources>