0

Make Material Design App Bar/Action Bar style in Android Studio

How to create material shaded background title bar inside android app for Lollipop and Marshmallow versions.

Material design is the latest fully customized designed create by Google android developers and comes with minimum lollipop supported devices. This style is so attractive and loved by millions of  people around the world. So in this tutorial we are going to create android app with Material Title bar. So here is the complete step by step tutorial for Make Material Design App Bar/Action Bar style in Android Studio.

android-project-download-code-button

Please Follow all the below steps to create Material Design App Bar :

1. Start new project in Android Studio.

2. GoTo your project’s build.gradle ( Module : app ) file and add appcompat support dependencies.

build-gradle-app

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.4.0'
}

3. After adding com.android.support:appcompat support library inside your build.gradle ( Module : app ) file.It will look like this :

support-appcompat

4. Now open your Project’s styles.xml file and change your app theme to below theme .

<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">

5. Open colors.xml file and set primary color and secondary color.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#00695C</color>
    <color name="colorPrimaryDark">#00695C</color>
    <color name="colorAccent">#00695C</color>
</resources>

How to Make Material Design App Bar/Action Bar style in Android Studio.

Code for MainActivity.java file.

package com.android_examples.materialdesignappbar_android_examplescom;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

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

Code for activity_main.xml layout file.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.android_examples.materialdesignappbar_android_examplescom.MainActivity"
    android:background="#E0F2F1">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:minHeight="?attr/actionBarSize">

    </android.support.v7.widget.Toolbar>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Material Design AppBar / ActionBar"
        android:id="@+id/textView"
        android:layout_below="@+id/toolbar"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="52dp"
        android:gravity="center"
        android:textColor="#009688"/>

</RelativeLayout>

Screenshots:

Make Material Design App Bar/Action Bar style in Android Studio

 

material-design-2

Click here to download Make Material Design App Bar/Action Bar style in Android Studio project with source code.

Leave a Reply

Your email address will not be published. Required fields are marked *