Android Studio - Creating Material Design App Bar

Android Studio - Creating Material Design App Bar


1.) Set-up the color that we'll use for the app bar:
========================================
>Create a new xml inside values and name it color.xml
<resources>
    <color name="ColorPrimary">#FF5722</color>
    <color name="ColorPrimaryDark">#E64A19</color>
</resources>

2.) Using the previously declared color, change the style.xml to apply the colors:
=================================================================

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/ColorPrimary</item>
        <item name="colorPrimaryDark">@color/ColorPrimaryDark</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

3.) Make a tool bar:
================
>Create a new xml layout file and name it tool_bar.xml
<span style="font-size: x-small;"><?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/ColorPrimary"
    android:elevation="4dp"
 
    >
 
</android.support.v7.widget.Toolbar>
 
</span>

4.) Use the tool bar:
================
>Insert this code to wherever xml layout you want to display the tool bar
<include
        android:id="@+id/tool_bar"
        layout="@layout/tool_bar"
        ></include>

5.) Adding additional buttons inside the app bar:
=======================================
>Go to menu_main.xml and add/paste the code below
 <item
        android:id="@+id/action_user"
        android:orderInCategory="300"
        android:title="User"
        android:icon="@drawable/ic_launcher"
        app:showAsAction="ifRoom"></item>
Android Studio - Creating Material Design App Bar Android Studio - Creating Material Design App Bar Reviewed by Edmond Legaspi on Friday, July 24, 2015 Rating: 5

No comments:

Powered by Blogger.