Android Toolbar Kullanımı

Merhaba arkadaşlar,

Bugün sizlere Lolipop (Android 5.0) güncellemesi ile gelen Android Toolbar yapısını nasıl oluşturacağımızı anlatacağım. Hepimizin bildiği ActionBar yapısının yerine artık Toolbar tercih ediliyor bunun bir çok nedeni var , en önemli göze çarpan maddeleri söyleyecek olursak;

Toolbar yapısını uygulamamızda istediğimiz yerde kullanabiliyoruz (arayüz bakımından ) belirli bir yer kısıtlaması yok
Toolbar ile ActionBar’ın bütün görevlerini yerine getirebildiğimiz gibi ActionBar’ın bütün özelliklerini kullanabiliyoruz.
Görsel anlamda kullanıcı deneyimi açısından daha iyi ve daha esnek bir yapıya sahip.
ActionBar yapısına göre daha büyük ve daha gelişmiş özelliklere sahip
Material Design ile güçlü bir tasarım desteğini, Toolbar yapısını şekillendirirken kullanabilme.

Oldukça kolay bir kullanıma sahip olan bu yapıyı nasıl oluşturacağımıza bakalım:

Öncelikle style.xml dosyamız aşağıdaki gibi olmalıdır. ( color kısımlarında siz istediğiniz renklendirmeyi yapabilirsiniz )

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

</resources>

menu klasörümüzü düzenliyoruz: ( üst kısımda menü de yer almasını istediğimiz item leri iconları ile tanımladık: arama iconu, mesaj iconu ve like iconu )

menu.xml

<?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:id="@+id/action_search"
        android:orderInCategory="200"
        android:title="Search"
        android:icon="@drawable/search_icon"
        app:showAsAction="ifRoom"
        ></item>
    <item
        android:id="@+id/action_like"
        android:orderInCategory="300"
        android:title="Like"
        android:icon="@drawable/heart_icon"
        app:showAsAction="ifRoom"></item>

    <item
        android:id="@+id/action_message"
        android:orderInCategory="200"
        android:title="Message"
        android:icon="@drawable/message_icon"
        app:showAsAction="ifRoom"
        ></item>

</menu>

toolbar layoutu oluşturuyoruz. ( bu yapıyı istediğimiz bir çok yerde kullanabilmemiz için her sayfada ayrı ayrı tanımlamak yerine ayrı bir layout da bir kere tanımlıyoruz )

toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    >
</android.support.v7.widget.Toolbar>

Oluşturduğumuz activity’in layout kısmına yukarıdaki toolbar bileşenini atıyoruz. ( yukarıda bahsetmiş olduğum toolbar yapısını bir çok yerde kullanabilmemiz için de include tagini kullanarak toolbarı ilgili arayüze ekliyoruz )

activity_main.xml

<?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"
    android:background="#ccc"
    tools:context="com.mobilhanem.customtoolbarexample.MainActivity">

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


</RelativeLayout>

MainActivity sınıfımızda toolbar bileşenini tanımlıyoruz ve bu activity de toolbarı, actionbar olarak kullanmak istiyorsak setSupportActionBar fonksiyonu ile ekleme işlemini gerçekleştiriyoruz.

MainActivity.java

package com.mobilhanem.customtoolbarexample;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;

public class MainActivity extends ActionBarActivity {


    private Toolbar toolbar;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        toolbar = (Toolbar) findViewById(R.id.tool_bar);
        toolbar.setTitle("Mobilhanem Toolbar");
        toolbar.setTitleTextColor(getResources().getColor(R.color.white));
        setSupportActionBar(toolbar);

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu, menu);
        return true;
    }



}

Evet arkadaşlar kaynak kodunu indirip çalıştırdığımızda aşağıdaki ekran görüntüsünü elde edeceğiz. Temel olarak sizlere toolbar yapısını anlatmaya çalıştım. Uygulamalarınızda nasıl kullanmak istiyorsanız artık o size kalmış.

Ders hakkında soru ve önerilerinizi çekinmeden yorum bırakabilirsiniz. Bol Android’li günler sizin olsun, bir daha ki dersime görüşmek üzere ?