In this tutorial we are going to learn the basic steps of Material Design development
Customize the Material Color
Material Design provides set of properties to customize the Material Design Color theme. But we use five primary attributes to customize overall theme.
colorPrimaryDark – This is darkest primary color of the app mainly applies to notification bar background.
colorPrimary – This is the primary color of the app. This color will be applied as toolbar background.
textColorPrimary – This is the primary color of text. This applies to toolbar title.
windowBackground – This is the default background color of the app.
navigationBarColor – This color defines the background color of footer navigation bar.
Creating Material Theme
In Android Studio, Open res ⇒ values ⇒ colors.xml and add the below color values. If you don’t find colors.xml, create a new resource file with the name.
<resources>
<color name="colorPrimary">#2196F3</color>
<color name="colorPrimaryDark">#0D47A1</color>
<color name="textColorPrimary">#FFFFFF</color>
<color name="windowBackground">#FFFFFF</color>
<color name="navigationBarColor">#000000</color>
<color name="colorAccent">#90CAF9</color>
</resources>Open styles.xml and add below styles.
<style name="AppTheme" parent="AppTheme.Base">
</style>
<!-- Base application theme. -->
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<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>
<style name="AppTheme" parent="AppTheme.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>android:theme="@style/AppTheme"Your Main Layout File (activity_main.xml)
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="akraj.snow.test.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="@layout/content_main" />
</android.support.design.widget.CoordinatorLayout>Run the app and see the toolbar displayed on the screen.
