Android Design Support Library v28

6 min readSep 24, 2018

Herkese selamlar çok uzun zamandır mediumdaki içerikleri takip ediyor ve çok güzel bilgiler ediniyorum. Tabi genelde bu içerikler ağırlıklı olarak Android hakkında.
Bu güzel içeriklerden bir tane de kendim üretmek için kolları sıvadım ve Android Design Support Library v28 ile gelen yeniliklere hep beraber bir göz atalım istedim.

Buyrun en güzeli ile başlayalım.

1-BottomAppBar

Getirilen en büyük yeniliklerden biri BottomAppBar.
Tasarımsal olarak benim gerçekten çok hoşuma gitti fakat hangi senaryolar için kullanılacağını kafamda tam oturtamadım. Genelde bir Floating Action Button odağı olan senaryolar için kullanılması daha uygun gibi görünüyor. Bu arada Google I/O 2018 Android uygulamasında ‘Etkinlik Detay’ ekranında BottomAppBar’ın nasıl kullanıldığını görebilirsiniz.

<android.support.design.bottomappbar.BottomAppBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    app:backgroundTint="@color/colorPrimary"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

BottomAppBar’ı xml dosyanıza yukarıdaki gibi yerleştirebilirsiniz. Herhangi bir menü ataması yapılamadan Android Studio önizlemesinde ve uygulamada görünmüyor. Aşağıdaki gibi programatik olarak bir menü tanımlaması yaptığınızda BottomAppBar görünür duruma gelecektir. Ek olarak son bir bilgi BottomAppBar CoordinatorLayout’un child’ı olmak zorunda.

bottom_app_bar.replaceMenu(R.menu.main)

BottomAppBar’ı en alta konumlandırdıktan sonra düzenlenmesi konusunda kullanabileceğiniz bazı çeşitli özellikler var:

app:layout_anchor: Floating Action Button’un layout_anchor özelliğini kullanarak BottomAppBar ile bağlayabilir ve Floating Action Button’ı ona göre konumlandırabilirsiniz.
app:fabAttached: Bu özelliğin ‘true’ olarak ayarladığınız zaman BottomAppBar ile FAB iç içe görünür. Bu özelliğin false olması durumunda ise Floating Action Button, BottomAppBar’ın hemen üzerinde konumlanır.

app:fabAlignmentMode: FAB’ın BottomAppBar üzerinde veya içerisinde yerleşeceği konumunu belirleyebilirsiniz. Bu modu end veya center olarak ayarlayabiliyorsunuz. En solda görünmesi için start veya left gibi bir parametre bulunmuyor.

app:fabCradleVerticalOffset: Eğer FAB isAttached = true durumunda ise bu özellik ile FAB’ın dikey eksende oluşturacağı derinliği belirleyebilirsiniz. Bu parametrenin varsayılan değeri 0dp’dir. Bana göre en iyi görüntüyü 12dp gibi bir değerde oluşturuyor. Burada tercih tamamen size kalmış.

app:backgroundTint: BottomAppBar’ın background rengini belirlemenize yarar. android:backgroundTint özelliği sadece API 21 ve üzerinde çalışacağı için app:backgroundTint üzerinden background rengi vermeniz gerekiyor.

2- Material Button

AppCompatButton’dan extend alan yeni butonumuzun adı MaterialButton. Bu butona herhangi bir background setlemenize gerek kalmadan material tasarım görünümünü yansıtır. Ayrıca tıklama aksiyonunda kendi içerisinde çok hoş bir ripple efekti de veriyor. Yeni gelen bu buton uygulamalarımızda gerçekten çok iyi duracaktır, şahsen ben Material Button’u birçok yerde kullanmayı düşünüyorum.
Butonu xml sınıfımıza aşağıdaki gibi ekliyoruz.

<android.support.design.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="MATERIAL BUTTON"
    android:textSize="18sp"
    app:icon="@drawable/ic_android_white_24dp" />

