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





















Simple Calculator With ViewModel and LIveData




























                             This is a simple calculator with basic mathematical operations.  You can download full source code of this project from Github https://github.com/arunkfedex/SimpleCalculator    We are using ViewModel and LiveData so we need to add those dependencies in build.gradle file. build.gradle  plugins {     id 'com.android.application'     id 'kotlin-android' } android {     compileSdk 30     defaultConfig {         applicationId "com.arun.androidtutsforu.simplecalculator"         minSdk 21         targetSdk 30         versionCode 1         versionName "1.0"          testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"     }     buildTypes {         release {             minifyEnabled false             proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'         }     }     compileOptions {         sourceCompatibility JavaVersion.VERSION_1_8         ta...




















Post a Comment









Read more






























Navigation Android kotlin




























  Navigation is the way user navigate between different fragments and activities . New navigation component helps us  visualize all the navigation in our application in a single navigation graph . Navigation graph is xml resource which contains all navigation related information in one centralized location. This include all individual content area(fragments) which are called destinations  and paths user can take in the applicatio known as actions. Navigation graph of our sample application is screenshots of our sample application implementing android navigation                                                                               Full source code of the sample application can be downloaded from the following github link https://github.com/arunkfedex/demoNavigation In this application we use navigation component to implement overflow menu and Navigation drawer. We also use Safe Args for sending data between fragments. 1.First we need to add following dependenc...




















Post a Comment









Read more






























Fragments In Android Kotlin




























Fragments Represent Reusable portion of your apps UI  Fragments are used to define and manage UI of a single screen or portion of screen. Fragments has it's own layout , Life cycle and can handle input events Fragments can not exist on its own it must be hosted by an Activity or another Fragment Activities act as a frame that contains the fragment .Each fragment operates like a view in the activity but it has  has it's own layout , Life cycle and can handle input events. Activities are ideal place to put global elements around your app's UI like Navigation Drawer, Toolbar , Bottom Navigation and fragments are better suited to define UI of single screen or portion of screen. You can use multiple Fragments with single Activity ,  this gives more modularity and reusability to our code. Add the following dependency in your app level build.gradle file to use fragments  implementation "androidx.fragment:fragment-ktx:1.3.6" Now create a new fragment  package com.arun.and...




















Post a Comment









Read more