Herkese merhabalar,

Bu yazıda size 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?

Android’e, gelen api seviyeleriyle birlikte Android’e yeni özellikler dahil oluyor. Bu yeni gelen elemanlar veya özellikler önceki api seviyelerinde kullanılamaz oluyorlar. 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 4.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’da 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 biraz daha bize kontrol ve esneklik vermesi 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 custom viewlerimizi bile ekleyebiliyor oluşumuz. Yazımızın ilerisinde daha geniş bir şekilde değineceğiz bu Toolbar’a.

Toolbar ve 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 dependency kısmına Appcompat için gereken aşağıdaki kodu ekliyoruz.

dependencies {
    compile "com.android.support21.0.+"
}

Burada uygulamamızın gerekliliklerine 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 activityleriniz FragmentActivity‘den türetilen ActionBarActivity‘den türetilmek zorunda. Activitylerimiz esasında FragmentActivity’den türetildiği için(v4 support library), eğer fragment kullanıyorsanız içiniz rahat bir şekilde kullanmaya devam edebilirsiniz. Herhangi bir sorun olmayacaktır.
  • Action Bar/Toolbar içerecek olan tüm temalarınız Theme.AppCompat‘dan 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’da herhangi bir aksiyonla ilgili bir call için, MenuItemCompat‘daki statik fonksiyonları kullanmalısınız.

Toolbar’a biraz daha yakından bakalım

android.support.v7.widget.Toolbar classına 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.
  • Actıon 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 arkaplan gibi özelliklerin hepsi opsiyonel ve çoğaltılabilirler. 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östermiş olmak. İstediğiniz stili verip istediğiniz gibi pozisyonlayabilirsiniz.

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

@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 kullanmamızdaki en büyük fark Toolbarı Action Bar olarak davranmasını 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 actionları 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;
        }
    });

    // Toolbarda 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 çok daha farklıdır. Direk view üzerinden stil 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 taması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’i 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 arkaplan (Örn. EditText) -->
    <item name="queryBackground">...</item>
    <!-- Actionların bulunduğu bölüm için arkaplan (Ö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 iconu -->
    <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!