Android Studio - Membuat Tampilan Menu atau Dashboard

 

Langkahnya:

1.       Buka project baru dengan empty_activity

2.       Setelah loading awal selesai, silahkan ganti layout yang dipakai menjadi Linear Layout

3.       Sebagai pendukung tampilan, silahkan buatkan dahulu file:

a.       ic_bus.xml

b.       ic_resto.xml

c.       ic_rs.xml

d.       ic_pesawat.xml

e.       ic_kereta.xml

f.        ic_hotel.xml

cara buat:

­­Klik kanan Drawable-->New-->Vektor Asset-->cari gambar-->ganti nama-->Next-->Finish.

g.       lingkaranblue.xml

h.       lingkaranhijau.xml

i.         lingkaranhijautua.xml

j.         lingkaranmerah.xml

k.       lingkaranorange.xml

l.         lingkaranpink.xml

cara buat:

­Klik kanan Drawable-->New-->Drawable Resource File-->tulis nama file-->OK.

Edit script menjadi seperti berikut:

<?xml version="1.0" encoding="utf-8"?>

<shape android:shape="oval" xmlns:android="http://schemas.android.com/apk/res/android">

    <solid android:color="@android:color/holo_blue_dark"/>

</shape>

            (buat 6 file seperti diatas, tinggal copy dan ganti warna) Warna bisa di ganti sesuai selera.

4.     Masih di Folder Project, klik Gradle Script.

5.     Double klik bagian build.gradle(Module:xxx.app)

6.     Cari bagian Dependencies dan tambahkan script berikut

   implementation "androidx.cardview:cardview:1.0.0"

      lakukan klik Sync atau Sinkronisasi agar gradle terbaca (ada di bagian kanan atas monitor)

7.  Buka activity_main.xml dan ketik/sesuaikan script seperti berikut:

