Uygulamalarımızı artık Material Design tasarlamanın vakti geldi de geçiyor. Marketlerdeki varolan uygulamalar kendini güncellemedikçe kullanıcı kaybediyor, yeni çıkan uygulamalarda kullanıcılar material design etkilerini arıyor… Bu yazımda fazla derine inmeden basitçe material design library ile gelen Collapsing Toolbar Layout’tan söz edeceğim.

Öncelikle projenin son haline videodan bakabilirsiniz. Böylece yazımı okumaya devam edebilir ya da burada bırakabilirsiniz.

“Bana direkt kaynak kodu ver” tayfası için de hemen buraya github linkini bırakıyorum.

Layout Yapısı

xml layout yapımız aşağıdaki gibi olacak.

Layout Tanımlama

xml’de bilindik android: taglerine zaten aşinayız. Fakat aşina olmadığımız app: taglerini kısaca bi açıklayayım.

app:contentScrim : CollapsingToolbarLayout sınıfının bir attribute’üdür. Ve buraya vereceğimiz bir renk kodu ile toolbar’ın rengini değiştirebiliriz. Listeyi yukarı doğru scroll ettiğimizde resim kaybolup yerine toolbar geliyor. İşte bu değişken onun rengini belirliyor.

app:expandedTitleMarginStart : Adından da anlaşılacağı gibi tahmin etmesi zor değil. “My RadioList” yazısının soldan kalacak boşluğunu belirliyor.

app:collapseMode (Toolbar) : Toolbar’ collapse mode unu pin yaparak scroll yaparken tepede kalmasını saglayabiliriz .

app:collapseMode (ImageView) : Parallax ile scroll yaparken resmin parallax efekt almasını sağlayabiliriz.

Model Oluşturma

Listemizde radyo listesi kullanacağız bunun için basit bi model oluşturalım.

Adapter Oluşturma

Xmlde Recycler View’imiz var buna dataları bağlamak için bir de adapter sınıfına ihtiyacımız var.

Main Activity Sınıfımız

Uygulamanın tüm kaynak kodlarına buradan ulaşabilirsiniz. Aklınıza takılan veya farklı bir implementasyon ile alakalı soru ve görüşlerinizi yine bu postun altına yazabilirsiniz.