Friday, February 6, 2015
» » » » » Android Sliding Menu

on
No Comment
Pada tugas UAS kali ini saya akan membuat aplikasi Android Sliding Menu.

 

Program Pendukung :
  1. Xampp/Wamp
  2. Eclipse
  3. SDK/Emulator
  4. Notepad

Buat sebuah project baru di Eclipse IDE,

1. Buat project baru di Eclipse IDE File ⇒ New ⇒ Android Project dan berikan Activity dengan nama class MainScreenActivity.

2. Buka file strings.xml,  di res ⇒ values, kemudian modifikasi file tersebut seperti kode dibawah ini :



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



<resources>







    <string name="app_name">Slider Menu</string>



    <string name="action_settings">Settings</string>



    <string name="hello_world">Hello world!</string>



    <string name="drawer_open">Slider Menu Opened</string>



    <string name="drawer_close">Slider Menu Closed</string>



     

    <string-array name="nav_drawer_items">



        <item >Home</item>



        <item >Find People</item>



        <item >Photos</item>



        <item >Communities</item>



        <item >Pages</item>



        <item >What\'s Hot</item>



    </string-array>



     

    <array name="nav_drawer_icons">



        <item>@drawable/ic_home</item>



        <item>@drawable/ic_people</item>



        <item>@drawable/ic_photos</item>



        <item>@drawable/ic_communities</item>



        <item>@drawable/ic_pages</item>



        <item>@drawable/ic_whats_hot</item>



    </array>



     

    <string name="desc_list_item_icon">Item Icon</string>







</resources>

3. Buka file activity_main.xml, di res ⇒ layout, kemudian modifikasi file tersebut seperti kode dibawah ini :



<android.support.v4.widget.DrawerLayout



    xmlns:android="http://schemas.android.com/apk/res/android"



    android:id="@+id/drawer_layout"



    android:layout_width="match_parent"



    android:layout_height="match_parent">







    <!-- Framelayout to display Fragments -->



    <FrameLayout



        android:id="@+id/frame_container"



        android:layout_width="match_parent"



        android:layout_height="match_parent" />







    <!-- Listview to display slider menu -->



    <ListView



        android:id="@+id/list_slidermenu"



        android:layout_width="240dp"



        android:layout_height="match_parent"



        android:layout_gravity="start"



        android:choiceMode="singleChoice"



        android:divider="@color/list_divider"



        android:dividerHeight="1dp"       



        android:listSelector="@drawable/list_selector"



        android:background="@color/list_background"/>



</android.support.v4.widget.DrawerLayout>

4. Buat file xml baru di folder res ⇒ drawable dengan nama file list_item_bg_normal.xml, kemudian modifikasi file tersebut seperti kode dibawah ini :



<shape xmlns:android="http://schemas.android.com/apk/res/android"



    android:shape="rectangle">



  <gradient



      android:startColor="@color/list_background"



      android:endColor="@color/list_background"



      android:angle="90" />



</shape>

5. Buat file xml baru di folder res ⇒ drawable dengan nama file list_item_bg_pressed.xml, kemudian modifikasi file tersebut seperti kode dibawah ini :



<shape xmlns:android="http://schemas.android.com/apk/res/android"



    android:shape="rectangle">



  <gradient



      android:startColor="@color/list_background_pressed"



      android:endColor="@color/list_background_pressed"



      android:angle="90" />



</shape>

6. Buat file xml baru di folder res ⇒ drawable dengan nama file list_selector.xml, kemudian modifikasi file tersebut seperti kode dibawah ini :



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



<selector xmlns:android="http://schemas.android.com/apk/res/android">







    <item android:drawable="@drawable/list_item_bg_normal" android:state_activated="false"/>



    <item android:drawable="@drawable/list_item_bg_pressed" android:state_pressed="true"/>



    <item android:drawable="@drawable/list_item_bg_pressed" android:state_activated="true"/>







</selector>

7. Buat file xml baru di folder res ⇒ drawable dengan nama file counter_bg.xml, kemudian modifikasi file tersebut seperti kode dibawah ini :



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



