Android Ekran Tasarımı (Layout Design) Araçların Kullanımı

Android Ekran Tasarımı Xml Yapısı ve Widgetlar

Android uygulamalarının tasarımları bir xml dosyası içerisinde belirtilen etiketlere göre dizayn edilir. Tüm elemanlar bu xml dosyası içerisinde belirtilir. Genellikle bu dosya activity_main.xml dosyasıdır.

Layoutlar

Layoutlar uygulamamızdaki ekran tasarımını içinde barındıran elemanlardır.

Linear Layoutlar

Dikeysel ve Yataysal layout oluştururlar açma ve kapama etiketleri vardır.

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

	..Diğer widgetlar

</LinearLayout>

Linear Layout (vertical) alt alta

+---------------------------+
| Eleman1                   |
| Eleman2                   |
| Eleman3                   |
|                           |
|                           |
|                           |
+---------------------------+
android:orientation="vertical"

Linear Layout (horizontal) yan yana

+---------------------------+
| Eleman1 Eleman2 Eleman3   |
|                           |
|                           |
|                           |
|                           |
|                           |
+---------------------------+
android:orientation="horizontal"

Şeklinde layout içerisindeki elemanların yan yana mı alt alta mı olacağını belirtebiliriz orientation özellikleri dizilim şeklini belirtmek için kullanılır.

Widgetların Layout Genişlik ve Yükseklikleri

Bir widget eklediğimizde eklediğimiz widgetın ismiyle bir tag açarız. Bu elamanın içerisine ise belirlediğimiz özellikleri gireriz.

android:layout_height:"match_parent"

layout_(height veya width) bize şöyle bir özellik sağlıyor; içerisinde bulunduğu layoutun genişliği kadar yer kapla ya da kendi içerisindeki nesnenin kapladığı alan kadar yer kapla gibi.

match_parent değeri parent(ebeveyn)'nin kapladığı yer kadar büyü demek oluyor. Yani içerisinde bulunduğu elemanın boyutları ne kadarsa o kadar büyüyecektir. Bunu genişlik veya yükseklikte kullanabiliriz.

android:layout_width:"wrap_content"

wrap_content değeri ise bu özelliği yazdığımız elemanın kendisinin kapladığı kadar genişlik ve yükseklikte yer kaplaması gerektiğini belirtiyor.

Widgetların Genişlik ve Yükseklikleri

android:width="200dp"
android:height="40dp"

Bir widget'ın genişlik ve yüksekliğini yukarıdaki gibi ayarlıyabiliriz. Layoutlardaki gibi wrap_content ve match_parent özellikleri yoktur. Sadece bulundukları elemanın genişlik ve yüksekliğini belirtmek için kullanılır.

Değerler yüzde ve pixel olarak ayarlanabilir.

android:width:"200px"

Yukarıda örnektte pixel olarak nasıl kullanılacağı gösteriliyor ancak pixel cinsinden kullanımının tavsiye edilmediğini söylemek isterim. Çünkü uygulamanın çalışacağı platformlar farklı boyutlarda olabilir bu yüzden yüzde üzerinden boyut belirten dp kullanılmalıdır.

Widgetların Görünürlüğü

android:visibility="invisible"

Belirtilen widget görünmez olur.

android:visibility="visible"

Belirtilen eleman görünür olur. Default olarak widgetlar görünür gelecektir.

ScrollView Kullanımı

ScrollView bir layout gibidir. Sayfanıza bir ekranın kapladığınan daha fazla veri koymak istediğinizde iyi bir seçenektir. Uygulamanızdaki verilerin ya da widgetların uzun bir şekilde sayfamızın aşağısına doğru kaydırılmasını istediğimizde kullanılır.

Layoutumuzda ScrollView'i konumlandırdığımız yere scroll ekliyecektir. Yataysal ve dikeysel scroll ekliyebiliriz. ScrollView içerisindeki widgetlar belirtilen sekilde dikeysel yada yataysal şekilde kayrdırılabilir olacaktır.

WIDGETLARI TANIYALIM

TextView

<LinearLayout
	android:orientation="vertical">

	<TextView
		android:layout_width="match_parent"
		android:layout_height="wrap_content"
		android:text="Merhaba Dünya!" />

</LinearLayout>

Yukarıda vertical özelliğine sahip bir linearlayout içerisine nasıl textview ekleneceği gösterilmiştir.

+---------------------------+
| Merhaba Dünya!            |
|                           |
|                           |
|                           |
|                           |
|                           |
+---------------------------+

