Turtorial Android | Membuat layout Login Pinterest di Android

Hey Dab, Setelah saya membuat Tutorial Android | User Interface & layout Android Bagian 1 dan Bagian 2 Kali ini merupakan lanjutan dari semuanya. Disini saya akan menjelaskan konsep membuat Layout yang biasa di pakai. Layout di android mempunya banyak jenis dan banyak komponennya dari Linear layout, Relative layout, terus ada scroll view serta yang lainnya. Terus kalau itu semua menjadi satu ada beberapa hal yang harus di perhatikan. Coba lihat contoh berikut ini:

Dari gambar diatas terlihat jelas kalau Layout memiliki susuanan. Pada dasarnya Untuk layout yang menjadi Parent adalah Relative layout baru Childnya Linear Layout. Namun berbeda ketika nanti menggunakan scroll View dia akan Terletak paling Atas atau Jadi Parent dari Relative layout.

Ini Contoh Susunannya jika Relative Layout Yang menjadi Parent (sesuai layout di atas) :

Lalu ini Jika menggunakan ScrollView yang menjadi Parent :

Oke Setelah mengerti mengenai Konsep Dari layout, Saya akan memulai tutorial membuat Layout sesuai gambar di atas:

1. Pertama kalian buat new Project.
2. Terus pilih layout di res -> layout -> activity_main.xml
3. Lalu hal yang pertama kalian Lakukan adalah membuat Tree layout Seperti Contoh yang relative layout jadi parent. Cara gampangnya Seperti ini :
   
   
   Jadi Kalian Tinggal Drag Dari Pallete ke Outline (Perhatikan Komponen yang di Drag dan Juga Parent dan childnya) Semua Komponen bisa di Drag.
4. Setelah Kalian Melakukan Drag seperti diatas, sekarang kita akan masuk ke bagian Relative Layout, Tuliskan Code Seperti ini:
   

   <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="match_parent"
       android:background="@drawable/nux_welcome_sharing"
       android:paddingBottom="@dimen/activity_vertical_margin"
       android:paddingLeft="@dimen/activity_horizontal_margin"
       android:paddingRight="@dimen/activity_horizontal_margin"
       android:paddingTop="@dimen/activity_vertical_margin"
       tools:context=".MainActivity" >
   

   
   Untuk android:background="@drawable/nux_welcome_sharing", Kalian Download Terlebih dahulu gambar berikut ini :
   
   Lalu masukan ke Project di folder res -> Drawable-mdpi (Tinggal Di Copy Paste). maka Gambar akan Muncul.
5. Setelah itu Kita Akan masuk Langsung Ke Linear Layout, Karena Disini Menggunakan Konsep Height dan Weight Kalian Bisa Lihat disini untuk Tutorialnya. Copy Codenya pada bagian Copy Code di sini atau sesuaikan dengan layout yang anda buat:
   
   

   <LinearLayout
         android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:orientation="vertical"
        >
       
       <LinearLayout
           android:layout_width="match_parent"
           android:layout_height="0dp"
           android:layout_above="@+id/linearLayout1"
           android:layout_weight="4"
           android:orientation="vertical" >
   
           <ImageView
               android:id="@+id/imageView1"
               android:layout_width="159dp"
               android:layout_height="66dp"
               android:layout_gravity="center"
               android:layout_marginTop="50dp"
               android:src="@drawable/splash_logo" />
       </LinearLayout>
   
       <LinearLayout
           android:layout_width= "match_parent"
           android:layout_height="0dp"
           android:layout_weight="1"
           android:orientation="horizontal" >
   
           <Button
               android:id="@+id/Registerbtn"
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:layout_gravity="center"
               android:layout_margin="10dp"
               android:layout_weight="1"
               android:background="@drawable/gradientread"
               android:paddingBottom="10dp"
               android:paddingTop="10dp"
               android:text="Sign Up"
               android:textColor="#ffffff"
               android:textStyle="bold" />
   
           <Button
               android:id="@+id/Loginbtn"
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:layout_gravity="center"
               android:layout_margin="10dp"
               android:layout_weight="1"
               android:background="@drawable/gradientwhite"
               android:paddingBottom="10dp"
               android:paddingTop="10dp"
               android:text="Log In"
               android:textStyle="bold" />
       </LinearLayout>
   </LinearLayout>
   

   
   Disini Saya Juga menggunakan Button dengan parent Linier Layout Orientation Horizontal. Dan di dalam Button Saya juga kasih Gradient Warna, Lihat Tutorial Gradient Warna.
6. Sekarang Kalian Copy Code yang saya gunakan untuk Gradient Warna.
   Gradient Red
   
   

   <?xml version="1.0" encoding="utf-8"?>
   <selector xmlns:android="http://schemas.android.com/apk/res/android">
       <item android:state_pressed="true" >
           <shape>
               <gradient 
                   android:angle="270" 
                   android:endColor="#f74552" 
                   android:startColor="#FA616B" />
   
               <stroke
                   android:width="1dp"
                   android:color="#f74552" />
               <corners
                   android:radius="5dp" />
               <padding
                   android:left="10dp"
                   android:top="10dp"
                   android:right="10dp"
                   android:bottom="10dp" />
           </shape>
       </item>
       <item>
           <shape>
               <gradient
                   android:startColor="#f74552"
                   android:endColor="#FA616B"
                   android:angle="270" />
               <stroke
                   android:width="1dp"
                   android:color="#f74552" />
               <corners
                   android:radius="5dp" />
               <padding
                   android:left="10dp"
                   android:top="10dp"
                   android:right="10dp"
                   android:bottom="10dp" />
           </shape>
       </item>
   </selector>
   

   
   Gradient White
   
   

   <?xml version="1.0" encoding="utf-8"?>
   <selector xmlns:android="http://schemas.android.com/apk/res/android">
       <item android:state_pressed="true" >
           <shape>
               <gradient 
                   android:angle="270" 
                   android:endColor="#f7f7f7" 
                   android:startColor="#E7E3E7" />
   
               <stroke
                   android:width="1dp"
                   android:color="#171717" />
               <corners
                   android:radius="5dp" />
               <padding
                   android:left="10dp"
                   android:top="10dp"
                   android:right="10dp"
                   android:bottom="10dp" />
           </shape>
       </item>
       <item>
           <shape>
               <gradient
                   android:startColor="#f7f7f7"
                   android:endColor="#E7E3E7"
                   android:angle="270" />
               <stroke
                   android:width="1dp"
                   android:color="#171717" />
               <corners
                   android:radius="5dp" />
               <padding
                   android:left="10dp"
                   android:top="10dp"
                   android:right="10dp"
                   android:bottom="10dp" />
           </shape>
       </item>
   </selector>
   

   
   
7. Oke Selesai, Layout akan jadi Seperti gambar diatas.