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






























Controlling Back button Behavior in Fragment-- kotlin




























when user navigates in an application android maintains back stack of destinations . This allows android to go back to previous destination when user clicks back button . some  times we  need to implement our own back button behavior  for best user experience . For example  if we are in a timer based quiz  application . when the user clicks on the back button if we go back to the previous destination without stopping  the counter , it will crash  the application . So first we need to know whether the  user  pressed the back button accidentally or not by  using a dialogue box . If the user want to go back to previous destination  we need to stop the counter and  then go back to the previous destination. We can control the back button hahavior byusing OnBackPressedDispatcher  . This controls how back button events are dispatched to one or more onBackPressedCallback  objects . callbacks are added using addCallback  methods. e...




















Post a Comment









Read more






























Enabling Sign-in APi in Google Developer console




























 We need to enable Sign-in Api for our application in google developers console to use google sign-in  in our application.     1 .  first we need to create a project in google developers console       visit google developers  console          https://console.developers.google.com/project  2 .  Click on create project button you will see the below screen           3 .  Enter project name and click CREATE . Then we are directed to project home page  which will look like this       4 .  Next we need to add Google API to our project. click on library on left menu and search for google api    5 .  Configure  OAuth consent screen , click on 'OAuth consent screen '     6  .  Enter Application name and email id everything else is optional  and click save        7  .  Configure Credentials         Google uses this to ensure that your application is not fake applicatio...




















Post a Comment









Read more