Membuat Dashboard Pada Android

Membuat Tampilan Dashboard Pada Android Dengan Menggunakan Android Studio

Kali ini saya akan membagikan tutorial bagaimana cara membuat Menu Dashboard seperti yang terlihat pada gambar di bawah ini:

A.    Membuat Tampilan Dashboard

1.      Langkah pertama  buka Android Studio > Klik Start a new Android Studio project

2.      Lalu buat berinama Application name > Menu Dashboard

3.      Pilih Minimum Target SDK

4.      Pilih Empty Activity > lalu klik Next > setelah itu beri nama Activity Name dengan Dashboard > klik Finish, lihat pada gambar berikut ini :

5.      Langkah ke lima tambahkan image drawable > klik kanan pada folder drawable > klik New > Vector Asset

Lalu klik Ok > beri nama dengan ic_kuliner > lalu klik Next.

6.      Pilih icon sesuai dengan kebutuhan temen-temen.

7.      Setelah itu pilih ic_kuliner yang ada pada folder drawable dan ganti color dengan warna putih dan tinggi :50 , lebar : 50.

8.      Langkah selanjutnya buat lingkaran pada res > drawable, klik kanan > pada > folder > drawable > new > Drawable recource file. , beri nama lingkaran kuliner,belanja, dan seterusnya. Lalu klik Ok.

9.      Langkah berikutnya buat tampilan warna button lingkaran pada res > values > color.xml.

<color name="lingkaran_kuliner">#4c8087</color> <color name="lingkaran_belanja">#139599</color> <color name="lingkaran_hotel">#ff9340</color> <color name="lingkaran_spbu">#464343</color> <color name="lingkaran_wisata">#4480b1</color> <color name="lingkaran_transportasi">#8a638e</color> <color name="lingkaran_kerajinan">#e1d612</color>

10.  Setelah itu buka res > layout > drawable > lingkaran_kulinre, dll ,yang telah di buat pada folder drawable. Lihat pada gambar berikut :

<selector xmlns:android="http://schemas.android.com/apk/res/android">     <item>         <shape android:shape="oval">             <size android:width="100dp" android:height="100dp" />             <solid android:color="@color/lingkaran_belanja" />         </shape>     </item> </selector>

  Ikuti langkah-langkah di atas untuk membuat lingkaran pada semua drawable lingkaran yang telah di buat.

