Membuat Sliding Menu pada Android

Langkah-Langkahnya yaitu sebagai berikut:

1.  Siapkan gambar untuk background sekaligus untuk menunya.

2. Buatlah suatu project di Android. Disini saya membuat project dengan nama “SlidingMenu” (tanpa tanda petik) serta package dengan nama “com.aina.slidingmenu” (tanpa tanda petik).

3. Beri nama activity dengan “SlidingMenu” (tanpa tanda petik) dan nama layout dengan “sliding_menu” (tanpa tanda petik).

4.  Buat sebuah class adapter dengan nama “SlidingMenuAdapter.java” (tanpa tanda petik). Class ini digunakan untuk menampung gambar menu yang sudah dibuat sebelumnya. Jangan lupa untuk meletakkan gambar tersebut di folder drawble.

5.  Buatlah sebuah activity baru dengan nama “Link” (tanpa tanda petik) dan nama layout dengan “link” (tanpa tanda petik).

6. Buatlah “sliding_menu.xml” (tanpa tanda petik) menjadi seperti berikut:

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:background="@drawable/bg4"
    tools:context=".SlidingMenu" >
<!-- This is the Gallery -->

    <Gallery
        android:id="@+id/gallery"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="50dip"
        android:paddingTop="80dp" />

    <!-- This LinearLayout if for the dots -->

    <LinearLayout
        android:id="@+id/image_count"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#00000000"
        android:gravity="center"
        android:orientation="horizontal" >
    </LinearLayout>
</LinearLayout>

7. Sesuaikan “SlidingMenuAdapter.java” (tanpa tanda petik) menjadi seperti berikut:

    package com.aina.slidingmenu;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageView;

public class SlidingMenuAdapter extends BaseAdapter {
    private Context mContext;
   
    //array of integers for images IDs
    private Integer[] mImageIds = {
            R.drawable.menu1,
            R.drawable.menu2,
            R.drawable.menu3,
            R.drawable.menu4,
     };

    //constructor
    public SlidingMenuAdapter (Context c){
        mContext = c;
    }
    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return mImageIds.length;
    }

    @Override
    public Object getItem(int i) {
        // TODO Auto-generated method stub
        return i;
    }

    @Override
    public long getItemId(int i) {
        // TODO Auto-generated method stub
        return 0;
    }

    @Override
    public View getView(int i, View view, ViewGroup viewGroup) {
        ImageView imageView = new ImageView(mContext);

        imageView.setImageResource(mImageIds[i]);

imageView.setLayoutParams(new Gallery.LayoutParams(ViewGroup.LayoutParams.FILL_PARENT, ViewGroup.LayoutParams.FILL_PARENT));
        return imageView;
    }
}

8.  Buatlah “SlidingMenu.java” (tanpa tanda petik) menjadi seperti berikut :

package com.aina.slidingmenu;

import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.Gallery;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.AdapterView.OnItemClickListener;
import android.app.Activity;
import android.content.Intent;
import android.graphics.Color;
import android.graphics.Typeface;

public class SlidingMenu extends Activity {
    private static TextView mDotsText[];
    private int mDotsCount;
    private LinearLayout mDotsLayout;
    public  static int l;
    public  static int idxMenu;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.sliding_menu);
       
        //here we create the gallery and set our adapter created before
        final Gallery gallery = (Gallery)findViewById(R.id.gallery);
        gallery.setAdapter(new SlidingMenuAdapter(this));


        mDotsLayout = (LinearLayout)findViewById(R.id.image_count);
        //here we count the number of images we have to know how many dots we need
        mDotsCount = gallery.getAdapter().getCount();

        //here we create the dots
        //as you can see the dots are nothing but "."  of large size
        mDotsText = new TextView[mDotsCount];
       

        //here we set the dots
        for (int i = 0; i < mDotsCount; i++) {
            mDotsText[i] = new TextView(this);
            mDotsText[i].setText(".");
            mDotsText[i].setTextSize(45);
            mDotsText[i].setTypeface(null, Typeface.BOLD);
            mDotsText[i].setTextColor(android.graphics.Color.GRAY);
            mDotsLayout.addView(mDotsText[i]);
           
            gallery.setOnItemClickListener(new OnItemClickListener() {
                @SuppressWarnings({ "rawtypes" })
                public void onItemClick(AdapterView parent, View v,
                        int position, long id) {
                 
                     l = (Integer) parent.getItemAtPosition(position);
                    idxMenu= l+1;
                    masukLink();
                }
               
            }
           
                );
        }


        //when we scroll the images we have to set the dot that corresponds to the image to White and the others
        //will be Gray
        gallery.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            @SuppressWarnings("rawtypes")
            @Override
            public void onItemSelected(AdapterView adapterView, View view, int pos, long l) {

                for (int i = 0; i < mDotsCount; i++) {
                    SlidingMenu.mDotsText[i]
                            .setTextColor(Color.GRAY);
                }

                SlidingMenu.mDotsText[pos]
                        .setTextColor(Color.WHITE);
            }

            @SuppressWarnings("rawtypes")
            @Override
            public void onNothingSelected(AdapterView adapterView) {
                
            }
        });
    }
    public void masukLink(){
        Intent npi = new Intent(getApplicationContext(), Link.class);
        startActivity(npi);
    }

}
 

9.  Sesuaikan script “link.xml” (tanpa tanda petik) menjadi seperti berikut:

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:background="@drawable/bg"
    tools:context=".Link" >

    <TextView
        android:id="@+id/bacamenu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="135dp"
        android:textSize="18sp"
        android:typeface="monospace"
        android:textColor="@android:color/white"
        android:text="@string/bacamenu" />

</RelativeLayout>

10.  Sesuaikan script “Link.java” (tanpa tanda petik) menjadi seperti beikut:

      package com.aina.slidingmenu;

import android.os.Bundle;
import android.widget.TextView;
import android.app.Activity;

public class Link extends Activity {
    public static TextView bacamenu;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.link);
      
        bacamenu = (TextView)findViewById(R.id.bacamenu);
        bacamenu.setText("Menu ke- " + SlidingMenu.idxMenu);
    }
  }
 

11.  Jalankan Aplikasi. Jika berhasil maka akan tampil seperti ini:

Tampilan Sliding Menu. Geser ke kanan dan kiri untuk menggunakan

Tampilan Halaman Link ketika Menu 1 dipilih

Fin.

Happy Coding.

Alhamdulillah.

*untuk projectnya bisa diunduh di sini.