Material Design ile Android Design Support Library Kullanımı

Kullanıcı arayüz tasarımına sahip yazılım projelerinde görsellik ve kullanıcının dikkatini çekecek öğeler çok önemlidir. Bu yüzden bu yazıda size Material Design konusunun içerdiği yeni Android 5.1.1 sürümüyle gelen Android Design Support Library kullanarak çok basit bir şekilde, android projeye farklı animasyonlar ve arayüzler oluşturmayı örnekleyerek göstereceğim. Böylelikle kullanıcıya farklı arayüz deneyimleri sağlamış olacaksınız.

Android 5.0 sürümüyle birlikte Material Design kavramı ortaya çıkmıştır. Material Design ile Android uygulamalarımızda farklı animasyonlu görseller yapmamızı sağlamaktadır. Bu animasyonlardan birini “Android Lollipop ‘da Reveal Animasyonu” makalemi inceleyerek bilgi edinebilirsiniz.

İsterseniz ilk önce Android Design Support Library ile ilgili arayüz örneğimizin nasıl sonuçlandığına bakalım.

Sonucun sizi baya etkilediğini duyar gibiyim. 🙂 Bu yüzden bir an önce örneğimizi anlatmaya başlıcağım.

Android uygulamamızın sağlıklı çalışabilmesi için ilk önce birkaç ayar yapmalıyız.

1- Android projesini oluştururken target Sdk Version Api 22 olmalı

2- Android Studio Ide ile oluşturduğum projemin app dizinin altındaki build.gradle dosyasını açıyoruz. Dependencies kod bloklarının arasına aşağıdaki kodları yerleştirerek Android Design Support kütüphanesini yüklüyoruz.

Design Support Library’de arayüz araçları 2 temel kategoriye ayrılır:

1- Visual components

2- Motion components

1-Visual components

Material Text Input
Material Text Input, Andorid programlamanın temel arayüz elemanlarından biri olan Edittext’i içinde barındıran bir görsel öğedir. Design Support Library ile birlilte gelen ve TextInputLayout şeklinde çağırılan arayüz elemanıdır. Edittext’i tıkladığınızda, Edittext’in hint parametresine verdiğiniz yazıya aşağıdan yukarıya geçişli bir animasyon sağlar.

Örnek xml kodumuz:

ve sonuç…
textinput

Floation Action Button

Floation action button, Material Design ile gelen kullanıcı arayüz bileşenlerinden en başarılı olanıdır. Yazılımcılar Material Design konusunu içermeyen Android sürümlerinde (Android 5.0 öncesi sürümler) bu tarz yuvarlak estetik butonlar oluşturmak istediğinde, üçüncü parti kütüphaneleri birini seçmek zorunda kalıyorlardı. Android 5.1.1 sürümünde Design Support Library’ dan faydalanarak basit xml kodlarıyla artık Floation Action Button arayüzünü oluşturabiliyoruz.

Örnek xml kodumuz:

ve sonuç…
float

Gelişmiş Toast Uyarı Penceresi(Snackbar)

Senelerdir uyarı mesajlarını Android’in Toast denilen arayüz sınıfı ile göstermekteydik. Design Support Library ile birlikte gelen Snackbar, Toast uyarı penceresinin geliştirilmiş hali olan yeni bir kullanıcı arayüz widget’dır. Snackbar ile kullanıcıya görünüm açısından daha fazla işlevsellik sağlayabilirsiniz. Örneğin; Snackbar widget üzerine bir string değer koyarak, o değere tıklanabilir özeliği verebilirsiniz.

Elde edeceğimiz sonuç:

snackbar

Snackbar kullanabilmek için make metodunu kullanırız. Bu metodu kullanabilmek için; 1. parametre ile bir View ya da Layout tanımlanır. Dilerseniz CoordinatorLayout yerine herhangi başka bir view’de tanımlayabilirsiniz. 2. parametre ile bir uyarı mesajı yazılır, 3. parametre ise Snackbar widget’ın ne kadar süre ekranda kalacağını belirler.

setAction metodu ile de Snackbar üzerinde olan bir string değer tıklanabilir özeliği verebilirsiniz. Bunun için metodun 1. parametresine string değer atamalısınız.

Örneğimizin java kodu:

Xml kodumuz:

2-Motion components

Toolbar Animasyonu

Birçok Android geliştirici en basit yol ve minimum kod ile nasıl kaydırma hareketini yaparak(scrolling), parallax resim barındıran toolbarin görünür ya da görünmez animasyon yapılacağını öğrenmek istemektedir. Bu ihtiyacı Design support library Toolbar aracı için ‘Flexible Space with Image‘ adındaki popüler olan tasarım desenlerini oluşturarak karşılar.

Flexible Space with Image‘ kaydırma hareketi (scrolling) tekniğidir. Bu tasarım deseni, Material Design ile birlikte gelmiştir. Örneğin; Whatsapp’daki kişilerin listeleme sayfasında bu teknolojiyi kullanmışlardır.

İlk önce elde edeceğimiz görüntüye bakalım.

toolbar

Layout Yapısı

Toolbar Animasyonunu oluşturmak için aşağıdaki xml hiyerarşi gibi kodlama yapmamız gerekmektedir.

Şimdi ise örneğimizdeki Toolbar animasyonunu sağlayan kodumuzu inceleyelim .

Android Design Support Library kullanarak, Android projeye farklı animasyonlar ve arayüzler oluşturmak işte bu kadar basit…

Dilerseniz örnek projeye Github hesabımdan ulaşabilirsiniz;)

Kaynaklar:

1- http://inthecheesefactory.com/blog/android-design-support-library-codelab/en

2-http://blog.grafixartist.com/toolbar-animation-with-android-design-support-library/

3-http://code.tutsplus.com/articles/overview-of-the-android-design-support-library–cms-24234

4- http://tugbaustundag.com/android-lollipop-da-reveal-animasyonu/

5- http://www.kadinyazilimci.com/material-design-ile-android-design-support-library-kullanimi/

Kategori Genel
Etiketler