<?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"
    tools:context=".MainActivity"
    android:orientation="vertical"
    android:padding="10dp"
    android:background="#eee">

    <!--Bagian 1-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center"
        android:clipToPadding="false">

        <!--Tombol 1-->
        <androidx.cardview.widget.CardView
            android:layout_width="150dp"
            android:layout_height="190dp"
            android:layout_margin="10dp"
            android:foreground="?attr/selectableItemBackground"
            android:clickable="true">
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:gravity="center"
                android:layout_gravity="center"
                android:background="#fff">
                <ImageView
                    android:layout_width="64dp"
                    android:layout_height="64dp"
                    android:background="@drawable/lingkaranpink"
                    android:padding="10dp"
                    android:layout_marginTop="10dp"
                    android:src="@drawable/ic_resto"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textStyle="bold"
                    android:layout_marginTop="10dp"
                    android:text="Restoran"/>
                <View
                    android:layout_width="100dp"
                    android:layout_height="1px"
                    android:background="@android:color/holo_green_light"
                    android:layout_marginTop="5dp"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:textColor="@android:color/darker_gray"
                    android:padding="5dp"
                    android:text="Temukan Restoran Terdekat..."/>
            </LinearLayout>
        </androidx.cardview.widget.CardView>

        <!--Tombol 2-->
        <androidx.cardview.widget.CardView
            android:layout_width="150dp"
            android:layout_height="190dp"
            android:layout_margin="10dp"
            android:foreground="?attr/selectableItemBackground"
            android:clickable="true">
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:gravity="center"
                android:layout_gravity="center"
                android:background="#fff">
                <ImageView
                    android:layout_width="64dp"
                    android:layout_height="64dp"
                    android:background="@drawable/lingkaranblue"
                    android:padding="10dp"
                    android:layout_marginTop="10dp"
                    android:src="@drawable/ic_hotel"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textStyle="bold"
                    android:layout_marginTop="10dp"
                    android:text="Hotel"/>
                <View
                    android:layout_width="100dp"
                    android:layout_height="1px"
                    android:background="@android:color/holo_green_light"
                    android:layout_marginTop="5dp"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:textColor="@android:color/darker_gray"
                    android:padding="5dp"
                    android:text="Temukan Hotel Terdekat..."/>
            </LinearLayout>
        </androidx.cardview.widget.CardView>
    </LinearLayout>

    <!--Bagian 2-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center"
        android:clipToPadding="false">

        <!--Tombol 3-->
        <androidx.cardview.widget.CardView
            android:layout_width="150dp"
            android:layout_height="190dp"
            android:layout_margin="10dp"
            android:foreground="?attr/selectableItemBackground"
            android:clickable="true">
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:gravity="center"
                android:layout_gravity="center"
                android:background="#fff">
                <ImageView
                    android:layout_width="64dp"
                    android:layout_height="64dp"
                    android:background="@drawable/lingkaranorange"
                    android:padding="10dp"
                    android:layout_marginTop="10dp"
                    android:src="@drawable/ic_rs"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textStyle="bold"
                    android:layout_marginTop="10dp"
                    android:text="Rumah Sakit"/>
                <View
                    android:layout_width="100dp"
                    android:layout_height="1px"
                    android:background="@android:color/holo_green_light"
                    android:layout_marginTop="5dp"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:textColor="@android:color/darker_gray"
                    android:padding="5dp"
                    android:text="Temukan Rumah Sakit Terdekat..."/>
            </LinearLayout>
        </androidx.cardview.widget.CardView>

        <!--Tombol 4-->
        <androidx.cardview.widget.CardView
            android:layout_width="150dp"
            android:layout_height="190dp"
            android:layout_margin="10dp"
            android:foreground="?attr/selectableItemBackground"
            android:clickable="true">
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:gravity="center"
                android:layout_gravity="center"
                android:background="#fff">
                <ImageView
                    android:layout_width="64dp"
                    android:layout_height="64dp"
                    android:background="@drawable/lingkaranmerah"
                    android:padding="10dp"
                    android:layout_marginTop="10dp"
                    android:src="@drawable/ic_pesawat"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textStyle="bold"
                    android:layout_marginTop="10dp"
                    android:text="Bandara"/>
                <View
                    android:layout_width="100dp"
                    android:layout_height="1px"
                    android:background="@android:color/holo_green_light"
                    android:layout_marginTop="5dp"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:textColor="@android:color/darker_gray"
                    android:padding="5dp"
                    android:text="Temukan Bandara Terdekat..."/>
            </LinearLayout>
        </androidx.cardview.widget.CardView>
    </LinearLayout>

    <!--Bagian 3-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center"
        android:clipToPadding="false">

        <!--Tombol 5-->
        <androidx.cardview.widget.CardView
            android:layout_width="150dp"
            android:layout_height="190dp"
            android:layout_margin="10dp"
            android:foreground="?attr/selectableItemBackground"
            android:clickable="true">
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:gravity="center"
                android:layout_gravity="center"
                android:background="#fff">
                <ImageView
                    android:layout_width="64dp"
                    android:layout_height="64dp"
                    android:background="@drawable/lingkaranhijau"
                    android:padding="10dp"
                    android:layout_marginTop="10dp"
                    android:src="@drawable/ic_bus"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textStyle="bold"
                    android:layout_marginTop="10dp"
                    android:text="Bus"/>
                <View
                    android:layout_width="100dp"
                    android:layout_height="1px"
                    android:background="@android:color/holo_green_light"
                    android:layout_marginTop="5dp"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:textColor="@android:color/darker_gray"
                    android:padding="5dp"
                    android:text="Temukan Halte Terdekat..."/>
            </LinearLayout>
        </androidx.cardview.widget.CardView>

        <!--Tombol 6-->
        <androidx.cardview.widget.CardView
            android:layout_width="150dp"
            android:layout_height="190dp"
            android:layout_margin="10dp"
            android:foreground="?attr/selectableItemBackground"
            android:clickable="true">
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:gravity="center"
                android:layout_gravity="center"
                android:background="#fff">
                <ImageView
                    android:layout_width="64dp"
                    android:layout_height="64dp"
                    android:background="@drawable/lingkaranhijautua"
                    android:padding="10dp"
                    android:layout_marginTop="10dp"
                    android:src="@drawable/ic_kereta"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textStyle="bold"
                    android:layout_marginTop="10dp"
                    android:text="Kereta Api"/>
                <View
                    android:layout_width="100dp"
                    android:layout_height="1px"
                    android:background="@android:color/holo_green_light"
                    android:layout_marginTop="5dp"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:textColor="@android:color/darker_gray"
                    android:padding="5dp"
                    android:text="Temukan Stasiun Terdekat..."/>
            </LinearLayout>
        </androidx.cardview.widget.CardView>
    </LinearLayout>
</LinearLayout>