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>
Tip: Google Material Colors
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>Now under res, create a folder named values-v21. Inside values-v21, create another styles.xml with the below styles.
<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>In order to apply the theme, openAndroidManifest.xml and modify the android:theme attribute of <application> tag.
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>