Android- Kotlin Collapsing toolbar ve Palette kullanımı
Bu eğitimde Android Toolbar’ı genişletip daraltabildiğimiz (Collapsing Toolbar) ve Toolbar’da bulunan resmi odak alarak Toolbar rengini belirleyebileceğimiz(Palette) gibi yapıları öğreneceğiz.
Collapsing Toolbar animasyonu adım adım aşağıda görünmektedir.
Toolbar rengi Toolbar da bulunan dinamik resmi odak alarak onda bulunan ağırlıklı renge göre Palette API ile Toolbar rengi belirlenmektedir.
Collapsing Toolbar için kolları sıvayalım.
Öncelikle projemize şunu implement ederek başlayalım
dependencies {
…
implementation 'com.android.support:design:27.1.1'
}Bu coordinatorLayout’ u kullanmamızı sağlar
Coordinator Layout
Coordinator layout istediğimiz yapıları daha kısa kod yazarak oluşturmamızı sağlar. Bunlardan:
Kullanıcı etkileşimi için snackBar yapısı ile kullanılabilir
ya da
Collapsing Toolbar ile App Bar’ı kaydırılabilerek kullanılabilir.
Aşağıda bunlara örnek verilmektedir.
Xml görünümünü ayarlayalım
Bunun için basitçe xml görünümünü şu şekilde ayarlamalısınız.
<CoordinatorLayout> <AppBarLayout> <CollapsingToolbarLayout> <ImageView /> <!-Toolbar'a gömülü olmasını istediğiniz resim burada görünmeli-> <android.support.v7.widget.Toolbar /> < /CollapsingToolbarLayout>
</AppBarLayout>
<NestedScrollView
<!- Kaydırılmasını istediğiniz içerikleri burada oluşturun ->
</NestedScrollView></CoordinatorLayout>
Nested Scroll View
Scroll view ile neredeyse aynı özelliklere sahiptir ancak Nested Scroll View Coordinator Layout ile uyumlu çalışır. Ekran dışını kaydırma davranışını elde etmek için Nested Scroll View kullanılır.
Bizim örneğimizde ki xml’i daha detaylı verelim
Palette API
Öncelikle palette kütüphanesini projeye dahil edelim
Daha sonra Activity’ mizde bir Bitmap oluşturuyoruz
Burada oluşturduğumuz Bitmap’de görüldüğü gibi bizden 2 paremetre istiyor : ilk paremetrede resource’ ye erişeceğimizi belirtiyoruz, 2.paremetrede ise rengini tespit etmek isteğimiz resmi seçiyoruz.
Github’ a attığım projeyi incelerseniz , resmimi dinamik olduğu için pozisyona göre çağırım yaptığımı farkedersiniz.
Daha sonra bir inner class oluşturuyoruz
İnner class içerisinde istediğim renk uygulanamaz ise onun yerine uygulayabileceğim rengi belirtiyorum.
Son olarak Toolbarımın içine geri oku ekliyorum.
Projeyi daha detaylı incelemek için:
