Android Kotlin Hakkında Temel Bilgiler 02.1: Düzen Düzenleyici'yi kullanarak doğrusal düzen oluşturma

Bu codelab, Android Kotlin Hakkında Temel Bilgiler kursunun bir parçasıdır. Bu kurstan en iyi şekilde yararlanmak için codelab'leri sırayla tamamlamanızı öneririz. Kursla ilgili tüm codelab'ler Android Kotlin Hakkında Temel Bilgiler codelab'leri açılış sayfasında listelenir.

Bilmeniz gerekenler

• Kotlin'de temel bir Android uygulaması oluşturma
• Android uygulamasını emülatörde veya cihazda çalıştırma
• LinearLayout ile ilgili temel bilgiler.
• LinearLayout ve TextView kullanan basit bir uygulama oluşturma.

Neler öğreneceksiniz?

• View ve ViewGroup ile çalışma
• LinearLayout. kullanarak Activity içinde görünümleri düzenleme
• Kaydırılabilir içeriği görüntülemek için ScrollView nasıl kullanılır?
• View görünürlüğünü değiştirme
• Dize ve boyut kaynaklarını oluşturma ve kullanma
• Android Studio'nun Düzen Düzenleyicisi'ni kullanarak doğrusal düzen oluşturma

Yapacaklarınız

• AboutMe uygulamasını oluşturun.
• Adınızı göstermek için düzene TextView ekleyin.
• ImageView. ekleme
• Kaydırılabilir metin görüntülemek için ScrollView ekleyin.

Hakkımda uygulamasında kendinizle ilgili ilginç bilgileri sergileyebilir veya uygulamayı bir arkadaşınız, aile üyeniz ya da evcil hayvanınız için özelleştirebilirsiniz. Bu uygulamada bir ad, BİTTİ düğmesi, yıldız resmi ve kaydırılabilir metin gösteriliyor.

Bu görevde AboutMe Android Studio projesini oluşturacaksınız.

1. Henüz açık değilse Android Studio'yu açın.
2. Android Studio'da zaten açık bir proje varsa Dosya > Yeni > Yeni Proje'yi seçin.
   
   
   
3. Henüz açık bir proje yoksa Android Studio'ya Hoş Geldiniz iletişim kutusunda + Yeni bir Android Studio projesi başlat'ı seçin.
   
   
   
4. Yeni Proje Oluştur iletişim kutusundaki Telefon ve Tablet sekmesinde Boş Etkinlik şablonunu seçin. Sonraki'yi tıklayın.
   
   
   
5. Sonraki Yeni Proje Oluştur iletişim kutusunda aşağıdaki parametreleri ayarlayın ve Bitir'i tıklayın.
   

Özellik	Değer
Uygulama adı	AboutMe
Şirket adı android	com.android.example.AboutMe (veya kendi alanınız)
Konumu kaydet	Varsayılan konumu bırakın veya tercih ettiğiniz dizinle değiştirin.
Dil	Kotlin
Minimum API düzeyi	API 19: Android 4.4 (KitKat)
Bu proje, anlık uygulamaları destekleyecek	Bu onay kutusunun işaretini kaldırmayın.
AndroidX yapılarını kullanma	Bu onay kutusunu seçin.

Android Studio, proje dosyalarını oluşturmak için biraz zaman alır.

6. Uygulamanızı çalıştırın. Boş ekranda "Hello World" dizesini görürsünüz.
   

Boş Etkinlik şablonu, tek bir boş etkinlik oluşturur: Mainactivity.kt. Şablon ayrıca activity_main.xml adlı bir düzen dosyası da oluşturur. Düzen dosyasının kök ViewGroup'ı ConstraintLayout, içeriği ise tek bir TextView'dir.

Bu görevde, oluşturulan kökü ViewGroup yerine LinearLayout olarak değiştireceksiniz. Ayrıca kullanıcı arayüzü öğelerini dikey olarak da düzenleyebilirsiniz.

Grupları görüntüle

ViewGroup, diğer görünümleri ve görünüm gruplarını içeren alt görünümler içerebilen bir görünümdür. Bir düzeni oluşturan görünümler, kök olarak bir görünüm grubuyla birlikte görünüm hiyerarşisi olarak düzenlenir.

LinearLayout görünüm grubunda kullanıcı arayüzü öğeleri yatay veya dikey olarak düzenlenir.

Kök düzeni, LinearLayout görünüm grubunu kullanacak şekilde değiştirin:

1. Proje > Android bölmesini seçin. app/res/layout klasöründe activity_main.xml dosyasını açın.
2. Metin sekmesini seçin ve kök görünüm grubunu ConstraintLayout'den LinearLayout'e değiştirin.
3. TextView öğesini kaldırın. LinearLayout öğesine android:orientation özelliğini ekleyin ve vertical olarak ayarlayın.

Önce:

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".MainActivity">

   <TextView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Hello World!"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintLeft_toLeftOf="parent"
       app:layout_constraintRight_toRightOf="parent"
       app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Sonra:

<LinearLayout
       xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       xmlns:app="http://schemas.android.com/apk/res-auto"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:orientation="vertical"
       tools:context=".MainActivity">

</LinearLayout>

Düzen Düzenleyici, Android Studio'daki görsel tasarım aracıdır. Uygulamanızın düzenini oluşturmak için XML kodunu manuel olarak yazmak yerine, kullanıcı arayüzü öğelerini tasarım düzenleyiciye sürüklemek için Düzen Düzenleyici'yi kullanabilirsiniz.

Düzen Düzenleyici'yi görmek için Tasarım sekmesini tıklayın. Aşağıdaki ekran görüntüsünde, Düzen Düzenleyici'nin bölümleri gösterilmektedir.

Tasarım düzenleyici: Ekran düzeninizin görsel temsilini tasarım görünümünde, plan görünümünde veya her ikisinde de gösterir. Tasarım düzenleyici, Düzen Düzenleyicisi'nin ana bölümüdür.

Araç çubuğu: Tasarım düzenleyicide düzeninizin görünümünü yapılandırmak ve bazı düzen özelliklerini değiştirmek için düğmeler sağlar. Örneğin, tasarım düzenleyicide düzeninizin görünümünü değiştirmek için Tasarım Yüzeyi Seçin açılır menüsünü kullanın:

• Düzeninizin gerçek dünyadaki önizlemesi için Tasarım'ı kullanın.
• Her görünümün yalnızca ana hatlarını görmek için Blueprint'i kullanın.
• Her iki ekranı yan yana görmek için Tasarım + Plan'ı kullanın.

Palet: Düzeninize veya Bileşen Ağacı bölmesine sürükleyebileceğiniz görünümlerin ve görünüm gruplarının listesini sağlar.

Özellikler: Şu anda seçili görünüm veya görünüm grubunun özelliklerini gösterir. Özelliklerin tam listesi ile sık kullanılan özellikler arasında geçiş yapmak için bölmenin üst kısmındaki simgesini kullanın.

Bileşen Ağacı: Düzen hiyerarşisini görünüm ağacı olarak gösterir. Bileşen Ağacı, tasarım düzenleyicide başka şekilde seçemeyeceğiniz küçük, gizli veya çakışan görünümleriniz olduğunda kullanışlıdır.

1. adım: TextView ekleyin

1. Henüz açık değilse res/layout/activity_main.xml dosyasını açın.
2. Metin sekmesine geçin ve kodu inceleyin. Kodun kök görünüm grubu LinearLayout'dır. (Görünüm grupları , başka görünümler içeren görünümlerdir.)
   
   LinearLayout, varsayılan olarak vertical olan gerekli layout_height, layout_width ve orientation özelliklerine sahiptir.
3. Düzen Düzenleyici'yi açmak için Tasarım sekmesine geçin.

Not: Tasarım sekmesi ve Metin sekmesi aynı düzeni farklı bir şekilde gösterir. Bir sekmede yaptığınız değişiklikler diğerine de yansıtılır.

4. Palet bölmesinden bir metin görünümünü tasarım düzenleyiciye sürükleyin.
   
   
   
5. Bileşen Ağacı bölmesine dikkat edin. Yeni metin görünümü, üst görünüm grubunun (LinearLayout) alt öğesi olarak yerleştirilir.
   
   
6. Henüz açık değilse Özellikler bölmesini açın. (Bölmeyi açmak için tasarım düzenleyicisinde yeni eklenen TextView simgesini çift tıklayın.)
7. Özellikler bölmesinde aşağıdaki özellikleri ayarlayın:

Özellik	Değer
Kimlik	name_text
text (metin)	Adınızı girin. (Metin alanlarından birinde, tools ad alanı için olduğunu belirtmek üzere anahtar simgesi gösterilir. Anahtar içermeyen, android ad alanı içindir. Bu, istediğiniz metin alanıdır.)
textAppearance > textSize	20sp
textAppearance > textColor	@android:color/black
textAppearance > textAlignment	Ortala

2. adım: Dize kaynağı oluşturun

Bileşen Ağacı'nda, TextView, simgesinin yanında bir uyarı simgesi görürsünüz. Uyarı metnini görmek için aşağıdaki ekran görüntüsünde gösterildiği gibi simgeyi tıklayın veya üzerine gelin.

Uyarıyı çözmek için bir dize kaynağı oluşturun:

1. Özellikler bölmesinde, adınız olarak ayarladığınız metin özelliğinin yanındaki üç noktayı tıklayın. Kaynak düzenleyici açılır.
   
   
   
2. Kaynaklar iletişim kutusunda Yeni kaynak ekle > Yeni dize değeri'ni seçin.
3. Yeni Dize Değeri Kaynağı iletişim kutusunda Kaynak adı alanını name olarak ayarlayın. Kaynak değeri alanını kendi adınıza ayarlayın. Tamam'ı tıklayın. Uyarının kaybolduğunu fark edin.
   
   
   
4. res/values/strings.xml dosyasını açın ve name adlı yeni oluşturulan dize kaynağını bulun.

<string name="name">Aleks Haecky</string>

3. adım: Boyut kaynağı oluşturun

Kaynak düzenleyiciyi kullanarak yeni bir kaynak eklediniz. Yeni kaynaklar oluşturmak için XML kodu düzenleyicisindeki kaynakları da ayıklayabilirsiniz:

