Skip to main content

Chat ui örneği – Android Programlama XML yapısı

Bu yazımızda Android’in XML yapısından bahsedeceğiz ve basit bir chat arayüzü( chat ui ) oluşturmaya çalışacağız.

xml:

Extensible Markup Language (Genişletilebilir İşaretleme Dili, kısaca XML) kendi etiketlerinizi oluşturabildiğiniz ve kullanabildiğiniz bir yapıdır.

layout:

Android uygulamalarda gördüğümüz ekran tasarımları genelde xml ile yapılır . XML içerisinde genellikle 2 farklı yerleşim tipi vardır RelativeLayout ve LinearLayout.

LinearLayout ve RelativeLayout :

LinearLayout yerleşimi kullanıldığında içerisine yazdığımız etiketler yatay(horizontal) ya da dikey(vertical) olarak yerleşim sağlar.
RelativeLayout yerleşimi kullanıldığında ise etiketler diğer etiketlere göre yerleşim sağlar.

Yeni bir android projesi oluşturduktan sonra res klasörü içerisinde bir layout klasörü olacaktır . Burada fragment_message.xml adında bir dosya oluşturalım ve içerisine aşağıdakileri yazalım :

fragment_message.xml

<?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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#fff">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <ImageView
            android:id="@+id/search"
            android:layout_width="25dp"
            android:layout_height="25dp"
            app:srcCompat="@drawable/search"
            android:layout_margin="10dp" />
        <EditText
            android:id="@+id/searchText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/search"
            android:hint="Ara"
            android:background="@android:color/transparent"
            android:layout_marginTop="10dp"/>
    </RelativeLayout>
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Mesajlar"
            android:layout_margin="20dp"
            android:textSize="15sp"
            android:fontFamily="sans-serif-black"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Tüm Mesajları Sil"
            android:layout_alignParentEnd="true"
            android:layout_margin="20dp"
            android:textColor="@color/colorAccent"/>
    </RelativeLayout>
</LinearLayout>

Burada en dışta bir LinearLayout bulunmaktadır ve android:orientation="vertical"‘ olarak belirlemişiz yani bu LinearLayout içerisinde ki tüm layout ve etiketler dikey olarak yerleşecektir.

Aşağıda width(genişlik) ve height(yükseklik) kavramlarını "match_parent" olarak belirlemişiz. Yani kendisinin üstündeki layout kadar genişlemesini istemişiz ve bunun dışında başka bir layout olmadığı için genişlik ve yükseklik ekranın genişliği ve yüksekliği kadar olacaktır.

android:layout_width="match_parent"
android:layout_height="match_parent"

En üstte bulunan Arama bölümüyle başlayalım buranın’da genişliği "match_parent" yani dıştaki LinearLayoutun genişliği kadar yüksekliği ise "wrap_content" yani yüksekliği içerideki elemanların en uzun olanın yüksekliği kadardır . İçerisinde 2 adet etiket var ImageView ve EditText

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <ImageView
            android:id="@+id/search"
            android:layout_width="25dp"
            android:layout_height="25dp"
            app:srcCompat="@drawable/search"
            android:layout_margin="10dp" />
        <EditText
            android:id="@+id/searchText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/search"
            android:hint="Ara"
            android:background="@android:color/transparent"
            android:layout_marginTop="10dp"/>
    </RelativeLayout>

ImageView , androidin hazır bulunan bir xml veya png formatında ki resmi çeken bir component’tir. Burada yüksekliği ve genişliği 25dp olarak ayarlanmış ve android:layout_margin="10dp" yani dış boşluk 10dp olarak ayarlanmış. Burada ki android:id="@+id/search" kavramı çok önemlidir. Her etiketin bir benzersiz kimliği olmalıdır ki daha sonradan RelativeLayout içerisinde yerleşim yaparken diğer etiketlere bu kimlik ile konum verelim. Son olarak da app:srcCompat="@drawable/search" kavramı ile res dosyamızın içerisinde drawable klasöründe bulunan search.xml yada search.png ile ImageView’ a bir resim yüklemişiz.

        <ImageView
            android:id="@+id/search"
            android:layout_width="25dp"
            android:layout_height="25dp"
            app:srcCompat="@drawable/search"
            android:layout_margin="10dp" />

Androidin başka bir hazır etiketi olan EditText , düzenlenebilir yani kullanıcıdan yazı girmesini beklediğimiz bir bileşendir. Burada genişliğini Layout boyutu kadar yüksekliğini içerisindeki yazı boyutu kadar yaptık . android:layout_toRightOf="@id/search" yukarda bahsetmiş olduğumuz id işte burada devreye giriyor. Burada oluşturduğumuz EditText bileşeninin başlangıcının id’si search olanın sağında olması gerektiğini belirtiyoruz. Yani kısacası EditText’imiz ImageView’imizin sağında olsun dedik.Son olarak android:hint="Ara" ile EditTextimize bir ipucu verdik.

    <EditText
        android:id="@+id/searchText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/search"
        android:hint="Ara"
        android:background="@android:color/transparent"
        android:layout_marginTop="10dp"/>

Şimdilik bu yazımızda Layout’ların ve içerisindeki elementlerin çalışma mantığı ve aldıkları bazı özelliklerden bahsettik diğer yazılarımızı takip ederek aşağıdaki gibi komple bitmiş bir chat ui benzerini sizde yapabilirsiniz. Çalışmalarınızda başarılar dilerim .

Android hakkında daha fazla döküman için burayı ziyaret edebilirsiniz.
Kodlar.Net ‘ i takip ederek android hakkında daha fazla türkçe kaynağa ulaşabilirsiniz.

chat ekranı örneği

Emre Sualp

Kocaeli Üniversitesi Bilgisayar Mühendisliği 4. sınıf öğrencisiyim .Java , Javascript ve Android programlama ile ilgileniyorum.Bildiklerimi aktarmak ve yeni öğrendiğim konuları pekiştirmek için yazılarımı sizlerle paylaşacağım.

Bir cevap yazın

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