Default olarak buton rengi projemizdeki renklerden accent rengini alıyor, metin rengi de default olarak her zaman beyaz. Butonumuzu biraz daha özelleştirmek istersek aşağıdaki gibi birçok parametresi var.

app:icon: Butonun başında görüntülenecek bir icon ekleyebiliyoruz.

app:iconTint: Eklediğimiz iconun rengini değiştirmek için kullanabiliriz.

app:iconPadding: Buton üzerindeki Icon ile text arasındaki boşluğu ayarlayabiliyoruz.

app:additionalPaddingLeftForIcon: Buton üzerindeki icon ve metnin sol taraftan alacağı boşluğunu belirleyebiliyoruz. Bu çok kullanılabilir bir özellik gibi gelmedi bana çünkü ilk bakışta hiza problemi gibi görünüp gözü rahatsız ediyor. Özellikle simetri konusunda çok hassas olanlarınız varsa bu özelliği kullanacağını pek sanmıyorum.

app:additionalPaddingRightForIcon: Aynı şekilde icon ve metnin sağ taraftan alacağı boşluğu belirleyebiliriz.

app:rippleColor: İçersinde yer alan ripple efektini rengini belirleyebiliyorsunuz.

app:backgroundTint: Butonun arka planına rengini bu parametre ile ayarlayabiliriz.
app:backgroundTintMode: Butonun arka plan rengi için kullanılacak olan modu belirleyebiliriz.
app:strokeWidth: Butona kenarlık ekleyebilirsiniz. Kalınlık ayarını da bu parametre ile istediğiniz şekilde ayarlayabiliriz. Sanırım 2dp’den fazlası kötü görünecektir.
app:strokeColor: Butonun kenar rengini belirleyebiliyorsunuz.

app:cornerRadius: Butonun köşelerinin yuvarlaklarını ayarlamak için kullanabilirsiniz.

Bonus - TextButton:

Bir Material Button ekler ve style özelliğini aşağıdaki gibi bir ayarlarsanız sadece metinden oluşan bir buton material button oluşturmuş oluyorsunuz. Eğer tasarımlarınızda clickable bir metin var ise artık Textview yerine Material Button’u bu şekilde kullanabilirsiniz. Bu şekilde kullanıldığında da buton kendi içerisinde ripple efektine sahip oluyor.

style="@style/Widget.MaterialComponents.Button.TextButton"

3- Chip

Chipleri genel olarak etiket, filtreleme, sıralama seçeneklerinde veya ikili, üçlü yapacağımız seçim durumlarında kullanabiliriz gibi görünüyor. Yine Google I/O 2018 Android uygulamasında ‘Filtreleme’ ekranında filtre seçenekleri olarak kullanılan Chip’leri görebilirsiniz.
Chipleri xml sınıfımıza aşağıdaki gibi ekliyoruz ve app:chipText parametresini kullanarak metin setleyebiliyoruz.

<android.support.design.chip.Chip
    android:id="@+id/some_chip"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:chipText="This is a chip" />

Chipleri stillendirebileceğimiz bir kaç özellik var. Bunları kısa kısa aşağıda açıkladım.

app:checkable: Bir Chip’in seçilebilir olma özelliğini belirler. Bu özelliği devre dışı bıraktığınızda Chip aslında bir butona dönüşmüş olur.
app:chipIcon: Chip üzerinde icon gösterimi için kullanabilirsiniz.
app:closeIcon: Chip üzerinde bir kapatma icon eklenir.

Chip’lerin tıklama aksiyonlarını dinleyebilmemiz için setOnCheckedChangeListener fonksiyonunu kullanabiliriz.

some_chip.setOnCheckedChangeListener { button, checked ->  }

Eğer chip üzerinde kapatma iconu kullanıldıysa bu iconun tıklanmasını aşağıdaki gibi dinleyebiliriz.

some_chip.setOnCloseIconClickListener {  }

4- Chip Group