<shape xmlns:android="http://schemas.android.com/apk/res/android"



    android:shape="rectangle" >





    <solid android:color="@color/counter_text_bg" >



    </solid>





    <padding



        android:right="3dp"



        android:left="3dp" >



    </padding>





    <corners android:radius="2dp" >



    </corners>







</shape>

8. Buat file xml baru di folder res ⇒ layout dengan nama file drawer_list_item.xml, kemudian modifikasi file tersebut seperti kode dibawah ini :



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



<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"



    android:layout_width="match_parent"



    android:layout_height="48dp"



    android:background="@drawable/list_selector">







    <ImageView



        android:id="@+id/icon"



        android:layout_width="25dp"



        android:layout_height="wrap_content"



        android:layout_alignParentLeft="true"



        android:layout_marginLeft="12dp"



        android:layout_marginRight="12dp"



        android:contentDescription="@string/desc_list_item_icon"



        android:src="@drawable/ic_home"



        android:layout_centerVertical="true" />







    <TextView



        android:id="@+id/title"



        android:layout_width="wrap_content"



        android:layout_height="match_parent"



        android:layout_toRightOf="@id/icon"



        android:minHeight="?android:attr/listPreferredItemHeightSmall"



        android:textAppearance="?android:attr/textAppearanceListItemSmall"



        android:textColor="@color/list_item_title"



        android:gravity="center_vertical"



        android:paddingRight="40dp"/>



     



    <TextView android:id="@+id/counter"



        android:layout_width="wrap_content"



        android:layout_height="wrap_content"



        android:background="@drawable/counter_bg"



        android:layout_alignParentRight="true"



        android:layout_centerVertical="true"



        android:layout_marginRight="8dp"



        android:textColor="@color/counter_text_color"/>







</RelativeLayout>

9. Buat package baru dengan nama package al.ambari.slidingmenu.model

10. Buat class baru di dalam package al.ambari.slidingmenu.model, dengan nama class NavDrawerItem.java, kemudian modifikasi file tersebut seperti kode dibawah ini :



package al.ambari.slidingmenu.model;







public class NavDrawerItem {



     



    private String title;



    private int icon;



    private String count = "0";

    private boolean isCounterVisible = false;



     



    public NavDrawerItem(){}







    public NavDrawerItem(String title, int icon){



        this.title = title;



        this.icon = icon;



    }



     



    public NavDrawerItem(String title, int icon, boolean isCounterVisible, String count){



        this.title = title;



        this.icon = icon;



        this.isCounterVisible = isCounterVisible;



        this.count = count;



    }



     



    public String getTitle(){



        return this.title;



    }



     



    public int getIcon(){



        return this.icon;



    }



     



    public String getCount(){



        return this.count;



    }



     



    public boolean getCounterVisibility(){



        return this.isCounterVisible;



    }



     



    public void setTitle(String title){



        this.title = title;



    }



     



    public void setIcon(int icon){



        this.icon = icon;



    }



     



    public void setCount(String count){



        this.count = count;



    }



     



    public void setCounterVisibility(boolean isCounterVisible){



        this.isCounterVisible = isCounterVisible;



    }



}

11. Buat package baru dengan nama package al.ambari.slidingmenu.model

12. Buat class baru di dalam package al.ambari.slidingmenu.adapter, dengan nama class NavDrawerListAdapter.java, kemudian modifikasi file tersebut seperti kode dibawah ini :



package al.ambari.slidingmenu.adapter;







import al.ambari.slidingmenu.R;



import al.ambari.slidingmenu.model.NavDrawerItem;







import java.util.ArrayList;







import android.app.Activity;



import android.content.Context;



import android.view.LayoutInflater;



import android.view.View;



import android.view.ViewGroup;



import android.widget.BaseAdapter;



import android.widget.ImageView;



import android.widget.TextView;







public class NavDrawerListAdapter extends BaseAdapter {



     



    private Context context;



    private ArrayList<NavDrawerItem> navDrawerItems;



     



    public NavDrawerListAdapter(Context context, ArrayList<NavDrawerItem> navDrawerItems){



        this.context = context;



        this.navDrawerItems = navDrawerItems;



    }







    @Override



    public int getCount() {



        return navDrawerItems.size();



    }







    @Override



    public Object getItem(int position) {       



        return navDrawerItems.get(position);



    }







    @Override



    public long getItemId(int position) {



        return position;



    }







    @Override



    public View getView(int position, View convertView, ViewGroup parent) {



        if (convertView == null) {



            LayoutInflater mInflater = (LayoutInflater)



                    context.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);



            convertView = mInflater.inflate(R.layout.drawer_list_item, null);



        }



          



        ImageView imgIcon = (ImageView) convertView.findViewById(R.id.icon);



        TextView txtTitle = (TextView) convertView.findViewById(R.id.title);



        TextView txtCount = (TextView) convertView.findViewById(R.id.counter);



          



        imgIcon.setImageResource(navDrawerItems.get(position).getIcon());        



        txtTitle.setText(navDrawerItems.get(position).getTitle());



         

        if(navDrawerItems.get(position).getCounterVisibility()){



            txtCount.setText(navDrawerItems.get(position).getCount());



        }else{

            txtCount.setVisibility(View.GONE);



        }



         



        return convertView;



    }







}

13. Buka kembali file MainScreenActivity, kemudian modifikasi file tersebut seperti kode dibawah ini :



public class MainActivity extends Activity {



    private DrawerLayout mDrawerLayout;



    private ListView mDrawerList;



    private ActionBarDrawerToggle mDrawerToggle;





    private CharSequence mDrawerTitle;





    private CharSequence mTitle;





    private String[] navMenuTitles;



    private TypedArray navMenuIcons;







    private ArrayList<NavDrawerItem> navDrawerItems;



    private NavDrawerListAdapter adapter;







    @Override



    protected void onCreate(Bundle savedInstanceState) {



        super.onCreate(savedInstanceState);



        setContentView(R.layout.activity_main);







        mTitle = mDrawerTitle = getTitle();





        navMenuTitles = getResources().getStringArray(R.array.nav_drawer_items);





        navMenuIcons = getResources()



                .obtainTypedArray(R.array.nav_drawer_icons);







        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);



        mDrawerList = (ListView) findViewById(R.id.list_slidermenu);







        navDrawerItems = new ArrayList<NavDrawerItem>();





        navDrawerItems.add(new NavDrawerItem(navMenuTitles[0], navMenuIcons.getResourceId(0, -1)));


        navDrawerItems.add(new NavDrawerItem(navMenuTitles[1], navMenuIcons.getResourceId(1, -1)));


        navDrawerItems.add(new NavDrawerItem(navMenuTitles[2], navMenuIcons.getResourceId(2, -1)));


        navDrawerItems.add(new NavDrawerItem(navMenuTitles[3], navMenuIcons.getResourceId(3, -1), true, "22"));


        navDrawerItems.add(new NavDrawerItem(navMenuTitles[4], navMenuIcons.getResourceId(4, -1)));


        navDrawerItems.add(new NavDrawerItem(navMenuTitles[5], navMenuIcons.getResourceId(5, -1), true, "50+"));



         





        navMenuIcons.recycle();





        adapter = new NavDrawerListAdapter(getApplicationContext(),



                navDrawerItems);



        mDrawerList.setAdapter(adapter);





        getActionBar().setDisplayHomeAsUpEnabled(true);



        getActionBar().setHomeButtonEnabled(true);







        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,



                R.drawable.ic_drawer, //nav menu toggle icon



                R.string.app_name, // nav drawer open - description for accessibility



                R.string.app_name // nav drawer close - description for accessibility



        ){



            public void onDrawerClosed(View view) {



                getActionBar().setTitle(mTitle);

                invalidateOptionsMenu();



            }







            public void onDrawerOpened(View drawerView) {



                getActionBar().setTitle(mDrawerTitle);

                invalidateOptionsMenu();



            }



        };



        mDrawerLayout.setDrawerListener(mDrawerToggle);







        if (savedInstanceState == null) {

            displayView(0);



        }



    }







    @Override



    public boolean onCreateOptionsMenu(Menu menu) {



        getMenuInflater().inflate(R.menu.main, menu);



        return true;



    }







    @Override



    public boolean onOptionsItemSelected(MenuItem item) {

        if (mDrawerToggle.onOptionsItemSelected(item)) {



            return true;



        }

        switch (item.getItemId()) {



        case R.id.action_settings:



            return true;



        default:



            return super.onOptionsItemSelected(item);



        }



    }





    @Override



    public boolean onPrepareOptionsMenu(Menu menu) {

        boolean drawerOpen = mDrawerLayout.isDrawerOpen(mDrawerList);



        menu.findItem(R.id.action_settings).setVisible(!drawerOpen);



        return super.onPrepareOptionsMenu(menu);



    }







    @Override



    public void setTitle(CharSequence title) {



        mTitle = title;



        getActionBar().setTitle(mTitle);



    }





    @Override



    protected void onPostCreate(Bundle savedInstanceState) {



        super.onPostCreate(savedInstanceState);

        mDrawerToggle.syncState();



    }







    @Override



    public void onConfigurationChanged(Configuration newConfig) {



        super.onConfigurationChanged(newConfig);

        mDrawerToggle.onConfigurationChanged(newConfig);



    }

14. Buat class baru di dalam package al.ambari.slidingmenu, dengan nama class HomeFragment.java, kemudian modifikasi file tersebut seperti kode dibawah ini :



package al.ambari.slidingmenu;







import android.app.Fragment;



import android.os.Bundle;



import android.view.LayoutInflater;



import android.view.View;



import android.view.ViewGroup;







public class HomeFragment extends Fragment {



     



    public HomeFragment(){}



     



    @Override



    public View onCreateView(LayoutInflater inflater, ViewGroup container,



            Bundle savedInstanceState) {



  



        View rootView = inflater.inflate(R.layout.fragment_home, container, false);



          



        return rootView;



    }



}

15. Buat file xml baru di folder res ⇒ layout dengan nama file fragment_home.xml, kemudian modifikasi file tersebut seperti kode dibawah ini :



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



<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"



    android:layout_width="match_parent"



    android:layout_height="match_parent">



     



    <TextView



        android:id="@+id/txtLabel"



         android:layout_width="wrap_content"



        android:layout_height="wrap_content"



        android:layout_centerInParent="true"



        android:textSize="16dp"



        android:text="Home View"/>



     



    <ImageView android:layout_width="wrap_content"



        android:layout_height="wrap_content"



        android:layout_below="@id/txtLabel"



        android:src="@drawable/ic_home"



        android:layout_centerHorizontal="true"



        android:layout_marginTop="10dp"/>



     







</RelativeLayout>

16. Final Script



package al.ambari.slidingmenu;







import al.ambari.slidingmenu.adapter.NavDrawerListAdapter;



import al.ambari.slidingmenu.model.NavDrawerItem;







import java.util.ArrayList;







import android.app.Activity;



import android.app.Fragment;



import android.app.FragmentManager;



import android.content.res.Configuration;



import android.content.res.TypedArray;



import android.os.Bundle;



import android.support.v4.app.ActionBarDrawerToggle;



import android.support.v4.widget.DrawerLayout;



import android.util.Log;



import android.view.Menu;



import android.view.MenuItem;



import android.view.View;



import android.widget.AdapterView;



import android.widget.ListView;







public class MainActivity extends Activity {



    private DrawerLayout mDrawerLayout;



    private ListView mDrawerList;



    private ActionBarDrawerToggle mDrawerToggle;





    private CharSequence mDrawerTitle;





    private CharSequence mTitle;





    private String[] navMenuTitles;



    private TypedArray navMenuIcons;







    private ArrayList<NavDrawerItem> navDrawerItems;



    private NavDrawerListAdapter adapter;







    @Override



    protected void onCreate(Bundle savedInstanceState) {



        super.onCreate(savedInstanceState);



        setContentView(R.layout.activity_main);







        mTitle = mDrawerTitle = getTitle();





        navMenuTitles = getResources().getStringArray(R.array.nav_drawer_items);





        navMenuIcons = getResources()



                .obtainTypedArray(R.array.nav_drawer_icons);







        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);



        mDrawerList = (ListView) findViewById(R.id.list_slidermenu);







        navDrawerItems = new ArrayList<NavDrawerItem>();





        navDrawerItems.add(new NavDrawerItem(navMenuTitles[0], navMenuIcons.getResourceId(0, -1)));


        navDrawerItems.add(new NavDrawerItem(navMenuTitles[1], navMenuIcons.getResourceId(1, -1)));


