Navigation drawer - Header View with ListView
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:
Admin
Updated on June 08, 2022Comments
-
Admin almost 2 years
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