Birden çok Chip’i bir arada kullanıyorsanız bu Chipleri bir Chip Group ile sarmanız gerekmektedir. Aslında kullanım yapısı olarak Radio Button’ları örnek alabiliriz. Örneğin Cinsiyet seçimi için ekrana iki adet Radio button koyduğunuza aynı anda yalnızca birinin seçili olabilmesi için radio butonlarımızı bir radio group ile sarmanız gerekiyor, aynı mantıkla düşündüğümüzde Chip Group’da Radio Group’un yaptığı işlevinin birebir aynısını görüyor.

<android.support.design.chip.ChipGroup
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <android.support.design.chip.Chip
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:chipText="Male" />

    <android.support.design.chip.Chip
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:chipText="Female" />

</android.support.design.chip.ChipGroup>

Chip Group ile sarılmış olan Chip’leriniz varsayılan durumda biraz sıkışık görünebilir. Tam bu aşamada Chip Group’un bize sunduğu boşluk özellikleri kullanabiliriz.

app:chipSpacing: Chip’ler arasındaki yatay ve dikey eksenlere eşit boşluklar ekler.
app:chipSpacingHorizontal: Sadece yatay eksene boşluk ekler.
app:chipSpacingVertical: Sadece dikey eksene boşluk ekler.
app:singleLine: Tüm Chip’lerin tek bir satırda gösterimini sağlar.

Fakat app:singleLine özelliği ile birlikte şöyle bir problem oluşuyor, Chip’lerimizin hepsi tek bir satırda olduğunda tabiki ekrana sığmıyor ve bir kısmı görünmüyor. Bu noktada Chip Group’u bir HorizontalScrollView ile sarmanız gerek. Bu şekilde kullanıcılar Chip’leri yatayda kaydırabilir ve Chip’ler arasında gezinebilir.

<HorizontalScrollView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <android.support.design.chip.ChipGroup
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:singleLine="true">

        <android.support.design.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="Some chip" />

        // more chips...</android.support.design.chip.ChipGroup>

</HorizontalScrollView>

5- Material CardView

Hepimiz daha önceden CardView’ı uygulamalarımızın herhangi bir noktasında illaki kullanmışızdır.
Şimdi ise Support Library bize biraz daha Material Design ile stillendirilmiş yeni bir bileşen sunuyor.

Material CardView’ı xml sınıfımıza aşağıdaki gibi basit bir şekilde ekliyoruz.

<android.support.design.card.MaterialCardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="16dp">... other your child views ...</android.support.design.card.MaterialCardView>

Material CardView’lar biraz daha özelleştirebilmek için iki farklı özelliğimiz var.

app:strokeWidth: Cardview’a kenarlık ekler.
app:strokeColor: Cardview’ın kenarlık rengini belirleriz.

Yukarıdaki bu iki özelliğin yanı sıra normal CardView’lar için kullandığımız diğer tüm özellikleri Material Cardview için de kullanabiliyoruz. (app:cardBackgroundColor, app:cardElevation vb.)

Dilerseniz siz de bu yeni bileşenleri ile ilgili yorum ve düşüncelerinizi aşağıda benimle paylaşabilirsiniz, yazıyı beğendiyseniz alkış ile ilk yazımda bana destek olabilirsiniz :)

Ek olarak Github’da yukarıdaki tüm yeni bileşenleri kullandığım ve bu bileşenler üzerinde denemeler yaparak benim de yeni yeni özelliklerini keşfettiğim bir projem var dilerseniz onu da inceleyebilirsiniz.

emretekin/Support-Library-v28-Additions

I want to show at the additions which have been made to the Android Design Support Library Additions with version 28 …

github.com

Emre Tekin - Android Application Developer - Kuka Apps | LinkedIn

View Emre Tekin's profile on LinkedIn, the world's largest professional community. Emre has 6 jobs listed on their…

www.linkedin.com

Kaynaklar: https://developer.android.com/reference/com/google/android/material/packages
https://medium.com/google-developer-experts/exploring-the-v28-android-design-support-library-2c96c6031ae8
https://www.youtube.com/watch?v=3VUMl_l-_fI&t=560s