Open in app

Sign in

Write

Sign in

Android Responsive Tasarım Nasıl Yapılır? : Oran-Orantı!

Muhammed Burak Çakır
Android Türkiye
9 min readSep 5, 2019

--

Merhabalar, Layout ile ilgili ilk yazımda Layout kavramını ve Layout türlerini sizlere tanıtmıştım. Geçmiş yazım, şuan yapacağım tasarımı ve kullanacağım layoutları anlamak açısından büyük önem taşıyor. Responsive tasarıma geçmeden önce ilk yazımı okumanızı tavsiye ediyorum.

NOT: Yazımı ilk yayınladıktan sonra gelen yorumlara yönelik bir not eklemek durumundayım. Tasarımda her bir komponent için kullandığım RelativeLayoutları şart olduğu için değil, oran-orantı düzenini giriş seviyesinde doğru anlatabilmek için kullandım. RelativeLayout’ları sadece tasarımın ana düzenini kurgulamak için de kullanabilirsiniz. Bundan sonrası için LinearLayout yeterli olacaktır.

Bu yazımda sizlere Responsive tasarımı açıklayıp bir tasarım örneği hazırlamak istiyorum.

Responsive Tasarım Nedir?

Responsive kelimesinin Türkçe’de farklı karşılıkları olsada, burada belirtmek istediğimiz anlam “uyumlu”dur. Kelime anlamından da anlayabileceğimiz gibi Responsive tasarım, temel olarak farklı ekran çözünürlüklerine göre uyum sağlayabilen tasarımlardır.

Eskiden mobil cihazlarımızdan ve tabletlerden web sitelerine girdiğimizde, siteler cihazımıza uyumsuz olabiliyor; menüye ulaşmayı, tıklama yapmayı dahi zorlaştırıyordu. Zamanla daha fazla tercih edilen Responsive tasarımlar sayesinde insanlar mobil alan adı almadan da sitelerini farklı çözünürlüklere uyumlu olarak tasarlayarak bu siteleri farklı cihazlarla düzgün görüntülenir hale getirebiliyorlar. Böylece fontlar, resimler, diğer “component”ler farklı çözünürlüklere hazır hale geliyor.

Böylece ileride karşımıza çıkabilecek tasarım uyuşmazlıklarını doğrudan engellemiş oluyoruz.

Android için Responsive Tasarım

Mobil uygulamalarımızı tasarlarken, farklı layout kullanımları, hizalama eksiklikleri projemizin tasarlandığı orijinal tasarımda dahi zorluklar çıkartabilir.

Responsive tasarımı kullanarak bunu ortadan kaldıracağız.Ben yazımda tasarımı oran-orantı düzeni kurarak hazırlayacağım. Yazımda her adımı detaylıca açıklayıp tasarımı anlaşılabilir hale getirmeyi hedefliyorum.

Önceki yazımda bolca kod paylaşmak durumunda kaldığımdan Github Gist ile sorunlar yaşamıştım. Bu sefer böyle bir sorun yaşanmaması açısından kodlarımı Medium kod blokları içinden paylaşacağım. Kodları ise değişiklik yapılan bölge yerine ilerledikçe bütün şekilde atacağım. Bu şekilde adımlarımı takip edebileceksiniz.

Hazırsanız Responsive tasarıma başlayalım.

Öncelikle dribbble üzerinden kendime bir tasarım seçiyorum. Aşağıdaki tasarım oldukça hoşuma gitti açıkcası.

Daily Ui Challenge 028 - Contact Page

This prompt was to create a Contact page. Most of the contact pages that I've seen are pretty boring, so I wanted to…

dribbble.com

Evet, tasarlayacağımız ekran tam olarak bu :)

Tasarıma başlamadan önce en önemli konu bununla ilgili taslak hazırlamaktır.

Burada görseli, yazıları, ve ikonları ayrı ayrı yönetmek son derece mantıklı olacaktır. İleride yapılacak değişmelerde de diğer alanların etkilenmesini engelleyebiliriz.