11.  Langkah selanjutnya buka folder res > layout > activity_dashboard.xml, dan ikuti penulisan koding sebagai beikut:

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:layout_margin="9pt"     android:orientation="vertical">     <android.support.v4.widget.NestedScrollView         android:layout_width="match_parent"         android:layout_height="match_parent">         <LinearLayout             android:layout_width="match_parent"             android:layout_height="match_parent"             android:layout_weight="1"             android:orientation="vertical">             <LinearLayout                 android:layout_width="match_parent"                 android:layout_height="match_parent"                 android:orientation="vertical">                 <LinearLayout                     android:layout_width="fill_parent"                     android:layout_height="wrap_content"                     android:layout_marginTop="12pt"                     android:orientation="horizontal">                     <LinearLayout                         android:layout_width="wrap_content"                         android:layout_height="match_parent"                         android:layout_weight="1"                         android:gravity="center_horizontal"                         android:orientation="vertical">                         <LinearLayout                            android:layout_width="match_parent"                            android:layout_height="match_parent"                            android:layout_weight="1"                            android:gravity="center_horizontal"                            android:orientation="vertical">  <RelativeLayout                             android:layout_width="match_parent"                             android:layout_height="match_parent"> <TextView                               android:layout_width="wrap_content"                                  android:layout_height="wrap_content"                                android:layout_below="@+id/btnkuliner"                            android:layout_centerHorizontal="true" android:text="KULINER"                             android:textColor="@color/lingkaran_kuliner" android:textSize="14sp" android:textStyle="bold" /> <Button                                   android:id="@+id/btnkuliner"                    style="?android:attr/progressBarStyleHorizontal" android:layout_width="75dp" android:layout_height="75dp" android:layout_centerHorizontal="true"                                 android:background="@drawable/lingkaran_kuliner" android:drawableTop="@drawable/ic_kuliner" android:indeterminate="false" android:onClick="onclick" android:padding="13dp" android:textStyle="bold" />       </RelativeLayout>        </LinearLayout>        </LinearLayout>        <LinearLayout         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_weight="1"           android:gravity="center_horizontal"           android:orientation="vertical">           <LinearLayout            android:layout_width="match_parent"            android:layout_height="match_parent"            android:layout_weight="1"            android:gravity="center_horizontal"            android:orientation="vertical">          <RelativeLayout            android:layout_width="match_parent"            android:layout_height="match_parent"> <TextView                             android:layout_width="wrap_content"                                   android:layout_height="wrap_content"                                   android:layout_below="@+id/btnwisata"                             android:layout_centerHorizontal="true" android:text="WISATA"                                  android:textColor="@color/lingkaran_wisata" android:textSize="14sp" android:textStyle="bold" /> <Button android:id="@+id/btnwisata" style="?android:attr/progressBarStyleHorizontal" android:layout_width="75dp" android:layout_height="75dp" android:layout_centerHorizontal="true"                                     android:background="@drawable/lingkaran_wisata"                                 android:drawableTop="@drawable/ic_wisata" android:indeterminate="false" android:onClick="onclick" android:padding="16dp" android:textStyle="bold" />     </RelativeLayout>      </LinearLayout>        </LinearLayout>                     <LinearLayout                         android:layout_width="wrap_content"                         android:layout_height="wrap_content"                         android:layout_weight="1"                         android:gravity="center_horizontal"                         android:orientation="vertical">                         <LinearLayout                            android:layout_width="match_parent"                            android:layout_height="wrap_content"                            android:layout_weight="1"                            android:gravity="center_horizontal"                            android:orientation="vertical"> <RelativeLayout                                android:layout_width="match_parent"                              android:layout_height="match_parent"> <TextView                                   android:layout_width="wrap_content"                                    android:layout_height="wrap_content"                                   android:layout_below="@+id/btnbelanja"                                   android:layout_centerHorizontal="true" android:text="BELANJA"                                 android:textColor="@color/lingkaran_belanja" android:textSize="14sp" android:textStyle="bold" /> <Button android:id="@+id/btnbelanja"                                 style="?android:attr/progressBarStyleHorizontal" android:layout_width="75dp" android:layout_height="75dp"                                   android:layout_centerHorizontal="true"                                   android:background="@drawable/lingkaran_belanja"                                  android:drawableTop="@drawable/ic_shopping" android:indeterminate="false" android:onClick="onclick" android:padding="16dp" android:textStyle="bold" />           </RelativeLayout>             </LinearLayout>               </LinearLayout>                 </LinearLayout>                 <LinearLayout                     android:layout_width="fill_parent"                     android:layout_height="wrap_content"                     android:layout_marginTop="12pt"                     android:orientation="horizontal"                     android:paddingBottom="9dp">                     <LinearLayout                         android:layout_width="wrap_content"                         android:layout_height="wrap_content"                         android:layout_weight="1"                         android:gravity="center_horizontal"                         android:orientation="vertical">                         <LinearLayout                            android:layout_width="match_parent"                            android:layout_height="match_parent"                            android:layout_weight="1"                            android:gravity="center_horizontal"                            android:orientation="vertical">    <RelativeLayout     android:layout_width="match_parent"     android:layout_height="match_parent"> <TextView                                android:layout_width="wrap_content"                                  android:layout_height="wrap_content"                         android:layout_below="@+id/btnhotel"                                     android:layout_centerHorizontal="true" android:text="HOTEL"                           android:textColor="@color/lingkaran_hotel" android:textSize="14sp" android:textStyle="bold" / <Button android:id="@+id/btnhotel"                                  style="?android:attr/progressBarStyleHorizontal" android:layout_width="75dp" android:layout_height="75dp"                                  android:layout_centerHorizontal="true"                                   android:layout_marginTop="12dp"                                  android:background="@drawable/lingkaran_hotel"                                  android:drawableTop="@drawable/ic_hotel" android:indeterminate="false" android:onClick="onclick" android:padding="12dp" android:textStyle="bold" />                             </RelativeLayout>                         </LinearLayout>                     </LinearLayout>                     <LinearLayout                         android:layout_width="wrap_content"                         android:layout_height="wrap_content"                         android:layout_weight="1"                         android:gravity="center_horizontal"                         android:orientation="vertical"> <LinearLayout android:layout_width="match_parent"                            android:layout_height="match_parent" android:layout_weight="1" android:gravity="center_horizontal" android:orientation="vertical"> <RelativeLayout                              android:layout_width="match_parent" android:layout_height="match_parent"> <TextView                              android:layout_width="wrap_content"                                  android:layout_height="wrap_content"                                  android:layout_below="@+id/btnspbu"                                 android:layout_centerHorizontal="true" android:text="SPBU"                           android:textColor="@color/lingkaran_spbu" android:textSize="14sp" android:textStyle="bold" />  <Button android:id="@+id/btnspbu"                                 style="?android:attr/progressBarStyleHorizontal" android:layout_width="75dp" android:layout_height="75dp" android:layout_centerHorizontal="true" android:layout_marginTop="12dp"                                     android:background="@drawable/lingkaran_spbu" android:drawableTop="@drawable/ic_spbu" android:indeterminate="false" android:onClick="onclick" android:padding="16dp" android:textStyle="bold" />                             </RelativeLayout>                         </LinearLayout>                     </LinearLayout>                     <LinearLayout                         android:layout_width="wrap_content"                         android:layout_height="wrap_content"                         android:layout_weight="1"                         android:gravity="center_horizontal"                         android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1" android:gravity="center_horizontal" android:orientation="vertical"> <RelativeLayout android:layout_width="match_parent"                             android:layout_height="match_parent"> <TextView android:layout_width="wrap_content"                                   android:layout_height="wrap_content"                                  android:layout_below="@+id/btnkerajinan"                                android:layout_centerHorizontal="true" android:text="KERAJINAN"                                  android:textColor="@color/lingkaran_kerajinan" android:textSize="14sp" android:textStyle="bold" /> <Button android:id="@+id/btnkerajinan"                               style="?android:attr/progressBarStyleHorizontal" android:layout_width="75dp" android:layout_height="75dp" android:layout_centerHorizontal="true" android:layout_marginTop="12dp" android:background="@drawable/lingkaran_kerajinan"                        android:drawableTop="@drawable/ic_kerajinan" android:indeterminate="false" android:onClick="onclick" android:padding="17dp" android:textStyle="bold" />                             </RelativeLayout>                         </LinearLayout>                     </LinearLayout>                 </LinearLayout>                 <LinearLayout                     android:layout_width="fill_parent"                     android:layout_height="wrap_content"                     android:layout_marginTop="12pt"                     android:orientation="horizontal"                     android:paddingBottom="9dp">                     <LinearLayout                         android:layout_width="wrap_content"                         android:layout_height="wrap_content"                         android:layout_weight="1"                         android:gravity="center_horizontal"                         android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1" android:gravity="center_horizontal" android:orientation="vertical">  <RelativeLayout   android:layout_width="match_parent"   android:layout_height="match_parent"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/btntransport" android:layout_centerHorizontal="true" android:text="TRANSPORTASI"                       android:textColor="@color/lingkaran_transportasi" android:textSize="14sp" android:textStyle="bold" /> <Button android:id="@+id/btntransport" style="?android:attr/progressBarStyleHorizontal" android:layout_width="75dp" android:layout_height="75dp"                                   android:layout_centerHorizontal="true"                                    android:background="@drawable/lingkaran_transportasi"                             android:drawableTop="@drawable/ic_drive"                                    android:indeterminate="false" android:onClick="onclick" android:padding="12dp" android:textStyle="bold" />                             </RelativeLayout>                         </LinearLayout>                     </LinearLayout>                     <LinearLayout                         android:layout_width="wrap_content"                         android:layout_height="wrap_content"                         android:layout_weight="1"                         android:gravity="center_horizontal"                         android:orientation="vertical">                         <LinearLayout                             android:layout_width="match_parent"                            android:layout_height="match_parent"                             android:layout_weight="1"                             android:gravity="center_horizontal"                             android:orientation="vertical">  <RelativeLayout                                android:layout_width="match_parent"                android:layout_height="match_parent"> <TextView                                    android:layout_width="wrap_content" android:layout_height="wrap_content"                                    android:layout_below="@+id/btntaman" android:layout_centerHorizontal="true" android:gravity="center" android:text="TAMAN"                                    android:textColor="@color/lingkaran_fasilitas_umum" android:textSize="14sp" android:textStyle="bold" /> <Button android:id="@+id/btntaman"                                    style="?android:attr/progressBarStyleHorizontal" android:layout_width="75dp"                                    android:layout_height="75dp"         android:layout_centerHorizontal="true"        android:background="@drawable/lingkaran_fasilitas" android:drawableTop="@drawable/ic_nature" android:gravity="center"                                    android:indeterminate="false" android:onClick="onclick" android:padding="16dp" android:textStyle="bold" />                             </RelativeLayout>                         </LinearLayout>                     </LinearLayout>                     <LinearLayout                         android:layout_width="wrap_content"                         android:layout_height="wrap_content"                         android:layout_weight="1"                         android:gravity="center_horizontal"                         android:orientation="vertical"> <LinearLayout android:layout_width="match_parent"                            android:layout_height="match_parent" android:layout_weight="1" android:gravity="center_horizontal" android:orientation="vertical"> <RelativeLayout                                android:layout_width="match_parent"                 android:layout_height="match_parent"> <TextView                                    android:layout_width="wrap_content"                           android:layout_height="wrap_content"  android:layout_below="@+id/btnibadah"                                     android:layout_centerHorizontal="true" android:gravity="center" android:text="TEMPAT IBADAH" android:textColor="@color/lingkaran_tempat_ibadah" android:textSize="14sp" android:textStyle="bold" />  <Button   android:id="@+id/btnibadah"   style="?android:attr/progressBarStyleHorizontal"   android:layout_width="75dp"                                   android:layout_height="75dp"                               android:layout_centerHorizontal="true" android:background="@drawable/lingkaran_tempat_ibadah"                                    android:drawableTop="@drawable/ic_tempat_ibadah" android:gravity="center" android:indeterminate="false" android:onClick="onclick" android:padding="17dp" android:textStyle="bold" /> </RelativeLayout> </LinearLayout> </LinearLayout> </LinearLayout>  </LinearLayout>    </LinearLayout>     </android.support.v4.widget.NestedScrollView> </LinearLayout>

Hasil output yang di harapkan nantinya sebagai berikut: