Skip to main content

Using Toolbar In Android

Toolbar
Toolbar is used in our application as an app bar providing useful information to the user. From API level  11 ActionBar had been used as default app bar. But with newer versions and newer features ActionBar looks and behaves differently on devices depending on the version of the android it is using . So Toolbar is introduced in Android Support library to provide consistent look and behavior to our application for a wide range of devices . Toolbar is supported from API level 7 . In our application we should use

 android.support.v7.widget.Toolbar
   
This is a simple application using  Toolbar. 
Screenshots of the application are the following . 
Toolbar contains Navigation icon, Title, SubTitle and 5 menu items, on clicking any menu item a Toast will show up with menu item name.


                 
You can download the full project from the following drive link

 https://drive.google.com/file/d/0BySLpWhqmbbdVU1rLWsyaUF5c2M/view?usp=sharing

                                                      OR
Download  full project from Git hub

 https://github.com/arunkfedex/DemoToolbar 

 1. Make sure your application is using noActionBar Themes.
    Goto values/styles.xml

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

        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

 2.Add Toolbar to your layout file,  layout code for Toolbar is 

 
<android.support.v7.widget.Toolbar

        android:id="@+id/demo_toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimary"
        android:elevation="4dp"
        app:theme="@style/toolbarTheme"
        app:popupTheme="@style/popupTheme"

nbsp;       />

 In the Default theme Title and subtitle colors are black .So To change the color  to white i have written custom theme "toolbarTheme" and "popupTheme" . Both are written in values/styles.xml 

 styles.xml file 








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

    <style name="toolbarTheme" parent="ThemeOverlay.AppCompat.Light" >
        <item name="android:textColorPrimary"> @android:color/white</item>
        <item name="android:textColorSecondary">@android:color/white</item>
    </style>

    <style name="popupTheme" parent="ThemeOverlay.AppCompat.Light">
        <item name="android:textColorPrimary">@android:color/black</item>
    </style>

</resources>




activity_main.xml 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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.androidtuts4u.arun.demotoolbar.MainActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/demo_toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimary"
        android:elevation="4dp"
        app:theme="@style/toolbarTheme"
        app:popupTheme="@style/popupTheme"
        />
  

</RelativeLayout>





3. Make sure your activity extends AppCompactActivity . 

 Use Toolbar in your MainActivity.java






  
public class MainActivity extends AppCompatActivity {
    Toolbar toolbar;

    @Override    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        toolbar = (Toolbar) findViewById(R.id.demo_toolbar);
        toolbar.setNavigationIcon(R.drawable.ic_arrow_back_white_24dp);
        toolbar.setTitle("DemoToolbar");
        toolbar.setSubtitle("hello");





4. To add menu to Toolbar. Create Menu resource directory in 

"res" directory if it is not present(res--new--Android resource directory--resource type-- menu) then create menu resource file menu_main.xml(menu--new--Menu Resource File)



menu_main.xml file






<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
       android:title="Add"
       android:icon="@drawable/ic_add_white_24dp"
       android:id="@+id/add"
       app:showAsAction="always"/>
    <item
        android:title="Delete"
        android:icon="@drawable/ic_delete_white_24dp"
        android:id="@+id/delete"
        app:showAsAction="always"/>
    <item
        android:title="Settings"
        android:id="@+id/settings"
        app:showAsAction="never"/>
    <item
        android:title="Help"
        android:id="@+id/help"
        app:showAsAction="never"/>
    <item
        android:title="Exit"
        android:id="@+id/exit"
        app:showAsAction="never"/>
</menu>





5. Add menu to Toolbar and onItemClickListener to menu






toolbar.inflateMenu(R.menu.menu_main);
        toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {

                String msg="";

                switch (item.getItemId()){
                    case R.id.delete:
                        msg = "delete";
                        break;
                    case R.id.add:
                        msg = "add";
                        break;
                    case R.id.settings:
                        msg = "settings";
                        break;
                    case R.id.help:
                        msg = "help";
                        break;
                    case R.id.exit:
                        msg = "exit";
                        break;


                }
                Toast.makeText(MainActivity.this,msg+" clicked",Toast.LENGTH_SHORT).show();

                return true;
            }
        });









6. Mainactivity.java  file 






package com.androidtuts4u.arun.demotoolbar;



import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    Toolbar toolbar;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        toolbar = (Toolbar) findViewById(R.id.demo_toolbar);
        toolbar.setNavigationIcon(R.drawable.ic_arrow_back_white_24dp);
        toolbar.setTitle("DemoToolbar");
        toolbar.setSubtitle("hello");
        toolbar.inflateMenu(R.menu.menu_main);
        toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Overrid
            public boolean onMenuItemClick(MenuItem item) {
                String msg="";
                switch (item.getItemId()){
                    case R.id.delete:
                        msg = "delete";
                        break;
                    case R.id.add:
                        msg = "add";
                        break;
                    case R.id.settings:
                        msg = "settings";
                        break;
                    case R.id.help:
                        msg = "help";
                        break;
                    case R.id.exit:
                        msg = "exit";
                        break;
                }
                Toast.makeText(MainActivity.this,msg+" clicked",Toast.LENGTH_SHORT).show();
                return true;
            }
        });
    }
}






-----------------------------------NOTES------------------------------------------------

1. Always use Material Design guide lines while developing an application. use the Below link for Material Desin Guide lines
https://material.io/guidelines/material-design/introduction.html

2. Icons are downloded from
https://material.io/icons














































Comments











Post a Comment





























Popular posts





















Android List View using  Custom Adapter and SQLite




























 following is a simple applicaton to create ListView using  Custom adapter.screenshot of the application  is like this .   ListView is not used in android Anymore . We use  RecyclerView  and  CardView   in Android   RecyclerView Demo is available on the following link   http://androidtuts4u.blogspot.in/2017/04/android-recyclerview-example.html   RecyclerView with Cardview Example is available on the following link   http://androidtuts4u.blogspot.in/2017/09/android-card-view-example.html     The ListView below the submit button is populated using Custom Adapter.Data is stored and retrieved using SQLite databsase.   you can download the source code of this project from  google drive   https://drive.google.com/folderview?id=0BySLpWhqmbbdUXE5aTNhazludjQ&usp=sharing  click on the above link ->sign into  your  google account ->add this to your google drive -> open it in google drive and download it.   To create a simple ...




















76 comments









Read more






























Swipe or OnFling Event Android




























  This  is a simple application Demonstrating Swipe or onFling() event on ListView.      you can download the source code of this project from  google drive   https://drive.google.com/folderview?id=0BySLpWhqmbbdSVB4M0hXb0VxcU0&usp=sharing  click on the above link ->sign into  your  google account ->add this to your google drive -> open it in google drive and download it.   1. Following is the MainActivity (DemoSwipe.java) of the application   package com.arun.demolistviewswipe;  import android.app.Activity; import android.content.Context; import android.os.Bundle; import android.view.GestureDetector; import android.view.GestureDetector.SimpleOnGestureListener; import android.view.Menu; import android.view.MotionEvent; import android.view.View; import android.view.View.OnTouchListener; import android.widget.ArrayAdapter; import android.widget.ListView; import android.widget.Toast;  public class DemoSwipe extends Activity {  ListView lvCountry;  Strin...




















6 comments









Read more






























Android Card View And RecyclerView Example




























 CardView  Cardview lets you show information inside cards that have consistent look across the platform . CardView is introduced with material design through support v7 library. CardView extends frame layout and It can have shadows and round corners.      Cards can be used as independent views that serves as an entry point to more detailed information. CardView can also  be used with RecyclerView to display cards as list. In this example we are using Cardview with Recyclerview to show data as list of cards.   Our Demo application contains vertical list of cards . Each card contain Movie name, movie poster and director name.  screenshot of demo app      1. CardView and RecyclerView are supportV7 library widget . so we need to add dependency for both in app level build.gradle file . which is in the app folder   compile 'com.android.support:cardview-v7:26.+'  compile 'com.android.support:recyclerview-v7:26.+'  build.gradle  file is  apply plugin: 'com.android.applicat...




















Post a Comment









Read more