Adım 1- Tasarımımızın ana Layout’unu LinearLayout olarak belirleyelim ve background ekleyelim.

Burada kullanacağımız renk kodu “#009BFF”.

<?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:background="#009BFF">

</LinearLayout>

Adım 2- Projemizi yukarıda bahsettiğimiz gibi görseli, yazıları ve ikonları ayıracak şekilde üçe bölmeliyiz. Bu anlamda projemize 3 tane RelativeLayout ekleyelim ve oranlarını belirleyelim.

En baştaki görsel ekranımızın yarısını kaplamakta.Bu sebeple layout_weight özelliğini “0.5” olarak ayarlayalım.

Ortadaki yazılarımız ekranın %35'ini kaplamaktadır. Bu sebeple layout_weight özelliğini “0.35" olarak ayarlayalım.

İkonlarımız ekranın %15'ini kaplamaktadır. Bu sebeple weight özelliğini “0.15” olarak ayarlayalım.

Bu oranları temel anlamda tasarımı inceleyerek kurdum. Bu durum, tasarımcı tarafından size net oranlar iletilmediğinde değişebilir sayılardır fakat oranlar genel olarak böyle olacaktır.

<?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:background="#009BFF"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="0.5">

    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="0.35">

    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="0.15">

    </RelativeLayout>
</LinearLayout>

Adım 3- Projemizin temel taslağını oluşturduk. Artık RelativeLayout’ların tasarımlarına başlayabiliriz. En başta görselimiz var, görselimizi layouta yerleştirelim ve ortalayalım.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#009BFF"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="0.5"
        android:gravity="center">

        <ImageView
            android:id="@+id/imgLogo"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:srcCompat="@drawable/logo" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="0.35">

    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="113dp"
        android:layout_weight="0.15">

    </RelativeLayout>
</LinearLayout>
Logo Design-1

Farkedeceğiniz gibi ImageView’e gravity vermek yerine onu kapsayan RelativeLayout’a verdik, ileride görsel değişse bile otomatik olarak layoutun özelliklerini kazanacak. Fakat hâlâ istediğimiz gibi olmadı. Biz görselin ortaya hizalanmasını ve ayrıca kenarlarından boşluk bırakılmasını istiyoruz. Üst, sağ ve sol kenarlardan 40dp padding değeri verelim.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#009BFF"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="0.5"
        android:gravity="center"
        android:paddingLeft="40dp"
        android:paddingTop="40dp"
        android:paddingRight="40dp">

        <ImageView
            android:id="@+id/imgLogo"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:srcCompat="@drawable/logo" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="0.35">

    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="113dp"
        android:layout_weight="0.15">

    </RelativeLayout>
</LinearLayout>
Logo Design-2

Görsel hizalamasını tamamlamış olduk.

Adım 4- Ortadaki RelativeLayout (yazıları kapsayan) tasarımı ile devam edelim. Alt alta veri hizalayacağımız için LinearLayout ekleyelim ve değişiklik yapmamızı kolaylaştıracak şekilde

  • Contact
  • Adres
  • Email bilgilerini ayrı ayrı RelativeLayout ile kapsayarak tasarlayalım.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#009BFF"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="0.5"
        android:gravity="center"
        android:paddingLeft="40dp"
        android:paddingTop="40dp"
        android:paddingRight="40dp">

        <ImageView
            android:id="@+id/imgLogo"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:srcCompat="@drawable/logo" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="0.35">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="0px"
                android:layout_weight="0.33">

            </RelativeLayout>

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="0px"
                android:layout_weight="0.33">

            </RelativeLayout>

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="0px"
                android:layout_weight="0.33">

            </RelativeLayout>
        </LinearLayout>
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="113dp"
        android:layout_weight="0.15">

    </RelativeLayout>
</LinearLayout>

3 text içinde aynı alanı ayırmamız gerekiyor, bu yüzden layout_weight özelliğini “0.33” olarak ayarladık.

