#2 Android Studio - Membuat Tampilan UI Home menarik dengan slide foto Pada Apilkasi Android

Membuat Tampilan UI Home menarik dan Elegan Pada Apilkasi Android seperti pada tampilan gambar di atas

1. Buat New Project pada aplikasi Android Studio

2. Kemudian akan muncul gambar seperti ini , saya memilih Navigation Drawer Activity. kemudian next

3. untuk package name kalian bisa ganti sesui keinginan kalian... kemudian klik fisih

4. Menentukan gambar untuk slide 

kita akan membuat slide gambar pada menu ui dengan 3 gambar  , tentukan nama gambar tersebut agar lebih mudah, setelah menentukan nama pada gambar kemudian kita import ke project android studio dengan cara Copy Paste ke drawable , berikut caranya :

a. setelah anda copy dari file kemudian masuk ke project anda, klik kanan pada drawable

b. Kemudian Paste 

gambar dengan format PNG (tampilan setelah kita paste)

5. Menetukan gambar untuk menu

a.  klik kanan pada drawable > New > Vector Asset, seperti gambar berikut

b. ubah nama sesuai yang di inginkan, size nya ubah 50x50 warna sesuka kalian saya memilih wrna putih, kemudian next. kemudian buat sesui kebutuhan disini saya membuat 6 tombol

 setelah jadi seperti ini file nya

6. Membut warna linkgaran pada menu seperti gambar di bawah

a. membuat warna terlebih dulu dengan cara ke  values > colors  

kemudian masukkan warna berikut ke dalam project kalian :

 <!--Lingkaran--><color name="lingkaran_presentasi">#4c8087</color><color name="lingkaran_undagan">#139599</color><color name="lingkaran_cv">#ff9340</color><color name="lingkaran_sertifikat">#464343</color><color name="lingkaran_ppt">#4480b1</color><color name="lingkaran_yt">#8a638e</color><color name="lingkaran_apk">#e1d612</color>

b. kemudia kita ke drawable  dan klik kanan New > drawble resource file, liahat gambar berikut

beri nama lingkaran_aa (sesui keinginan)

perhatikan gambar berikut  , copy paste  kode berikut

 <item>

    <shape android:shape="oval">        <size android:width="100dp" android:height="100dp" />        <solid android:color="@color/lingkaran_presentasi"/>    </shape></item>

c. buat sesui kebutuhan  

7.   Buat file animasi untuk animasi slide  , buat file baru di dalam res dengan naman anim, lihat gambar berikut

download animasi fade_in fade_outnya di Sini

8. Masukkan koding berikut

