Navigation drawer - Header View with ListView

Question

I'm currently creating and defining a navigation drawer. I want now a header view, like their on the google apps, above the item rows. I only found examples with RecyclerViews, and i dont want to use it. I have all finished with a ListView and all other stuff. Maybe someone can help me :) Thanks in advance

Answer 1

You can create NavigationView using android design support library without having pain to create listview or RecyclerView, its all created by android.

To add it to your project you need to add the android design support library to your project, add below line in build.gradle

compile 'com.android.support:design:22.2.0

Check out android design support features here

First create a header(header.xml)

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="190dp"
    android:background="@drawable/background_material"
    android:orientation="vertical"
    >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="nyname"
</RelativeLayout>

Next create a menu resource file, the items in the menu will be the items displayed in the drawer(drawer.xml)

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">

        <item
            android:id="@+id/first1"
            android:checked="false"
            android:icon="@drawable/icon1"
            android:title="@string/string1" />

        <item
            android:id="@+id/second2"
            android:checked="false"
            android:icon="@drawable/icon2"
            android:title="@string/string2" />
</menu>

Next create a DrawerLayout file, within the drawerlayout you can see I have included a Toolbar and a 'FrameLayout`. When the item in the drawerlayout is clicked you can replace fragment.

Also within it is the NavigationView with these parameters:

app:headerLayout="@layout/header" 
app:menu="@menu/drawer"
android:layout_gravity="start"

app:headerLayout is the header.xml that we created in step 1. app:menu is the menu resource item i.e drawer.xml

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:orientation="vertical"
        >
        <include
            android:id="@+id/toolbar" 
            layout="@layout/tool_bar"
        />
        <FrameLayout
            android:id="@+id/frame"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
        </FrameLayout>

    </LinearLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_height="match_parent"
        android:layout_width="wrap_content"
        android:layout_gravity="start"
        app:headerLayout="@layout/header"
        app:menu="@menu/drawer"
        />
</android.support.v4.widget.DrawerLayout>

Next in your MainActivity extend AppcompatActivity,

public class MainActivity extends AppCompatActivity {
............................................

Intialise NavigationView and call setNavigationItemSelectedListener to get click events,

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

    // Initializing Toolbar and setting it as the actionbar
    toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    //Initializing NavigationView
    navigationView = (NavigationView) findViewById(R.id.navigation_view);

    //Setting Navigation View Item Selected Listener to handle the item click of the navigation menu
    navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {

        // This method will trigger on item Click of navigation menu
        @Override
        public boolean onNavigationItemSelected(MenuItem menuItem) {

            //Checking if the item is in checked state or not, if not make it in checked state
            if(menuItem.isChecked()) menuItem.setChecked(false);
            else menuItem.setChecked(true);

            //Closing drawer on item click
            drawerLayout.closeDrawers();

            //Check to see which item was being clicked and perform appropriate action
            switch (menuItem.getItemId()){
                //Replacing the main content with ContentFragment 
                case R.id.first1:
                    SomeFragment fragment = new SomeFragment();
                    android.support.v4.app.FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
                    fragmentTransaction.replace(R.id.frame,fragment);
                    fragmentTransaction.commit();
                    return true;
                ...................

Step by step procedure to create navigationview go here

How it would look: