Manga Mobile Coding Series : Membuat Main Menu

Yup, untuk sebagian besar aplikasi, pasti memerlukan Main Menu untuk melakukan navigasi mula-mula. Bisa dibilang Main Menu adalah bagian terpenting dari sebuah aplikasi. Karena itu, pada kesempatan kali ini kita akan membahas :

1. Bagaimana memulai activity baru dari activity sebelumnya.
2. Bagaimana membuat layout Main Menu
3. Bagaimana membuat event listener. Pada kasus ini event listener pada button.

Melanjutkan dari pembuatan Splash Screen di sini, pertama kita buat dahulu layout Main Menu yang kita kehendaki. Berikut kode XML layout sederhana Main Menu yang saya beri nama main_menu.xml :

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

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:padding="10dip"
    android:gravity="center"
    android:id="@+id/main_layout" 
    android:background="@drawable/main_menu">
    <LinearLayout 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/main_linear"    
        android:orientation="vertical"
        android:gravity="center_horizontal"
    >
        <Button 
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:id="@+id/read_button"
            android:text="Read"    
            android:background="@drawable/bg_button"
            android:layout_margin="10dip"
            android:textColor="#ffffff"
        />
        <Button 
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:id="@+id/favorite_button"
            android:text="My Favorites"    
            android:background="@drawable/bg_button"
            android:layout_margin="10dip"
            android:textColor="#ffffff"
        />
        <Button 
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:id="@+id/setting_button"
            android:text="Setting"    
            android:background="@drawable/bg_button"
            android:layout_margin="10dip"
            android:textColor="#ffffff"
        />
    </LinearLayout>
        
</RelativeLayout>

Ada banyak cara membuat .xml baru, salah satunya adalah meng-copy .xml yang sudah ada, lalu me-rename dan mengganti kode didalamnya.

Disini ada beberapa atribut baru yang cukup baru. Pertama adalah android:gravity="center_horizontal". Atribut ini bertujuan untuk menengahkan tombol-tombol yang ada didalam LinearLayout. Sedangkan android:orientation="vertical" berguna untuk menjaga agar tombol yang satu dan yang lain disusun secara vertikal. Setelah itu, didalam LinearLayout kita buat beberapa tombol. Pada kode diatas saya mendefinisikan isi text (android:text), warna text (android:textColor), ID dari tiap button (android:id), background button (android:background) dan jarak antar satu button dengan button lain (android:layout_margin).

Sebagai referensi, saya menggunakan 2 gambar ini untuk background Main Menu dan background button.

main_menu.png

bg_button.png

Lalu kita buat sebuah Activity baru bernama MainMenuAct. Cara membuat Activity sama dengan saat kita membuat SplashScreenAct hanya saja ada beberapa perubahan kode :

package gogo.mobile.mm;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainMenuAct extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_menu);
        
        mRead = (Button)findViewById(R.id.read_button);
        mRead.setOnClickListener(new View.OnClickListener() {
            
            public void onClick(View v) {
                //startActivity(new Intent(MainMenuAct.this, SelectMangaAct.class));
            }
        });
        
    }
    
    private Button mRead;
}

Perhatikan bahwa pada kode diatas kita mendapatkan definisi button Read dan Favorite dari main_menu.xml yang telah kita definisikan sebelumnya (dan ini menjadi penyebab mengapa saya lebih suka memainkan layout lewat kode daripada menggunakan IDE). Pada kode diatas, kita juga telah membuat sebuah event listener untuk button Read yang nanti akan kita isi untuk melakukan navigasi.

Lalu kita harus membenarkan SplashScreenAct kita. Cukup ubah kode ini :

SplashScreenAct.this.finish();

menjadi :

SplashScreenAct.this.finish();
startActivity(new Intent(SplashScreenAct.this.getApplicationContext(), MainMenuAct.class));

Sampai tahap ini, kita telah berhasil membuat MainMenuAct yang akan dijalankan setelah Splash Screen selesai. Namun kode ini masih belum bisa berjalan dengan sempurna. Kita harus memberitahu Android bahwa MainMenuAct adalah bagian dari activity kita. Tambahkan pada AndroidManifest.xml

<activity android:name=".MainMenuAct" />

dimanapun dalam tag <application> setara dengan tag <activity> milik SplashScreenAct.

Jalankan aplikasi. Bila lancar, maka akan muncul seperti berikut :

Splash Screen

Dan 5 detik kemudian, muncullah MainMenuAct.

Sekarang mari kita buat Main Menu ini bisa melakukan navigasi. Buatlah sebuah Activity kosong bernama SelectMangaAct.

package gogo.mobile.mm;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class SelectMangaAct extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }
}

Lalu uncomment kode

//startActivity(new Intent(MainMenuAct.this, SelectMangaAct.class)

pada MainMenuAct. Tambahkan juga

<activity android:name=".SelectMangaAct" />

pada AndroidManifest.xml. Kira-kira isi tag <application> pada AndroidManifest.xml saat ini adalah :

<application android:icon="@drawable/icon" android:theme="@android:style/Theme.NoTitleBar">
    <activity android:name=".SplashScreenAct" android:screenOrientation="portrait">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>
    <activity android:name=".MainMenuAct"/>

<activity android:name=".SelectMangaAct" />

</application>

Jalankan aplikasi, dan bila sukses bin lancar muncullah seperti berikut :

Splash Screen

5 detik kemudian muncul MainMenuAct. Pencet button Read

Yap, kita berhasil melakukan navigasi ke Activity lain.

Sekian kombo pembahasan Splash Screen dan Main Menu. Nantikan pembahasan selanjutnya yang (semoga) lebih seru. Kritik dan saran tentunya masih saya terima.