Pada postingan kali ini akan singkat karena akan membahas bagaimana menampilkan layout seperti diatas. Catatan, Layout diatas menggunakan RelativeLayout. Layout diatas ialah kartu ucapan Selamat Ulang Tahun dari Vanny ditujukan kepada Jimmy yang ditampilkan di Android. Sangat Mudah dan mari coba :
Sebelum nya silahkan download picture disini atau sediakan picture sendiri dengan resolusi minimal 726 x 664px . Oke mari kita mulai :
- Pertama buat new project silahkan lakukan pengaturan sendiri. Sebagai contoh berikut konfigurasi yang digunakan.
AppName: Layout
Package: com.example.layout
Project Location default
Set minimum SDK API 15
Set emptyActivity
biarkan scara default untuk mempermudah
- Diatas sudah dijelaskan bahwa Program ini menggunakan RelativeLayout, pertama hapus seluruh kode pada activity_main, lalu seperti kode dibawah ini :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context="com.example.layout.MainActivity"
>
</RelativeLayout>
- Setelah itu tampilkan image. Caranya kita harus memasukkan image kedalam folder penyimpanan sistem aplikasi yaitu di C:\Users\hp\AndroidStudioProjects\Layout\app\src\main\res\drawable
- Setelah memasukan image selanjutnya menampilkan image pada layar android. Caranya masukan elemen <ImageView> . Lakukan konfigurasi layout_width dan layout_height dengan wrap_content. Lalu masukan image dengan menambahkan android:src="@drawable/(namafoto)".
- Selanjutnya masukan 2 TextView sehingga menampilkan seperti gambar diatas. Jangan khawatir jika aplikasi menampilkan seperti gambar diatas maka koding berhasil dilakukan. Hanya saja perlu melakukan "Style". Ya setidaknya membuat gambar lebih besar sehingga bisa menjadi layout sepenuhnya. Atau text yang sebaiknya lebih besar dan tidak tumpang tindih.
- Pertama yang perlu dilakukan ialah memperbesar 2 text diatas. Seting textSize didalam konten kedua TextView sebesar 30dp.
- Selanjutnya meletakkan text "From Jimmy" persis dipojok kanan bawah. Caranya masukkan input android:layout_*****ParentBottom="true" dan android:layout_*****ParentRight. [Diberi bintang/sensor untuk mencari sendiri di AndroidStudio agar tidak terbiasa copy-paste hehe]
- Nah coba kita lihat kembali hasil akhir project ini seperti gambar diatas. Lalu bandingkan dengan image sebelahnya. Ya disana tinggal kurang mengganti font, memperbesar image dan satu lagi melakukan padding agar text tidak mepet dipinggir caranya dengan menambahkan fungsi padding.
- Oke selanjutnya font diganti "sans-serif-light" dengan menggunakan perintah "android:fontFamaily" didalam 2 TextView.
- Lalu menambahkan padding agar text tidak mepet. Gunakan perintah android:paddingRight="20dp". Perhatikan! Apakah padding untuk sisi kanan atau kiri.
- Nah langkah terakhir lakukan pengaturan untuk membuat gambar menjadi fullSize pada layar dengan cara: masukan kode android:scaleType="centerCrop" pada ImageView
- Oke hampir selesai namun ada kendala diatas yaitu text "Happy Birthday Vanny!" tidak terlihat karena warna sama dengan latar background. Ganti textColor:#FFF (FFF disini nanti akan menjadi warna putih)
<?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="wrap_content"
tools:context="com.example.layout.MainActivity"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/oke"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Happy Birthday Vanny!"
android:fontFamily="sans-serif-light"
android:textSize="30dp"
android:paddingLeft="20dp"
android:textColor="#FFF"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="From, Jimmy"
android:textSize="30dp"
android:paddingRight="20dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:fontFamily="sans-serif-light"
/>
</RelativeLayout>
Oke seharusnya Layout sederhana ini sudah selesai. Jika tidak, cobalah kembali langkah-langkah diatas atau bertanyalah dikolom komentar. Sampai jumpa dipost berikutnya :)
Terima Kasih
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
ConversionConversion EmoticonEmoticon