Adım 5- Contact yazımızı tasarlayalım. Burada yapmamız gereken, Contact için oluşturduğumuz RelativeLayout içine bir textView componenti eklemek olacaktır.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#009BFF"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="0.5"
        android:gravity="center"
        android:paddingLeft="40dp"
        android:paddingTop="40dp"
        android:paddingRight="40dp">

        <ImageView
            android:id="@+id/imgLogo"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:srcCompat="@drawable/logo" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="0.35">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="0px"
                android:layout_weight="0.33">

                <TextView
                    android:id="@+id/txtContact"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:text="Contact"
                    android:textColor="#FFFFFF"
                    android:textSize="30sp"
                    android:textStyle="bold" />
            </RelativeLayout>

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="0px"
                android:layout_weight="0.33">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical"/>
            </RelativeLayout>

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="0px"
                android:layout_weight="0.33"/>
        </LinearLayout>
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="0.15">

    </RelativeLayout>
</LinearLayout>

Adım 6- Adres yazımızı tasarlayalım. Burada 2 tane yazımız bulunuyor. Bunları aynı textView içinde de yazabilirdik, ama tasarımı yaparken her zaman estetik, düzenli ve ileriye yönelik düşünmeliyiz. İkisini alt alta textView componentiyle tasarıma dahil edelim. Alt alta hizalamayı doğru yapabilmek için ise LinearLayout ekleyelim.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#009BFF"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="0.5"
        android:gravity="center"
        android:paddingLeft="40dp"
        android:paddingTop="40dp"
        android:paddingRight="40dp">

        <ImageView
            android:id="@+id/imgLogo"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:srcCompat="@drawable/logo" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="0.35">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="0px"
                android:layout_weight="0.33">

                <TextView
                    android:id="@+id/txtContact"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:text="Contact"
                    android:textColor="#FFFFFF"
                    android:textSize="30sp"
                    android:textStyle="bold" />
            </RelativeLayout>

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="0px"
                android:layout_weight="0.33">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical">

                    <TextView
                        android:id="@+id/txtAddress1"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="101 North Road"
                        android:textColor="#FFFFFF"
                        android:textSize="18sp" />

                    <TextView
                        android:id="@+id/txtAddress2"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="Chicago, IL 90388"
                        android:textColor="#FFFFFF"
                        android:textSize="18sp" />
                </LinearLayout>
            </RelativeLayout>

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="0px"
                android:layout_weight="0.33"/>
        </LinearLayout>
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="0.15">

    </RelativeLayout>
</LinearLayout>

Adım 7- Email yazımızı tasarlayalım. Burada yazıları tasarlamak için kullandığımız bölümündeki son RelativeLayout’u kullanacağız. Burada bir textView kullanmamız yeterli olacaktır.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#009BFF"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="0.5"
        android:gravity="center"
        android:paddingLeft="40dp"
        android:paddingTop="40dp"
        android:paddingRight="40dp">

        <ImageView
            android:id="@+id/imgLogo"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:srcCompat="@drawable/logo" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="0.35">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="0px"
                android:layout_weight="0.33">

                <TextView
                    android:id="@+id/txtContact"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:text="Contact"
                    android:textColor="#FFFFFF"
                    android:textSize="30sp"
                    android:textStyle="bold" />
            </RelativeLayout>

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="0px"
                android:layout_weight="0.33">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical">

                    <TextView
                        android:id="@+id/txtAddress1"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="101 North Road"
                        android:textColor="#FFFFFF"
                        android:textSize="18sp" />

                    <TextView
                        android:id="@+id/txtAddress2"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="Chicago, IL 90388"
                        android:textColor="#FFFFFF"
                        android:textSize="18sp" />
                </LinearLayout>
            </RelativeLayout>

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="0px"
                android:layout_weight="0.33">

                <TextView
                    android:id="@+id/txtMail"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="contact@company.com"
                    android:textColor="#FFFFFF"
                    android:textSize="18sp" />
            </RelativeLayout>
        </LinearLayout>
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="0.15">

    </RelativeLayout>
</LinearLayout>

Yazılarımız kenara yapıştı, görsel ile hizalı olmadı ve bu şekilde kötü duruyor. Bunu nasıl çözebiliriz? Tüm RelativeLayoutlara hizalama yaparak mı? Tasarıma hakim olamadığımız dönemde bunu bir çözüm olarak görsek bile ileride bu tasarımı karıştırıp ne yaptığımızı anlamamaya sebep oluyor.

Ben burada yazıların olduğu kısmı hizalamak istiyorum. Zaten onları kapsayan bir RelativeLayout’um vardı. Ona padding vererek hizalamamı gerçekleştirebilirim. Yazıların görselden çok az daha içeride olduğunu görebiliriz. Bu sebeple, 10dp fazladan padding vermek istiyorum. Görseli kapsayan layouta 40dp padding vermiştim, yazılar için sağdan ve soldan 50dp olacak. Üst kısımdan ise 20dp padding vermeyi tercih ediyorum.

Böylece, tasarımları parçalamanın önemini anlayabiliriz. Birçok hizalamayı tek hamle ile yapabileceğiz.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#009BFF"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="0.5"
        android:gravity="center"
        android:paddingLeft="40dp"
        android:paddingTop="40dp"
        android:paddingRight="40dp">

        <ImageView
            android:id="@+id/imgLogo"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:srcCompat="@drawable/logo" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="0.35"
        android:paddingLeft="50dp"
        android:paddingTop="20dp"
        android:paddingRight="50dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="0px"
                android:layout_weight="0.33">

                <TextView
                    android:id="@+id/txtContact"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:text="Contact"
                    android:textColor="#FFFFFF"
                    android:textSize="30sp"
                    android:textStyle="bold" />
            </RelativeLayout>

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="0px"
                android:layout_weight="0.33">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical">

                    <TextView
                        android:id="@+id/txtAddress1"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="101 North Road"
                        android:textColor="#FFFFFF"
                        android:textSize="18sp" />

                    <TextView
                        android:id="@+id/txtAddress2"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="Chicago, IL 90388"
                        android:textColor="#FFFFFF"
                        android:textSize="18sp" />
                </LinearLayout>
            </RelativeLayout>

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="0px"
                android:layout_weight="0.33">

                <TextView
                    android:id="@+id/txtMail"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="contact@company.com"
                    android:textColor="#FFFFFF"
                    android:textSize="18sp" />
            </RelativeLayout>
        </LinearLayout>
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="0.15">

    </RelativeLayout>
</LinearLayout>
Text Design

Adım 8- Artık ana tasarımımızda bulunan son RelativeLayout’a geçebiliriz. Burada yapacağımız ikonları sıralamaktır. Bu sıralamayı düzgün yapabilmek için LinearLayout kullanabiliriz. Burada componentleri direk LinearLayout içine atabiliriz. Fakat componentlerin yönetimini kolaylaştırmak ve hizalamaları daha doğru yapabilmek için onları yapı içerisine almalıyız. Ben yapı olarak RelativeLayout seçiyorum.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#009BFF"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="0.5"
        android:gravity="center"
        android:paddingLeft="40dp"
        android:paddingTop="40dp"
        android:paddingRight="40dp">

        <ImageView
            android:id="@+id/imgLogo"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:srcCompat="@drawable/logo" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="0.35"
        android:paddingLeft="50dp"
        android:paddingTop="20dp"
        android:paddingRight="50dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="0px"
                android:layout_weight="0.33">

                <TextView
                    android:id="@+id/txtContact"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:text="Contact"
                    android:textColor="#FFFFFF"
                    android:textSize="30sp"
                    android:textStyle="bold" />
            </RelativeLayout>

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="0px"
                android:layout_weight="0.33">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical">

                    <TextView
                        android:id="@+id/txtAddress1"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="101 North Road"
                        android:textColor="#FFFFFF"
                        android:textSize="18sp" />

                    <TextView
                        android:id="@+id/txtAddress2"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="Chicago, IL 90388"
                        android:textColor="#FFFFFF"
                        android:textSize="18sp" />
                </LinearLayout>
            </RelativeLayout>

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="0px"
                android:layout_weight="0.33">

                <TextView
                    android:id="@+id/txtMail"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="contact@company.com"
                    android:textColor="#FFFFFF"
                    android:textSize="18sp" />
            </RelativeLayout>
        </LinearLayout>
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="0.15">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

            </RelativeLayout>

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

            </RelativeLayout>

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

            </RelativeLayout>

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

            </RelativeLayout>
        </LinearLayout>
    </RelativeLayout>
</LinearLayout>

Şimdi ikonları göstereceğimiz imageView componentlerini RelativeLayoutlara yerleştirelim ve gravity özelliğini “center” yaparak onları hizalayalım. Boyutlarını 36dp x 36dp olarak ayarlayacağım. Bu ikonlarda kullanılan boyut oranlarından biridir. İkonlarınız daha büyük veya küçük gözükmesini istiyorsanız örnek olarak; 24dp x 24dp veya 48dp x 48dp değerlerini de kullanabilirsiniz.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#009BFF"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="0.5"
        android:gravity="center"
        android:paddingLeft="40dp"
        android:paddingTop="40dp"
        android:paddingRight="40dp">

        <ImageView
            android:id="@+id/imgLogo"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:srcCompat="@drawable/logo" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="0.35"
        android:paddingLeft="50dp"
        android:paddingTop="20dp"
        android:paddingRight="50dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="0px"
                android:layout_weight="0.33">

                <TextView
                    android:id="@+id/txtContact"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:text="Contact"
                    android:textColor="#FFFFFF"
                    android:textSize="30sp"
                    android:textStyle="bold" />
            </RelativeLayout>

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="0px"
                android:layout_weight="0.33">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical">

                    <TextView
                        android:id="@+id/txtAddress1"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="101 North Road"
                        android:textColor="#FFFFFF"
                        android:textSize="18sp" />

                    <TextView
                        android:id="@+id/txtAddress2"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="Chicago, IL 90388"
                        android:textColor="#FFFFFF"
                        android:textSize="18sp" />
                </LinearLayout>
            </RelativeLayout>

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="0px"
                android:layout_weight="0.33">

                <TextView
                    android:id="@+id/txtMail"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="contact@company.com"
                    android:textColor="#FFFFFF"
                    android:textSize="18sp" />
            </RelativeLayout>
        </LinearLayout>
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="0.15">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <RelativeLayout
                android:layout_width="0px"
                android:layout_height="wrap_content"
                android:layout_weight="0.25"
                android:gravity="center">

                <ImageView
                    android:id="@+id/imgPhone"
                    android:layout_width="36dp"
                    android:layout_height="36dp"
                    app:srcCompat="@drawable/phone" />
            </RelativeLayout>

            <RelativeLayout
                android:layout_width="0px"
                android:layout_height="wrap_content"
                android:layout_weight="0.25"
                android:gravity="center">

                <ImageView
                    android:id="@+id/imgMessage"
                    android:layout_width="36dp"
                    android:layout_height="36dp"
                    app:srcCompat="@drawable/message" />
            </RelativeLayout>

            <RelativeLayout
                android:layout_width="0px"
                android:layout_height="wrap_content"
                android:layout_weight="0.25"
                android:gravity="center">

                <ImageView
                    android:id="@+id/imgMail"
                    android:layout_width="36dp"
                    android:layout_height="36dp"
                    app:srcCompat="@drawable/mail" />
            </RelativeLayout>

            <RelativeLayout
                android:layout_width="0px"
                android:layout_height="wrap_content"
                android:layout_weight="0.25"
                android:gravity="center">

                <ImageView
                    android:id="@+id/imgLocation"
                    android:layout_width="36dp"
                    android:layout_height="36dp"
                    app:srcCompat="@drawable/location" />
            </RelativeLayout>
        </LinearLayout>
    </RelativeLayout>
</LinearLayout>

