Material Design ile Android Design Support Library Kullanımı

Tuğba Üstündağ —  28 Ağustos 2015 — 2 Comments

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ç..

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 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.

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/

Tuğba Üstündağ

Tuğba Üstündağ

Posts Twitter Facebook

Bahçeşehir Üniversitesi Bilgisayar Tekn. ve Programlama bölümü mezunuyum. Yaklaşık 3,5 yıl Php programlama diliyle Web yazılımları geliştirdim. Android yazılımına yeni başlayan insanlara yardımcı olmak amacıyla oluşturduğum blogumda ve Geleceğiyazanlar Turkcell mobil platformunda makaleler yazmaktayım. Ayrıca Geleceğiyazanlar Turkcell mobil platformunda yardıma ihtiyacı olanların sorularına cevap vererek, yazılım sektöründe çalışanlara, kendilerini geliştirme konusunda katkı sağlamaktayım. Uzun zamandırda Android ile ilgili Push Notification,Broadcast Receivers,Restful Webservis, Database islemleri, Servis programlama,Widget gibi konuları içeren uygulamalar yapıyorum.

2 responses to Material Design ile Android Design Support Library Kullanımı

  1. Design support library ile ilgili harika bir kaynak. Tebrik ediyorum.

  2. Teşekkürler bilgiler için güzel anlatım kendi projeme entegre edeceğim umarım

Yorum yapmak için