Membuat Design Layout Tampilan Android Studio Menarik Dengan Material Design

Android Codelist

Kita akan belajar membuat tampilan Design aplikasi android,dengan memanfaatkan library dari materialdesign SNAPSHOT

Langkah pertama buka android studio
dan berinama aplakasi nya






Kemudian Klik Next



Next

Klik Finist dan tunggu sampai gradel nya selesai
Kemudian pilih menu Build.Gradle untuk menambahkan library materialdesign

Tambah kan skrip berikut :
dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12' 
 compile 'com.android.support:appcompat-v7:23.3.0' 
 compile 'com.mikepenz.thirdparty:material-design-library:1.5.0-SNAPSHOT'}

repositories {
    maven { url "https://oss.sonatype.org/content/repositories/snapshots/" }

}
Lalu klik sync,tunggu sampai proses selesai



Sekarang kita exsekusi di menu XML nya di main_activity




<?xml version="1.0" encoding="utf-8"?>
 <com.gc.materialdesign.views.ScrollView 
 android:layout_width="fill_parent" 
 android:layout_height="fill_parent" 
 xmlns:android="http://schemas.android.com/apk/res/android">
    <LinearLayout 
 android:orientation="vertical" 
 android:layout_width="fill_parent" 
 android:layout_height="match_parent" 
 xmlns:android="http://schemas.android.com/apk/res/android" 
 xmlns:materialdesign="http://schemas.android.com/apk/res-auto">


        <RelativeLayout 
 android:layout_width="fill_parent" 
 android:layout_height="48.0dip" 
 android:layout_marginLeft="104.0dip">
            <TextView 
 android:textStyle="bold" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:text="Pilihan Menu Aplikasi DesignLayout" 
 android:layout_centerVertical="true" />
            <View 
 android:background="@color/colorPrimaryDark" 
 android:layout_width="fill_parent" 
 android:layout_height="1.0dip" 
 android:layout_alignParentBottom="true" /> 
 </RelativeLayout>
        <com.gc.materialdesign.views.LayoutRipple 
 android:id="@+id/menu1" 
 android:background="#ffffffff" 
 android:clickable="true" 
 android:layout_width="fill_parent" 
 android:layout_height="64.0dip">
            <com.gc.materialdesign.views.ButtonFloat 
 android:background="@color/colorPrimary" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:layout_marginLeft="32.0dip"
 android:layout_centerVertical="true" /> 
             <TextView 
 android:textColor="#000" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:layout_marginLeft="104.0dip" 
 android:text="Menu Aplikasi Satu" 
 android:layout_centerVertical="true" /> 
 </com.gc.materialdesign.views.LayoutRipple>
        <com.gc.materialdesign.views.LayoutRipple 
 android:id="@+id/menu2"
 android:background="#ffffffff" 
 android:clickable="true" 
 android:layout_width="fill_parent" 
 android:layout_height="64.0dip">
            <com.gc.materialdesign.views.ButtonFloat 
 android:background="@color/colorPrimary" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:layout_marginLeft="32.0dip" 
 android:layout_centerVertical="true"                /> 
 <TextView 
 android:textColor="#000" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:layout_marginLeft="104.0dip" 
 android:text="Menu Aplikasi Dua" 
 android:layout_centerVertical="true" /> 
 </com.gc.materialdesign.views.LayoutRipple> 
 <com.gc.materialdesign.views.LayoutRipple 
 android:id="@+id/menu3" 
 android:background="#ffffffff" 
 android:clickable="true" 
 android:layout_width="fill_parent" 
 android:layout_height="64.0dip">
            <com.gc.materialdesign.views.ButtonFloat 
 android:background="@color/colorPrimary" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:layout_marginLeft="32.0dip"
 android:layout_centerVertical="true" /> 
             <TextView 
 android:textColor="#000" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:layout_marginLeft="104.0dip" 
 android:text="Menu Aplikasi Tiga" 
 android:layout_centerVertical="true" /> 
 </com.gc.materialdesign.views.LayoutRipple>
        <com.gc.materialdesign.views.LayoutRipple 
 android:id="@+id/menu4"
android:background="#ffffffff" 
 android:clickable="true" 
 android:layout_width="fill_parent" 
 android:layout_height="64.0dip">
            <com.gc.materialdesign.views.ButtonFloat 
 android:background="@color/colorPrimary" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:layout_marginLeft="32.0dip" 
 android:layout_centerVertical="true"                /> 
 <TextView 
 android:textColor="#000" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:layout_marginLeft="104.0dip" 
 android:text="Menu Aplikasi Empat" 
 android:layout_centerVertical="true" /> 
 </com.gc.materialdesign.views.LayoutRipple>
        <com.gc.materialdesign.views.LayoutRipple 
 android:id="@+id/menu5" 
 android:background="#ffffffff" 
 android:clickable="true" 
 android:layout_width="fill_parent" 
 android:layout_height="64.0dip">
            <com.gc.materialdesign.views.ButtonFloat 
 android:background="@color/colorPrimary" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:layout_marginLeft="32.0dip"
                android:layout_centerVertical="true" />
            <TextView 
 android:textColor="#000" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:layout_marginLeft="104.0dip" 
 android:text="Menu Aplikasi Lima" 
 android:layout_centerVertical="true" /> 
 </com.gc.materialdesign.views.LayoutRipple>
        <com.gc.materialdesign.views.LayoutRipple 
 android:id="@+id/menu6"
 android:background="#ffffffff" 
 android:clickable="true" 
 android:layout_width="fill_parent" 
 android:layout_height="64.0dip">
            <com.gc.materialdesign.views.ButtonFloat 
 android:background="@color/colorPrimary" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:layout_marginLeft="32.0dip" 
 android:layout_centerVertical="true"                /> 
 <TextView 
 android:textColor="#000" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:layout_marginLeft="104.0dip" 
 android:text="Menu Aplikasi Enam" 
 android:layout_centerVertical="true" /> 
 </com.gc.materialdesign.views.LayoutRipple>
        <com.gc.materialdesign.views.LayoutRipple 
 android:id="@+id/menu7" 
 android:background="#ffffffff" 
 android:clickable="true" 
 android:layout_width="fill_parent" 
 android:layout_height="64.0dip">
            <com.gc.materialdesign.views.ButtonFloat 
 android:background="@color/colorPrimary" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:layout_marginLeft="32.0dip"
                android:layout_centerVertical="true" />
            <TextView 
 android:textColor="#000" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:layout_marginLeft="104.0dip" 
 android:text="Menu Aplikasi Tujuh" 
 android:layout_centerVertical="true" /> 
 </com.gc.materialdesign.views.LayoutRipple> 
         <com.gc.materialdesign.views.LayoutRipple 
 android:id="@+id/menu8"
 android:background="#ffffffff" 
 android:clickable="true" 
 android:layout_width="fill_parent" 
 android:layout_height="64.0dip">
            <com.gc.materialdesign.views.ButtonFloat 
 android:background="@color/colorPrimary" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:layout_marginLeft="32.0dip" 
 android:layout_centerVertical="true"                /> 
 <TextView 
 android:textColor="#000" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:layout_marginLeft="104.0dip" 
 android:text="Menu Aplikasi Delapan" 
 android:layout_centerVertical="true" /> 
 </com.gc.materialdesign.views.LayoutRipple>


    </LinearLayout></com.gc.materialdesign.views.ScrollView>

Maka tampilannya menjadi berikut :
Di situ kita sudah memanikan LayoutRipple dan ButtonFloat dan juga ScrolView

SourceCode bisa di download sini Github




COMMENT