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.
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
Material Color Palette -- https://www.materialpalette.com/
Which color property defines which part is shown in below image
Creating a Custom App Theme
colors.xml
<?xml version="1.0" encoding="UTF-8" ?>
<resources>
<color name="my_blue">#3498DB</color>
<color name="my_green">#77D065</color>
<color name="my_purple">#B455B6</color>
<color name="my_gray">#738182</color>
</resources>
Add a resources node to styles.xml and define a style node with the name of your custom theme. For example, here is a styles.xml file that defines MyCustomTheme (derived from the built-in Theme.Material.Light theme style):
<?xml version="1.0" encoding="UTF-8" ?>
<resources>
<!-- Inherit from the light Material Theme -->
<style name="MyCustomTheme" parent="android:Theme.Material.Light">
<!-- Customizations go here -->
</style>
</resources>