textview ekrana bir metin basmak istediğimizde kullanılır text özelliği ile basılacak metin yazılır.

Widgetlara ID Eklemek

Widgerlarımıza ID eklemek o widgeta ulaşmak için gereklidir. Her ID eşsiz olmalıdır ve o wideta özel olmalıdır. Biz bir widgeta ulaşmak istediğimizde yada o elemandaki değeri almak değiştirmek istediğimizde elemanımıza bu id üzerinden ulaşırız.

<TextView
	android:id="@+id/txt"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:text="Merhaba Dünya!" />

id="@+id/idadi

şeklinde widgetımıza id atamış oluruz. Tüm kullandığımız elemanlara id eklemek önemlidir. O widgeta daha sonra ulaşmak istediğizde o widgetın id'sini kullanırız.

Properties Menusu

Bu menüden her widgetın özellikleri değiştirilebilir. Widgetın rengi boyutu şekli arkaplan rengi, yazı rengi vs.

Properties > Gravity Seçeneği

Bu özellik bir widgetın içerisinde metnin widget içerisinde ne tarafa doğru yakın olacağını belirtir.

Örneği elemanın içeriğini tam ortalamak istediğimizde;

Aşağısı TextView

+---------------------------+
|                           |
|       Merhaba Dünya!      |
|                           |
+---------------------------+

Dikeysel ve Yataysal ortaladık

android:gravity="center_vertical"
android:gravity="center_horizontal"

şeklinde ayarladığımızda eleman içeriği hem dikeysel hem yataysal olarak ortalanır

Elemanı aşağı yukarı veya sağa ve sola yaslamak istediğimizde

andorid:gravity="top"

Bu yukarı çekim uygular

+---------------------------+
| Merhaba Dünya!            |
|                           |
|                           |
+---------------------------+
android:gravity="bottom"

Bu aşağı çeker

+---------------------------+
|                           |
|                           |
| Merhaba Dünya!            |
+---------------------------+
android:gravity="right"

Bu sağa çekim uygular

+---------------------------+
|             Merhaba Dünya!|
|                           |
|                           |
+---------------------------+

Eğer içeriğimizi sağ alt köşeye konuşlandırmak istersek

android:gravity="right|bottom"

| işareti solundaki ve sağındaki iki değerinde geçerli olduğunu bildirir.

+---------------------------+
|                           |
|                           |
|             Merhaba Dünya!|
+---------------------------+

Elemanların İçerindeki Metnin Boyutunu Değiştirmek

Properties > textSize

yolu izlenerek yapılabilir buraya istediğiniz değeri girip metnin boyutunu belirtebilirsiniz.

android:textSize="50sp"

ya da

android::textSize="50px"

şeklindede kullanbilirsiniz standart olarak girilen değer sp türünde olacaktır.

Metin Rengi Değiştirmek

Properties > textColor

yolundan istediğimiz rengi seçebiliriz.

Metin Stili Değiştirmek (Normal |Bold |Italik)

android:textStyle="italic"

şeklinde ya da

Properties > textStyle

yolunu takip ederek değiştirilebiliriz.

Widgetı 360 derece Yönünü konumlandırmak

android:rotation="15"

şeklinde elamanı soldan 15 derecelik açıyla kaldırmış oluruz.

Metnin Konumunu Ayarlamak

android:textAlignment="Center"

şeklinde ya da

Properties > textAlignment

yoluyla değiştirilebilir.

ToggleButton (Aç | Kapa) Düğmesi

<ToggleButton
	android:id="@+id/togglebtn"
	android:layout_height="wrap_content"
	android:layout_width="match_parent" />

Kapalı ve Açık durumlarında Gözükecek Meni Değiştirme

android:textOn="Açık"
android:textOff="Kapalı"

Checked Yani Açık şekilde gelmesi

android:checked="true"

Checkbox (Onay Kutusu) Kullanımı

<Checkbox
	android:id="@+id/onaykutusu"
	android:layout_height="wrap_content"
	android:layout_width="match_parent"
	android:text="Onay Kutusu"
	android:checked="true" />

Bu bize bir işaretli bir checkbox yaratır

Onay Kutusu

İşareti kaldırmak için

android:checked="true"

Satırını silmemiz yeterli.

RadioButton (Secim Kutusu) Kullanımı

<RadioButton
	android:id="@+id/radiobtn"
	android:layout_height="wrap_content"
	android:layout_width="match_parent"
	android:text="Seçim Kutusu"
	andorid:checked="false" />

Seçim Kutusu

android:checked="true"

Seçim Kutusu

şeklinde bir çıktı verecektir

RadioGroup (RadioButtonları aynı gruba almak ve tek seçim)

Eğer radiobuttonları radiogroup içerisine almazsak radiobutton kullanmanın pek bir anlamı olmıyacaktır. Aynı gruptaki radiobuttonlardan sadece birinin seçilebilir olmasını istiyorsak o raidobuttonları bir radiogroup içerisine almalıyız.

<RadioGroup
	android:layout_height="wrap_content"
	android:layout_width="match_parent">

	<RadioButton
	android:id="@+id/radiobtn1"
	android:layout_height="wrap_content"
	android:layout_width="match_parent"
	android:text="Seçim1" />

	<RadioButton
	android:id="@+id/radiobtn2"
	android:layout_height="wrap_content"
	android:layout_width="match_parent"
	android:text="Seçim2" />

</RadioGroup>
 Seçim1
 Seçim2
 Seçim3

şeklinde bir çıktı olacaktır ve sadece bir tanesini seçebilir olacak.

RadioGroup içerisine orientation seçeneği eklenerek bu grubun yan yana mı alt altamı olduğunu ayarlıyabiliriz.

ProgressBar Kullanımı

İki çeşit progressbar'ımız var biri yatay diğeri ise bir döngü halinde dönen progressbar. Bunları sürükle bırak ile ekliyebiliriz.

Properties üzerinden (horizontal) progressbar'ımıza max ve progress değerlerini ayarlıyabiliriz max en fazla ulaşacağı değer progress ise hangi değerden başlıyacağıdır

SeekBar Kullanımı (Seviye ayarlama)

Bu bize bir şeyin seviyesini ayarlamak için verilmiş bir widget

--------○-------------

şeklindedir kullanıcı istediği seviyeye ayarlıyabilir.

<SeekBar
	android:id="@+id/seviye"
	andorid:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:max="100"
	andorid:progress="35" />

maximum 100 olan seekbarın konumu progress ile 35 ayarladık tabi bu kullanıcı tarafından değiştirilebilir.

SeekBar (Discrete)

Bunu widgetlar bölümünden SeekBar(discrete) olarak görürsünüz bu seekbarda sadece kullanıcın seçebileceği herdeğer üzerinde bir nokta bulunur aslında görsel anlamda çokta başarılı değil ve normal seekbar ile kullanımı aynı.

Swicth (Tuş) Kullanımı

Aslında checkbox ile aynı işlevi gerçekleştirir kullanıcın bir konuda onayını alıp almamayı belirtir aktiv pasif durumu

Metin -○ (aktif)

Metin ○- (pasif)

şeklindedir. Ancak checkboxtan farkı açık ve kapalı durumlarında yazının programlama kullanmadan değiştirilebiliyor olmasıdır.

<Switch
	android:id="@+id/switch"
	android:layout_height="wrap_content"
	andorid:layout_width="match_parent"
	andorid:text="Seçenek" />
android:textOn="Açık"
android:textOff="Kapalı"

seçenekleri ile açık ve kapalı durumlarda ekranda gözükecek metni ayarlıyabiliriz

android:checked="true"

seçeneği ile seçili getirebiliriz.

Form Elemanları

Form Elamanları belirli özelliklerde olup giriş filtrelemesine sahiptirler. Böylece kullanıcıdan alınan bilgileri filtrelemeye gerek kalmadan güvenli veri alınabilmektedir.

Spinner (Açılır Menu | Seçenek Listesi) Kullanımı

Spinner ile html'deki select etiketi gibi işlem yapabilirsiniz size bir dropdown menu oluşturabilir.

<Spinner
	android:id="@+id/spinner"
	andorid:layout_height="wrap_content"
	android:layout_width="match_parent" />

Bu şekilde bir spinner oluşturabilirsiniz

android:spinnerMode="dialog"

seçeneği ile açılır menu ekrana bir mesaj kutusu içerisinde gözükür

default olarak bu değer dropdown olur ve spinner tıklanınca spinnerdan aşağı liste açılır ancak spinner'a veri eklemek biraz daha uğraştırıyor.

Önce Uygulama dizininizden res > values > strings.xml dosyasını açıyoruz ve ordaki resources etiketi içerisine istedimiz şekilde aşağıdaki gibi bu menude gözükecek değerleri giriyoruz

