Cara Membuat Menubar Dan Icon Serta Submenu Dengan Eclipse Android ADT

Cara Membuat Menubar Dan Icon Serta Submenu Dengan Eclipse Android ADT

Menubar dalam sebuah aplikasi android atau mobile lainya seperti ios, windows phone atau ubuntu phone sangat ditekankan dan bisa dibilang wajib ada serta juga setiap menubar akan ditampilkan icon beserta dengan submenu, pada artikel kali ini kita akan membahas cara membuat menubar, menu icon dan submenu dengan menggunakan android eclipse adt bundle.

Bahan Dibutuhkan

  1. Android IDE (Eclipse ADT atau Android Studio)
  2. Pastikan sudah terinstall ARM dan SDK Platform
  3. Buat AVD Emulator dan pastikan berjalan
  4. Selesai (Saya Menggunakan Eclipse ADT)

Buat Project

  1. Buka Eclipse di folder eclipse atau jalankan Android Studio
  2. Buat Project baru dan berinama terserah
  3. Isi nama aplikasi beserta dengan target sdk sama compile with (saya menggunakan api 19 atau android 4.4.2)
  4. kemudian klik next sampai pada atau biarkan MainActivity.java dan activity_main.xml dan klik finish.

Desain Menu

Pertama: Edit res > value > strings.xml

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

    <string name="app_name">menuBar</string>
    <string name="hello_world">Hello world!</string>
    <string name="list">List</string>
    <string name="file">File</string>
    <string name="view">View</string>
    <string name="add">Add</string>
    <string name="action_settings">Settings</string>
    <string name="profil">Profil</string>
    <string name="setelan">Setelan</string>
    <string name="about">About</string>
    <string name="exit">Exit</string>
    <string name="title_activity_second">SecondActivity</string>
    <string name="one">One Item</string>
    <string name="two">Two Item</string>
    <string name="three">About Item</string>

</resources>

Kedua: Edit res > menu > main.xml

<menu 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"
    tools:context="com.example.menubar.MainActivity" >

    <item android:id="@+id/list"
        android:orderInCategory="100"
        android:title="@string/list"
        app:showAsAction="always"
        />
    
    <item android:id="@+id/file"
        android:orderInCategory="100"
        android:title="@string/file"
        app:showAsAction="always"
        >
    </item>
    
    <item android:id="@+id/add"
        android:orderInCategory="100"
        android:title="@string/add"
        app:showAsAction="ifRoom"
        />
    
    <item android:id="@+id/view"
        android:orderInCategory="100"
        android:title="@string/view"
        app:showAsAction="ifRoom"
        />
    
    <item
        android:id="@+id/action_settings"
        android:orderInCategory="100"
        android:title="@string/action_settings"
        app:showAsAction="never"/>
    
</menu>

Aksi Menu

Pertama: Buka dan edit src > package > MainActivity.java dan cari dan gantikan sintaks dibawah ini

@Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
        if (id == R.id.action_settings) {
            return true;
        } else if (id == R.id.list) {
            Toast.makeText(getApplication(), "Fasilitas ini belum tersedia", Toast.LENGTH_LONG).show();
        } else if (id == R.id.profil) {
         Toast.makeText(getApplication(), "Fasilitas ini belum tersedia", Toast.LENGTH_LONG).show();
        } else if (id == R.id.setelan) {
         Toast.makeText(getApplication(), "Fasilitas ini belum tersedia", Toast.LENGTH_LONG).show();
        } else if (id == R.id.about) {
         Toast.makeText(getApplication(), "Ini adalah aplikasi pertama T Ghazali", Toast.LENGTH_LONG).show();
        } else if (id == R.id.exit) {
            finish();
        } else{
         Toast.makeText(getApplication(), "Anda salah pilih menu", Toast.LENGTH_LONG).show();
        }
        return super.onOptionsItemSelected(item);
    }

Kedua: untuk sintaks atau kode penuh MainActivity.java seperti dibawah ini

package com.example.menubar;

import android.support.v7.app.ActionBarActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Toast;


public class MainActivity extends ActionBarActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
        if (id == R.id.action_settings) {
            return true;
        } else if (id == R.id.list) {
            Toast.makeText(getApplication(), "Fasilitas ini belum tersedia", Toast.LENGTH_LONG).show();
        } else if (id == R.id.profil) {
         Toast.makeText(getApplication(), "Fasilitas ini belum tersedia", Toast.LENGTH_LONG).show();
        } else if (id == R.id.setelan) {
         Toast.makeText(getApplication(), "Fasilitas ini belum tersedia", Toast.LENGTH_LONG).show();
        } else if (id == R.id.about) {
         Toast.makeText(getApplication(), "Ini adalah aplikasi pertama T Ghazali", Toast.LENGTH_LONG).show();
        } else if (id == R.id.exit) {
            finish();
        } else{
         Toast.makeText(getApplication(), "Anda salah pilih menu", Toast.LENGTH_LONG).show();
        }
        return super.onOptionsItemSelected(item);
    }
}

Sub Menu

Untuk pembuatan submenu cukup ditambahkan kedalam item menu seperti kode dibawah ini.

...
    <item android:id="@+id/file"
        android:orderInCategory="100"
        android:title="@string/file"
        app:showAsAction="always"
        >
        <menu>
            <item android:id="@+id/profil"
          android:orderInCategory="100"
          android:title="@string/profil"
          app:showAsAction="ifRoom"
          />
            <item android:id="@+id/setelan"
          android:orderInCategory="100"
          android:title="@string/setelan"
          app:showAsAction="ifRoom"
          />
            <item android:id="@+id/about"
          android:orderInCategory="100"
          android:title="@string/about"
          app:showAsAction="ifRoom"
          />
            <item android:id="@+id/exit"
          android:orderInCategory="100"
          android:title="@string/exit"
          app:showAsAction="ifRoom"
          />
        </menu>
    </item>
...

Icon Menu

Pertama: copy paste icon menu format png kedalam folder res > drawable-mdpi seperti gambar dibawah ini.

pastekan icon logo eclipse adt
Kedua: edit menu tadi dengan penambahan android:icon seperti kode dibawah ini

memanggil icon ke eclipse adt

...
    <item android:id="@+id/list"
        android:icon="@drawable/daftar"
        android:orderInCategory="100"
        android:title="@string/list"
        app:showAsAction="always"
        />
    
    <item android:id="@+id/file"
        android:icon="@drawable/setelan"
        android:orderInCategory="100"
        android:title="@string/file"
        app:showAsAction="always"
        >
    </item>
...

Hasil

Untuk hasil dari menubar sama icon dan submenu seperti gambar dibawah ini.

menu tanpa icon menu dengan icon menu dengan submenu

Tags: ,