Navigation Drawer as the picture

Question

I am building an app with a navigation drawer and fragment, i followed this tutorial to made it. http://www.androidhive.info/2013/11/android-sliding-menu-using-navigation-drawer/

Now i have my navigation drawer like the result on the site, but i'd like to add a info button like this picture. i don't know how to do it cause i only can add other item on the list view,but with the same xml layout ecc.

enter image description here

this is the layout holding the list view

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


       </FrameLayout>
            <RelativeLayout
                android:layout_width="240dp"
                android:layout_height="match_parent"
                android:orientation="vertical" 
                android:layout_gravity="start">

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

        <ListView
            android:id="@+id/list_slidermenu"
            android:padding="0dp"
            android:layout_width="240dp"
            android:layout_height="match_parent"
            android:choiceMode="singleChoice"
            android:divider="@color/list_divider"
            android:dividerHeight="1dp"        
            android:listSelector="@drawable/list_selector"
            android:background="@color/list_background"/>


            <ImageView
                android:id="@+id/imageView1"
                android:layout_width="240dp"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_home"
                android:layout_below="@+id/list_slidermenu" />

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

main activity

package info.androidhive.actionbar;


import android.app.ActionBar;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import info.androidhive.slidingmenu.adapter.NavDrawerListAdapter;
import info.androidhive.slidingmenu.model.NavDrawerItem;
import java.util.ArrayList;
import android.app.Fragment;
import android.app.FragmentManager;
import android.content.res.Configuration;
import android.content.res.TypedArray;
import android.support.v4.app.ActionBarDrawerToggle;
import android.support.v4.widget.DrawerLayout;
import android.util.Log;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;


public class MainActivity extends Activity implements
        ActionBar.OnNavigationListener {

    // action bar
    private ActionBar actionBar;

    //______________________________________________________________

    //Navigation Drawer

    private DrawerLayout mDrawerLayout;
    private ListView mDrawerList;
    private ActionBarDrawerToggle mDrawerToggle;

    // nav drawer title
    private CharSequence mDrawerTitle;

    // used to store app title
    private CharSequence mTitle;

    // slide menu items
    private String[] navMenuTitles;
    private TypedArray navMenuIcons;

    private ArrayList<NavDrawerItem> navDrawerItems;
    private NavDrawerListAdapter adapter;


    //______________________________________________________________

    // ON CREATED

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

        actionBar = getActionBar();
        // Hide the action bar title
        actionBar.setDisplayShowTitleEnabled(false);

        // Changing the action bar icon
        // actionBar.setIcon(R.drawable.ico_actionbar);




        mTitle = mDrawerTitle = getTitle();

        // load slide menu items
        navMenuTitles = getResources().getStringArray(R.array.nav_drawer_items);

        // nav drawer icons from resources
        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>();

        // adding nav drawer items to array
        // Home
        navDrawerItems.add(new NavDrawerItem(navMenuTitles[0], navMenuIcons.getResourceId(0, -1)));
        // Find People
        navDrawerItems.add(new NavDrawerItem(navMenuTitles[1], navMenuIcons.getResourceId(1, -1)));
        // Photos
        navDrawerItems.add(new NavDrawerItem(navMenuTitles[2], navMenuIcons.getResourceId(2, -1)));
        // Communities, Will add a counter here
        navDrawerItems.add(new NavDrawerItem(navMenuTitles[3], navMenuIcons.getResourceId(3, -1)));
        // Pages
        navDrawerItems.add(new NavDrawerItem(navMenuTitles[4], navMenuIcons.getResourceId(4, -1)));
        // What's hot, We  will add a counter here
        navDrawerItems.add(new NavDrawerItem(navMenuTitles[5], navMenuIcons.getResourceId(5, -1)));


        // Recycle the typed array
        navMenuIcons.recycle();

        mDrawerList.setOnItemClickListener(new SlideMenuClickListener());

        // setting the nav drawer list adapter
        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);
                // calling onPrepareOptionsMenu() to show action bar icons
                invalidateOptionsMenu();
            }

            public void onDrawerOpened(View drawerView) {
                getActionBar().setTitle(mDrawerTitle);
                // calling onPrepareOptionsMenu() to hide action bar icons
                invalidateOptionsMenu();
            }
        };
        mDrawerLayout.setDrawerListener(mDrawerToggle);

        if (savedInstanceState == null) {
            // on first time display view for first nav item
            displayView(0);
        }
    }





    /**
     * Slide menu item click listener
     * */
    private class SlideMenuClickListener implements
            ListView.OnItemClickListener {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position,
                long id) {
            // display view for selected nav drawer item
            displayView(position);
        }
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // toggle nav drawer on selecting action bar app icon/title
        if (mDrawerToggle.onOptionsItemSelected(item)) {
            return true;
        }
        // Handle action bar actions click
        switch (item.getItemId()) {
        case R.id.action_settings:
            return true;
        case R.id.action_home:
            // location found
            Home();
            return true;
        default:
            return super.onOptionsItemSelected(item);
        }
    }

    /* *
     * Called when invalidateOptionsMenu() is triggered
     */
    @Override
    public boolean onPrepareOptionsMenu(Menu menu) {
        // if nav drawer is opened, hide the action items
        boolean drawerOpen = mDrawerLayout.isDrawerOpen(mDrawerList);
        //menu.findItem(R.id.action_settings).setVisible(!drawerOpen);
        return super.onPrepareOptionsMenu(menu);
    }

    /**
     * Diplaying fragment view for selected nav drawer list item
     * */
    private void displayView(int position) {
        // update the main content by replacing fragments
        Fragment fragment = null;
        switch (position) {
        case 0:
            fragment = new HomeFragment();
            break;
        case 1:
            fragment = new Page1();
            break;
        case 2:
            fragment = new Page2();
            break;
        case 3:
            fragment = new Page3();
            break;
        case 4:
            fragment = new Page4();
            break;
        case 5:
            fragment = new Page5();
            break;

        default:
            break;
        }

        if (fragment != null) {
            FragmentManager fragmentManager = getFragmentManager();
            fragmentManager.beginTransaction()
                    .replace(R.id.frame_container, fragment).commit();

            // update selected item and title, then close the drawer
            mDrawerList.setItemChecked(position, true);
            mDrawerList.setSelection(position);
            setTitle(navMenuTitles[position]);
            mDrawerLayout.closeDrawer(mDrawerList);
        } else {
            // error in creating fragment
            Log.e("MainActivity", "Error in creating fragment");
        }
    }

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




    @Override
    public boolean onCreateOptionsMenu(Menu menu) {

        MenuInflater inflater = getMenuInflater();
        inflater.inflate(R.menu.activity_main_actions, menu);

        return super.onCreateOptionsMenu(menu);
    }




    /**
     * Launching new activity
     * */
    private void Home() {
        Intent i = new Intent(MainActivity.this, MainActivity.class);
        startActivity(i);
    }

    /*
     * Actionbar navigation item select listener
     */
    @Override
    public boolean onNavigationItemSelected(int itemPosition, long itemId) {
        // Action to be taken after selecting a spinner item
        return false;
    }



}

enter image description here

you can add a textview at the bottom of the layout holding listview — Pramod Yadav, Jan 15 '15 at 10:09

score 1 · Answer 1 · answered Jan 15 '15 at 10:25

1

Wrap your Listview with a RelativeLayout and add to the RelativeLayout a ImageButton with the info-icon as source image. Align the button to the bottom of the parent RelativeLayout, add a OnClickListener to it and do whatever you want to do :)

answered Jan 15 '15 at 10:25

Mann

661
5
9

relative layout cannot be cast to android.support v4.widget.DrawerLayout,i am updating my xml file in the question – Alessandro Bovo Jan 16 '15 at 08:06
You wrap everything with the relativelayout right? But you should only wrap the left navigation part – Mann Jan 16 '15 at 08:10
1

Ok then show me please the activity code because the layout is right but you do something wrong in the code section – Mann Jan 16 '15 at 08:12
the problem appears only if i add the relativelayout and the imageview otherwise it works – Alessandro Bovo Jan 16 '15 at 08:31
I think your problem is that the drawr dont know his sliding menu layout, which is now the relativelayout because it wraps everything. Where appears the error? – Mann Jan 16 '15 at 08:37
i added a picture with the log cat – Alessandro Bovo Jan 16 '15 at 08:44
1

First find your relativelayout and replace this line mDrawerLayout.closeDrawer(mDrawerList); with the relativelayout instead of the mDrwaerList – Mann Jan 16 '15 at 08:47
Furthermore do the same for this line boolean drawerOpen = mDrawerLayout.isDrawerOpen(mDrawerList); and everywhere else where the drawer uses the listview – Mann Jan 16 '15 at 08:47
here as well? mDrawerList = (ListView) findViewById(R.id.list_slidermenu); – Alessandro Bovo Jan 16 '15 at 08:50
No, instead create another line with finding your relativelayout. You need this line to make your listview active – Mann Jan 16 '15 at 08:51
it doesn crash now, but the image view doesnt appear, i think its just a little error somewhere – Alessandro Bovo Jan 16 '15 at 09:09
but cannot find out why – Alessandro Bovo Jan 16 '15 at 09:10
have i to replace this line as well? mDrawerList.setAdapter(adapter); – Alessandro Bovo Jan 16 '15 at 09:11
Ok last thing: change the relativelayout to a linearlayout with orientation vertical. Then give the imageview for testing a fix height and set the list height to 0 and his weight to 1. make the linearlayout match_parent – Mann Jan 16 '15 at 09:11
No no, this is the adapter which fills your list with the menu items. Don't touch this line :) – Mann Jan 16 '15 at 09:12
doesnt change anything. also in the graphical layout i can see the List view but not the imageview – Alessandro Bovo Jan 16 '15 at 09:19
This is sometimes the problem with imageviews and wrap_content. It calculates the stuff wrong and destroys the whole layout. Can U live with a fixed image height? Otherwise I would suggest you to write an own imageview which measures correctly but this is a little bit more todo. – Mann Jan 16 '15 at 09:22
what about if a use a thextView with no text and custom bg? – Alessandro Bovo Jan 16 '15 at 09:24
That can work. Give it a try. Another possibility could be to wrap width and height of the imageview and center it horizontally. Oh and please dont forget to mark my answer and vote because i think i helped you a lil bit ;) good luck – Mann Jan 16 '15 at 09:25
Oh and to make the button alive, give it a clicklistener in the activity – Mann Jan 16 '15 at 09:26
i was gonna do that don't worry, thanks for your help i really appreciate that – Alessandro Bovo Jan 16 '15 at 09:26
anyway it doesnt work if i set listView height as match parent. it works just with 1 – Alessandro Bovo Jan 16 '15 at 10:07
Please read my answer again. Set the listview height to 0dp and the WEIGHT to 1. that fordes the list to expand to fill the parent – Mann Jan 16 '15 at 10:10
Do you need something else? – Mann Jan 16 '15 at 11:36

score 0 · Answer 2 · edited May 23 '17 at 10:25

0

You can try with listview footer. In your listview add footer and then add button control to footer.
Hope for help. Listview footer Reference

edited May 23 '17 at 10:25

Community

1
1

answered Jan 15 '15 at 10:18

B M

1,863
1
25
40

Navigation Drawer as the picture

2 Answers2