Rekayasa Perangkat Lunak: Membuat Toolbar Pada Android

Salah satu elemen yang Saya bahas pada artikel sebelumnya adalah elemen Toolbar. Maka dari itu, kali ini Saya akan menjelaskan bagaimana cara membuat Toolbar dengan menggunakan konsep material design. Sebelum masuk ke koding, Saya akan menjelaskan sedikit mengenai Toolbar yang akan Kita buat nantinya. Toolbar merupakan salah satu elemen wajib yang harus ada pada saat Kita membuat aplikasi, Karena umumnya di bagian Toolbar terdapat berbagai action atau perintah yang Kita buat dan Kita tempatkan di Toolbar. Sebelum adanya appcompat v7 mungkin Kita mengenal istilah toolbar dengan sebutan Action Bar. Sebelumnya Saya juga bingung apa bedanya Action Bar dan Toolbar. Tapi setelah Saya telusuri ternyata elemen tersebut sebenarnya sama hanya yang membedakan adalah biasanya pada Action Bar secara default sudah include pada tema aplikasi.
Sudah agak jelas sedikit penjelasan Saya mengenai Toolbar? Pasti belum jelas, hehehe. Daripada berlama-lama langsung saja Kita masuk ke kodingnya. Siap-siap kopi dan sedikit cemilan sebelum memulai, hehehe.
Langkah Pertama :
Bagi teman-teman yang belum membuat projek aplikasi bisa mengikuti caranya disini. Dikarenakan Toolbar mempunyai view tersendiri maka terlebih dahulu Kita buat view layout Toolbarnya terlebih dahulu agar memudahkan Kita nantinya dalam mengedit / menambahkan ke dalam layout utama Kita. Buatlah sebuah XML, disini Saya menamakan toolbar.xml

<?xml version="1.0" encoding="utf-8"?>

<android.support.v7.widget.Toolbar

    xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@+id/toolbar"

    android:layout_width="match_parent"

    android:layout_height="?attr/actionBarSize"

    android:background="?attr/colorPrimary"

    android:theme="@style/AppTheme"

    android:elevation="4dp">



</android.support.v7.widget.Toolbar>

<?xml version="1.0" encoding="utf-8"?>

<android.support.v7.widget.Toolbar

xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/toolbar"

android:layout_width="match_parent"

android:layout_height="?attr/actionBarSize"

android:background="?attr/colorPrimary"

android:theme="@style/AppTheme"

android:elevation="4dp">

</android.support.v7.widget.Toolbar>

Hasilnya akan terlihat seperti gambar dibawah ini :

Terlihat pada tampilan preview di sebelah kanan muncul 2 Toolbar yang sebenarnya adalah Toolbar atas merupakan Default Action Bar dan yang bawah adalah Toolbar custom yang baru Kita buat. Untuk menghilangkan Default Action Bar cukup mudah, Caranya yaitu :

Masuk ke folder values
Pilih styles.xml
Akan tampil seperti gambar di bawah ini.

Ubah AppCompat.Light.DarkActionBar menjadi Theme.AppCompat.Light.NoActionBar

Sekarang lihat hasilnya di toolbar.xml. Boomm!!!!

Langkah Kedua :
Setelah Kita selesai membuat view untuk Toolbarnya, Kita include kan toolbar.xml ke dalam layout utama (Layout Activity) yang ingin menggunakan Toolbar tersebut. Contoh penerapannya seperti dibawah ini :

<?xml version="1.0" encoding="utf-8"?>
<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="com.crocodic.kodepediatutorial.MainActivity">

    <include
        android:id="@+id/toolbar"
        layout="@layout/toolbar" />

    <TextView
        android:layout_below="@+id/toolbar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        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:text="Hello World!" />
</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>

<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="com.crocodic.kodepediatutorial.MainActivity">

<include

android:id="@+id/toolbar"

layout="@layout/toolbar" />

<TextView

android:layout_below="@+id/toolbar"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

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:text="Hello World!" />

</RelativeLayout>

Dan hasilnya akan seperti ini :

Langkah Ketiga :
Setelah Kita membuat file XML nya Kita panggil Toolbar tersebut ke file JAVA Kita. Untuk cara pemanggilannya bisa ikuti cara di bawah ini :

// findview toolbar
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

        // set toolbar ke dalam support action bar
        setSupportActionBar(toolbar);

        // enable home button untuk navigasi
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        // mengeset icon untuk home button Toolbar
        getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_menu);

        // mengeset title/nama aplikasi
        getSupportActionBar().setTitle("Tutorial Kodepedia");

        // mengeset subtitle
        getSupportActionBar().setSubtitle("Tutorial Membuat Toolbar");

        // set logo toolbar
        getSupportActionBar().setDisplayUseLogoEnabled(true);
        getSupportActionBar().setLogo(R.mipmap.ic_launcher);

// findview toolbar

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

// set toolbar ke dalam support action bar

setSupportActionBar(toolbar);

// enable home button untuk navigasi

getSupportActionBar().setDisplayHomeAsUpEnabled(true);

// mengeset icon untuk home button Toolbar

getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_menu);

// mengeset title/nama aplikasi

getSupportActionBar().setTitle("Tutorial Kodepedia");

// mengeset subtitle

getSupportActionBar().setSubtitle("Tutorial Membuat Toolbar");

// set logo toolbar

getSupportActionBar().setDisplayUseLogoEnabled(true);

getSupportActionBar().setLogo(R.mipmap.ic_launcher);

Saya menggunakan beberapa elemen saja dari kodingan yang Saya cantumkan di atas,

Dan hasilnya setelah di run akan seperti ini :

Itulah langkah-langkah bagaimana membuat Toolbar dengan konsep Material Design. Mudah bukan membuat Toolbar? Jadi tunggu apa lagi, Let’s Coding!

http://kodepedia.com/membuat-toolbar-android-menggunakan-android-studio/

Rekayasa Perangkat Lunak

Membuat Toolbar Pada Android

Author : Project

Share this

Rekayasa Perangkat Lunak

Membuat Toolbar Pada Android

Author : Project

Share this

Related Posts