Navigation Drawer with Backword Compatibility Android

Navigation Drawer with backword compatibility android

A new version of the v4 support library (release 13) which contains support for the Navigation Drawer pattern.

Check out the below tutorial Links for Navigation Drawer which provides the compatibility library of Navigation Drawer with the implementation in it.

1) Sherlock Navigation Drawer

2) NavDrawerExampleAppCompat-v7

3) Navigation Drawer in Android

4) Create Navigation Drawer

Hope this will help you.

Adding backward compatibility to navigation drawer

refer this link best suit for backward compatibility of Navigation Drawer

https://github.com/BradleyRL/NavDrawerExampleAppCompat-v7

how to change the navigation drawer theme with backward compatibility

change background color of your list view or change theme of your list-view raw theme

how to implement backward compatible (API 8 and higher) Navigation Drawer?

You need to use getSupportActionBar() if you use the compatibility package.

Problems while displaying navigation drawer on Gingerbread version of android

because those are values you can replace them by your own custom attributes, to find more about them look at

https://github.com/android/platform_frameworks_base/blob/master/core/res/res/values/themes.xml#L123

which you can find corresponding values. you can create your own attribute files to run on any device without

any version restriction by using the values from above link and creating XML attribute file. in order to find

how to create attribute file look at google doc.

How to combine Navigation Drawer and Spinner [like in Google+ App]

Add the spinner to the NavigationBar.

The basic procedure to enable drop-down navigation is:

1.Create a SpinnerAdapter that provides the list of selectable items for the drop-down and the layout to use when drawing each item in the list.

2.Implement ActionBar.OnNavigationListener to define the behavior that occurs when the user selects an item from the list.

3.During your activity's onCreate() method, enable the action bar's drop-down list by calling setNavigationMode(NAVIGATION_MODE_LIST).

4.Set the callback for the drop-down list with setListNavigationCallbacks()

http://developer.android.com/guide/topics/ui/actionbar.html

Check the topic Adding Drop-down Navigation

Example:

    public class MainActivity extends Activity implements OnNavigationListener

Then

    getActionBar().setDisplayShowTitleEnabled(false);
getActionBar().setNavigationMode(ActionBar.NAVIGATION_MODE_LIST);
SpinnerAdapter mSpinnerAdapter = ArrayAdapter.createFromResource(this, R.array.planets_array,
android.R.layout.simple_spinner_dropdown_item);

getActionBar().setListNavigationCallbacks(mSpinnerAdapter , this);

Then

    @Override
public boolean onNavigationItemSelected(int arg0, long arg1) {
Toast.makeText(getApplicationContext()," text",1000).show();
return true;
}

Snap

Sample Image

Example:

public class MainActivity extends Activity implements ActionBar.OnNavigationListener {
private DrawerLayout mDrawerLayout;
private ListView mDrawerList;
public ActionBarDrawerToggle mDrawerToggle;

private CharSequence mDrawerTitle;
private CharSequence mTitle;
private String[] mPlanetTitles;
ActionBar actionBar;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

actionBar = getActionBar();

SpinnerAdapter mSpinnerAdapter = ArrayAdapter.createFromResource(this, R.array.planets_array,
android.R.layout.simple_spinner_dropdown_item);
actionBar.setDisplayShowTitleEnabled(false);
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_LIST);
getActionBar().setListNavigationCallbacks(mSpinnerAdapter,this);

//mTitle = mDrawerTitle = getTitle();
mPlanetTitles = getResources().getStringArray(R.array.planets_array);
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
mDrawerList = (ListView) findViewById(R.id.left_drawer);

// mDrawerList.setBackgroundColor(Color.WHITE);
// set a custom shadow that overlays the main content when the drawer opens
mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow, GravityCompat.START);
// set up the drawer's list view with items and click listener

mDrawerList.setAdapter(new ArrayAdapter<String>(this,
R.layout.drawer_list_item, mPlanetTitles));

mDrawerList.setOnItemClickListener(new DrawerItemClickListener());

// enable ActionBar app icon to behave as action to toggle nav drawer
getActionBar().setDisplayHomeAsUpEnabled(true);
getActionBar().setHomeButtonEnabled(true);

// ActionBarDrawerToggle ties together the the proper interactions
// between the sliding drawer and the action bar app icon
mDrawerToggle = new ActionBarDrawerToggle(
this, /* host Activity */
mDrawerLayout, /* DrawerLayout object */
R.drawable.ic_drawer, /* nav drawer image to replace 'Up' caret */
R.string.drawer_open, /* "open drawer" description for accessibility */
R.string.drawer_close /* "close drawer" description for accessibility */
) {
public void onDrawerClosed(View view) {
getActionBar().setTitle(mTitle);
invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
}

public void onDrawerOpened(View drawerView) {
getActionBar().setTitle(mDrawerTitle);
invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
}
};
mDrawerLayout.setDrawerListener(mDrawerToggle);

if (savedInstanceState == null) {
selectItem(0);
}
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.main, menu);
return super.onCreateOptionsMenu(menu);
}

