Materi 2 - Memulai User Interface Interactive di Android Studio

Imam Ibnu Badri Pemrograman Mobile 07.58

Kompetensi dan Indikator

Kompetensi Dasar:

Mengetahui komponen User Interface dalam aplikasi Android
Mengetahui bagaimana menggunakan komponen User Interface dalam membuat aplikasi Android

Indikator:

Mahasiswa mampu membuat dan menjalankan aplikasi sederhana dengan memanfaatkan komponen User Interface pada aplikasi Android menggunakan Layout Editor

Materi

A Dasar Materi

UI (User Interface) yang ditampilkan pada layar perangkat Android terdiri dari susunan "views". Views merupakan dasar Android user interface building blocks. User interface dari aplikasi Android diidentifikasikan dalam Res ➜ Layout ➜ file.xml.

Sebagai contoh, views dapat terdiri dari komponen seperti: TextView, EditText, Button, ScrollView, ImageView, Linier Layout, Menu dan komponen interaktif lainnya. Untuk melihat labih jauh komponen dalam applikasi Android dapat di lihat di Component Treepane pada Layout Editor.

B Membuat Project "Aplikasi Toast"

Materi pada praktikum kali ini adalah mendesain dan mengimplementasikan project untuk aplikasi "Hello Toast". Perhatkan langkah-langkah berikut :

Jalankan Android studio dan buatlah project baru dengan parameter.
Tambahkan views ke dalam aplikasi "Aplikasi Toast" di Layout Editor. View yang digunakan pada aplikasi ini adalah :
a. TextView untuk menampilkan teks
b. Button untuk menampilkan label dan dapat di-klik
c. Linierlayout sebagai viewGroup untuk meletakkan komponen view. Berikut gambaran konsep sederhana untuk menggambarkan susunan masing-masing view dalam aplikasi "Aplikasi Toast"
Pada folder app ➜ res ➜ layout, buka file activity_main.xml.
Lalu klik pada Tab Text untuk melihat struktur layout dalam bentuk kode XML.Atau Tab Design untuk melihat struktur layout dalam visual.

Pada baris kedua, ganti viewGroup menjadi LinierLayout, sehingga menjadi

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"

Pastikan bahwa tag di bagian paling akhir kode adalah </LinearLayout>
Atribut android:layout_height merupakan bagian dari template. Secara default, orientasi dari layout saat ini adalah horizontal. Untuk mengubahnya menjadi vertikal tambahkan kode android:orientation="vertical" di bawah android:layout_height .
Dan sekarang kode nya akan menjadi sebagai berikut:
Tambahkan view ke dalam Linier layout di Layout Editor. Masuk ke Tab Design ➜ hapus TextView yang sudah ada. Lalu dari panel Pallete ➜ drag and drop element 1 Button (Top Button), 1 TextView dan 1 Button (Bottom Button) lagi.
Ganti property dari masing-masing element menjadi sebagai berikut:
. Jalankan aplikasi

C Membuat String resources

Selain menggunakan hard-coding string dalam kode XML, terdapat cara lain untuk memberikan text pada komponen view yaitu menggunkan. String resources pada file terpisah. String resource lebih baik untuk diterapkan karena lebih mudah dalam memanage string terutama apabila string digunakan lebih dari satu kali. Berikut adalah langkahnya :

Masih pada project aplikasi "Aplikasi Toast", buka file res ➜ values ➜ string.xml

Tambahkan kode sehingga akan menjadi sebagai berikut :

<resources>
    <string name="app_name">Aplikasi Toast</string>
    <string name="textView1">Imam Ibnu Badri</string>
    <string name="textView2">0</string>
    <string name="buttonCount">Count</string>
    <string name="buttonToast">Toast</string>
</resources>

Kembali ke file activity_main.xml dan ubah pada android: text= pada masing-masing komponen menggunakan string resource. Sebagai contoh untuk view button toast menjadi sbb :, selanjutnya terapkan pula view yang lainnya.
```
android:text=@string/buttonToast
```

D Membuat Color Resources

Fungsi dari colors resource ini hampir sama dengan string resource. Buat color resource dengan langkah sebagai berikut :

Buka file res ➜ values ➜ colors.xml

Tambahkan kode sehingga menjadi sebagai berikut :

<resources>
    <color name="colorPrimary">#6200EE</color>
    <color name="colorPrimaryDark">#3700B3</color>
    <color name="colorAccent">#03DAC5</color>
    <color name="myBackgroundColor">#FFF043</color>
    <color name="nameColor">#d92626</color>
</resources>

Kembali ke activity_main.xml dan ubah android:background menjadi:
pada TextView

android:background="@color/myBackgroundColor"
android:textColor="@color/colorPrimary"

Pada Button

android:background="@color/colorPrimary"

Daftar Isi - Pemrograman Mobile

TeachMeSoft