Cara Menerapkan Icon Menu pada Toolbar Material Design Android

  • Post
    codeorayo
    Keymaster
    none
    Toolbar adalah sebuah komponen antar muka yang merupakan bagian dari material design di Android.Yang juga merupakan pengganti kelanjutan dari versi terdahulu yaitu Action Bar, Toolbar terdiri dari navagasi icon,menu ,setting dll. Untuk menggunakan dan menerapkan toolbar kalian bisa menggunakan nya dari library v21 (Appcompat) sampai versi terbaru sekarang.Nah disini lah kelebihan  Android Studio karna sudah support v21 dari awal  dirilis versi 1.0 

    [img]https://4.bp.blogspot.com/-vg6Ju60l6jc/VvfWbSWPARI/AAAAAAAAFLI/MnHlLSNuEm4DwLTyBlhw2oO1-TTP7zyQw/s1600/android-studio-tutorial-development-apps-by-okedroid.png[/img]Pada tutorial belajar android sebelumnya,  saya telah berbagi tutorial tentang Cara Membuat  Toolbar Action Bar Material Design Android. Nah pada tutorial belajar android kali ini ,saya akan mencoba membuat dan menerapkan Icon Menu Toolbar Android. Icon menu digunakan pada Toolbar, untuk keperluan navigasi ,agar memudahkan user (pengguna ) dalam mengakses fitur-fitur pada Aplikasi1. Pertama buka Project Android Studio kalian.2. Setup Gradle :

    Di bagian Setup Gradle disini saya akan menggunakan Cordinator Layout ,  jadi kita harus import dulu library android support design.

    dependencies {    compile fileTree(dir: ‘libs’, include: )    testCompile ‘junit:junit:4.12’    compile ‘com.android.support:appcompat-v7:23.1.1’    compile ‘com.android.support:design:23.1.1’}

    3.Siapkan gambar untuk icon menu kalian.4.Lalu taruh file gambarnya pada folder ( app/res/drawable/gambar)5.Kalian bisa mencari icon menu material disini :Google Material Icon.

    3.Lalu pada bagian res/menu/menu_main.xmlSalin baris intruksi (codingan ) berikut.menu_main.xml

  • 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=”com.okedroid.myapplication.MainActivity”>

  •  

  •       

  •             android:orderInCategory=”100″

  •             android:icon=”@drawable/ic_info”

  •             android:title=”@string/action_about”

  •             app:showAsAction=”ifRoom”/>

  •  


  • 4. Selanjutnya disini saya membuat 4 buah file layout, 2 file untuk kontent dan 2 file lagi dikhususkan untuk menerapkan widget Toolbar.Salin baris intruksi (codingan )berikut:

  • 2 file untuk kontent.


    activity_main.xml

  • http://schemas.android.com/apk/res/android“

  •                 xmlns:tools=”http://schemas.android.com/tools

  •                 android:layout_width=”match_parent”

  •                 android:layout_height=”match_parent”

  •                 android:paddingBottom=”@dimen/activity_vertical_margin”

  •                 android:paddingLeft=”@dimen/activity_horizontal_margin”

  •                 android:paddingRight=”@dimen/activity_horizontal_margin”

  •                 android:paddingTop=”@dimen/activity_vertical_margin”

  •                 android:layout_marginTop=”?android:attr/actionBarSize”

  •                 tools:context=”.MainActivity”>

  •  

  •  

  •  

  •     

  •         android:layout_width=”wrap_content”

  •         android:layout_height=”wrap_content”

  •         android:textAppearance=”?android:attr/textAppearanceMedium”

  •         android:text=”Halo Apakabar Konten Main”

  •         android:id=”@+id/textView2″ android:layout_gravity=”center_horizontal”/>

  •  

  •     

  •         android:layout_width=”wrap_content”

  •         android:layout_height=”wrap_content”

  •         android:textAppearance=”?android:attr/textAppearanceMedium”

  •         android:text=”by Okedroid.com”

  •         android:id=”@+id/textView”

  •         android:layout_marginTop=”114dp” android:layout_below=”@+id/textView2″

  •         android:layout_alignParentLeft=”true” android:layout_alignParentStart=”true”

  •         android:layout_marginLeft=”104dp” android:layout_marginStart=”104dp”/>

  •  

  •  

  •  


  • activity_second.xml

  • http://schemas.android.com/apk/res/android“

  •                 xmlns:tools=”http://schemas.android.com/tools

  •                 android:layout_width=”match_parent”

  •                 android:layout_height=”match_parent”

  •                 android:paddingBottom=”@dimen/activity_vertical_margin”

  •                 android:paddingLeft=”@dimen/activity_horizontal_margin”

  •                 android:paddingRight=”@dimen/activity_horizontal_margin”

  •                 android:paddingTop=”@dimen/activity_vertical_margin”

  •                 android:layout_marginTop=”?android:attr/actionBarSize”

  •                 tools:context=”.SecondActivity”>

  •  

  •  

  •  

  •     

  •         android:layout_width=”wrap_content”

  •         android:layout_height=”wrap_content”

  •         android:textAppearance=”?android:attr/textAppearanceMedium”

  •         android:text=”Activity ini Akan Muncul saat kita mengklik icon menu pada Toolbar “

  •         android:id=”@+id/textView2″ android:layout_gravity=”center_horizontal”/>

  •     

  •         android:layout_width=”wrap_content”

  •         android:layout_height=”wrap_content”

  •         android:textAppearance=”?android:attr/textAppearanceMedium”

  •         android:text=”by Okedroid.com”

  •         android:id=”@+id/textView”

  •         android:layout_marginTop=”114dp” android:layout_below=”@+id/textView2″

  •         android:layout_alignParentLeft=”true” android:layout_alignParentStart=”true”

  •         android:layout_marginLeft=”104dp” android:layout_marginStart=”104dp”/>

  •  

  •  


  • 2 file untuk Toolbar


    toolbar_main.xml

  •     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”

  •     xmlns:app=”http://schemas.android.com/apk/res-auto

  •     android:fitsSystemWindows=”true”

  •     tools:context=”.MainActivity”>

  •  

  •     

  •         android:id=”@+id/toolbar”

  •         android:layout_width=”match_parent”

  •         android:layout_height=”?attr/actionBarSize”

  •         android:background=”?attr/colorPrimary”

  •         />

  •  

  •  

  •  

  •     

  •  

  •  

  •  


  • toolbar_second.xml

  •     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”

  •     xmlns:app=”http://schemas.android.com/apk/res-auto

  •     android:fitsSystemWindows=”true”

  •     tools:context=”.SecondActivity”>

  •  

  •     

  •         android:id=”@+id/toolbar”

  •         android:layout_width=”match_parent”

  •         android:layout_height=”?attr/actionBarSize”

  •         android:background=”?attr/colorPrimary”

  •         />

  •  

  •  

  •  

  •     

  •  

  •  

  •  


  • 5. Lalu pada file class Activity java saya menggunakan nama MainActivity.java  dan SecondActivity.java. Untuk menerapkan Icon menu pada toolbar ,kita menggunakan OnCreateOptionsMenu pada object lokasi file menu yaitu res.menu.menu_main.xml.  Serta menggunakan onOptionsItemSelected , untuk memberi interaksi atau logic pada icon menuDisini kita menggunakan Intent untuk menghubungkan antar Activity.Salin baris intruksi (codingan )berikut:MainActivity.java 

  • package com.okedroid.myapplication;

  •  

  • import android.content.Intent;

  • import android.os.Bundle;

  • import android.support.v7.app.AppCompatActivity;

  • import android.support.v7.widget.Toolbar;

  • import android.view.Menu;

  • import android.view.MenuItem;

  •  

  • //Created By Fathur(okedroid.com)

  •  

  • //

  •  

  • public class MainActivity extends AppCompatActivity {

  •  

  •     @Override

  •     protected void onCreate(Bundle savedInstanceState) {

  •         super.onCreate(savedInstanceState);

  •         setContentView(R.layout.toolbar_main);

  •  

  •  

  •         Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

  •         setSupportActionBar(toolbar);

  •         // Menampilkan toolbar

  •  

  •     }

  •         @Override

  •         public boolean onCreateOptionsMenu (Menu menu){

  •             // menambahkan icon menu pada toolbar

  •             getMenuInflater().inflate(R.menu.menu_main, menu);

  •             return true;

  •         }

  •  

  •         @Override

  •         public boolean onOptionsItemSelected (MenuItem item){

  •  

  •             int id = item.getItemId();

  •  

  •             //memberi aksi menu

  •             if (id == R.id.action_about) {

  •                 Intent intent = new Intent(this, SecondActivity.class);

  •                 startActivity(intent);

  •                 return true;

  •             }

  •  

  •             return super.onOptionsItemSelected(item);

  •         }

  •  

  •     }


    SecondActivity.java.

  • package com.okedroid.myapplication;

  •  

  • import android.os.Bundle;

  • import android.support.v7.app.ActionBar;

  • import android.support.v7.app.AppCompatActivity;

  • import android.support.v7.widget.Toolbar;

  •  

  • //Created By Fathur(okedroid.com)

  •  

  • //

  •  

  • public class SecondActivity extends AppCompatActivity {

  •  

  •     @Override

  •     protected void onCreate(Bundle savedInstanceState) {

  •         super.onCreate(savedInstanceState);

  •         setContentView(R.layout.toolbar_second);

  •  

  •  

  •         Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

  •         setSupportActionBar(toolbar);

  •  

  •  

  •         ActionBar ab = getSupportActionBar();

  •  

  •         // Enable the Up button

  •         ab.setDisplayHomeAsUpEnabled(true);

  •  

  •     }

  •  

  •  

  •     }


    6. Setelah selesai semua , kita coba jalankan Aplikasinya lewat Android Studio.Hasil Demo Tampilan :Ketika user (pengguna ) mengklik icon menu pada pojok kanan di Toolbar.

    [table]

    [tr]

    [/tr]

    [tr]

    [/tr]

    [/table]

    [td][img width=163,height=320]https://4.bp.blogspot.com/-Rbopgs8VLoU/VvzOKCKbUHI/AAAAAAAAFOg/URZR4P1os40yMYvA4wXZjKzxmGnGeevEg/s320/Hasil-Icon-Menu-Toolbar-Activity-Android.png[/img][/td]
    [td]Hasil Tampilan Icon Menu Toolbar [/td]

    Maka akan muncul Activity baru seperti pada gambar dibawah:

    [table]

    [tr]

    [/tr]

    [tr]

    [/tr]

    [/table]

    [td][img width=163,height=320]https://2.bp.blogspot.com/-620zRI7jUNk/VvzOfHMTOOI/AAAAAAAAFOk/Tk_Pm1R1OuE65GUG1r7S9WqobHHAZPuQQ/s320/Hasil-Icon-Menu-Toolbar-Activity-Android2.png[/img][/td]
    [td]Hasil Tampilan Icon Menu Toolbar 

    [/td]

Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com
  • You must be logged in to reply to this topic.