Memahami TextView
Persiapan:
Buatlah projek baru di Android Studio dengan \
activity: Empty Activity
name: Latihan_textView
language:java
Baca Tutorial membuat projek baru di Android Studio
Setelah selesai membahas tentang Layout atau disebut juga
sebagai bidang di dalam membuat disain antar muka android studio lengkap
dengan jenis-jenis dan tutorial membuatnya. Sekarang kita masuk ke materi
baru. Yaitunya temtnag komponen yang ada didalam layout tersebut.
Salah satu komponen yang ada didalam layout adalah
TextView. Komponen ini paling sering digunakan didalam membuat UI sebuah
aplikasi android. TextView merupakan salah satu komponen yang dimiliki oleh android yang berfungsi sebagai alat untuk menampilkan Karakter, simbol, angka di layout.
Textview tidak memberikan kebebasan kepada user untuk
berinteraksi dengan UI. User hanya dapat melihat tampilan yang
ditampilkan oleh UI. Untuk merubah nilai yang dikandung oleh TextView kita perlu melakukan konfigurasi pada halaman codenya.
TextView merupakan salah satu view sehingga penulisan komponen textview harus ditutup dengan tanda
/>. Berikut bentuk penulisan TextView:
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
Terdapat dua buah attribut didalam textView, yaitu android:layout_width="" yang berfungsi untuk mengatur lebar layout dan android:layout_height="" yang berfungsi untuk mengatur tinggi sebuah layout. Sedangkan nilai yang dikandung ke 2 atribut tersebut adalah:
match_parent => Lebar/Tinggi sebuah view akan menyesuaikan lebar/tinggi sebuah layout.
wrap_content => Lebar/Tinggi sebuah view menyesuaikan dengan lebar/tinggi dari view itu sendiri
Selain iut, nilai dari ke dua attribut tersebut dapat juga berupa angka dengan satu dp, seperti:
<TextView
android:layout_width="300dp"
android:layout_height="50dp"/>
Menampilkan Text di dalam TextView
Karena fungsi utama dari TextView adalah untuk menampilkan
karakter, maka didalam textview dapat ditambah attribut android:text="". Atribut tersebut akan menampilkan text yang dikandungnya. Contoh, kita ingin menampilkan ke User sebuah pesan "SELAMAT BELAJAR ", maka kita buat attributnya android:text="SELAMAT BELAJAR".
berikut bentuk penul penulisannya :
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="SELAMAT BELAJAR"/>
Nilai yang dikandung oleh text akan ditampilkan pada UI. Coba
jalankan program yang anda buat dan perhatikan hasilnya.
Format Text
Text yang ditulis didalam textview dapat dimodivikasi atau diformat.
Berikut bentuk modivikasi dari text tersebut
| NO | ATRIBUT | NILAI | KET |
|---|---|---|---|
| 1 | android:text=" " | Berupa karakter | Menampilkan karakter di UI |
| 2 | android:textSize=" " | Berupa angka dengan Satuan dp | Menentukan ukuran text |
| 3 | android:textStyle=" " | Bold, Italic, normal | Menentukan jenis style sebuah text |
| 4 | android:textColor=" " | @color/jenisWarna | Menentukan warna text |
| 5 | android:textAlignment=" " | Center, ViewEndt, TextEnd | Menentukan posisi text |
| 6 | android:textAllCaps=" " | True, false | Text berubah menjadi kapital jika nilai true |
Keenam atrbut diatas merupakan atrbut standar yang digunakan. Masih banyak lagi jenis atrbut yang dibahas bersama waktu yang akan datang.
Buka activity_main.xml. Tambahkan komponen textView dan tulislah seperti code berikut:
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Belajar Androdi"
android:textSize="20dp"
android:textStyle="bold"
android:textColor="@color/teal_700"
android:textAlignment="center"
android:textAllCaps="true"/>
Jalankan program, Perhatikan perubahan dari program yang anda buat.
Background Color
Background atau latar belakang merupakan sebuat atribut yang bisa disisipkan pada sebuah komponen. Ada 2 jenis perubahan pada latar belakang sebuah komponen yaitu dengan gambar yang akan kita bahas pada artikel selanjutnya dan latar warna.
Memberikan latar belakang suatu komponen membutuhkan atrbut android:background="" . Nilai yang dikandung oleh background tersebut merupakan nama dari sebuah warna. Nama warna ini terdapat didalam sebuah library.
Langkah untuk membuat warna adalah:
1. Ketikkan perintah berikut android:background="@color/black" . Kita sengaja memberikan nilai pada background dengan @color/black agar library dari @color dapat dibaca.
2. Perhatikan pada sisi kiri halaman terdapat tanda hitam kotak. Klik warna hitam tersebut sehingga keluar daftar warna. Silahkan pilih salah satu warna yang disukai dengan cara klik warna yang disukai. 3. Jika tidak ada warna yang disukai, klik Browse untuk mencari warna yang lain.
4. Di Jendela Fick a resource keluar berbagai jenis warna. Scroll kebawah dan cari warna kesukaan anda. Anda dapat memilih salah satu warna tersebut. Jika sudah klik OK.
5. Jika tidak ada warna yang ada sukai, maka lakukan hal berikut:
- Silahkan klik tanda + yang ada di atas jendeal fick a resource.
- Muncul drop menu. Pilih Color Value.
- Di jendela yang mucul pilih Resource value untuk mencari warna.
- Tampil jendela baru, Silahkan pilih warna yang disukan.
- Klik OK untuk menutup jendela
- Berikan nama warna pada Resource Name.
- Klik OK lagi
- Klik lagi OK
Margin & Padding
Margin dan pading adalah istilah yang sering digunakan dalam bidang UI sebuah aplikasi terutama html dan xml. Tapi beda ya dengan margin dalam dunia bisnis.
Margin dan Padding adalah tingkat selisih antara satu komponen ke komponen lain. Margin mengatur jarak komponen ke arah luar sedangkan padding mengatur jarak komponen kearah dalam. Ke duanya merupan attribut yang digunakan untuk memberikan space.
Berikut contoh attribut margin:
android:layout_marginTop="10dp" => Jarak ke atas
android:layout_marginLeft="10dp" => Jarak ke kiri
android:layout_marginRight="10dp" => Jarak ke kanan
android:layout_marginBottom="10dp" => jarak ke bawah
Jika keempat atribut margin diatas memiliki nilai yang sama maka kita dapat meringkasnya menjadi:
android:layout_margin="10dp" => jarak ke semua arah
Contoh:
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Belajar Androdi"
android:textSize="20dp"
android:textStyle="bold"
android:textColor="@color/teal_700"
android:textAlignment="center"
android:layout_margin="10dp"
android:textAllCaps="true"/>
Penulisan arribut Padding:
android:paddingTop="10dp" =>Jarak dari atas
android:paddingBottom="10dp" =>Jarak dari bawah
android:paddingLeft="10dp" =>Jarak dari samping kiri
android:paddingRight="10dp" =>Jarak dari samping kanan
Jika nilai ke 4 atribut padding sama maka dapat diringkas menjadi:
android:padding="10dp"
contoh:
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Belajar Androdi"
android:textSize="20dp"
android:textStyle="bold"
android:textColor="@color/teal_700"
android:textAlignment="center"
android:layout_margin="10dp"
android:paddingTop="10dp"
android:paddingBottom="20dp"
android:paddingLeft="10dp"
android:paddingRight="30dp"
android:textAllCaps="true"/>
Demikianlah sekilas bentuk-bentuk format dari tek dan pengaturan komponen. Agar lebih memahami silahkan dicoba di rumah.
Latihan:
Coba buat sebuah program dengan tampilan seperti berikut:
Penutup
Dengan menyelesaikan materi ini berarti anda sudah memahami tentang Komponen, atribut dan nilai yang dikandung oleh atribut. Akan banyak jenis komponen yang akan dibahas pada tutorial mendatang. Jadi ikuti terus artikelnya.