Cara Menciptakan Hidangan Atas Atau Top Hidangan Pada Android Studio

Halo sahabat serhamo dimanapun anda berada, biar anda sehat selalu. Pada kesempatan kali ini kita akan membahas perihal Cara Membuat Menu Atas atau Top Menu Pada Android Studio.

Menu atas atau hidangan top tentunya sudah tidak jarang lagi anda lihat. Banyak sekali aplikasi-aplikasi ternama menerapkan hidangan mereka berada di atas. Berikut pola aplikasi yang memakai hidangan atas.


Ada beberapa cara yang dapat dipakai untuk menciptakan hidangan ini. Tapi disini kita akan meamnfaatkan objek include yang dapat memanggil layout lain kedalam layout utama kita. Objek ini sudah disediakan Android Studio tinggal anda gunakan.

Ingat anda dapat mengkreasikan hidangan atas sesuai dengan impian anda. Anda juga dapat mengikuti kreasi daqu berikut ini :

1. Buat sebuah project gres dengan nama "Menu Atas". (Tidak tahu cara menciptakan project gres kunjungi : Cara Membuat Project Baru di Android Studio).

2. Untuk keterangan lainnya silahkan isi sebagai berikut :

• Aplication Name : Menu Atas
• Company domain : serhamo.net
• Phone and Tablet : API 15 : Android 4.0.3 (Ice Cream Sandwich)
• Add on Activity to Mobile : Empty Activity
• Activity Name : MainActivity
• Layout Name : activity_main

3. Jika sudah masuk ke halaman utama project, maka selanjutnya kita menambahkan ikon-ikon yang dibutuhkan kedalam drawable. Caranya klik kanan pada drawable --> New --> Vector Asset.

4. Klik ikon Clip art, kemudian cari ikon dan klik "more vert" --> Ok --> Next --> Finish.

5. Lanekan langkah 3 dan 4 untuk menambahkan ikon lainnya menyerupai home, serta search. (Silahkan tambahkan sesuai kebutuhan anda).

6. Klik kanan pada Layout --> New --> XML --> Layout XML File. Beri nama "menu_atas" dengan root tag "LinearLayout", klik finish.

7. Selanjutnya beralih ke tahap koding silahkan copy dan paste koding dibawah ini kedalam file masing-masing.

A. menu_atas.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="wrap_content"
    android:background="@android:color/holo_orange_dark"
    android:gravity="right"
    android:padding="2dp">

    <ImageButton
        android:id="@+id/home"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent"
        android:padding="10dp"
        app:srcCompat="@drawable/ic_home_black_24dp"
        tools:ignore="VectorDrawableCompat" />

    <ImageButton
        android:id="@+id/search"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent"
        android:padding="10dp"
        app:srcCompat="@drawable/ic_search_black_24dp"
        tools:ignore="VectorDrawableCompat" />

    <ImageButton
        android:id="@+id/popup"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent"
        android:padding="10dp"
        app:srcCompat="@drawable/ic_more_vert_black_24dp"
        tools:ignore="VectorDrawableCompat" />
</LinearLayout>

B. activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">

    <include
        layout="@layout/menu_atas"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</RelativeLayout>

C. MainActivity.java

package com.blogspot.serhamo.menuatas;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Window;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //menghilangkan action bar
        this.requestWindowFeature(Window.FEATURE_NO_TITLE);
        getSupportActionBar().hide();

        //menampilkan layout activity_main.xml
        setContentView(R.layout.activity_main);
    }
}

Jika sudah tamat silahkan ada run memakai emulator atau perangkat android anda sendiri. Disini daqu memakai emulator genymotion untuk run aplikasi. Lihat akhirnya akan tampil menyerupai gambar di bawah.

Baca juga : Cara Membuat Menu Popup Dengan Android Studio (segera)