Membuat Toolbar ( ActionBar ) pada Android

Monday, February 09, 2015 Unknown 0 Comments


Toolbar diperkenalkan sebagai fitur baru pada android 5 (lolipop),sebelumnya toolbar dikenal dengan actionbar. tentunya dengan bergantinya nama tersebut dibarengi dengan beberapa perubahan diantaranya toolbar dibuat pada file  tersendiri pada folder (app-src-main-res-layout) sehingga para developer dapat membuat beberapa toolbar untuk satu aplikasi. cara pemanggilanya tinggal include pada layout yang inggin kita pasang toolbar tersebut.

Berikut langkah-langkahnya :


1. buat project pada android studio

2. buka  build build.gradle (app-src-main) periksa pada dependencies apakah sudah ada
compile 'com.android.support:appcompat-v7:21.0.3'
bila belum tambahkan dependencies tersebut.

3. buat file ke color.xml pada (app-src-main-res-values) lalu tambahkan beberapa warna seperti      berikut:

 <resources>

    <color name="primaryColor">#3f51b5</color>

    <color name="primaryColorDark">#303f9f</color>

</resources>
4. setelah itu masuk ke style.xml (app-src-main-res-values) tambahkan kode berikut :

<resources>

    <!-- Base application theme. -->

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

        <!-- Customize your theme here. -->

        <item name="colorPrimary">@color/primaryColor</item>

        <item name="colorPrimaryDark">@color/primaryColorDark</item>

        <item name="android:windowNoTitle">true</item>

    </style>

</resources>
5. lalu buat file Toolbar untuk namanya terserah temen2. pada contoh ini saya menamainya dengan toolbar.xml (app-src-main-res-layout) kodenya seperti berikut :
<android.support.v7.widget.Toolbar

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

    android:id="@+id/toolbar"

    android:layout_height="?actionBarSize"

    android:layout_width="match_parent"

    android:background="?attr/colorPrimary"/>


6. tambahkan toolbar pada layout activity pada contoh saya menambahkanya pada activity_main.xml.

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


    <include

        android:id="@+id/toolbar"

        layout="@layout/toolbar"/>

    <TextView

        android:text="@string/hello_world"

        android:layout_below="@+id/toolbar"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content" />

</RelativeLayout>

7. untuk bisa tampil pada aplikasi pada saat aplikasi dijalankan temen2 harus menambahkan toolbar pada file java. pada kali ini saya menambahkan pada file MainActivity.java (app-src-main-java), berikut kodenya:
protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);



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

        setSupportActionBar(toolbar);

    }


8. lalu jalankan aplikasi bila bila berhasil akan tampil seperti gambar dibawah ini.



9. bila temen2 ingin menambahkan beberapa menu pada toolbar. temen2 dapat menambahkanbeberapa kode pada file menu_main.xml (app-src-main-res-menu)

<menu

    xmlns:android="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=".MainActivity">



    <item

        android:id="@+id/action_settings"

        android:title="@string/action_settings"

        android:orderInCategory="100"

        app:showAsAction="never" />


    <item

        android:id="@+id/action_search"

        android:title="@string/action_search"

        android:icon="@drawable/ic_action_search"

        android:orderInCategory="1"

        app:showAsAction="always"

        app:actionViewClass="android.support.v7.widget.SearchView"/>

</menu>

pada file tersebut saya menambahkan menu action search sedangkan menu "action_settings" default.
bila temen2 membuat aplikasi dengan banyak activity. temen2 bisa juga membuat file menu yang berbeda untuk tiap activity. untuk pemanggilanya temen2 pada file java pada method onCreateptionMenu, berikut kodenya :

public boolean onCreateOptionsMenu(Menu menu) {

        // Inflate the menu; this adds items to the action bar if it is present.

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

        return true;

    }


 sekian
 semoga artikel ini berguna. bila ada pertanyaan silakan isi pada komentar..


0 comments: