Android Programlama Relative Layout Kullanımı

Merhabalar Arkadaşlar,

Bugünkü yazımda sizlere Android programlamada layout çeşitlerinden biri olan Relative Layout kullanımından bahsedeceğim. Hazırsanız vakit kaybetmeden haydi başlayalım 🙂

Relative Layout Nedir ?

Relative kelimesi İngilizcede “göreceli” anlamına gelmektedir. Bu düzende kontroller salt bir şekilde yatay veya dikey konumdan ziyade birbirlerine göre hizalanırlar. Tasarımda esneklik oldukça yüksektir. Ama Constraint Layout kadar esnek olamaz 🙂 İlerleyen yazılarda onunla ilgilide bir ders yapmayı düşünüyorum. Android dökümanında şu not dikkat çekici : Daha iyi performans ve takım desteği için, düzeninizi ConstraintLayout ile oluşturmalısınız.

İstediğiniz bir kontrolün sağına, soluna, üstüne veya altına yeni bir kontrol ekleyebilirsiniz.

Aşağıdaki özellikleri birçok uygulamada kullanıldığı için incelemenizi tavsiye ederim :

  • android:layout_alignParentTop: True ve false olmak üzere iki değer alır. Eğer true ise bulunduğun düzenin en üstüne yerleştirilir.
  • android:layout_alignParentBottom : True değeri verildiğinde bulunduğu düzenin en altına yerleştirilir.
  • android:layout_alignParentLeft : True değeri verildiğinde bulunduğu düzenin en soluna yerleştirilir.
  • android:layout_alignParentRight : True değeri verildiğinde bulunduğu düzenin en sağına yerleştirilir.
  • android:layout_centerHorizontal : True değerini aldığında yatay da ortalanır.
  • android:layout_centerVertical : True değerini aldığında dikey de ortalanır.
  • android:layout_centerInParent : True değerini aldığında bulunduğu düzene ortalanır.
  • android:layout_alignParentStart : True değerini aldığında bulunduğu düzendeki satırın başlangıç kısmında gösterilir.
  • android:layout_alignParentEnd : True değerini aldığında bulunduğu düzendeki satırın sonunda gösterilir.
  • android:layout_below :ID bilgisi verilen görünümün altına yerleştirilir.
  • android:layout_toLeftOf : ID bilgisi verilen görünümün soluna yerleştirilir.
  • android:layout_toRightOf : ID bilgisi verilen görünümün sağına yerleştirilir.
  • android:layout_toEndOf : ID bilgisi verilen görünümün sonuna yerleştirilir.
  • android:layout_toStartOf : ID bilgisi verilen görünümün başına yerleştirilir.
  • android:layout_alignBottom : ID bilgisi verilen görünümün altı ile aynı hizada hizalanır. Alt bölümü referansa göre genişletilir veya daraltır.
  • android:layout_alignLeft :  ID bilgisi verilen görünümün solu ile aynı hizada hizalanır. Sol bölümü referansa göre genişletir veya daraltır.
  • android:layout_alignRight :  ID bilgisi verilen görünümün sağı ile aynı hizada hizalanır. Sağ bölümü referansa göre genişletir veya daraltır.
  • android:layout_alignTop :  ID bilgisi verilen görünümün üstü ile aynı hizada hizalanır. Üst bölümü referansa göre genişletir veya daraltır.
  • android:layout_alignStart : ID bilgisi verilen görünümün başlangıcını baz alarak hizalanır.
  • android:layout_alignEnd:  ID bilgisi verilen görünümün sonunu baz alarak hizalanır.
  • android:layout_alignBaseline :ID bilgisi verilen görünümün içeriği ile aynı hizada hizalanır.

Not  : Bu düzen ile çalışırken her kontrol için mutlaka bir ID bilgisi tanımlamayı unutmamak gerekir. Kontrollerin birbirlerine göre hizalanabilmeleri için ID bilgisine ihtiyaç duyulur. Kontroller bu bilgiyi baz alınarak hizalanır.

Relative Layout ile ilgili teknik bilgileri öğrendikten sonra artık örneğimize geçebiliriz.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Button 1"/>

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_above="@id/button1"
        android:text="Button 2"/>

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_below="@id/button1"
        android:text="Button 3"/>

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@id/button1"
        android:text="Button 4"/>
    
    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toLeftOf="@id/button1"
        android:text="Button 5"/>
    
</RelativeLayout>

Tasarımımızı yaptık. Aşağıdaki gibi gözükecektir.

android:layout_centerInParent : true değerini aldığı için düzenin ortasına yerleştirildi. (Button-1 için)

android:layout_above : true button-2 kontrolü, button-1 kontrolünün üstüne yerleştirilir.(Button-2 için)

android:layout_below : button3 kontrolü, button1 kontrolünün altına yerleştirilir.(Button-3 için)

android:layout_centerVertical : true değeri verildiği için dikeyde ortalanır.(Button-4 için)

android:layout_toLeftOf : button-5 kontrolü, button-1 kontrolünün soluna yerleştirilir.(Button-5 için)

Projenin kodlarına aşağıdaki adresten ulaşabilirsiniz :

https://github.com/halilozel1903/AndroidProjects/tree/master/RelativeLayout

Evet arkadaşlar yazımızın sonuna geldik. Bir sonraki yazıda görüşmek üzere. Kendinize iyi bakın 🙂


Yararlandığım Kaynaklar : 

  1. https://developer.android.com/guide/topics/ui/layout/relative
  2. https://www.udemy.com/android-studio-ile-uygulama-gelistirme-egitimi-1
  3. https://www.kitapyurdu.com/kitap/android-programlama-ve-uygulama-rehberi/411149.html

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir