Androidbeginnerpoint

Android Custom Slider Menu with Navigation Drawer ?

In this blog explain how to implement Slider Menu in android.

ic_drawer icon

Step1.create string class inside res/value/string.xml. i required some string variable in slider listview item name and icon .
................................................................................................................................................................
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">

<string name="profile">Profile Name</string>
<string name="view_Profile">View Profile</string>
<string name="action_search">Sarch</string>
<string name="action_refresh">Refresh</string>
<string name="app_name">Home</string>
<string name="action_settings">Settings</string>
<string name="hello_world">Hello world!</string>
<string name="drawer_open">Open navigation drawer</string>
<string name="drawer_close">Close navigation drawer</string>


<string-array name="nav_drawer_items">
<item>Home</item>
<item>Quick Query</item>
<item>Share App</item>
<item>About</item>
<item>Term & Coditions</item>
<item>Help</item>
</string-array>
<array name="nav_drawer_icons">
<item>@drawable/home</item> 
<item>@drawable/quick_query</item> 
<item>@drawable/share</item> 
<item>@drawable/about</item> 
<item>@drawable/term_condition</item> 
<item>@drawable/help</item> 
</array>
<string name="desc_list_item_icon">Item Icon</string>
</resources>

Step 2.Create a color class inside res/value/color.xml

color.xml.

..................................................................................................................................................................

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

<color name="list_item_title">#ffffff</color>

<color name="white">#ffffff</color>

</resources>

Step 3 Create activity_main class inside rec/layout/ folder.Here used Navigation drawer (DrawerLayout ) open your layout file.

activity_main.xml.
.................................................................................................................................................................

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/drawer_layout"

android:layout_width="match_parent"

android:layout_height="match_parent" >

<ScrollView

android:id="@+id/scrollView1"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:fillViewport="true"

android:isScrollContainer="true" >

<LinearLayout

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:orientation="vertical" >

<LinearLayout

android:layout_width="match_parent"

android:layout_height="150dp"

android:background="@color/purple_green"

android:gravity="center"

android:orientation="vertical"

android:padding="13dp" >

<EditText

android:id="@+id/textView1"

android:layout_width="fill_parent"

android:layout_height="40dp"

android:layout_marginLeft="15dp"

android:layout_marginRight="15dp"

android:layout_marginStart="15dp"

android:layout_marginTop="18dp"

android:background="@drawable/border"

android:drawableLeft="@drawable/location_marker"

android:drawableStart="@drawable/location_marker"

android:gravity="center|start"

android:hint="@string/loaction"

android:inputType="text"

android:paddingLeft="5dp"

android:textColor="@color/white"

android:textColorHint="@color/halka_white" >

</EditText>

<EditText

android:id="@+id/searchView1"

android:layout_width="fill_parent"

android:layout_height="40dp"

android:layout_marginBottom="18dp"

android:layout_marginLeft="15dp"

android:layout_marginRight="15dp"

android:layout_marginStart="15dp"

android:layout_marginTop="4dp"

android:background="@drawable/border"

android:drawableLeft="@drawable/search"

android:drawableStart="@drawable/search"

android:gravity="center|start"

android:hint="@string/search_category"

android:inputType="text"

android:paddingLeft="5dp"

android:textColor="@color/white"

android:textColorHint="@color/halka_white" />

</LinearLayout>

<LinearLayout

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:background="@color/abs__background_holo_light"

android:orientation="vertical" >

<GridView

android:id="@+id/gridView_business_item"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:numColumns="3"

android:scrollbars="none" />

</LinearLayout>

</ScrollView>

<RelativeLayout

android:id="@+id/drawerPane"

android:layout_width="280dp"

android:layout_height="match_parent"

android:layout_gravity="start" >

<RelativeLayout

android:id="@+id/profileBox"

android:layout_width="match_parent"

android:layout_height="130dp"

android:background="@color/light_orange"

android:padding="8dp" >

<LinearLayout

android:layout_width="wrap_content"

android:layout_height="42dp"

android:layout_centerVertical="true"

android:layout_marginLeft="15dp"

android:layout_marginStart="15dp"

android:layout_toEndOf="@+id/avatar"

android:layout_toRightOf="@+id/avatar"

android:orientation="vertical" >

<TextView

android:id="@+id/userName"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/profile"

android:textColor="#fff"

android:textSize="16sp"

android:textStyle="bold" />

<TextView

android:id="@+id/desc"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="bottom"

android:layout_marginTop="4dp"

android:text="@string/view_Profile"

android:textColor="#fff"

android:textSize="12sp" />

</LinearLayout>

<ImageView

android:id="@+id/avatar"

android:layout_width="100dp"

android:layout_height="100dp"

android:layout_alignParentLeft="true"

android:layout_alignParentStart="true"

android:layout_centerVertical="true"

android:background="@drawable/image_in_ring"

android:contentDescription="@null"

android:padding="10dp"

android:scaleType="fitXY"

android:src="@drawable/profile" />

</RelativeLayout>

<ListView

android:id="@+id/list_slidermenu"

android:layout_width="280dp"

android:layout_height="match_parent"

android:layout_below="@+id/profileBox"

android:layout_gravity="start"

android:background="#ffffff"

android:choiceMode="singleChoice"

android:divider="@color/list_divider"

android:dividerHeight="1dp"

android:listSelector="@drawable/list_selector" />

</RelativeLayout>

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

Step 4.Creating a Custom list View Adapter

First, you can create some gradiend xml as per Requirment for example

1.list_item_bg_normal.xml,

2list_item_bg_pressed.xml,

3 list_selectore.xml.,

4imaige_in_ring.xml.

show below and explain how why we used these gradient xml ..

list_item_bg_normal.xml.

..................................................................................................................................................................

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

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

android:shape="rectangle">

<gradient

android:startColor="@color/white"

android:endColor="@color/white"

android:angle="90" />

</shape>

list_item_bg_pressed.xml

...................................................................................................................................................................

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

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

android:shape="rectangle">

<gradient

android:startColor="@color/background_holo_light"

android:endColor="@color/background_holo_light"

android:angle="90" />

</shape>

list_selectore.xml.

...................................................................................................................................................................

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

</selector>

imaige_in_ring.xml.

..................................................................................................................................................................

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

<shape

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

android:shape="oval">

<gradient

android:type="radial"

android:gradientRadius="20"

android:centerX=".6"

android:centerY=".35"

android:startColor="#FFFF00"

android:endColor="#FFFF99" />

<size

android:width="100dp"

android:height="100dp"/>

</shape>

Step 5. Creating a List row inside res/layout/drawer_list_item.xml ..

drawer_list_item.xml.
the class used in adapter class
...................................................................................................................................................................

<?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="60dp"

android:background="@drawable/list_selector" >

<ImageView

android:id="@+id/icon"

android:layout_width="25dp"

android:layout_height="25dp"

android:layout_alignParentLeft="true"

android:layout_alignParentStart="true"

android:layout_centerVertical="true"

android:layout_marginLeft="12dp"

android:layout_marginRight="12dp"

android:scaleType="fitXY"

android:contentDescription="@string/desc_list_item_icon"

android:src="@drawable/home" />

<TextView

android:id="@+id/title"

android:layout_width="wrap_content"

android:layout_height="48dp"

android:layout_centerVertical="true"

android:layout_toEndOf="@id/icon"

android:layout_toRightOf="@+id/icon"

android:gravity="center|start"

android:text="hello"

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

</RelativeLayout>

Step 6. Create NavDrawerListAdapter class inside src/ folder...

NavDrawerListAdapter .java.

...................................................................................................................................................................

import java.util.ArrayList;

import com.webnetware.businesstickmyad.R;

import com.webnetware.services.NavDrawerItem;

import android.annotation.SuppressLint;

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;

@SuppressLint("InflateParams")

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);

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

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

return convertView;

}

Step 6. Create MainActivity class inside src folder..

MainActivity .java
...................................................................................................................................................................

package com.webnetware.businesstickmyad;

import java.util.ArrayList;

import android.annotation.SuppressLint;
import android.app.ActionBar;
import android.app.Activity;
import android.content.Intent;
import android.content.res.TypedArray;
import android.os.Bundle;
import android.support.v4.app.ActionBarDrawerToggle;
import android.support.v4.widget.DrawerLayout;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.Button;
import android.widget.GridView;
import android.widget.ListView;
import android.widget.RelativeLayout;
import android.widget.TextView;

import com.webnetware.adapter.CustomGridAdapter;
import com.webnetware.adapter.NavDrawerListAdapter;
import com.webnetware.services.NavDrawerItem;

@SuppressWarnings("deprecation")
public class MainActivity extends Activity implements ActionBar.OnNavigationListener{

private DrawerLayout mDrawerLayout;

RelativeLayout mDrawerPane;

private ListView mDrawerList;
private ActionBarDrawerToggle mDrawerToggle;

private ActionBar actionBar;

Button postAnAds,btnlocation;
GridView gridView;
TextView getlocation;

String mTitle="";

boolean visible=true;

private String[] navMenuTitles;
private TypedArray navMenuIcons;

private ArrayList<NavDrawerItem> navDrawerItems;
private NavDrawerListAdapter adapter;

@SuppressLint("NewApi")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
actionBar = getActionBar();
getActionBar().setHomeButtonEnabled(true);
getActionBar().setDisplayHomeAsUpEnabled(true);
setContentView(R.layout.activity_main);

mTitle = (String) getTitle();

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

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

// Populate the Navigtion Drawer with options
mDrawerPane = (RelativeLayout) findViewById(R.id.drawerPane);

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

mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,
R.drawable.ic_drawer, R.string.app_name, R.string.app_name) {
public void onDrawerClosed(View view) {

invalidateOptionsMenu();
}

public void onDrawerOpened(View drawerView) {
getActionBar().setTitle("");
invalidateOptionsMenu();
}
};
mDrawerLayout.setDrawerListener(mDrawerToggle);
mDrawerLayout.closeDrawer(mDrawerPane);

navMenuIcons = getResources().obtainTypedArray(R.array.nav_drawer_icons);

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)));

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

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

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

navMenuIcons.recycle();

this.adapter = new NavDrawerListAdapter(getApplicationContext(),navDrawerItems);
this.mDrawerList.setAdapter(adapter);

mDrawerLayout.setDrawerListener(mDrawerToggle);
mDrawerList.setOnItemClickListener(new OnItemClickListener() {

@Override
public void onItemClick(AdapterView<?> arg0, View view,
int position, long id) {
switch (position) {
case 0:
Intent intenthome =new Intent(MainActivity.this, MainActivity.class);
startActivity(intenthome);
break;
case 1:
Intent Quickquiry_Activity =new Intent(MainActivity.this,Quickquiry_Activity.class);
startActivity(Quickquiry_Activity);
break;
case 2:
Intent shareIntent = new Intent(Intent.ACTION_SEND);
shareIntent.setType("text/plain");
shareIntent.putExtra(Intent.EXTRA_TEXT, "Click On,http://tickmyad.com/download.aspx");
startActivity(Intent.createChooser(shareIntent, "Share"));
overridePendingTransition(R.anim.leftoright,R.anim.rihgttoleft);
break;
case 3:
Intent About_Activity =new Intent(MainActivity.this,About_Activity.class);
startActivity(About_Activity);
break;
case 4:
Intent TermAndCondition =new Intent(MainActivity.this,TermAndCondition.class);
startActivity(TermAndCondition);
break;
case 5:
Intent HelpActivity =new Intent(MainActivity.this,HelpActivity.class);
startActivity(HelpActivity);
break;
default:
break;
}
}
});

// CustomGridAdapter adapter = new CustomGridAdapter(MainActivity.this, web, imageId);
// gridView = (GridView)findViewById(R.id.gridView_business_item);

// gridView.setVerticalScrollBarEnabled(false);
// gridView.setAdapter(adapter);
// gridView.setOnItemClickListener(new OnItemClickListener() {

// @Override
//public void onItemClick(AdapterView<?> arg0, View view, int possition,
// long id) {

//Intent Buslist_activity=new Intent(MainActivity.this,BusinessList_Activity.class);
//Buslist_activity.putExtra("BusinessName",web[possition]);
//startActivity(Buslist_activity);
//overridePendingTransition(R.anim.leftoright,R.anim.rihgttoleft);

//}
//});

mDrawerLayout.closeDrawer(mDrawerPane);

}
@Override
public boolean onNavigationItemSelected(int itemPosition, long itemId) {

return false;
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);

return true;
}

@Override
protected void onPostCreate(Bundle savedInstanceState) {
super.onPostCreate(savedInstanceState);

mDrawerToggle.syncState();
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
if(item.getItemId()==R.id.action_search){
return true;
}
if(item.getItemId()==R.id.action_refresh){

return true;
}
if (mDrawerToggle.onOptionsItemSelected(item)) {
return true;
}
return super.onOptionsItemSelected(item);
}

@Override
public boolean onPrepareOptionsMenu(Menu menu) {

return super.onPrepareOptionsMenu(menu);
}
}

Step 7. Create slider Menu activity class ....

test_activity.xml.
Create a UI design as per require.
..................................................................................................................................................................

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

</LinearLayout>

Quickquiry_Activity .java
...................................................................................................................................................................

public class Quickquiry_Activity extends Activity {

@SuppressLint("NewApi")
@Override
protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);
setContentView(R.layout.test_activity);
}
}

About_Activity.java
...................................................................................................................................................................

public class About_Activity extends Activity {

@SuppressLint("NewApi")
@Override
protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);
setContentView(R.layout.test_activity);
}
}

TermAndCondition.java
...................................................................................................................................................................

public class TermAndCondition extends Activity {

@SuppressLint("NewApi")
@Override
protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);
setContentView(R.layout.test_activity);
}
}

HelpActivity.java
...................................................................................................................................................................

public class HelpActivity extends Activity {

@SuppressLint("NewApi")
@Override
protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);
setContentView(R.layout.test_activity);
}
}

try this code......

Android Custom Slider Menu with Navigation Drawer ?

Android Custom Slider Menu with Navigation Drawer ?

0 comments

Blog Archive

Labels

Popular Posts

About Me