Android LinearLayout Kullanımı | Android Dersleri

Merhaba Arkadaşlar,
Mobilhanem.com sitemiz üzerinden anlattığımız/yayınladığımız Android Eğitimleri yazı serimizde bu dersimizde Android LinearLayout Kullanımı ile devam ediyoruz. Nedir bu Layout kavramı ,ne işe yarar şimdi incelemeye başlayalım.

Arayüz tasarımı ve layout türleri ile ilgili ön bilgilendirmeyi bu dersimizde yapmıştım. Bu dersimizde de Linear Layout konusunda biraz daha ayrıntıya girmeye çalışacağız bildiğiniz üzere android dersleri kısmının dışında temel olarak yine anlattığımız bu dersimizide inceleyebilirsiniz. LinearLayout aslında iki koşulda kullanma ihtiyacı duyuyoruz birincisi  android bileşenlerini yatay konumlandırmak için ; ikincisi de  android bileşenlerini dikey konumlandırabilmek için. Bu özelliğide orientation ile sağlıyoruz. Aşağıdaki xml yapısında gördüğünüz gibi android:orientation = “horizontal” dediğimizde yatay olarak EditText ve Buttonu gösterdik. ( android:layout_weight=”1″ EditText ve Buttonda da var bu bileşenlerin eşit bir biçimde ekranda göstermesini sağlamaktadır. )

Android LinearLayout Kullanım Örnekleri

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

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”     tools:context=“com.mobilhanem.linearlayoutexample.MainActivity”>       <LinearLayout         android:orientation=“horizontal”         android:id=“@+id/linearLayout”         android:layout_width=“match_parent”         android:layout_height=“wrap_content”>           <EditText             android:layout_weight=“1”             android:layout_width=“match_parent”             android:layout_height=“wrap_content” />           <Button             android:text=“Buton”             android:layout_weight=“1”             android:layout_width=“match_parent”             android:layout_height=“wrap_content” />         </LinearLayout>   </RelativeLayout>

Erkan çıktımız:

Aşağıdaki xml yapısında gördüğünüz gibi android:orientation = “vertical” dediğimizde yatay olarak EditText ve Buttonu gösterdik.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

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”     tools:context=“com.mobilhanem.linearlayoutexample.MainActivity”>       <LinearLayout         android:orientation=“vertical”         android:id=“@+id/linearLayout”         android:layout_width=“match_parent”         android:layout_height=“wrap_content”>           <EditText             android:layout_weight=“1”             android:layout_width=“match_parent”             android:layout_height=“wrap_content” />           <Button             android:text=“Buton”             android:layout_weight=“1”             android:layout_width=“match_parent”             android:layout_height=“wrap_content” />         </LinearLayout>   </RelativeLayout>

Ekran çıktımız:

 

LinearLayout u android:layout_centerInParent = “true” ile cihaza göre tam ortaladık ve android:background ile de arka plana renk kodu verdik böylece LinearLayout un kapladığı kısım mavi oldu.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

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”     tools:context=“com.mobilhanem.linearlayoutexample.MainActivity”>       <LinearLayout         android:background=“@color/colorPrimary”         android:layout_centerInParent=“true”         android:orientation=“vertical”         android:id=“@+id/linearLayout”         android:layout_width=“match_parent”         android:layout_height=“wrap_content”>           <EditText             android:layout_weight=“1”             android:layout_width=“match_parent”             android:layout_height=“wrap_content” />           <Button             android:text=“Buton”             android:layout_weight=“1”             android:layout_width=“match_parent”             android:layout_height=“wrap_content” />         </LinearLayout>   </RelativeLayout>

Ekran çıktımız:

 

Aşağıdaki kod yapısına baktığımızda LinearLayout da android:weightSum kavramını kullandık ve  android:weightSum = “3” dedikten sonra kapladığı alanda yatay olarak 3 birim yer ayırmış oldu içerisinde yer alan butonların birine android:layout_weight=”1″ , diğerine ise  android:layout_weight=”2″ olarak konumlandırdık. Ekran görüntüsüne de bakacak olursak; 3 birimlik alanda 2 birim ve 1 birim alan butonların farklı boyutlarda konumlandığını göreceksiniz. weightSum değerine kaç veriyorsak o değere göre bileşenleri sabitlemek önemli. Hem performans açısından hemde konumlandırmayı weight değerine göre düzgün bir şekilde yapabilmek için butonların width değerlerine 0 dp verdik.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

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:weightSum=“3”     android:orientation=“horizontal”>             <Button             android:id=“@+id/btn_blue”             android:layout_width=“0dp”             android:layout_height=“wrap_content”             android:layout_weight=“1”             android:text=“First Button” />           <Button             android:id=“@+id/btn_green”             android:layout_width=“0dp”             android:layout_height=“wrap_content”             android:layout_weight=“2”             android:text=“Second Button” />   </LinearLayout>

Ekran çıktımız:

 