<string-array name="liste">
	<item>Dünya</item>
	<item>Mars</item>
	<item>Venüs</item>
	<item>Uranüs</item>
	<item>Neptun</item>
	<item>Jupiter</item>
	<item>Saturn</item>
</string-array>

bunu resources etiketi içerisinde oluşturuyoruz

Şimdide bir adaptor yardımı ile Bu listeyi spinner'ımıza ekliyeceğiz. Bunun için java dosyasının yardımına ihtiyacımız var

Projemizdeki java klasörünün içerisindeki java dosyamızı açıyoruz şöyle bir kod olacaktır

package com.example;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class ders1 extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_ders1);

		//Buraya kodlarımız gelecek
    }
}

Şimdi uygulamamız başladığında bu verileri spinner'a bağlamak için öncelikle java dosyamıza spinner ve arrayAdaptor' ümüzü import etmemiz gerekmekte java dosyamızın başına

import android.widget.ArrayAdapter;
import android.widget.Spinner;

satırlarını ekliyoruz tabi isterseniz bunu yapmayabilirsiniz java kodunu yazarken java gerekli importları yapmanız için size bir uyarıda bulunur o sırada alt+<enter> diyerek gerekli dosyları otomatik import edebilirsiniz.

Şimdi onCreate methodunun bulunduğu yere şunları eklersek spinner'ımıza verimiz eklenecektir.

        Spinner spinner = (Spinner) findViewById(R.id.spinner);
        ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(this,
                R.array.liste, android.R.layout.simple_spinner_item);
        adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
        spinner.setAdapter(adapter);

Java dosyamızın son hali şu şekilde olacaktır;

package com.example;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.Spinner;

public class ders1 extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_ders1);

        Spinner spinner = (Spinner) findViewById(R.id.spinner);
        ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(this,
                R.array.liste, android.R.layout.simple_spinner_item);
        adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
        spinner.setAdapter(adapter);
    }
}

Şimdi satır satır inceliyelim

Spinner spinner = (Spinner) findViewById(R.id.spinner);

Bu satırda Spinner spinner kısmında ilk Spinner kelimesi ile bir tür belirtiyoruz burda Spinner türünde bir değişken oluşturuyoruz oluşturduğumuz Spinner türündeki değişkenin adınıda spinner koyduk buda ikinci spinner ifadesi oluyor.

Spinner spinner
------- -------
  |       |--değişken adımız
  |
  |-Spinner türü olduğunu belirttik

(Spinner) findViewById(R.id.spinner);

Burdaki findViewById(R.id.spinner);

uygulamamızın tasarımını oluşturan xml sayfasındaki her elemana ulaşmak için bir id değeri vermiştik hatırlarsanız findViewById fonksiyonu ile id'si belirtilen bir widgeta ulaşbiliyoruz.

R.id.spinner

R.java kaynak dosyası içerisinden id'si spinner olan widgeta ulaş diyoruz

R.id.ulaşmakistediğimizelmanınidsi şeklinde xml sayfamızdaki her elemana ulaşabiliriz

findViewById ile de belirtilen id deki eleman bulunur

(Spinner) ifadesi ise bir typecasting(türdönüşümünü) temsil eder ve id'sinden ulaştığımız elemanı Spinner türüne çevirir.

Sonuç olarak bu satır spinner adındaki değişkenimize xml sayfamızdaki spinner'ı atar artık spinner adı ile xml sayfamızdaki spinner'a ulaşabiliyor olacağız.

ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(this,
                R.array.liste, android.R.layout.simple_spinner_item);

Bu satırda bir arrayadaptoru oluşturuyoruz. Burda önemli olan ilk başta spinner oluştururken res>values>strings.xml dosyası içerisinde oluşturduğumuz listenin adı R.array.liste olarak belirtilen strings.xml dosyası içerisinde oluştruduğumuz listemiz.

Biz burda sadece R.array.liste veya bizim belirttiğimiz strings.xml dosyasındaki listenin name değerini bilmeliyiz. Daha sonra bu belirtilen hedefi arrayadaptor türündeki adapter değişkenine atıyoruz.

 adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
 

Burda apatorumuzun içindeki verinin gözükmesini istediğimiz kaynağı belirtiyoruz. Bu standart bir ifadedir.

spinner.setAdapter(adapter);

Burda spinner değişkenimize adaptordeki veriyi aktarıyoruz ve artık spinnerımızın içerisine veriyi başarılı bir şekilde taşımız oluyoruz.