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.

compile 'com.android.support:appcompat-v7:22.2.1'
compile 'com.android.support:design:22.2.1'

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:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:orientation="vertical">
    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Username" />
    </android.support.design.widget.TextInputLayout>

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

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Password" />
    </android.support.design.widget.TextInputLayout>
</LinearLayout>

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:

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/rootLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fabBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|right"
            android:layout_marginBottom="@dimen/fab_margin_bottom"
            android:layout_marginRight="@dimen/fab_margin_right"
            android:src="@drawable/flower"
            app:borderWidth="0dp"
            app:fabSize="normal" />

    </android.support.design.widget.CoordinatorLayout>
</android.support.v4.widget.DrawerLayout>

ve sonuç..

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:

CoordinatorLayout rootLayout = (CoordinatorLayout) findViewById(R.id.rootLayout);
Snackbar.make(rootLayout, "Bu bir Snackbar...:)", Snackbar.LENGTH_LONG)
       .setAction("Action!", new View.OnClickListener() {
        @Override
           public void onClick(View v) {
              Log.w("App", "Action!");
           }
        } )
        .show();

Xml kodumuz:

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/rootLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        
    </android.support.design.widget.CoordinatorLayout>
</android.support.v4.widget.DrawerLayout>

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.

<android.support.design.widget.CoordinatorLayout >
    <android.support.design.widget.AppBarLayout >
        <android.support.design.widget.CollapsingToolbarLayout >
            <ImageView />
            <android.support.v7.widget.Toolbar />
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
    <!-- Your scrollable content here -->
</android.support.design.widget.CoordinatorLayout>

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

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/rootLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="@dimen/app_bar_height"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsingToolbarLayout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:contentScrim="?attr/colorPrimary"
                app:expandedTitleMarginStart="@dimen/expanded_toolbar_title_margin_start"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:scaleType="centerCrop"
                    android:src="@drawable/banner"
                    app:layout_collapseMode="parallax"
                    app:layout_collapseParallaxMultiplier="0.7" />
                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:layout_collapseMode="pin"
                    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                    />
            </android.support.design.widget.CollapsingToolbarLayout>
        </android.support.design.widget.AppBarLayout>

        <android.support.v4.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">
                <Button
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Nature"
                    />
                <Button
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Mountain"
                    />
                <Button
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Trees"
                    />
                <Button
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Animal"
                    />
                <Button
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Clouds"
                    />
                <Button
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Sea"
                    />
                <Button
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Waterfall"
                    />
            </LinearLayout>
        </android.support.v4.widget.NestedScrollView>
    </android.support.design.widget.CoordinatorLayout>
</android.support.v4.widget.DrawerLayout>

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/