android:gravity=”center” kullanarak en dışta bulunan LinearLayout umuzu ekrana göre ortaladık, böylece içinde bulunan butonlarda ekranın tam ortasında konumlanmış oldu.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

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:gravity=“center”     android:orientation=“horizontal”>             <Button             android:id=“@+id/btn_blue”             android:layout_width=“0dp”             android:layout_height=“wrap_content”             android:layout_weight=“1”             android:text=“First Button” />           <Button             android:id=“@+id/btn_green”             android:layout_width=“0dp”             android:layout_height=“wrap_content”             android:layout_weight=“2”             android:text=“Second Button” />   </LinearLayout>

Ekran çıktımız: 

Aşağıdaki xml yapısına baktığımızda ise LinearLayout ları yatay ve dikey olarak birlikte kullanabildiğimizi görüyoruz. En dıştaki LinearLayout dikey bir şekilde konumlandırdık. Alt kısmındaki iki buton un yatay olarak konumlandığı yerde ise diğer LinearLayoutu kullandık.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53

<LinearLayout     xmlns:android=“http://schemas.android.com/apk/res/android”     android:layout_width=“match_parent” android:layout_height=“match_parent”     android:orientation=“vertical”     android:background=“#c56504”     android:padding=“10dp” >       <TextView         android:id=“@+id/emailTextView”         android:layout_width=“match_parent”         android:layout_height=“wrap_content”         android:padding=“5dp”         android:text=“Email :”         android:textColor=“#FFFFFF”         android:textSize=“18sp” />     <EditText         android:id=“@+id/emailEditText”         android:layout_width=“match_parent”         android:layout_height=“wrap_content”         android:hint=“Email adresinizi girin”         android:inputType=“textEmailAddress”>     </EditText>     <EditText         android:id=“@+id/passwordEditText”         android:layout_width=“match_parent”         android:layout_height=“wrap_content”         android:hint=“Şifrenizi girin”         android:inputType=“textVisiblePassword”>     </EditText>     <Button         android:id=“@+id/saveButton”         android:layout_width=“match_parent”         android:layout_height=“wrap_content”         android:text=“Giriş” />     <LinearLayout         android:weightSum=“2”         android:layout_width=“match_parent”         android:layout_height=“wrap_content”         android:orientation=“horizontal” >         <Button             android:id=“@+id/createAccountButton”             android:layout_width=“0dp”             android:layout_height=“wrap_content”             android:layout_weight=“1”             android:text=“Yeni Hesap” />         <Button             android:id=“@+id/forgetPasswordButton”             android:layout_width=“0dp”             android:layout_height=“wrap_content”             android:layout_weight=“1”             android:text=“Şifremi unuttum” />     </LinearLayout> </LinearLayout>

Ekran çıktımız:

Aşağıdaki layout yapısına baktığımızda LinearLayout a android:layout_marginLeft, android:layout_marginRight, android:layout_marginTop, android:layout_marginBottom değerlerine 20dp verdik yani 20dp olarak sağdan, soldan,aşağıdan ve yukarıdan boşluk bırakmış olduk. android:layout_margin = “20dp” yaparakda bu dediğimiz özelliği sağlayabilirdik diğer değerleri silip sadece margin değeri verip kendinizde görebilirsiniz.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

<RelativeLayout     xmlns:android=“http://schemas.android.com/apk/res/android”     android:layout_width=“match_parent”     android:layout_height=“match_parent”>       <LinearLayout         android:orientation=“vertical”         android:layout_marginLeft=“20dp”         android:layout_marginTop=“20dp”         android:layout_marginBottom=“20dp”         android:layout_marginRight=“20dp”         android:layout_width=“match_parent”         android:layout_height=“wrap_content”>           <EditText             android:hint=“Kullanıcı Adı”             android:layout_width=“match_parent”             android:layout_height=“wrap_content” />           <EditText             android:hint=“Şifre”             android:layout_width=“match_parent”             android:layout_height=“wrap_content” />           <Button             android:text=“Giriş”             android:layout_width=“match_parent”             android:layout_height=“wrap_content” />         </LinearLayout> </RelativeLayout>

Ekran çıktımız:

 

Evet arkadaşlar LinearLayout Kullanımı‘nı sizlere detaylıca anlatmaya çalıştım. Bir sonraki dersimizde layout serisinden devam edeceğiz o zamana kadar layout lar ile ilgili konuları incelemeniz faydalı olacaktır.

Tüm Android Ders, Proje ve Kaynak Kodlar için tıklayınız.

Mobilhanem.com üzerinden anlattığımız android uygulama geliştirme derslerine devam edeceğiz. Konu hakkında sorunuzu yorum alanından sorabilirsiniz. Konu dışı sorularınızı ve tüm yazılımsal sorularınızı sorucevap.mobilhanem.com sitemizden de sorabilirsiniz.

Bir dahaki dersimizde görüşmek dileğiyle..

12