Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Material Design ActionBar

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 280
    Comment on it

    These days android came up with new material design so lets get updated with one of the many features ie. Action Bar which is also special type of tool bar.

    Before we start make sure you have these requirements fulfilled.

    1. Android Studio.
    2. Appcombat v7 Support library (To Support Pre Lollipop devices).

    Lets get Started .

    1) Create a new new project from android studio and select a blank activity.

    2) Go to yours styles.xml file and customize it as follows.

        * Change the theme to Theme.AppCompat.Light.NoActionBar. (now there will be no action bar in your activity by default).
    

    3) Define the color for your action bar and the status bar (according to the android guidelines select the color of the status bar a bit dark and the color of the action bar a bit light in comparison to the status bar).

    For Example.

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
        <color name="ColorPrimary">#FF5722</color>
        <color name="ColorPrimaryDark">#E64A19</color>
    </resources>
    

    Now add these colors to the style created above.

    For Example

    <span style="font-size: x-small;"><resources>
    
        <!-- 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>
    
    </span>
    

    4) Now create an xml file for the tool bar which will be shown in other activities, also add the app primary color as background to the toolbar xml you can add elevation to show sadow effect on the toolbar.

    For Example.

    <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:theme="@style/ThemeOverlay.AppCompat.Dark"
        android:elevation="4dp"
    
        >
    
    </android.support.v7.widget.Toolbar>
    
    </span>
    

    5) Include this tool bar to the activities you want(I am includeing it to my main activity).

    For Example

    <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=".MainActivity">
    
        <include
            android:id="@+id/tool_bar"
            layout="@layout/tool_bar"
            ></include>
    
        <TextView
            android:layout_below="@+id/tool_bar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/TextDimTop"
            android:text="@string/hello_world" />
    
    </RelativeLayout>
    

    Now add the following code to your Main Activity

    • Extend your main activity from action bar
    MainActivity extends ActionBarActivity
    
    • Get the reference of tool bar from xml and pass it to the setSupportActionBar method as parameter.
            toolbar = (Toolbar) findViewById(R.id.tool_bar); // Attaching the layout to the toolbar object
            setSupportActionBar(toolbar); 
    
    

    6) Add menu items that you want to display on action bar in menu_main.xml file

    For Example.

    <menu 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"
        tools:context=".MainActivity">
        <item
            android:id="@+id/action_settings"
            android:orderInCategory="100"
            android:title="@string/action_settings"
            app:showAsAction="never" />
        <item
            android:id="@+id/action_search"
            android:orderInCategory="200"
            android:title="Search"
            android:icon="@drawable/ic_search"
            app:showAsAction="ifRoom"
            ></item>
        <item
            android:id="@+id/action_user"
            android:orderInCategory="300"
            android:title="User"
            android:icon="@drawable/ic_user"
            app:showAsAction="ifRoom"></item>
    
    </menu>
    

    Thats all now use your tool bar in the activity you want to show

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: