Now Reading
Bedah layout Instagram ( Part 1 – Welcome screen)

Cara tercepat dan termudah untuk membuat sebuah layout adalah dengan menggunakan metode ATM (Amati, Tiru lalu Modifikasi)
Home Screen Instagram

Welcome Screen Original Instagram

Hi Guys,

Kembali lagi kita akan lebih memperdalam dalam melakukan layouting android. Kali ini kita akan mencoba menerapkan layout yang sudah kita pelajari ke dalam sebuah aplikasi yang banyak orang pakai.

Ya kita akan mencoba membuat layout aplikasi populer yakni Instagram.

Cara tercepat dan termudah untuk membuat dan mempelajari layouting android yakni dengan menerapkan metode ATM (Amati -> Tiru -> Modifikasi). Dengan melakukan teknik ini, dijamin kamun akan cepat dan bisa membuat layout-layout yang keren.

Kalo perlu pertama yang kamu harus lakukan, masuk ke website nya play store google. Disana sudah banyak aplikasi-aplikasi populer. Coba kamu masuk ke top list android app, download sebanyak-banyak nya. Hehe. Terus kamu coba deh satu-satu aplikasinya. Coba perhatikan bagaimana aplikasi tersebut bekerja, kalo perlu juga pelototi ampe berjam-jam. Hehe

Setelah dapat feel nya, baru kita curahkan design-design tersebut ke dalam aplikasi kita.

Tapi kali ini saya akan mencoba mencurahkan nya ke dalam aplikasi Instagram dalam beberapa bagian. Dimulai dari membuat home screen android. 🙂

Ok guys, cekidot.

 

 

1. Mengamati posisi view di dalam aplikasi

Welcome Screen Custom

Welcome Screen Modifikasi. Serupa tapi tak sama 🙂

Hal paling mudah ketika akan membuat sebuah layout yakni mengamati layout aplikasi yang sudah ada. Coba perhatikan gambar di atas. Ada sebuah combo box yang berada paling atas dan sebuah text view yang berada paling bawah. Dari perilaku ini kita bisa bilang bahwa layout ini menggunakan relative layout. Lalu ada judul text Instagram dan sebuah button yang berada di tengah. Menguatkan akan sebuah relative layout. Mudah bukan 🙂

 

2. Meniru dan meletakan posisi-posisi view layout

 

Setelah kita mengamati, mari kita coba tiru penempatan-penempatan view tersebut. Setelah kita mempelajari bagaimana relative layout bekerja.

Perhatikan gambar di sebelah kiri yang merupakan layout hasil modifikasi, mirip tapi tak sama. Hehe.

Bagaimana cara membuat nya? Mari kita bedah satu per satu

 

 

 

 

 

2.1 Spinner bahasa

View yang berada di paling atas tengah merupakan combobox yang kita kenal dengan spinner di dunia Android. Kita bisa menggunakan centering dengan menggunakan relative layout. Buat xml seperti biasa untuk layout instagram ini, lalu beri nama welcome_instagram.xml. Spinner ini dibuat center secara horizontal dan berada di posisi paling atas dengan parent top.

 

Untuk mengisi konten spinner tersebut, penulis menggunakan array of string yang disimpan di strings.xml. Contoh aplikasi ini hanya menggunakan dua bahasa saja yakni Inggris dan Indonesia.

 

Lalu array ini dipasangkan di dalam inisiasi spinner yang akan kita buat di dalam onCreate Activity.

 

Untuk konten spinner sendiri, penulis menggunakan custom layout yang menggunakan spinner_item_bahasa.xml. File ini untuk menampilkan custom list di dalam spinner yang berupa text view.

 

2.2 Text view Log in

Kenapa membuat text view login terlebih dahulu? Karena di dalam relative layout, menurut penulis lebih mudah mencari objek-objek yang posisinya berada di ujung-ujung lalu mengarah ke yang lebih dalam. Di posisi atas dan text login ada sebuah garis abu-abu, untuk membuatnya penulis menggunakan objek view yang di set panjangnya match parent dengan tinggi 1dp (density pixel). Garis ini dibuat relative sebelah atas dari text view login. Setelahnya ada 2 text view pertama “Already have an account?” dan “Log in”. Kenapa dibuat terpisah? Karena secara coloring untuk Log in lebih tua, dan di text view login nantinya akan diberikan event click untuk mengarah ke dalam screen Login Activity.

 

2.3 Text View Instagram dan Button sign up

Teks Instagram dan button sign up tidak berada tepat di tengah-tengah dan seperti beriringan secara vertikal. Berarti jika kita coba analisis, teks instagram dan button sign up berada di dalam layout linear tetapi layout linear ini diposisikan secara center di dalam relative layout. Bingung? hehe mari kita coba lihat

 

 

Teks instagram dan button sign up dibungkus dalam linear layout dengan orientasi vertikal lalu button sign up diberi margin 150 dp agar terdapat jarak antar keduanya. Setelah itu agar keduanya berada di tengah, yang di posisikan secara center adalah linear layout yang membungkus kedua view tersebut. Easy right. Maka hasilnya akan seperti ini

Hasil awal instagram

Hasil awal instagram

 

Apa ada yang kurang dari gambar di atas? Coba perhatikan bentuk font instagram tidak sama yah? Dan bentuk button sign up ujung-ujungnya lancip, sedangkan bentuk button dari instagram agak membundar. Gimana caranya biar sama? Ok cekidot.

 

3. Memodifikasi tampilan layout standar

Kita akan mencoba mengubah-ubah tampilan layout standar bawaan android agar hasilnya terlihat lebih menarik. Dimulai dengan menkonfigurasi font. Untuk menkonfigurasi font, penulis memanfaatkan bantuan library dari gradle bernama Calligraphy. Kamu bisa lihat langsung di githubnya https://github.com/chrisjenx/Calligraphy

 

Masukan script ini ke dalam build.gradle aplikasi kamu lalu sinkronisasi. Setelah selesai buat satu folder baru bernama assets. Caranya dengan menklik kanan di folder app projek kamu. New -> Folder -> Assets folder dan set target source nya main. Akan ada satu folder baru bernama assets di bawah directory app. Lalu buat folder baru didalamnya bernama fonts dengan menklik kanan New -> Directory dan beri nama fonts.

Kebetulan saya menggunakan font Roboto untuk default keseluruhan font dan menggunakan font BonBon untuk teks Instagram. Salin semua file font berformat .ttf dan .otf ke dalam folder fonts. Kamu bisa mendownload font-font lain jika ingin di internet. 🙂

Font instagram

 

 

 

 

 

 

 

 

 

 

 

Setelah selesai menkonfigurasi, kita perlu membuat satu base app class yang men extend Application untuk menkonfigurasi font-font ini. Buat satu class baru namanya BaseApp. Saya set default font untuk seluruh screen dengan Roboto-Regular.

 

Setelah itu baru set font yang ingin digunakan untuk merubah font Instagram. Disini penulis menggunakan font BonBon.

 

Jangan lupa untuk juga men-attach konfigurasi font tersebut di dalam MainActivity.

 

Setelah selesai mengganti font, terakhir kita akan sedikir memodifikasi button sign up agar tidak terlihat lancip.

Caranya kita perlu membuat satu layout lagi bernama button_rounded.xml yang akan kita simpan di dalam folder drawable android.

 

Lalu kita set layout baru ini sebagai background di dalam button sign up.

 

Setelah itu jangan lupa, kamu juga bisa merapikan kode warna yang menggunakan hash tag ke dalam file color.xml

 

Lalu set seperti ini.

 

Setelah kita jalankan hasilnya akan seperti di bawah ini. Easy right. 🙂

Welcome Screen Custom

Welcome Screen Modifikasi

 

Ok guys segitu dulu tutorial dari saya

Nantikan tutorial-tutorial selanjutnya.

Subscribe jika kamu ingin selalu update 🙂

Cheers. Have a nice day. Happy Coding.

🙂

 

Untuk source code nya bisa kamu download di bawah ini

Download Source Code

 

What's your reaction?
Love It
83%
Like It
0%
Want It
17%
Had It
0%
Hated It
0%
About The Author
Tech Atmosphere
Enjoy Tech