How to add themes to application?

Question

I want to add different themes in my application. I want to change navigation bar color and floating action button's color. For different themes, different colors should be set. I need to set color scheme for different themes.

Like these images. For light theme light color and for dark theme dark color.

How can I do this? Any tutorial or suggestions please.. Thank you.

Answer 1

You can create your own custom theme of course. But you will need to use any default theme as parent. for this do following

Firstly define the colors in res->vales->color.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#009999</color>
<color name="colorPrimaryDark">#006666</color>
<color name="textColorPrimary">#FFFFFF</color>
<color name="windowBackground">#FFFFFF</color>
<color name="navigationBarColor">#000000</color>
<color name="colorAccent">#006666</color>
</resources>

Then you need to define your theme like below in res->values->styles.xml

 <resources>
 <!-- Base application theme. -->
 <style name="MyTheme" parent="MyTheme.Base"></style>

 <style name="MyTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="windowNoTitle">true</item>
    <item name="windowActionBar">false</item>
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
 </style>
 </resources>

In style.xml(v21) you need to use below code

    <resources>
    <style name="MyTheme" parent="MyTheme.Base">
    <item name="android:windowContentTransitions">true</item>
    <item name="android:windowAllowEnterTransitionOverlap">true</item>
    <item name="android:windowAllowReturnTransitionOverlap">true</item>
    <item name="android:windowSharedElementEnterTransition">@android:transition/move</item>
    <item name="android:windowSharedElementExitTransition">@android:transition/move</item>
  </style>
  </resources>

After all these don't forget to add this theme to your manifest

    <?xml version="1.0" encoding="utf-8"?>
    <manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="xxx.xxx.xx.xx.x"> //your pcakcage
    <application
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:theme="@style/MyTheme" >
    <activity
        android:name=".MainActivity"
        android:label="@string/app_name" >
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />

            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
       </activity>
       </application>
       </manifest>

And at last as we have used No actiobar so you need to include toolbar in your activity_main.xml . Let the toolbar be like below

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
local:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
local:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

And in activity_main. xml include it with following code.

<include
 android:id="@+id/toolbar"
 layout="@layout/toolbar" />

And from your 'appcompat' activity you can set the support actionbar as below

    Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(mToolbar);

Some links

1. Material Color Palette -- https://www.materialpalette.com/

2. Which color property defines which part is shown in below image