1. activity_main.xml dosyasında Metin sekmesine geçin.
2. textSize satırında, sayıyı (20sp) tıklayın ve Alt+Enter (Mac'te Option+Enter) yazın. Pop-up menüden Boyut kaynağını ayıkla'yı seçin.
3. Kaynak Ayıklama iletişim kutusundaki Kaynak adı alanına text_size girin. Tamam'ı tıklayın.
   
   
   
4. Aşağıdaki oluşturulan kodu görmek için res/values/dimens.xml dosyasını açın:

<dimen name="text_size">20sp</dimen>

Not: dimens.xml dosyası res/values klasörünüzde yoksa Android Studio bu dosyayı oluşturur.

5. MainActivity.kt dosyasını açın ve onCreate() işlevinin sonunda aşağıdaki kodu bulun:

setContentView(R.layout.activity_main)

setContentView() işlevi, düzen dosyasını Activity ile bağlar. Belirtilen düzen kaynak dosyası R.layout.activity_main:

• R, kaynağa yapılan bir referanstır. Uygulamanızdaki tüm kaynakların tanımlarını içeren, otomatik olarak oluşturulan bir sınıftır.
• layout.activity_main, kaynağın activity_main adlı bir düzen olduğunu gösterir.

6. Uygulamanızı çalıştırın. Adınızın yer aldığı bir TextView gösterilir.
   
   

Uygulama ekranınıza baktığınızda adınız ekranın üst kısmına yaslanmış durumda. Bu nedenle, şimdi dolgu ve kenar boşluğu ekleyeceksiniz.

Dolgu ve kenar boşluğu

Dolgular, bir görünümün veya öğenin sınırları içindeki boşluktur. Bu, aşağıdaki şekilde gösterildiği gibi, görünümün kenarları ile görünümün içeriği arasındaki boşluktur.

Bir görünümün boyutuna dolgusu da dahildir. Sık kullanılan dolgu özellikleri şunlardır:

• android:padding, görünümün dört kenarı için dolguyu belirtir.
• android:paddingTop, üst kenar için dolguyu belirtir.
• android:paddingBottom, alt kenar için dolguyu belirtir.
• android:paddingStart, görünümün "başlangıç" kenarı için dolguyu belirtir.
• android:paddingEnd, görünümün "bitiş" kenarı için dolguyu belirtir.
• android:paddingLeft, sol kenar için dolguyu belirtir.
• android:paddingRight, sağ kenar için dolguyu belirtir.

Kenar boşluğu, görünümün kenarlarının dışına eklenen alandır. Bu, yukarıdaki şekilde gösterildiği gibi görünümün kenarından üst öğesine kadar olan alandır. Sık kullanılan marj özellikleri şunlardır:

• android:layout_margin, görünümün dört tarafı için bir kenar boşluğu belirtir.
• android:layout_marginBottom, bu görünümün alt tarafının dışındaki alanı belirtir.
• android:layout_marginStart, bu görünümün "başlangıç" tarafının dışındaki alanı belirtir.
• android:layout_marginEnd, bu görünümün son tarafındaki boşluğu belirtir.
• android:layout_marginLeft, bu görünümün sol tarafındaki boşluğu belirtir.
• android:layout_marginRight, bu görünümün sağ tarafındaki alanı belirtir.

Sağ/sol ve başlangıç/bitiş

"Sağ" ve "sol", uygulamanız soldan sağa (LTR) veya sağdan sola (RTL) akış kullanıyor olsa da her zaman ekranın sağ ve sol taraflarını ifade eder. "Başlangıç" ve "bitiş" her zaman akışın başlangıcını ve bitişini ifade eder:

• Soldan sağa akışta başlangıç = sol ve bitiş=sağdır.
• Sağdan sola akış için start=right ve end=left.

Uygulamanız API düzeyi 17 (Android 4.2) veya sonraki sürümleri hedefliyorsa:

• "Sol" ve "sağ" yerine "başlangıç" ve "bitiş" kullanın.
• Örneğin, sağdan sola dillerin desteklenmesi için android:layout_marginLeft simgesi android:layout_marginStart olarak değiştirilmelidir.

Uygulamanızın Android 4.2'den eski sürümlerde çalışmasını istiyorsanız (yani uygulamanın targetSdkVersion veya minSdkVersion değeri 16 ya da daha düşükse):

• "Sol" ve "sağ"a ek olarak "başlangıç" ve "bitiş"i ekleyin.
• Örneğin, hem android:paddingLeft hem de android:paddingStart kullanın.

1. adım: Dolgu ekleyin

Adınız ile name metin görünümünün üst kenarı arasına boşluk eklemek için üst dolgu ekleyin.

1. activity_main.xml dosyasını Tasarım sekmesinde açın.
2. Component Tree'de veya tasarım düzenleyicide, metin görünümünü tıklayarak Attributes bölmesini açın.
3. Kullanılabilir tüm özellikleri görmek için Özellikler bölmesinin üst kısmındaki çift ok simgesini tıklayın.
4. Dolgu'yu arayın, genişletin ve üst özelliğinin yanındaki üç noktayı ... tıklayın. Kaynaklar iletişim kutusu gösterilir.
5. Kaynaklar iletişim kutusunda Yeni kaynak ekle > Yeni boyut değeri'ni seçin.
6. Yeni Boyut Değeri Kaynağı iletişim kutusunda, 8dp değerine sahip dimen adlı yeni bir small_padding kaynağı oluşturun.
   
   dp kısaltması, yoğunluktan bağımsız anlamına gelir. Bir kullanıcı arayüzü öğesinin farklı yoğunluklara sahip ekranlarda aynı boyutta görünmesini istiyorsanız ölçü birimi olarak dp'yi kullanın. Ancak metin boyutunu belirtirken her zaman sp (ölçeklendirilebilir piksel) kullanın.
7. Tamam'ı tıklayın.

2. adım: Kenar boşluğu ekleyin

name metin görünümünü üst öğenin kenarından uzaklaştırmak için üst kenar boşluğu ekleyin.

1. Özellikler bölmesinde, Layout_Margin'i bulmak için "margin" ifadesini arayın.
2. Layout_Margin'i genişletin ve top özelliğinin yanındaki üç noktayı ... tıklayın.
3. dimen adlı yeni bir layout_margin kaynağı oluşturun ve bunu 16dp yapın. Tamam'ı tıklayın.

3. adım: Yazı tipi ekleyin

name metin görünümünün daha iyi görünmesi için Android Roboto yazı tipini kullanın. Bu yazı tipi, destek kitaplığının bir parçasıdır ve yazı tipini kaynak olarak eklersiniz.

1. Özellikler bölmesinde "fontFamily"yi arayın.
2. fontFamily alanında açılır oku tıklayın, listede en alta gidin ve Diğer Yazı Tipleri'ni seçin.
3. Kaynaklar iletişim kutusunda rob ifadesini arayın ve Roboto'yu seçin. Önizleme listesinde Normal'i seçin.
4. Projeye yazı tipi ekle radyo düğmesini seçin.
5. Tamam'ı tıklayın.
   
   

res klasöründe artık roboto.ttf yazı tipi dosyasını içeren bir font klasörü var. @font/roboto özelliği, TextView öğenize eklenir.

4. adım: Stili ayıklayın

Stil, bir görünümün görünümünü ve biçimini belirten bir özellikler koleksiyonudur. Stil; yazı tipi rengi, yazı tipi boyutu, arka plan rengi, dolgu, kenar boşluğu ve diğer yaygın özellikleri içerebilir.

nameMetin görünümünün biçimlendirmesini bir stile ayıklayabilir ve bu stili uygulamanızdaki istediğiniz sayıda görünümde yeniden kullanabilirsiniz. Bir stili yeniden kullanmak, birden fazla görünümünüz olduğunda uygulamanıza tutarlı bir görünüm kazandırır. Stil kullanmak, bu ortak özellikleri tek bir yerde tutmanıza da olanak tanır.

1. Bileşen Ağacı'nda TextView simgesini sağ tıklayın ve Yeniden düzenle > Stili Çıkar'ı seçin.
2. Android Stili Çıkar iletişim kutusunda layout_width, layout_height ve textAlignment onay kutularının işaretini kaldırın. Bu özellikler genellikle her görünüm için farklıdır. Bu nedenle, stilin bir parçası olmamaları gerekir.
3. Stil adı alanına NameStyle girin.
4. Tamam'ı tıklayın.
   
   
   
5. Stiller de kaynak olduğundan, stiller res/values/ klasörüne styles.xml dosyası olarak kaydedilir. styles.xml dosyasını açın ve NameStyle stili için oluşturulan kodu inceleyin. Bu kod aşağıdaki gibi görünür:

<style name="NameStyle">
   <item name="android:layout_marginTop">@dimen/layout_margin</item>
   <item name="android:fontFamily">@font/roboto</item>
   <item name="android:paddingTop">@dimen/small_padding</item>
   <item name="android:textColor">@android:color/black</item>
   <item name="android:textSize">@dimen/text_size</item>
</style>

6. activity_main.xml simgesini açın ve Metin sekmesine geçin. Oluşturulan stilin, metin görünümünde style="@style/NameStyle" olarak kullanıldığına dikkat edin.
7. Uygulamayı çalıştırın ve yazı tipindeki değişiklikleri ile TextView öğenizin etrafındaki dolguyu inceleyin.

Gerçek dünyadaki çoğu Android uygulaması, resim görüntülemek, metin görüntülemek ve kullanıcıdan metin veya tıklama etkinlikleri şeklinde giriş kabul etmek için kullanılan bir görünüm kombinasyonundan oluşur. Bu görevde, resim görüntülemek için bir görünüm ekleyeceksiniz.

ImageView, resim kaynaklarını görüntülemek için kullanılan bir görünümdür. Örneğin, bir ImageView, PNG, JPG, GIF veya WebP dosyaları gibi Bitmap kaynaklarını ya da vektörel çizim gibi bir Drawable kaynağını gösterebilir.

Android ile birlikte gelen resim kaynakları (ör. örnek simgeler, avatarlar ve arka planlar) vardır. Bu kaynaklardan birini uygulamanıza eklersiniz.

1. Tasarım sekmesinde düzen dosyasını görüntüleyin, ardından Palet bölmesinden bir ImageView öğesini Bileşen Ağacı'nda name_text'nin altına sürükleyin. Kaynaklar iletişim kutusu açılır.
2. Henüz seçili değilse Çizilebilir'i seçin.
3. android'i genişletin, kaydırın ve btn_star_big_on'u seçin. Sarı yıldız .
4. Tamam'ı tıklayın.
   
   
   
   Yıldız resmi, adınızın altındaki düzene eklenir. Dikey LinearLayout olduğu için eklediğiniz görünümler dikey olarak hizalanır.
   
   
5. Metin sekmesine geçin ve oluşturulan ImageView koduna bakın. Genişlik match_parent olarak ayarlandığından görünüm, üst öğesi kadar geniş olur. Yükseklik wrap_content olarak ayarlandığından görünüm, içeriği kadar yüksek olur. ImageView, btn_star_big_on çizilebilir öğesine referans veriyor.

<ImageView
   android:id="@+id/imageView"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:srcCompat="@android:drawable/btn_star_big_on" />

6. id ImageView'nın adını değiştirmek için "@+id/imageView" öğesini sağ tıklayın ve Yeniden düzenle > Yeniden adlandır'ı seçin.
7. Yeniden adlandır iletişim kutusunda id simgesini @+id/star_image olarak ayarlayın. Yeniden düzenle'yi tıklayın.
   
   
   

İpucu: Yeniden düzenle > Yeniden adlandır, uygulama projenizdeki bir özellik veya değişken adının tüm oluşumlarını yeniden adlandırır.

8. Tasarım sekmesindeki Bileşen Ağacı'nda, star_image öğesinin yanındaki uyarı simgesini tıklayın. Uyarı, ekran okuyucuların kullanıcılara resimleri açıklamak için kullandığı contentDescription özelliğinin eksik olmasıyla ilgilidir.
9. Özellikler bölmesinde, contentDescription özelliğinin yanındaki üç nokta simgesini ... tıklayın. Kaynaklar iletişim kutusu açılır.
10. Kaynaklar iletişim kutusunda Yeni kaynak ekle > Yeni dize değeri'ni seçin. Kaynak adı alanını yellow_star, Kaynak değeri alanını ise Yellow star olarak ayarlayın. Tamam'ı tıklayın.
11. Yıldız resmini adından ayırmak için Özellikler bölmesini kullanarak yellow_star öğesine 16dp (yani @dimen/layout_margin) üst kenar boşluğu ekleyin.
12. Uygulamanızı çalıştırın. Adınız ve yıldız resmi, uygulamanızın kullanıcı arayüzünde gösterilir.
    
    

ScrollView, içine yerleştirilen görünüm hiyerarşisinin kaydırılmasına olanak tanıyan bir görünüm grubudur. Kaydırma görünümü, alt öğe olarak yalnızca bir başka görünüm veya görünüm grubu içerebilir. Çocuk görünümü genellikle LinearLayout şeklindedir. LinearLayout içinde başka görünümler ekleyebilirsiniz.

Aşağıdaki resimde, birkaç başka görünüm içeren bir LinearLayout içeren bir ScrollView örneği gösterilmektedir.

Bu görevde, kullanıcının kısa bir biyografinin gösterildiği metin görünümünde kaydırma yapmasına olanak tanıyan bir ScrollView ekleyeceksiniz. Yalnızca tek bir görünümü kaydırılabilir hale getiriyorsanız görünümü doğrudan ScrollView içine yerleştirebilirsiniz. Bu görevde de aynı işlemi yapacaksınız.

1. adım: TextView içeren bir ScrollView ekleyin

1. activity_main.xml dosyasını Tasarım sekmesinde açın.
2. Bir kaydırma görünümünü tasarım düzenleyiciye veya Bileşen Ağacı'na sürükleyerek düzene ekleyin. Kaydırma görünümünü yıldız resminin altına yerleştirin.
3. Oluşturulan kodu incelemek için Metin sekmesine geçin.

// Auto generated code
<ScrollView
   android:layout_width="match_parent"
   android:layout_height="match_parent">

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

ScrollView öğesinin yüksekliği ve genişliği üst öğeyle eşleşir. name_text metin görünümü ve star_image resim görünümü, içeriklerini göstermek için yeterli dikey alanı kullandıktan sonra Android sistemi, ekranın kalan kullanılabilir alanını doldurmak için ScrollView öğesini yerleştirir.

4. ScrollView öğesine bir id ekleyip bio_scroll olarak adlandırın. ScrollView öğesine id eklemek, Android sistemine görünüm için bir tutma yeri sağlar. Böylece kullanıcı cihazı döndürdüğünde sistem kaydırma konumunu korur.
5. ScrollView içinde LinearLayout kodunu kaldırın. Uygulamanızda yalnızca kaydırılabilir bir görünüm (TextView) olacaktır.
6. Palet'ten Bileşen Ağacı'na bir TextView sürükleyin. TextView öğesini bio_scroll öğesinin alt öğesi olarak bio_scroll altına yerleştirin.
   
   
7. Yeni metin görünümünün id değerini bio_text olarak ayarlayın.
8. Ardından, yeni metin görünümü için bir stil eklersiniz. Özellikler bölmesinde, Kaynaklar iletişim kutusunu açmak için stil özelliğinin yanındaki üç noktayı ... tıklayın.
9. Kaynaklar iletişim kutusunda NameStyle ifadesini arayın. Listeden NameStyle simgesini seçip Tamam'ı tıklayın. Metin görünümü artık önceki bir görevde oluşturduğunuz NameStyle stilini kullanıyor.
   
   

2. adım: Biyografinizi yeni TextView'a ekleyin

1. strings.xml dosyasını açın, bio adlı bir dize kaynağı oluşturun ve kendiniz veya istediğiniz herhangi bir şey hakkında uzun bir metin girin.
   

Not:

• Satır sonunu belirtmek için \n kullanın.
• Kesme işareti kullanırsanız ters eğik çizgiyle kaçırmanız gerekir. Örneğin:
  "You mustn\'t forget the backslash."
• Kalın metin için <b>...</b>, italik metin için <i>...</i> kullanın. Örneğin:
  "This text is <b>bold</b> and this text is <i>italics</i>."

Örnek biyografi:

<string name="bio">Hi, my name is Aleks.
\n\nI love fish.
\n\nThe kind that is alive and swims around in an aquarium or river, or a lake, and definitely the ocean.
\nFun fact is that I have several aquariums and also a river.
\n\nI like eating fish, too. Raw fish. Grilled fish. Smoked fish. Poached fish - not so much.
\nAnd sometimes I even go fishing.
\nAnd even less sometimes, I actually catch something.
\n\nOnce, when I was camping in Canada, and very hungry, I even caught a large salmon with my hands.
\n\nI\'ll be happy to teach you how to make your own aquarium.
\nYou should ask someone else about fishing, though.\n\n</string>

2. bio_text metin görünümünde, text özelliğinin değerini biyografinizi içeren bio dize kaynağı olarak ayarlayın.
3. bio_text metnin okunmasını kolaylaştırmak için satırlar arasına boşluk ekleyin. lineSpacingMultiplier özelliğini kullanın ve 1.2 değerini verin.
   
   
   
   Tasarım düzenleyicide bio metninin ekranın yan kenarlarına kadar uzandığını fark edin. Bu sorunu düzeltmek için kök LinearLayout öğesine sol, başlangıç, sağ ve bitiş dolgusu özellikleri ekleyebilirsiniz. En altta dolgu eklemeniz gerekmez. Çünkü en alta kadar uzanan metin, kullanıcılara metnin kaydırılabilir olduğunu gösterir.
4. Kök LinearLayout öğesine 16dp başlangıç ve bitiş dolgusu ekleyin.
5. Metin sekmesine geçin, boyut kaynağını çıkarın ve layout_padding olarak adlandırın.
   
   

Not: Uygulamanızı Arapça gibi sağdan sola diller için uyarlamak üzere API düzeyi 17'den itibaren dolgu ve kenar boşluğu için "left" ve "right" yerine "start" ve "end" kullanın.

6. Uygulamanızı çalıştırın ve metinde kaydırın.
   
   

Tebrikler!

Sıfırdan eksiksiz bir uygulama oluşturdunuz ve uygulamanız harika görünüyor.

Android Studio projesi: AboutMe

Not: Tüm kodlama görevleri isteğe bağlıdır.

ScrollView içinde, TextView'nin üstüne bir ImageView ekleyin. Uygulamayı çalıştırdığınızda bu resim, yıldızın aksine, metin yukarı kaydırıldıkça görünüm alanının dışına kaydırılır.

İpucu: Kaydırma görünümünde yalnızca bir alt görünüm olabilir. Kaydırılabilir iki görünümü (ImageView ve TextView) LinearLayout içine sarmalamanız gerekir.

• ViewGroup, başka görünümler içerebilen bir görünümdür. LinearLayout ve ScrollView görüntüleme gruplarıdır.
• LinearLayout, alt görünümlerini yatay veya dikey olarak düzenleyen bir görünüm grubudur.
• Ekranda uzun metin veya resim koleksiyonu gibi içerikler göstermeniz gerektiğinde ScrollView kullanın. Kaydırma görünümü yalnızca bir alt görünüm içerebilir. Birden fazla görünümü kaydırmak istiyorsanız ScrollView öğesine LinearLayout gibi bir ViewGroup ekleyin ve kaydırılacak görünümleri bu ViewGroup içine yerleştirin.
• Düzen Düzenleyici, Android Studio'da bulunan görsel tasarım düzenleyicisidir. Düzen Düzenleyici'yi kullanarak kullanıcı arayüzü öğelerini düzene sürükleyerek uygulamanızın düzenini oluşturabilirsiniz.
• Stil, bir görünümün görünümünü belirten özellikler koleksiyonudur. Örneğin, bir stil yazı tipi rengini, yazı tipi boyutunu, arka plan rengini, dolguyu ve kenar boşluğunu belirtebilir.
• Bir görünümün tüm biçimlendirmesini çıkarıp bir stilde toplayabilirsiniz. Uygulamanıza tutarlı bir görünüm kazandırmak için stili diğer görünümlerde yeniden kullanın.

Udacity kursu:

• Kotlin ile Android Uygulamaları Geliştirme

Android geliştirici belgeleri:

• Düzenler
• ViewGroup
• View
• Doğrusal Düzen
• ScrollView
• Farklı piksel yoğunluklarını (dp) destekleme
• Düzen Düzenleyici ile kullanıcı arayüzü oluşturma
• Android Studio dokümanları
• Stiller ve Temalar

Bu bölümde, bir eğitmenin yönettiği kurs kapsamında bu codelab'i tamamlayan öğrenciler için olası ödevler listelenmektedir. Eğitmen, aşağıdakileri yapmalıdır:

• Gerekirse ödev atayın.
• Öğrencilere ev ödevi ödevlerini nasıl göndereceklerini bildirin.
• Ödevlere not verin.

Eğitmenler bu önerileri istedikleri kadar kullanabilir ve uygun olduğunu düşündükleri diğer ödevleri verebilirler.

Bu codelab'i kendi başınıza tamamlıyorsanız bilginizi test etmek için bu ödevleri kullanabilirsiniz.

Bu soruları yanıtlayın

1. Soru

Aşağıdakilerden hangisi bir görünüm grubudur?

▢ EditText

▢ LinearLayout

▢ TextView

▢ Button

2. Soru

Aşağıda listelenen görünüm hiyerarşilerinden hangisi geçerli değildir?

▢ LinearLayout > TextView, TextView, ImageView

▢ ScrollView > LinearLayout > TextView, Button, Button, ScrollView > TextView

▢ TextView > TextView, ImageView, ScrollView

3. Soru

Stiller, styles.xml içinde tanımlanan kaynaklardır. Stilleri kullanarak bir görünümün renklerini, yazı tiplerini, metin boyutunu ve diğer birçok özelliğini tanımlayabilirsiniz. Doğru mu yanlış mı?

▢ Doğru

▢ Yanlış

4. Soru

ScrollView, alt öğeleri olarak herhangi bir sayıda görünüm veya görünüm grubu içerebilen bir görünüm grubudur. Doğru mu yanlış mı?

▢ Doğru

▢ Yanlış

5. Soru

Uygulamanızda resim görüntülemek için hangi kullanıcı arayüzü öğesi kullanılabilir?

▢ TextView

▢ ImageView

▢ Button

▢ ScrollView

Sonraki derse başlayın: 2.2: Kullanıcı etkileşimi ekleme

Bu kurstaki diğer codelab'lerin bağlantılarını Android Kotlin Hakkında Temel Bilgiler codelab'leri açılış sayfasında bulabilirsiniz.