PENGANTAR
Terdapat banyak komponen di android studio yang dapat di manfaatkan. Seperti button, Images, EditText, TextView dan dan sebagainya. Komponen tersebut memilik attribut atau entitas yang harus di beri nilai agar UI/UX mudah di pahami oleh user. Attribut tersebut ada dua model. Ada attribut yang di gunakan secara umum, dalam arti semua komponen memiliki attribut tersebut. Seperti menentukan lebar atau tinggi sebuah komponen. Ada juga attribut yang terkhusus hanya untuk komponen tertentu.
Salah satu contoh komponen adalah View. View merupakan komponen yang di sediakan oleh android studio untuk menampilkan sebuah bingkai. Dalam bingkai ini kita dapat menasukkan komponen lain seperti komponen image, TextView, Button dan lain sebagainya.
Nah, agar tampilan tersebut dapat menarik dan elegan maka di dalam TextView terdapat beberapa attribut yang dapat kita rubah nilainya, seperti merubah warna, ukuran, jenis dan lain sebagainya. Metode ini kita sebut sebagai Formatting. Penulisannya dapat di lihat seperti berikut:
<TextView => Pembuka Komponen
Attribut 1 :
Attribut 2:
Attribut 3
/> =>Penutup Komponen
Berbeda dengan Layout di komponen penutup cukup di berikan tanda "/>". Sedangkan attribut di letakkan di antara tag komponen tersebut. Attribut tersebut berfungsi untuk merubah tampilan dari sebuah komponen.
Sebelum kita mulai pastikan adan sudah menjalankan android studio dan membuat projek baru. Settingan projek baru bisa anda lihat seperti berikut:
- activity: Empty Activity
- name: Latihan_textView
- language:java/Kotilin
- Baca Tutorial membuat projek baru di Android Studio
Android Studio akan memberikan anda halaman antarmuka, Ada dua jenis file yang terbuka yaitu:
- activity_main.xml = > merupakan halaman untuk desain antarmuka aplikasi mobile
- MainActivity = > Halaman yang di gunakan untuk membuat atau mengetikkan progam (kotlin / Java).
Karena kita akan membuat desain di sini maka kita akan melakukan perubahan pada halaman activity_main.xml. Anda dapat membuka halaman tersebut dan berikut bentuk code yang sudah di siapkan oleh android studio:
<?xml version="1.0" encoding="utf-8"?>
<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:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello Word"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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">
<!-- Disini komponen akan di letakkan-->
</RelativeLayout>
Sampai di sini persiapan kita anggap selesai. Sekarang kita akan mencoba menambahkan komponen ke dalam file tersebut. Komponen ini di tulis di antara Layout.
Setting Lebar dan Tinggi.
Komponen pertama yang akan kita tambah adalah "View" Ketiikan View di antara Layout sehingga muncul library.Kemudian pilih View sehingga terciptalah komponen dengan attribut seperti berikut ini:
<View
android:layout_width=""
android:layout_height=""/>
Jangan lupa tambah tag penutup untuk komponen View tersebut.
Terdapat dua buah attribut yang dibuat secara otomatis di dalam View, yaitu:
- android:layout_width="..." yang berfungsi untuk mengatur lebar komponen.
- android:layout_height="" yang berfungsi untuk mengatur tinggi sebuah komponen.
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.
<View
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
Selain itu, nilai dari ke dua atribut tersebut dapat juga berupa angka dengan satu dp (umum digunakan anda juga bisa menggunakan px), seperti:
<View
android:layout_width="500dp"
android:layout_height="100dp"/>
Nah sekarang masuk ke halaman Desaign dan perhatikan belum ada perubahan di halaman design kita. Itu karena kita belum nenambahkan atribut untuk menampilkan lain.
Menentukan Warna View
Nah jika kita lihat pad halaman "Design" tidak terjadi perubahan apa-apa Hal ini di karenakan kita belum memiliki attribut yang memberikan effek tertentu pada halaman design. Seperti merubah warna Backgroun atau tulisan, Memasukkan Text dan lain sebagainya.
Oke, Kita coba merubah warna background pada View tersebut. Anda bisa tambahkan attribut untuk merubah backgroud view seperti code di bawah ini:
<View
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="@color/black"/>
Attibut android:background="Nilai " merupakan attribut yang berfungsi untuk merubah waran latar belakang sebuah komponen. nilai dari attribut ini selalu di awali dengan "@color/" kemudian di ikuti dengan JenisNilai. black adalah nilai standar yang bisa kita pilih. Selain black tentu ada jenis warna lainnya. Coba perhatikan pada bagian samping kiri tepatnya pada deretan nomor di kiri sederetan code attribut backgroun di halaman utama. Terdapat kotak persegi berwarna hitam yang sesusai dengan niali yang di kandung attribut background.
Merubah nilai background anda dapat mengklik kotak persegi warna hitam tersebut sehingga muncul kotak dialog. Klik browse untuk mencari jenis warna yang lain. Perhatikan gambar berikut:
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.
Bagaimana jika warna yang di tawarkan tidak ada yang anda inginkan? Anda dapat mensetting warna yang anda inginkan. Berikut langkahnya:
- 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
Sekarang warna latar belakang komponen kita sudah berubah. Disini latarnya adalah warna kuning. Perhatikan sekarang warna view di halaman design. Apa sudah berwarna kuning? Jika sudah berarti kita telah sukses merubah warna dari View tersebut.
Mengatur posisi Margin & Padding
Margin dan padding adalah jarak antara komponen ke komponen yang lain. Margin memberikan jarak terhadap komponen ke komponen yang lain sedangkan padding memberikan jarak antara tepi komponen ke bagian dalam komponen tersebut. Perhatikan ilustrasi berikut:
Lalu bagaimana menanamkannya ke dalam desain kita? perhatikan contoh code di bawah ini:
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 sisi
Sedangkan pada padding
android:layout_paddingTop="10dp" => Jarak ke atas
android:layout_paddingLeft="10dp" => Jarak ke kiri
android:layout_paddingRight="10dp" => Jarak ke kanan
android:layout_paddingBottom="10dp" => jarak ke bawahandroid:layout_padding="10dp" => jarak ke semua sisi
Jika keempat atribut margin diatas memiliki nilai yang sama maka kita dapat meringkasnya menjadi:
android:layout_margin="10dp" => jarak ke semua sisi
Berikut contoh penulisan code di dalam View:
<View
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="@android:color/holo_orange_light"
android:layout_marginStart="10dp"
android:layout_marginTop="15dp"
android:layout_marginEnd="10dp"
android:layout_marginBottom="15dp"
android:padding="15dp"/>
Jalankan program anda dengan cara klik icon segitiga hijau pada bagian toolbar atau klik menu Run=>Run App. Maka hasilnya dapat di lihat pada gambar berikut:
Format Text
Sekarang coba tambahkan komponen Lain di bawah komponen View tadi. Komponen yang kita tambah adalah TextView seperti berikut:
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
Apa ada perubahan dari halam desain kita? Coba cek ke bagian halaman Design, Tidak terjadi perubahan Karena fungsi utama dari TextView adalah untuk menampilkan karakter, maka di dalam textview dapat ditambah atribut android:text="". Atribut tersebut akan menampilkan text yang dikandungnya. Contoh, kita ingin menampilkan ke User sebuah pesan "BELAJARA TEXTVIEW DAN FORMATIF DI ANDROID STUDIO ", maka kita buat attributnya seperti berikut ini:
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="BELAJARA TEXTVIEW DAN FORMATIF DI ANDROID STUDIO"/>
Nilai yang dikandung oleh text akan ditampilkan pada UI sehingga user dapat melihat pesan yang ingin disampaikan oleh aplikasi. Coba masuk kembali ke halaman Design dan perhatikan, Sudah ada pesan yang tampil bukan. Sekarang Coba jalankan program yang di buat dan perhatikan hasilnya.
Nah, Kita telah berhasil membuat dan menampilkan text di TextView sehingga user dapat melihat pesan. Namun masalahnya tampilan text tersebut masih standar dan tidak terkesan menarik. Oleh sebab itu kita akan melakukan modifikasi terhadap text tersebut dengan menambahkan beberapa attribut ke dalam TextView.
Text yang ditulis di dalam textview dapat dimodivikasi atau di format dengan berbagai jensi.
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 attrbut di atas merupakan attrbut standar yang digunakan. Masih banyak lagi jenis atrbut yang akan dibahas bersama waktu yang akan datang. Perhatikan code di bawah ini bagaimana cara menerapkan attribut tersebut ke dalam komponen TextView
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="BELAJARA TEXTVIEW DAN FORMATIF DI ANDROID STUDIO"
android:textSize="20dp"
android:textAlignment="center"
android:textColor="@color/design_default_color_error"
android:textAllCaps="true"
android:textStyle="bold"/>
Anda juga dapat mengatur nilai margin dan padding dari komponen TextView Tersebut. Jangan lupa anda juga dapat memberikan attribut background. Perhatikan code dibawah ini:
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="BELAJARA TEXTVIEW DAN FORMATIF DI ANDROID STUDIO"
android:textSize="20dp"
android:textAlignment="center"
android:textColor="@color/design_default_color_error"
android:textAllCaps="true"
android:textStyle="bold"
android:layout_marginTop="100dp"
android:background="@color/white"
android:padding="25dp"/>
Jalankan projek anda. Berikut hasil dari emulator:
Nah tentu sekarang anda sudah dapat membuat dan melakukan settingan pada komponen TextView bukan. Begitu mudahnya dan pasti anda bisa melakukannnya. Anda dapat memodivikasi TextView tersebut agar lebih menarik lagi.
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.
