Cara Membuat Menu Atas atau Top Menu Pada Android Studio

https://codingrakitan.blogspot.com/2018/11/cara-membuat-menu-atas-atau-top-menu.html

Halo sobat CodingRakitan dimanapun anda berada, semoga anda sehat selalu. Pada kesempatan kali ini kita akan membahas tentang Cara Membuat Menu Atas atau Top Menu Pada Android Studio.

Menu atas atau menu top tentunya sudah tidak jarang lagi anda lihat. Banyak sekali aplikasi-aplikasi ternama menerapkan menu mereka berada di atas. Berikut contoh aplikasi yang menggunakan menu atas.


Ada beberapa cara yang bisa digunakan untuk membuat menu ini. Tapi disini kita akan meamnfaatkan objek include yang bisa memanggil layout lain kedalam layout utama kita. Objek ini sudah disediakan Android Studio tinggal anda gunakan.

Ingat anda bisa mengkreasikan menu atas sesuai dengan keinginan anda. Anda juga bisa mengikuti kreasi saya berikut ini :

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

2. Untuk keterangan lainnya silahkan isi sebagai berikut :

• Aplication Name : Menu Atas
• Company domain : codingrakitan.blogspot.com
• 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 diperlukan kedalam drawable. Caranya klik kanan pada drawable --> New --> Vector Asset.

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

5. Lakukan langkah 3 dan 4 untuk menambahkan ikon lainnya seperti 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.codingrakitan.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 selesai silahkan ada run menggunakan emulator atau perangkat android anda sendiri. Disini saya menggunakan emulator genymotion untuk run aplikasi. Lihat hasilnya akan tampil seperti gambar di bawah.

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

Bagikan artikel ke:

Facebook Google+ Twitter