Android Design Support Library — 3

Snackbar, Floating Action Button, EditText Floating Labels ve Coordinator Layout Kullanımı

http://proof.nationalgeographic.com/2016/03/02/using-the-magic-of-flower-power-to-soften-the-pit-bulls-image/

Geçtiğimiz yazının biraz karışık olduğu ile ilgili geri dönüşler oldu. Bu yazıda o zaman çok fazla dağıtmadan genel olarak bu yapıların ne işe yaradığı ve nasıl kullanılabileceğinden bahsedeceğim. Daha fazla uzatmadan artık Design Support Library’i 3. part’ında bitirmeyi düşünüyorum. Şimdi sıra ile gidersek ilk olarak…


Snackbar

Yukarıda gördüğünüz yapının adı Snackbar, kullanıcıya ekranın en altında bir mesaj göstermemize yarar. Design Support Library ile birlikte gelen yeni güzel özelliklerden birisi. Zaten Blank Activity yaratmışsanız daha önceden Snackbar’ın ve Floating Action Button’ın hazır olarak geldiğini görmüşsünüzdür.

Birçok amaç için özelleştirilebilir bir yapı Snackbar, örneğin uygulamanızda konum servislerine erişmeniz gerekiyorsa ya da bluetooth’u açmanız gerekiyorsa bu servislerin aktif olup olmadığını kontrol ettikten sonra, eğer aktif değillerse kullanıcının uygulamadan çıkmadan bunları Snackbar üzerinden kullanıcıya uyarı verebilirsiniz (Düzeltme için Said Tahsin Dane’ye teşekkürler.. Şu an ki uygulamamda ben mesela RecyclerView’ın bir satırının geri silmesini durumunda kullanıcıya yaptığı işlemi geri almayı isteyip istemediğini sormak için kullanıyorum.

Snackbar.make(YourLayout, "Your message", Snackbar.LENGTH_SHORT)
.setAction(getString(R.string.text_undo), this)
.show();

Yukarıda ki kod örneği Snackbar’ı uygulamamızda göstermeye ve kullanmaya yarar. Uygulamamız sırasında bir çok arada kod yazıp kod akışını bozmanın önüne Snackbar sayesinde erişmiş oluruz. Ayrıca biraz ileri seviye olacak belki ama Snackbar’ın kendisine hazır olaraktan Callback set edilebilmekte onunda farklı event’lerini ihtiyaçlarınız doğrultusunda özelleştirebilirsiniz.


Bir diğer yeni özelliğimiz için sizleri şöyle alalım….

Floating Action Button

https://www.google.com/design/spec/components/buttons-floating-action-button.html#

Yukarıda ki şekilde sağ alt tarafta gördüğünüz kırmızı buton’un adı Floating Action Button. Android Design Support Library’nin bize getirdiği bir başka güzel çok amaçlı yapı. Kendi dilediğiniz gibi özelleştirmeniz mümkün. Örneğin bir film tavsiye uygulamasında tek bir dokunma ile favori olarak eklediğiniz filmlerinize uygulamanın her neresinde olursanız olun erişebilmenizi, bir e-ticaret uygulamasında alışveriş esnasında dolan sepetiniz olarak ya da en basitinden bir listeye yeni bir item eklemek için kullanabilirsiniz. Aslında bu kullanımlar tamamen size kalmış ben sadece fikir vermek için bir iki örnek veriyorum.


Floating Action Button’ı normal ve mini olmak üzere iki farklı boyut tipinde kullanabilirsiniz. Bunun için fabSize attribute’ünü kullanmanız gerekli.

Normal (56dp) : Genellikle bu kullanılır default olarak gelir.

Mini(40dp) : Diğer design ögeleri yüzünden ekrana yeterli alan yoksa mini boyutu kullanılabilir.


Floating Action Button default olarak colorAccent rengini kullanır ama siz bunu backgroundTint attribute’ünü kullanarak kolayca değiştirebilirsiniz.


  • src attribute’ü sayesinde ise Floating Action Button’ın icon’unu özelleştirebilirsiniz.

Layout’unuza eklemek için gerekli olan kod ise aşağıda ki gibidir.

<android.support.design.widget.FloatingActionButton
android:id=”@+id/fab”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:src=”@drawable/ic_plus”
app:fabSize=”normal” />

EditText Floating Labels

TextInputLayout sayesinde EditText’imizi artık sarmallayabiliyoruz. Bu sayede herhangi bir EditText Field’ına tıklandığı zaman o field’a focuslanırız ve sarmalayıcı yapı aşağıdaki gibi bir reaksiyon verir.

İmplementasyonu için sadece EditText’i aşağıdaki kod örneğindeki gibi sarmallamanız yeterli.

<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">

<EditText
android:id="@+id/edit_text_email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
android:hint="@string/hint_email" />

</android.support.design.widget.TextInputLayout>

Bu yapının getirdiği en büyük kolaylıklardan biriside sanırım Error mesajlarını göstermenin son derece kolay bir hale gelmiş olması. Aşağıdaki kodlar eklemeniz yeterli. (Aslında değil!)

setErrorEnabled(true);
setError(getString(R.string.text_error_message));

Uygulamada kullanıcı giriş yaparken error yazılarının kaybolmasını ya da sizin özel senaryonuza göre tepki vermesini istiyorsanız TextWatcher hakkında küçük bir araştırma yapsanız iyi olur. Ben anlatmak isterdim ama o zaman konunun özünden çok uzaklaştığımız için tepkiler geliyor. Ben bir şey derim ama neyse…

Coordinator Layout

Coordinator Layout bizim diğer layout’ların hareketlerine göre başka layoutlarımızın verdiği hareket tepkilerini organize eden layout’dur. Bu olmasaydı eğer örneğin Snackbar açıldığı zaman Floating Action Button’ımız hareketini Snackbar’a göre ayarlayamazdı ya da diğer layout’larda üst üste binmeler olurdu. O görsel hareket algısı sağlanamazdı. Bu özelliklerin sağlanabilmesi için Coordinator Layout’umuz root elementimiz olmak zorunda. Aşağıda açıkladığım senaryoya güzel bir örnek var.

Bu özellikleri kullanabilmek için en son çıkan Support Library’e dependenciy’lerinizi update ettiğinizden emin olun lütfen.

Yukarıdaki yapının sağlanabilmesi için Floating Action Button’ımız CoordinatorLayout’un child’ı olmak zorunda ve layout_gravity’sinin doğru bir şekilde tanımlanmış olması gerekir. Aşağıda ilgili kod örneği bulunmaktadır.

<android.support.design.widget.CoordinatorLayout
android:id="@+id/main_content">
<!-- Your other views -->
<android.support.design.widget.FloatingActionButton
android:id=”@+id/fab_normal”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:src=”@drawable/ic_plus”
android:layout_gravity="bottom|right"
app:fabSize=”normal” />
</android.support.design.widget.CoordinatorLayout>

Şimdi Snackbar’ımızı yaratırken sadece constructor parametresi olarak CoordinatorLayout’u geçirmemiz yeterli.

Snackbar.make(mCoordinator, "Your message", Snackbar.LENGTH_SHORT)
.show();

Bu yazı dizisini üçleme olarak sonlandırıyorum. Başka yazılarda görüşmek dileği ile.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.