Nazım Can Altınova

Güle Güle Action Bar, Hoş Geldin Toolbar!

Herkese merhabalar,

Bu yazıda Android SDK 21 ile gelen ve çok fazla esneklik katan bir Appcompat elemanını tanıyacağız. Hemen yazımıza başlayalım.

Destek kütüphanesi (Support Library) ve Appcompat nedir?

Her yeni API seviyesiyle birlikte Android’e yeni özellikler dahil oluyor. Bu yeni gelen elemanlar veya özellikler önceki API seviyelerinde kullanılamıyor. Google da bu sorunu ortadan kaldırmak adına Support Library adını verdiği kütüphanesi ile yeni gelen özellikleri eski API’lerde kullanabilmemizi sağlıyor. Geriye dönük uygulama desteğini sunmak adına gerçekten çok iyi bir kütüphane. Appcompat da Android 3.0 ile gelen ActionBar‘ın geriye dönük desteğini sağlamak adına geliştirilmiş bir Support Library elemanı. Appcompat sayesinde ActionBar özelliğini Android’in Gingerbread versiyonlarından itibaren kullanabiliyoruz.

Appcompat’ta ne yenilikler var?

Android’in bu sürümünde (5.0), Google yepyeni bir araçla karşımıza çıkıyor. Bu aracın adı Toolbar. Toolbar’a aslında Action Bar’ın, bize daha fazla kontrol ve esneklik vermek adına genişletilmiş bir versiyonu diyebiliriz. Toolbar’ı Action Bar dahil birçok amaçla kullanabiliyoruz. Bir nevi Toolbar’a, Action Bar’ın abisi diyebiliriz.

Üstteki paragrafta kontrol edilebilir olduğundan bahsetmiştik. Bunun nedeni Toolbar’a navigasyon tuşu, logo, başlık, alt başlık, action menü elemanı ve hatta kendi özel view’larımızı bile ekleyebiliyor oluşumuz. Yazının ilerleyen kısımlarında Toolbar’a daha ayrıntılı bir şekilde değineceğiz.

Toolbar, Appcompat ve Android 5 ile gelen yenilikleri daha yakından görebilmek için Google I/O Android Uygulamasına bakabilirsiniz. Buradaki kodlar yenilikleri öğrenmek için güzel bir araç olacaktır. Şimdi appcompat kurulumundan itibaren yapmamız gereken şeyleri öğrenmeye başlayabiliriz.

Appcompat kurulumu

Eğer Android Studio kullanıyorsanız Appcompat kurulumu çok basit. build.gradle dosyamızın dependencies kısmına Appcompat için gereken aşağıdaki kodu ekliyoruz.

dependencies {
    compile "com.android.support:appcompat-v7:21.0.+"
}

Burada uygulamamızın bağımlılıklarına Appcompat’ı eklemiş olduk. Artık bundan sonra Appcompat ile ilgili kodlarımızı yazabiliriz. Android Studio projeyi build ederken appcompat kütüphanesini bizim yerimize dahil edecektir.

Eğer Appcompat’ı daha önce kullanmadıysanız veya yeni yeni bunları öğrenmeye başlıyorsanız uygulamanızı appcompat’a uyumlu yapmanız için gerekenleri aşağıdaki listede bulabilirsiniz:

  • Tüm activity’leriniz FragmentActivity‘den türetilen ActionBarActivity‘den türetilmek zorunda. Activity’lerimiz esasında FragmentActivity’den (v4 support library) türetildiği için, eğer fragment kullanıyorsanız gönül rahatlığıyla kullanmaya devam edebilirsiniz. Herhangi bir sorun olmayacaktır.
  • Action Bar/Toolbar içerecek olan tüm temalarınız Theme.AppCompat’tan miras almak zorunda. AppCompat temasının, diğer temalar gibi, Light veya NoActionBar ve benzeri birçok çeşidi bulunmakta.
  • Action Bar’da gösterilecek herhangi bir şeyi inflate ederken, Action Bar’ın temasına sahip bir context’i kullandığınızdan emin olun (getSupportActionBar().getThemedContext() ile elde edilebilir).
  • MenuItem’lardaki aksiyonlarla ilgili çağrılar için, MenuItemCompat‘daki statik fonksiyonları kullanmalısınız.

Toolbar’a biraz daha yakından bakalım

android.support.v7.widget.Toolbar class’ı olarak eklenmiş olan Toolbar iki şekilde kullanılabilir:

  • Toolbar’ı Action Bar’ın imkanlarını kullanabilmek ve ayrıca görsel olarak daha fazla kontrole sahip olmak için kullanabiliriz.
  • Action Bar’ın desteklemediği yerlerde bağımsız olarak kullanabiliriz (örneğin bir ekranda birden çok toolbar göstermek veya ekran genişliğinin sadece bir kısmını kapsamak gibi).
Action Bar olarak kullanmak

Toolbar’ı Action Bar olarak kullanabilmek için, öncelikle bize sağlanan varsayılan Action Bar’ı devre dışı bırakmamız gerekiyor. Action Bar’ı devre dışı bırakmanın en kolay yolu temamızı Theme.AppCompat.NoActionBar‘dan ya da Light versiyondan (Theme.AppCompat.Light.NoActionBar) extend etmek.

Bundan sonra yapmamız gereken bir Toolbar örneği oluşturmak. Genellikle bunun için XML layout’u kullanıyoruz:

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary" />

