Themes in the Android Framework

In the last chapter, we established a connection between the main UI elements. Our application does not look like one until it gets some color. To get colors, we will start with the main application theme. We will extend one of the existing Android themes and override it with colors we like.

Open styles.xml. Here, you will set the default theme defined for our application needs. We will also have several colors overridden. However, we will change the parent theme and customize it according to our wishes. We will update the theme according to the following example:

    <resources> 
 
      <style name="AppTheme" 
        parent="Theme.AppCompat.Light.NoActionBar"> 
        <item name="android:colorPrimary">@color/colorPrimary</item> 
        <item name="android:statusBarColor">@color/colorPrimary</item> 
        <item name="android:colorPrimaryDark">
         @color/colorPrimaryDark</item> 
        <item name="android:colorAccent">@color/colorAccent</item> 
        <item name="android:textColor">@android:color/black</item> 
      </style> 
 
    </resources> 

We defined a theme that inherits from the AppCompat theme. The primary color represents the color for the application branding. The color's darker variant is colorPrimaryDark, while the UI controls colors that will be colored in colorAccent. We will also set the primary text color to black. The status bar will also use our primary branding color.

Open the colors.xml file and define the colors we will use for the theme as follows:

    <?xml version="1.0" encoding="utf-8"?> 
    <resources> 
      <color name="colorPrimary">#ff6600</color> 
      <color name="colorPrimaryDark">#197734</color> 
      <color name="colorAccent">#ffae00</color> 
    </resources> 

Before you run the application to see your theme, make sure that the theme is actually applied. Update the manifest file with the following lines of code:

    <application 
    android:theme="@style/AppTheme" 

Also, update the color for the floating action button of fragment_items as follows:

    <android.support.design.widget.FloatingActionButton 
        android:backgroundTint="@color/colorPrimary" 
        android:id="@+id/new_item" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_alignParentBottom="true" 
        android:layout_alignParentEnd="true" 
        android:layout_margin="@dimen/button_margin" /> 

The background tint attribute will make sure that the button has the same color as the status bar. Build and run the application. Congratulations, you have successfully branded your application in orange!