a. content_main.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout
    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"    app:layout_behavior="@string/appbar_scrolling_view_behavior"    tools:context=".MainActivity"    android:orientation="vertical"    android:weightSum="2"    tools:showIn="@layout/app_bar_main">
    <!--tempat gambar slide-->    <RelativeLayout        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="0.8">
        <ImageView            android:background="#bababa"            android:layout_width="match_parent"            android:layout_height="match_parent" />        <ViewFlipper            android:id="@+id/viewfliper"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_marginBottom="10dp">
            <ImageView                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:src="@drawable/img_ppt_kode1"                android:scaleType="fitXY"/>            <ImageView                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:src="@drawable/img_ppt_kode5_slide1"                android:scaleType="fitXY"/>            <ImageView                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:src="@drawable/img_ppt_kode2_slide1"                android:scaleType="fitXY"/>
        </ViewFlipper>
    </RelativeLayout>

    <!--Tempat button icon-->
    <LinearLayout        android:layout_weight="1"        android:weightSum="2"        android:layout_width="match_parent"        android:orientation="vertical"        android:layout_height="0dp">
        <!--Tempat tombol atas-->        <LinearLayout            android:layout_weight="1"            android:layout_width="match_parent"            android:orientation="horizontal"            android:weightSum="3"            android:layout_height="0dp">            <RelativeLayout                android:layout_width="0dp"                android:layout_height="match_parent"                android:layout_weight="1">

                <Button                    android:id="@+id/btn_ppt"                    android:layout_width="60dp"                    android:layout_height="60dp"                    android:layout_centerHorizontal="true"                    android:layout_centerVertical="true"                    android:drawableTop="@drawable/ic_tb_ppt"                    style="?android:attr/progressBarStyleHorizontal"                    android:background="@drawable/lingkaran_ppt" />                <TextView                    android:text="List presentasi"                    android:layout_marginBottom="15dp"                    android:layout_centerHorizontal="true"                    android:layout_alignParentBottom="true"                    android:layout_width="wrap_content"                    android:textStyle="bold"                    android:textColor="@color/lingkaran_ppt"                    android:layout_height="wrap_content" />
            </RelativeLayout>            <RelativeLayout                android:layout_width="0dp"                android:layout_height="match_parent"                android:layout_weight="1">                <Button                    android:id="@+id/btn_paket"                    android:layout_width="60dp"                    android:layout_height="60dp"                    android:layout_centerHorizontal="true"                    android:layout_centerVertical="true"                    android:drawableTop="@drawable/ic_tb_paket"                    style="?android:attr/progressBarStyleHorizontal"                    android:background="@drawable/lingkaran_paket"/>                <TextView                    android:text="Pilih Paket"                    android:layout_marginBottom="15dp"                    android:layout_centerHorizontal="true"                    android:layout_alignParentBottom="true"                    android:layout_width="wrap_content"                    android:textStyle="bold"                    android:textColor="@color/lingkaran_presentasi"                    android:layout_height="wrap_content" />
            </RelativeLayout>            <RelativeLayout                android:layout_width="0dp"                android:layout_height="match_parent"                android:layout_weight="1">                <Button                    android:id="@+id/btn_undagan"                    android:layout_width="60dp"                    android:layout_height="60dp"                    android:layout_centerHorizontal="true"                    android:layout_centerVertical="true"                    android:drawableTop="@drawable/ic_tb_ud"                    style="?android:attr/progressBarStyleHorizontal"                    android:background="@drawable/lingkaran_ud"/>                <TextView                    android:text="Template Undagan"                    android:layout_marginBottom="15dp"                    android:layout_centerHorizontal="true"                    android:layout_alignParentBottom="true"                    android:layout_width="wrap_content"                    android:textStyle="bold"                    android:textColor="@color/lingkaran_undagan"                    android:layout_height="wrap_content" />
            </RelativeLayout>
        </LinearLayout>
        <!--Tempat tombol bawah-->        <LinearLayout            android:layout_weight="1"            android:layout_width="match_parent"            android:layout_height="0dp">            <RelativeLayout                android:layout_width="0dp"                android:layout_height="match_parent"                android:layout_weight="1">                <Button                    android:id="@+id/btn_yt"                    android:layout_width="60dp"                    android:layout_height="60dp"                    android:layout_centerHorizontal="true"                    android:layout_centerVertical="true"                    android:onClick="yt_chanel"                    android:drawableTop="@drawable/ic_tb_yt"                    style="?android:attr/progressBarStyleHorizontal"                    android:background="@drawable/lingkaran_yt"/>                <TextView                    android:text="Chanel Youtube"                    android:layout_marginBottom="15dp"                    android:layout_centerHorizontal="true"                    android:layout_alignParentBottom="true"                    android:layout_width="wrap_content"                    android:textStyle="bold"                    android:textColor="@color/colorAccent"                    android:layout_height="wrap_content" />
            </RelativeLayout>            <RelativeLayout                android:layout_width="0dp"                android:layout_height="match_parent"                android:layout_weight="1">                <Button                    android:id="@+id/btn_web"                    android:layout_width="60dp"                    android:layout_height="60dp"                    android:layout_centerHorizontal="true"                    android:layout_centerVertical="true"                    android:onClick="blog"                    android:drawableTop="@drawable/ic_tb_web"                    style="?android:attr/progressBarStyleHorizontal"                    android:background="@drawable/lingkaran_web"/>                <TextView                    android:text="Blog"                    android:layout_marginBottom="15dp"                    android:layout_centerHorizontal="true"                    android:layout_alignParentBottom="true"                    android:layout_width="wrap_content"                    android:textStyle="bold"                    android:textColor="@color/lingkaran_yt"                    android:layout_height="wrap_content" />
            </RelativeLayout>            <RelativeLayout                android:layout_width="0dp"                android:layout_height="match_parent"                android:layout_weight="1">                <Button                    android:id="@+id/btn_wa"                    android:layout_width="60dp"                    android:layout_height="60dp"                    android:layout_centerHorizontal="true"                    android:layout_centerVertical="true"                    android:onClick="wa"                    android:drawableTop="@drawable/ic_tb_wa"                    style="?android:attr/progressBarStyleHorizontal"                    android:background="@drawable/lingkaran_wa"/>                <TextView                    android:text="Chat admin"                    android:layout_marginBottom="15dp"                    android:layout_centerHorizontal="true"                    android:layout_alignParentBottom="true"                    android:layout_width="wrap_content"                    android:textStyle="bold"                    android:textColor="@color/lingkaran_cv"                    android:layout_height="wrap_content" />
            </RelativeLayout>
        </LinearLayout>        

    </LinearLayout>

a. MainActivity.java

private ViewFlipper viewFlipper;private Animation fadeIn, fadeOut;

viewFlipper = (ViewFlipper)findViewById( R.id.viewfliper );fadeIn = AnimationUtils.loadAnimation( this,R.anim.fade_in );fadeOut = AnimationUtils.loadAnimation( this,R.anim.fade_out );viewFlipper.setInAnimation( fadeIn );viewFlipper.setOutAnimation( fadeOut );
viewFlipper.setAutoStart( true );viewFlipper.setFlipInterval( 5000 );viewFlipper.startFlipping();

jagan lupa import ViewFlipper dan Animation

silahkan di run

berikut hasilnya

Dowload Scure Kode

Bagikan Artikel ini