Skip to main content

Membuat UI Dashboard Menu Menarik pada Android Studio

Pada aplikasi android biasanya terdapat dasboard/ home menu. Isi dari dashboard biasanya berupa icon-icon ataupun nama-nama yang berfungsi untuk menghubungkan ke activity yang lainnya. Ditutorial ini kita akan belajar Membuat UI Dashboard Menu Menarik pada Android Studio. Tutorial ini juga dilengkapi dengan source code yang bisa kamu dapatkan secara free.

Untuk membuat dashboard / home bisa menggunakan : Relative Layout, Linear Layout, Frame Layout, dan Table Layout.

Rekomendasi Ebook Android : ” 5 Hari Menguasai Android Studio dan SQLite Database (Studi kasus membuat aplikasi kampusku)”.
Hanya Rp. 100.000 Rp 55.000 (Berisi 12 Bab).  Pemesanan melalui Whatsapp ke 085717474692, atau  baca selengkapnya di sini.

 

 

Membuat UI Dashboard Menu Menarik pada Android Studio

Kali ini kita akan  membuat dashboard seperti tampilan gambar dibawah dengan menggunakan Relative Layout, Frame Layout ditambah dengan  GridLayout. Silahkan ikuti langkah-langkah berikut dengan baik. 

 

1. Buat Project Baru 

Oke langsung saja kita buat project baru dengan nama aplikasi dashboard.


Pelajari cara membuat project baru disini :

Cara Membuat Aplikasi Android ” Hello World ” pada Android Studio


 

2. Tambahkan library  

Setelah workspace android studio terbuka pilih build.gradle(Module:app) tambahkan script library gridlayout seperti berikut, lalu klik sync now  : 

compile 'com.android.support:gridlayout-v7:24.2.1'

 

 Perhatikan gambar berikut ini :

3. Tambahkan icon-icon 

Tambahkan icon-icon pada drawable. Icon-icon yang saya gunakan  didownload dari freepick.com

Membuat UI Dashboard Menu Menarik pada Android Studio

 

Untuk menambahkannya bisa dengan cara klik kanan pada folder drawable > pilih show in explorer > lalu pastekan icon pada folder drawable.

Bisa juga dengan langsung mengcopykan icon dan langsung pastekan pada folder drawable.

 

Rekomendasi Ebook Android : ” Menguasai 20 Android Project Simple Example dalam 10 hari (Studi kasus membuat 20 Proyek android sederhana)”.
Hanya Rp. 99.000 Rp 79.000 (Berisi 20 Bab).  Pemesanan melalui Whatsapp ke 085717474692, atau  baca selengkapnya di sini.

 

4. Edit Activity_main.xml 

Jika sudah buka activity_main.xml lalu tambahkan kode-kode dibawah ini :

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.GridLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:columnCount="2"
    app:rowCount="2"
    app:orientation="horizontal"
    >

    <FrameLayout
        app:layout_columnWeight="1"
        app:layout_rowWeight="1"
        android:background="#5F9EA0"
        >
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:id="@+id/user"
                android:src="@drawable/user"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_marginTop="10dp"
                android:textSize="20sp"
                android:textColor="#FFFFFF"
                android:layout_height="wrap_content"
                android:layout_below="@+id/user"
                android:layout_centerHorizontal="true"
                android:text="Profile"/>
        </RelativeLayout>
    </FrameLayout>

    <FrameLayout
        app:layout_columnWeight="1"
        app:layout_rowWeight="1"
        android:background="#D2691E">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:id="@+id/job"
                android:src="@drawable/pin"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_marginTop="10dp"
                android:textSize="20sp"
                android:textColor="#FFFFFF"
                android:layout_height="wrap_content"
                android:layout_below="@+id/job"
                android:layout_centerHorizontal="true"
                android:text="Search Job"/>
        </RelativeLayout>
    </FrameLayout>

    <FrameLayout
        app:layout_columnWeight="1"
        app:layout_rowWeight="1"
        android:background="#CD5C5C">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:id="@+id/notif"
                android:src="@drawable/bell"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_marginTop="10dp"
                android:textSize="20sp"
                android:textColor="#FFFFFF"
                android:layout_height="wrap_content"
                android:layout_below="@+id/notif"
                android:layout_centerHorizontal="true"
                android:text="Notification"/>
        </RelativeLayout>
    </FrameLayout>

    <FrameLayout
        app:layout_columnWeight="1"
        app:layout_rowWeight="1"
        android:background="#B8860B"
        >

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:id="@+id/mail"
                android:src="@drawable/mail"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_marginTop="10dp"
                android:textColor="#FFFFFF"
                android:textSize="20sp"
                android:layout_height="wrap_content"
                android:layout_below="@+id/mail"
                android:layout_centerHorizontal="true"
                android:text="Messages"/>
        </RelativeLayout>
    </FrameLayout>

    <FrameLayout
        app:layout_columnWeight="1"
        app:layout_rowWeight="1"
        android:background="#2E8B57"
        >

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:id="@+id/rate"
                android:src="@drawable/star"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_marginTop="10dp"
                android:textColor="#FFFFFF"
                android:textSize="20sp"
                android:layout_height="wrap_content"
                android:layout_below="@+id/rate"
                android:layout_centerHorizontal="true"
                android:text="Rate Card"/>
        </RelativeLayout>
    </FrameLayout>

    <FrameLayout
        app:layout_columnWeight="1"
        app:layout_rowWeight="1"
        android:background="#BC8F8F">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:id="@+id/rev"
                android:src="@drawable/like"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_marginTop="10dp"
                android:textSize="20sp"
                android:layout_height="wrap_content"
                android:layout_below="@+id/rev"
                android:layout_centerHorizontal="true"
                android:textColor="#FFFFFF"
                android:text="Review "/>
        </RelativeLayout>
    </FrameLayout>
</android.support.v7.widget.GridLayout>

 

Rekomendasi Ebook Android : ” 5 Hari Jago Desain UI/UX Keren Aplikasi Android (Studi kasus membuat 9 desain aplikasi android yang modern) “.
Hanya Rp. 99.000 Rp 55.000 (Berisi 9 Bab).  Pemesanan melalui Whatsapp ke 085717474692, atau  baca selengkapnya di sini.

 

 

5. Edit String

string.xml ubah app name menjadi home :

<resources>
    <string name="app_name">Home</string>
</resources>

6. Edit Color 

color.xml ubah warna utama (primary) :

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#4682B4</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
</resources>

 

Sangat di Rekomendasikan : Modul Android Studio Keren dan Lengkap Yang Wajib Kamu Punya 

 

Jika sudah diubah semua activity diatas, jalankan aplikasi melalui android virtual device (AVD), emulator genymotion, atau langsung di smartphone android yang kamu punya. Maka akan tampil seperti dibawah ini.


KLIK DISINI, UNTUK DOWNLOAD SOURCE CODE DASHBOARD MENARIK


Cukup mudah bukan untuk membuat tampilan dashboard ? silahkan dicoba dan dimodifikasi sesuai kebutuhan aplikasi teman-teman. Jangan lupa tekan tombol sharenya dan Semoga bermanfaat.

Referensi : Developer.android

Freelancer web and mobile developement, blogger, and teacher.

Tulisan Menarik Lainnya :

Guntoro

Freelancer web and mobile developement, blogger, and teacher.