Adding a big image to a Navigation Drawer (SlidingMenu libs) - How to?

Question

I'm using SlidingMenu libs (https://github.com/jfeinstein10/SlidingMenu) to get the Navigation Drawer of my app. It feels and looks amazing but I have a issue: I want to use a big picture with a textview on top of is to display the user photo and name (check the image).

How do I achieve this look? The XML menu file won't let me add a ImageView or TextView, just items and inside of those there are very limited options of customization.

Check the image attached for a better look of what I have in mind.

Thanks in advance.

Answer 1

First of all this is not the SlidingMenu you are referring to. The image is showing the official DrawerLayout.

As far as your actual question goes:

The menu only consists of a ListView, so you just have to customize your ListView to display an image for the first row. You could either create a custom adapter for that or set the image via
addHeaderView (View v, Object data, boolean isSelectable).

Answer 2

Use the addHeaderView() method provided by ListView.
Note: this will cause the ArrayAdapter to interpret the image as the first item in your list. To deal with this, use the option in addHeaderView to disable clicking, and move all the elements in your array up by 1 (essentially creating a dummy value at the 0th element).

When your navigation drawer is first called, you may need to add a snippet like the following:

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