        navDrawerItems.add(new NavDrawerItem(navMenuTitles[2], navMenuIcons.getResourceId(2, -1)));


        navDrawerItems.add(new NavDrawerItem(navMenuTitles[3], navMenuIcons.getResourceId(3, -1), true, "22"));


        navDrawerItems.add(new NavDrawerItem(navMenuTitles[4], navMenuIcons.getResourceId(4, -1)));


        navDrawerItems.add(new NavDrawerItem(navMenuTitles[5], navMenuIcons.getResourceId(5, -1), true, "50+"));



         





        navMenuIcons.recycle();







        mDrawerList.setOnItemClickListener(new SlideMenuClickListener());





        adapter = new NavDrawerListAdapter(getApplicationContext(),



                navDrawerItems);



        mDrawerList.setAdapter(adapter);







        // enabling action bar app icon and behaving it as toggle button



        getActionBar().setDisplayHomeAsUpEnabled(true);



        getActionBar().setHomeButtonEnabled(true);







        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,



                R.drawable.ic_drawer, //nav menu toggle icon



                R.string.app_name, // nav drawer open - description for accessibility



                R.string.app_name // nav drawer close - description for accessibility



        ) {



            public void onDrawerClosed(View view) {



                getActionBar().setTitle(mTitle);

                invalidateOptionsMenu();



            }







            public void onDrawerOpened(View drawerView) {



                getActionBar().setTitle(mDrawerTitle);

                invalidateOptionsMenu();



            }



        };



        mDrawerLayout.setDrawerListener(mDrawerToggle);







        if (savedInstanceState == null) {

            displayView(0);



        }



    }





    private class SlideMenuClickListener implements



            ListView.OnItemClickListener {



        @Override



        public void onItemClick(AdapterView<?> parent, View view, int position,



                long id) {

            displayView(position);



        }



    }







    @Override



    public boolean onCreateOptionsMenu(Menu menu) {



        getMenuInflater().inflate(R.menu.main, menu);



        return true;



    }







    @Override



    public boolean onOptionsItemSelected(MenuItem item) {

        if (mDrawerToggle.onOptionsItemSelected(item)) {



            return true;



        }

        switch (item.getItemId()) {



        case R.id.action_settings:



            return true;



        default:



            return super.onOptionsItemSelected(item);



        }



    }





    @Override



    public boolean onPrepareOptionsMenu(Menu menu) {

        boolean drawerOpen = mDrawerLayout.isDrawerOpen(mDrawerList);



        menu.findItem(R.id.action_settings).setVisible(!drawerOpen);



        return super.onPrepareOptionsMenu(menu);



    }





    private void displayView(int position) {


        Fragment fragment = null;



        switch (position) {



        case 0:



            fragment = new HomeFragment();



            break;



        case 1:



            fragment = new FindPeopleFragment();



            break;



        case 2:



            fragment = new PhotosFragment();



            break;



        case 3:



            fragment = new CommunityFragment();



            break;



        case 4:



            fragment = new PagesFragment();



            break;



        case 5:



            fragment = new WhatsHotFragment();



            break;







        default:



            break;



        }







        if (fragment != null) {



            FragmentManager fragmentManager = getFragmentManager();



            fragmentManager.beginTransaction()



                    .replace(R.id.frame_container, fragment).commit();





            mDrawerList.setItemChecked(position, true);



            mDrawerList.setSelection(position);



            setTitle(navMenuTitles[position]);



            mDrawerLayout.closeDrawer(mDrawerList);



        } else {

            Log.e("MainActivity", "Error in creating fragment");



        }



    }







    @Override



    public void setTitle(CharSequence title) {



        mTitle = title;



        getActionBar().setTitle(mTitle);



    }





    @Override



    protected void onPostCreate(Bundle savedInstanceState) {



        super.onPostCreate(savedInstanceState);

        mDrawerToggle.syncState();



    }







    @Override



    public void onConfigurationChanged(Configuration newConfig) {



        super.onConfigurationChanged(newConfig);

        mDrawerToggle.onConfigurationChanged(newConfig);



    }







}
Posted by
Share:
Next
This is the most recent post.
 Older Post

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)