/* Called whenever we call invalidateOptionsMenu() */
@Override
public boolean onPrepareOptionsMenu(Menu menu) {
// If the nav drawer is open, hide action items related to the content view
boolean drawerOpen = mDrawerLayout.isDrawerOpen(mDrawerList);
menu.findItem(R.id.action_websearch).setVisible(!drawerOpen);

return super.onPrepareOptionsMenu(menu);
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// The action bar home/up action should open or close the drawer.
// ActionBarDrawerToggle will take care of this.
if (mDrawerToggle.onOptionsItemSelected(item)) {
return true;
}
// Handle action buttons
switch(item.getItemId()) {

case R.id.action_websearch:
// create intent to perform web search for this planet
Intent intent = new Intent(Intent.ACTION_WEB_SEARCH);
intent.putExtra(SearchManager.QUERY, getActionBar().getTitle());
// catch event that there's no activity to handle intent
if (intent.resolveActivity(getPackageManager()) != null) {
startActivity(intent);
} else {
Toast.makeText(this, R.string.app_not_available, Toast.LENGTH_LONG).show();
}
return true;
default:
return super.onOptionsItemSelected(item);
}
}

/* The click listner for ListView in the navigation drawer */
private class DrawerItemClickListener implements ListView.OnItemClickListener {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
selectItem(position);
}
}

private void selectItem(int position) {

ActionBar actionBar =getActionBar();
actionBar.setDisplayHomeAsUpEnabled(true);
Fragment fragment = new PlanetFragment();
Bundle args = new Bundle();
args.putInt(PlanetFragment.ARG_PLANET_NUMBER, position);
fragment.setArguments(args);

FragmentManager fragmentManager = getFragmentManager();
fragmentManager.beginTransaction().replace(R.id.content_frame, fragment).commit();

// update selected item and title, then close the drawer

mDrawerList.setItemChecked(position, true);
// setTitle(mPlanetTitles[position]);
mDrawerLayout.closeDrawer(mDrawerList);

}

@Override
public void setTitle(CharSequence title) {
mTitle = title;
//getActionBar().setTitle(mTitle);
}

/**
* When using the ActionBarDrawerToggle, you must call it during
* onPostCreate() and onConfigurationChanged()...
*/

@Override
protected void onPostCreate(Bundle savedInstanceState) {
super.onPostCreate(savedInstanceState);
// Sync the toggle state after onRestoreInstanceState has occurred.
mDrawerToggle.syncState();
}

@Override
public void onConfigurationChanged(Configuration newConfig) {
super.onConfigurationChanged(newConfig);
// Pass any configuration change to the drawer toggls
mDrawerToggle.onConfigurationChanged(newConfig);
}

/**
* Fragment that appears in the "content_frame", shows a planet
*/
public static class PlanetFragment extends Fragment {
public static final String ARG_PLANET_NUMBER = "planet_number";
private static WeakReference<MainActivity> mTarget;

@Override
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);

if(mTarget!=null)
{
MainActivity target = mTarget.get();
ActionBar actionBar = getActivity().getActionBar();
actionBar.setDisplayHomeAsUpEnabled(true);
//actionBar.setTitle("Fragment");
//target.mDrawerToggle.setDrawerIndicatorEnabled(false);
}
else
{
Log.i("............","Null");
}
}

@Override
public void onAttach(Activity activity) {
// TODO Auto-generated method stub
super.onAttach(activity);
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
mTarget = new WeakReference<MainActivity>( (MainActivity) getActivity());
View rootView = inflater.inflate(R.layout.fragment_planet, container, false);

int i = getArguments().getInt(ARG_PLANET_NUMBER);
String planet = getResources().getStringArray(R.array.planets_array)[i];

int imageId = getResources().getIdentifier(planet.toLowerCase(Locale.getDefault()),
"drawable", getActivity().getPackageName());
((ImageView) rootView.findViewById(R.id.image)).setImageResource(imageId);
// getActivity().setTitle(planet);
return rootView;
}
}

@Override
public boolean onNavigationItemSelected(int itemPosition, long itemId) {
// TODO Auto-generated method stub
Toast.makeText(getApplicationContext(), "text", Toast.LENGTH_LONG).show();
return true;
}
}

activity_main.xml

<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">

<!-- As the main content view, the view below consumes the entire
space available using match_parent in both dimensions. -->
<FrameLayout
android:id="@+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />

<!-- android:layout_gravity="start" tells DrawerLayout to treat
this as a sliding drawer on the left side for left-to-right
languages and on the right side for right-to-left languages.
The drawer is given a fixed width in dp and extends the full height of
the container. A solid background is used for contrast
with the content view. -->
<ListView
android:id="@+id/left_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:divider="@android:color/transparent"
android:dividerHeight="0dp"
/>

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

drawe_list_item.xml

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/text1"
android:background="@drawable/selector"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceListItemSmall"
android:gravity="center_vertical"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:textColor="#fff"

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

fragment_planet.xml

<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
android:gravity="center"
android:padding="32dp" />


Related Topics



Leave a reply



Submit