Android Studio Fundamentals 1.3: Menambah dan Mengedit Elemen TextView
Alat dan aplikasi yang diperlukan:
- PC/Desktop dengan Sistem Operasi Windows
- Java Development Kit (JDK) versi 11
- Android Studio versi 3.3
Menambah dan Mengedit Elemen TextView
Membuat Proyek dan Elemen TextView
- Buat proyek baru pada Android Studio seperti pada gambar di bawah ini.
2. Buka file activity_main.xml, tab Text.
3. Ubah tag Constraint Layout menjadi Relative Layout.
4. Hapus baris berikut pada kode XML. Beberapa atribut yang bergaris bawah merah, namun tidak apa-apa karena akan langkah selanjutnya.
xmlns:app=”http://schemas.android.com/apk/res-auto”
5. Hapus atribut constraint.
6. Tambah elemen TextView baru di atas elemen TextView Hello World! .
<TextView
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:id=”@+id/article_heading”
android:background=”@color/colorPrimary”
android:textColor=”@android:color/white”
android:padding=”10dp”
android:textAppearance=”@android:style/TextAppearance.DeviceDefault.Large”
android:textStyle=”bold”
android:text=”Article Title”/>
7. Arahkan kursor pada value “Article Title” di android:text=”Article Title” (hardcoded string) dan tekan Alt+Enter pada keyboard. Pilih Extract string resource.
8. Lakukan Extract dimension resource pada android:padding=”10dp” dengan cara menekan Alt+Enter pada “10dp“>Extract dimension resource. Isi Resource name dengan padding_regular. Klik OK.
9. Tambah elemen TextView baru seperti berikut.
<TextView
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:id=”@+id/article_subheading”
android:layout_below=”@+id/article_heading”
android:padding=”@dimen/padding_regular”
android:textAppearance=”@android:style/TextAppearance.DeviceDefault”
android:textStyle=”bold”
android:text=”Article Subtitle”/>
10. Arahkan kursor pada value ”Article Subtitle” di atribut android:text=”Article Subtitle” (hardcoded string) dan tekan Alt+Enter pada keyboard. Pilih Extract string resource.
11. Tambahkan atribut pada TextView Hello World! seperti berikut.
android:id=”@+id/article”
android:layout_below=”@id/article_subheading”
android:lineSpacingExtra=”5sp”
android:padding=”@dimen/padding_regular”
android:text=Change to ”Article text”
12. Arahkan kursor pada value ”Article text” di android:text=”Article text” (hardcoded string)dan tekan Alt+Enter pada keyboard. Pilih Extract string resource.
13. Lakukan Extract dimension resource pada android:lineSpacingExtra=”5sp” dengan cara menekan Alt+Enter pada “5sp“>Extract dimension resource. Isi Resource name dengan line_spacing. Klik OK.
14. Pada menu bar, klik Code>Reformat Code.
15. Lihat tampilan pad tab Preview.
Menambahkan Teks Artikel
- Buka file string.xml dengan cara mengakses folder app>res>values>string.xml.
2. Buka file berisi teks apa saja (Word, Notepad). Atau bisa juga dengan mengakses contoh teks Scrolling Apps.
3. Masukkan value pada string article_title, article_subtitle, dan copy-paste artikel yang tersedia ke dalam article_text.
4. Tampilan pada tab Preview.
Menambahkan ScrollView dan Mengaktifkan Link Website
Menambahkan Atribut autoLink untuk Link Website
Tambahkan android:autoLink=”web” pada TextView article_text.
Menambahkan Tampilan ScrollView
- Tambahkan kode berikut di antara TextView article_subheading dan article_text.
<ScrollView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”></ScrollView>
2. Pindahkan tag </ScrollView> setelah TextView article.
3. Cut atribut berikut dari TextView article dan paste pada ScrollView.
android:layout_below=”@+id/article_subheading”
4. Lihat pada tab Preview.
Scroll Multiple Elements
Menambahkan LinearLayout pada ScrollView
- Buka file activity_main.xml, tab Text.
- Tambahkan elemen berikut.
<LinearLayout
android:layout_width=”match_parent”
android:layout_height=”wrap_content”></LinearLayout>
di bawah atribut ScrollView
android:layout_below=”@+id/article_heading”>
di atas elemen TextView
<TextView
android:id=”@+id/article”
3. Tambahkan android:orientation=”vertical” di dalam LinearLayout.
Memindahkan Elemen-Elemen UI dalam LinearLayout
- Edit>Cut TextView article_subheading di atas TextView article. Lalu paste di dalam LinearLayout.
- Hapus atribut android:layout_below=”@id/article_heading” dari TextView article_subheading. Karena TextView article_subheading sekarang berada dalam LinearLayout, atribut ini akan bertabrakan dengan atribut LinearLayout.
- Ubah atribut ScrollView android:layout_below=”@id/article_subheading” menjadi android:layout_below=”@id/article_heading”. Sekarang, subheading adalah bagian dari LinearLayout, ScrollView berada di bawah heading bukan subheading.
4. Jalankan aplikasi.
Code Challenge
Tambahkan Button pada bagian bawah artikel.
- Pada tab Design, drag and drop elemen Button. Pada panel Attributes>TextView>text: Add Comment.
2. Pindah ke tab Text dan arahkan kursor pada value ”Add Comment” di android:text=”Add Comment” (hardcoded string)dan tekan Alt+Enter pada keyboard. Pilih Extract string resource>Resource name isi dengan add_comment>OK.
3. Jalankan aplikasi. Scroll down untuk menemukan add_comment button.
Sumber:
