Material design is one of innovative feature added to improve app design look and feel. Google had added more than 5000 new api in Android lollipop in which most of them is to support material design.
Material design is a comprehensive guide for visual, motion, and interaction design across platforms and devices. Android now includes support for material design apps. To use material design in your Android apps, follow the guidelines defined in the material design specification and use the new components and functionality available in Android 5.0 (API level 21) and above.
Android provides the following elements for you to build material design apps:
- A new theme
- New widgets for complex views
- New APIs for custom shadows and animations
To add material design in android app , first of all you have needed Android Studio, if you have not download yet then
Downloading Android Studio
Before going further, download the Android Studio and do the necessary setup as I am going to use Android Studio for all my tutorial from now on. If you are trying the Android Studio for the first time, go the overview doc to get complete overview of android studio.
after download and installation finished, Create a new project by File >> New >> New Project.
Step 1 . then add following dependencies in build.gradle file of Android Studio
dependencies {
compile fileTree(dir: ‘libs’, include: [‘*.jar’])
compile ‘com.android.support:appcompat-v7:23.0.1’
compile ‘com.android.support:design:23.0.1’
}
Step 2 . Go to the res >> Value >> color folder
add three color name and value to xml file as shown in below:
<?xml version=”1.0″ encoding=”utf-8″?>
<resources>
<color name=”app_theme_color”>#86B404</color>
<color name=”colorPrimary”>#F50057</color>
<color name=”colorPrimaryDark”>#C51162</color>
<color name=”windowBackground”>#FFFFFF</color>
<color name=”navigationBarColor”>#000000</color>
<color name=”colorAccent”>#FF80AB</color>
</resources>
Step 3 . Go to the res >> Value >> styles folder
add material design theme to it as shown below:
<resources xmlns:android=”http://schemas.android.com/apk/res/android”>
<!– Application theme. –>
<style name=”AppTheme” parent=”MyMaterialTheme”>
</style>
<style name=”MyMaterialTheme” parent=”MyMaterialTheme.Base”>
</style>
<style name=”MyMaterialTheme.Base” parent=”Theme.AppCompat.Light.DarkActionBar”>
<item name=”windowNoTitle”>true</item>
<item name=”windowActionBar”>false</item>
<item name=”colorPrimary”>@color/colorPrimaryDark</item>
<item name=”colorPrimaryDark”>@color/app_theme_color</item>
<item name=”colorAccent”>@color/colorPrimary</item>
</style>
</resources>
Step 4 . Go to the res >> Value-21 >> styles folder
add below lines
<resources>
<style name=”MyMaterialTheme” parent=”MyMaterialTheme.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>
Step 5 . Go to the res >> layout >> activity_main.xml
add following lines of code with CoordinatorLayout as a parent layout
<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:id=”@+id/coordinatorLayout”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
tools:context=”.MainActivity”>
<android.support.design.widget.AppBarLayout
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:theme=”@style/ThemeOverlay.AppCompat.Dark.ActionBar”>
<android.support.v7.widget.Toolbar
android:id=”@+id/toolbar”
android:layout_width=”match_parent”
android:layout_height=”?attr/actionBarSize”
android:background=”?attr/colorPrimary”
app:layout_scrollFlags=”scroll|enterAlways”
app:popupTheme=”@style/ThemeOverlay.AppCompat.Light” />
</android.support.design.widget.AppBarLayout>
<RelativeLayout
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:layout_marginTop=”25dp”
tools:context=”${relativePackage}.${activityClass}” >
<Button
android:id=”@+id/btnObjRequest”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_centerHorizontal=”true”
android:layout_marginTop=”50dp”
android:paddingLeft=”15dp”
android:paddingRight=”15dp”
android:text=”Make JSON Object Request” />
<Button
android:id=”@+id/btnArrayRequest”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_centerHorizontal=”true”
android:layout_marginTop=”10dp”
android:paddingLeft=”15dp”
android:paddingRight=”15dp”
android:text=”Make JSON Array Request”
android:layout_below=”@id/btnObjRequest” />
<Button
android:id=”@+id/btnJsonPostRequest”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_centerHorizontal=”true”
android:layout_marginTop=”10dp”
android:paddingLeft=”15dp”
android:paddingRight=”15dp”
android:text=”Make JSON Post Request”
android:layout_below=”@id/btnArrayRequest” />
<TextView
android:id=”@+id/txtResponse”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:layout_below=”@id/btnJsonPostRequest”
android:layout_marginTop=”40px”
android:padding=”20dp” />
</RelativeLayout>
<android.support.design.widget.FloatingActionButton
android:id=”@+id/fab”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_gravity=”end|bottom”
android:layout_margin=”16dp”
android:src=”@android:drawable/ic_dialog_email” />
</android.support.design.widget.CoordinatorLayout>
Step 6 . Go to the app manifest.xml
add android:theme=”@style/AppTheme” as shown in below lines ::
<application
android:name=”abc.app.AppController”
android:icon=”@mipmap/ic_launcher”
android:label=”@string/app_name”
android:theme=”@style/AppTheme” >
Now you all set to have material design in your application, build and run the app to see the changes in app theme as shown in below image.
you can also learn more about other activity and content transition from https://github.com/lgvalle/Material-Animations
Lucky Rana 