Yükseklik, genişlik ve arka plan gibi özelliklerin hepsi opsiyoneldir ve bunlara başka özellikler de eklenebilir. Artık XML’i özelleştirmek sizin göz zevkinize ve amacınıza kalmış. Bu örnekteki amaç, yükseklik ve genişlik gibi özelliklerin sizin belirleyeceğiniz şekilde değişebileceğini göstermek. İstediğiniz stili verip istediğiniz gibi pozisyonlayabilirsiniz.

Şimdi de Activity’nizde ya da Fragment’ınızda Toolbar’ın Action Bar gibi davranmasını sağlamanız gerekiyor.

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

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

Gördüğünüz gibi setSupportActionBar fonksiyonu ile toolbar’ımızı Action Bar olarak tanıttık. Bundan sonra tüm menü elemanlarımız toolbar’ın üzerinde gözükecektir.

Bağımsız olarak kullanmak

Bağımsız olarak kullanmanın en büyük farkı, Toolbar’ı Action Bar gibi davranacak şekilde ayarlamamamız. Bundan dolayı istediğiniz AppCompat temasını kullanıp Action Bar’ı devre dışı bırakmadan, Action Bar ile birlikte kullanabilirsiniz.

Bağımsız olarak kullanırken, Toolbar’ı, içerik ve olayları ile birlikte manuel olarak oluşturmalısınız. Örneğin action’ları görüntülemek istiyorsanız, içine bir menü inflate etmeniz gerekmekte:

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

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

    // Menü elemanlarına tıklanmayı handle edebilmek için OnMenuItemClickListener ekliyoruz.
    toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
        @Override
        public boolean onMenuItemClick(MenuItem item) {
            // Menü elemanını elde et.
            return true;
        }
    });

    // Toolbar'da görüntülenecek olan menüyü inflate ediyoruz.
    toolbar.inflateMenu(R.menu.toolbar_menunuz);
}

Bunlar dışında Toolbar ile yapabileceğiniz çok fazla şey bulunmakta. Daha geniş bilgi için Toolbar API referansına bakabilirsiniz.

Toolbar’a stil vermek

Toolbar’a stil vermek Action Bar’a göre oldukça farklıdır. Stil doğrudan view üzerinden verilebilir.

Aşağıdaki kod Toolbar’ı Action Bar olarak kullanmak istediğimizde yazabileceğimiz basit bir örnektir:

<android.support.v7.widget.Toolbar
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:minHeight="?attr/actionBarSize"
    app:theme="@style/ThemeOverlay.AppCompat.ActionBar" />

Buradaki app:theme tanımlaması sizin yazılarınızın ve elemanlarınızın düz renkler kullanacağını belirler (örneğin %100 opacity’ye sahip beyaz renk).

DarkActionBar

Toolbar’ı layout özelliklerini kullanarak istediğimiz gibi şekillendirebiliyorduk. Toolbar’ın DarkActionBar temasına sahip olarak gözükmesini sağlamak için bize theme ve popupTheme özellikleri sunulmuş durumda. Bu özellikleri vererek amacımıza ulaşabiliriz:

<android.support.v7.widget.Toolbar
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:minHeight="@dimen/height_toolbar"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

Görüldüğü gibi app:theme ve app:popupTheme ile gerekli özelleştirmeleri yapmış olduk.

SearchView Widget

Appcompat bize Lollipop’un gelişmiş, çok daha özelleştirilebilir SearchView API’sini sunuyor. Artık Lollipop tarzı yapıyı eski searchView tema özelliklerinin yerine kullanabiliyoruz.

SearchView’u nasıl özelleştireceğinizle ilgili bir örnek için aşağıdaki koda bakabilirsiniz:

values/themes.xml:

<style name="Theme.MyTheme" parent="Theme.AppCompat">
    <item name="searchViewStyle">@style/MySearchViewStyle</item>
</style>
<style name="MySearchViewStyle" parent="Widget.AppCompat.SearchView">
    <!-- Arama sorgusu bölümü için arka plan (Örn. EditText) -->
    <item name="queryBackground">...</item>
    <!-- Action'ların bulunduğu bölüm için arka plan (Örn. Ses, Gönder) -->
    <item name="submitBackground">...</item>
    <!-- Kapatma butonu ikonu -->
    <item name="closeIcon">...</item>
    <!-- Arama butonu ikonu -->
    <item name="searchIcon">...</item>
    <!-- Git butonu ikonu -->
    <item name="goIcon">...</item>
    <!-- Sesle arama butonu ikonu -->
    <item name="voiceIcon">...</item>
    <!-- Sorgu önerisi satırındaki commit butonu ikonu -->
    <item name="commitIcon">...</item>
    <!-- Sorgu önerisi satırı için layout -->
    <item name="suggestionRowLayout">...</item>
</style>

Hepsini tanımlamanız gerekmiyor. İsterseniz hiçbirini de tanımlamayabilirsiniz. Tanımlamadığınız sürece Android’in varsayılan görselleri uygulamanızda gözükecektir.

Sonuç

Bir yazımızın daha sonuna geldik. Umarım sizin için Appcompat ve Toolbar’a giriş yapmanız adına faydalı bir yazı olmuştur. Herhangi bir sorunla karşılaştığınız takdirde yorum olarak ya da iletişim kısmından bana ulaşabilirsiniz. Yardımcı olmaktan memnun olurum. Herkese iyi günler, iyi kodlamalar!