Boyutları ana tasarımımızla aynı fakat bir sıkıntı var. Alttaki ikonlarımız Contact yazısına hizalı olması gerekirken, onun biraz solunda kalıyor. İkonları kapsayan layouta padding vererek her ikon için ayrıca hizalama ile uğraşmayacağız. Onları kapsayan layouta sağdan ve soldan 25dp padding değeri vereceğiz.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#009BFF"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="0.5"
        android:gravity="center"
        android:paddingLeft="40dp"
        android:paddingTop="40dp"
        android:paddingRight="40dp">

        <ImageView
            android:id="@+id/imgLogo"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:srcCompat="@drawable/logo" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="0.35"
        android:paddingLeft="50dp"
        android:paddingTop="20dp"
        android:paddingRight="50dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="0px"
                android:layout_weight="0.33">

                <TextView
                    android:id="@+id/txtContact"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:text="Contact"
                    android:textColor="#FFFFFF"
                    android:textSize="30sp"
                    android:textStyle="bold" />
            </RelativeLayout>

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="0px"
                android:layout_weight="0.33">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical">

                    <TextView
                        android:id="@+id/txtAddress1"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="101 North Road"
                        android:textColor="#FFFFFF"
                        android:textSize="18sp" />

                    <TextView
                        android:id="@+id/txtAddress2"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="Chicago, IL 90388"
                        android:textColor="#FFFFFF"
                        android:textSize="18sp" />
                </LinearLayout>
            </RelativeLayout>

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="0px"
                android:layout_weight="0.33">

                <TextView
                    android:id="@+id/txtMail"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="contact@company.com"
                    android:textColor="#FFFFFF"
                    android:textSize="18sp" />
            </RelativeLayout>
        </LinearLayout>
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="0.15"
        android:paddingLeft="25dp"
        android:paddingRight="25dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <RelativeLayout
                android:layout_width="0px"
                android:layout_height="wrap_content"
                android:layout_weight="0.25"
                android:gravity="center">

                <ImageView
                    android:id="@+id/imgPhone"
                    android:layout_width="36dp"
                    android:layout_height="36dp"
                    app:srcCompat="@drawable/phone" />
            </RelativeLayout>

            <RelativeLayout
                android:layout_width="0px"
                android:layout_height="wrap_content"
                android:layout_weight="0.25"
                android:gravity="center">

                <ImageView
                    android:id="@+id/imgMessage"
                    android:layout_width="36dp"
                    android:layout_height="36dp"
                    app:srcCompat="@drawable/message" />
            </RelativeLayout>

            <RelativeLayout
                android:layout_width="0px"
                android:layout_height="wrap_content"
                android:layout_weight="0.25"
                android:gravity="center">

                <ImageView
                    android:id="@+id/imgMail"
                    android:layout_width="36dp"
                    android:layout_height="36dp"
                    app:srcCompat="@drawable/mail" />
            </RelativeLayout>

            <RelativeLayout
                android:layout_width="0px"
                android:layout_height="wrap_content"
                android:layout_weight="0.25"
                android:gravity="center">

                <ImageView
                    android:id="@+id/imgLocation"
                    android:layout_width="36dp"
                    android:layout_height="36dp"
                    app:srcCompat="@drawable/location" />
            </RelativeLayout>
        </LinearLayout>
    </RelativeLayout>
</LinearLayout>

Bu yazımda size Responsive tasarımı Google tasarım örneğiyle anlattım. Bir sonraki yazımda ise tasarımı farklı bir yolla yapmayı sağlayan SDP kütüphanesini ve avantajlarını anlatacağım. SDP kütüphanesi ile de bir tasarım örneği anlatmayı hedefliyorum.

Projenin kaynak kodları:

mburakcakir/ResponsiveDesignIntro

You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or…

github.com

Faydalı olması dileğiyle.

Android
Responsive Design
UI
Layout
Design Process

--

--

Muhammed Burak Çakır
Android Türkiye

Written by Muhammed Burak Çakır

169 Followers
Editor for

Android Developer @Loodos https://www.linkedin.com/in/mburakcakir/

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams