I want to scroll only the menu items of the navigation view but it also scroll the header with it. Please any body tell me how to achieve this... Here is my code:
activity_main.xml
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
.......
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/header"
app:menu="#menu/drawer" />
</android.support.v4.widget.DrawerLayout>
header.xml
<?xml version="1.0" encoding="utf-8"?>
<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"
>
<de.hdodenhof.circleimageview.CircleImageView xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/profile_image"
android:layout_width="76dp"
android:layout_height="76dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:layout_marginLeft="24dp"
android:layout_marginStart="24dp"
android:src="#mipmap/ic_launcher"
app:border_color="#FF000000" /
</RelativeLayout>
drawer_menu_items.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="#+id/inbox"
android:checked="false"
android:icon="#drawable/ic_inbox_black"
android:title="#string/inbox_string" />
<item
android:id="#+id/starred"
android:checked="false"
android:icon="#drawable/ic_star_black"
android:title="#string/starred_string" />
<item
android:id="#+id/sent_mail"
android:checked="false"
android:icon="#drawable/ic_send_black"
android:title="#string/sent_mail_string" />
<item
android:id="#+id/drafts"
android:checked="false"
android:icon="#drawable/ic_drafts_black"
android:title="#string/draft_string" />
<item
android:id="#+id/allmail"
android:checked="false"
android:icon="#drawable/ic_email_black"
android:title="#string/all_mail_string" />
<item
android:id="#+id/trash"
android:checked="false"
android:icon="#drawable/ic_delete_black"
android:title="#string/trash_string" />
<item
android:id="#+id/spam"
android:checked="false"
android:icon="#drawable/ic_error_black"
android:title="#string/spam_string" />
<item
android:id="#+id/abc"
android:checked="false"
android:icon="#android:drawable/ic_menu_camera"
android:title="Camera" />
<item
android:id="#+id/abcd"
android:checked="false"
android:icon="#android:drawable/ic_menu_call"
android:title="Call" />
<item
android:id="#+id/abcde"
android:checked="false"
android:icon="#android:drawable/ic_menu_gallery"
android:title="Gallery" />
<item
android:checked="false"
android:icon="#android:drawable/ic_menu_gallery"
android:title="Gallery" />
<item
android:checked="false"
android:icon="#android:drawable/ic_menu_compass"
android:title="Compass" />
<item
android:checked="false"
android:icon="#android:drawable/ic_menu_myplaces"
android:title="My Places" />
</group>
</menu>
How can I only scroll the menu item not the header... I've attached some pictures too...
I know its Too old Question but its too easy!
<android.support.design.widget.NavigationView
android:id="#+id/navigationview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/header_drawer"
app:menu="#menu/item_drawer">
</android.support.design.widget.NavigationView>
Add the following code to the NavigationView (<include layout="#layout/header_drawer"/>)
<android.support.design.widget.NavigationView
android:id="#+id/navigationview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/header_drawer"
app:menu="#menu/item_drawer">
<include layout="#layout/header_drawer"/>
</android.support.design.widget.NavigationView>
You should be able to place your header outside of the NavigationView, like so:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
<!-- nav drawer -->
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
>
<!-- header -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="190dp"
android:background="#drawable/background_material"
android:orientation="vertical"
>
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/profile_image"
android:layout_width="76dp"
android:layout_height="76dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:layout_marginLeft="24dp"
android:layout_marginStart="24dp"
android:src="#mipmap/ic_launcher"
app:border_color="#FF000000" />
</RelativeLayout>
<!-- menu -->
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="0px"
android:layout_weight="1"
android:layout_gravity="start"
app:menu="#menu/drawer" />
</FrameLayout>
</android.support.v4.widget.DrawerLayout>
Note: I've added a FrameLayout to encapsulate everything in a single view for the DrawerLayout, adjusted the NavigationView's height to automatically use the available space below your header, and have removed the headerLayout attribute.
I couldn't get Lornes answer to work, but I had some success by using a custom NavigationView. It's very hacky but achieves the desired effect.
The methods added to the custom NavigationView allow you to add a header on top of the NavigationView then size the menu so it fits beneath the header.
Comments for improvements are welcome
The overrided NavigationView
public class CustomNavigationView extends NavigationView {
public CustomNavigationView(Context context) {
super(context);
}
public CustomNavigationView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public CustomNavigationView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
// Consumes touch in the NavigationView so it doesn't propagate to views below
public boolean onTouchEvent (MotionEvent me) {
return true;
}
// Inflates header as a child of NavigationView
public void createHeader(int res) {
LayoutInflater inflater = LayoutInflater.from(getContext());
View view = inflater.inflate(res, this, false);
// Consumes touch in the header so it doesn't propagate to menu items below
view.setOnTouchListener(new OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event){
return true;
}
});
addView(view);
}
// Positions and sizes the menu view
public void sizeMenu(View view) {
// Height of header
int header_height = (int) getResources().getDimension(R.dimen.nav_header_height);
// Gets required display metrics
DisplayMetrics displayMetrics = getResources().getDisplayMetrics();
float screen_height = displayMetrics.heightPixels;
// Height of menu
int menu_height = (int) (screen_height - header_height);
// Layout params for menu
LayoutParams params = new LayoutParams(
LayoutParams.MATCH_PARENT,
LayoutParams.WRAP_CONTENT);
params.gravity = Gravity.BOTTOM;
params.height = menu_height;
view.setLayoutParams(params);
}
}
And this in the onCreate of main activity
// Inflates the nav header
CustomNavigationView navigationView = (CustomNavigationView) findViewById(R.id.your_nav_view);
navigationView.createHeader(R.layout.your_nav_header);
// sizes nav drawer menu so it appears under header
ViewGroup parent = (ViewGroup) navigationView;
View view = parent.getChildAt(0);
navigationView.sizeMenu(view);
I know its Too old Question but its too easy.
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/header"
app:menu="#menu/drawer" />
</android.support.v4.widget.DrawerLayout>
change it to below code (include header inside)
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="#menu/drawer" />
<include layout="#layout/header"/>
</android.support.v4.widget.DrawerLayout>
work like charm happy coding :)
I also faced thhis problem and resolved it . here is the solution
1) Create default navigation drawer in your project
2) remove header tag from NavigationView in activity_main.xml and add header inside NavigationView
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main" >>>>>> X
app:menu="#menu/activity_main_drawer" >
<include
layout="#layout/nav_header_main"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.NavigationView>
3) add required blank items in top of menu->activity_main_drawer.xml (depand on your header height
I solved this problem by doing
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
//where your main content goes.
<include
layout="#layout/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<include
layout="#layout/nav_drawer_layout"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true" />
Inside drawer layout, included add this layout,
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/nav_drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
//your header layout.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="#dimen/nav_header_height"
android:gravity="bottom"
android:orientation="vertical">
<include layout="#layout/layout_drawer_header"></include>
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/drawerRecyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:layout_weight="1"
android:background="#ffffff" />
//your footer layout
<include layout="#layout/nav_footer_item" />
Then just populate the recyclerview.
Related
I am trying to design the layout that drags navigation drawer layout from right to left by clicking on ImageView which is menu icon.
Functionality is working without any issue. But, from UI perspective, navigation drawer layout is being visible below the MaterialCardView and wrapping content as the card size. How can i bring navigation drawer on top of card and full screen.
Below is my layout file:
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
<com.google.android.material.card.MaterialCardView
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="200dp"
app:cardBackgroundColor="#1835d9"
style="#style/CustomCardCorners"
android:layout_alignParentEnd="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true">
<ImageView
android:id="#+id/navigation_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/menu"
android:layout_gravity="top|end"
android:contentDescription="#string/app_name"/>
</com.google.android.material.card.MaterialCardView>
<androidx.drawerlayout.widget.DrawerLayout
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="right"
android:layout_gravity="right"
android:layout_alignParentEnd="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_alignParentBottom="true">
<com.google.android.material.navigation.NavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="end"
app:menu="#menu/my_navigation_items"/>
</androidx.drawerlayout.widget.DrawerLayout>
</RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Below is my themes.xml:
<!-- Customize your theme here. -->
<style name="CustomCardCorners" parent="#style/Widget.MaterialComponents.CardView">
<item name="shapeAppearanceOverlay">#style/ShapeAppearance_custom_corners</item>
</style>
<style name="ShapeAppearance_custom_corners" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSizeBottomLeft">40dp</item>
<item name="cornerSizeBottomRight">40dp</item>
</style>
Below is my my_navigation_items.xml:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:title="Test"/>
<item android:title="Second"/>
<item android:title="Third"/>
</menu>
Below is my MainActivity.java file:
public class MainActivity extends AppCompatActivity implements View.OnClickListener,
NavigationView.OnNavigationItemSelectedListener {
ImageView imageView;
DrawerLayout drawerLayout;
NavigationView navigationView;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);//will hide the title
this.getSupportActionBar().hide();
this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);
setContentView(R.layout.activity_main);
imageView = findViewById(R.id.navigation_icon);
imageView.setOnClickListener(MainActivity.this);
setUp();
}
private void setUp() {
drawerLayout = findViewById(R.id.drawer_layout);
navigationView = findViewById(R.id.navigation);
navigationView.setNavigationItemSelectedListener(MainActivity.this);
}
#Override
public void onClick(View v) {
switch (v.getId())
{
case R.id.navigation_icon:
drawerLayout.openDrawer(Gravity.RIGHT);
}
}
#Override
public boolean onNavigationItemSelected(#NonNull MenuItem item) {
Toast.makeText(MainActivity.this, ""+ item.getItemId(), Toast.LENGTH_SHORT).show();
drawerLayout.closeDrawers();
return true;
}
}
The chronology of the views is causing issues. As mentioned in the official docs, the correct chronology is
<DrawerLayout>
<RootView> <!--root view of main content-->
<!--other child views-->
</RootView>
<NavigationView/> <!--view for navigation menu-->
</DrawerLayout>
so try the following layout instead
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:layout_gravity="right"
android:fitsSystemWindows="true"
tools:openDrawer="right">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.card.MaterialCardView
android:id="#+id/toolbar"
style="#style/CustomCardCorners"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
app:cardBackgroundColor="#1835d9">
<ImageView
android:id="#+id/navigation_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|end"
android:contentDescription="#string/app_name"
android:onClick="onClick"
android:src="#drawable/ic_launcher_background" />
</com.google.android.material.card.MaterialCardView>
</RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
<com.google.android.material.navigation.NavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="right"
app:menu="#menu/my_navigation_items" />
</androidx.drawerlayout.widget.DrawerLayout>
If you're sure that the drawer layout is under the MaterialCardView then this is for sure an "elevation" issue.
Based on Material.io elevation docs, the nav drawer layout has by default 16dp, whereas the MaterialCardView has from 1dp-8dp.
My guess is that you aren't using the Material's DrawerLayout component, or has they call it, NavigationView.
You can see how to implement it, in this link
I have a menu drawer with several items, and for some reason the items don't take the whole width of the drawer, even though layout_width is match parent.
Here's the drawer_menu.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/drawer_user_current"
android:title=""
app:actionLayout="#layout/nav_drawer_current_user_profile" />
</menu>
Here is nav_drawer_current_user_profile.xml
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal">
<ImageView
android:id="#+id/img_chat_room_icon"
android:layout_width="#dimen/size_large"
android:layout_height="#dimen/size_large"
android:src="#drawable/ic_person_avatar_blue_24dp" />
<TextView
android:id="#+id/txt_user_profile_nav_drawer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:text="Current user"
android:textColor="#color/light_blue"
android:textSize="#dimen/nav_drawer_font_size" />
</LinearLayout>
The drawer itself is in this file base_layout.xml
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:openDrawer="start">
<!-- The main content view -->
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:menu="#menu/drawer_menu_chat"/>
And this is how the menu is rendered
How can I make the item to be in the right, and to take all the width of the drawer?
try
android:title="#null"
in menu item
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
android:layout_marginEnd="-65dp"
android:layout_marginRight="-65dp"
app:menu="#menu/drawer_menu_chat"/>
I have implemented side drawer layout with a list view. If i click on list view item I am not getting any response no log or no toast. I don't know where I did wrong. I am stuck with this issue from two days. Can some one help me out solve this issue.Thanks in advance.
Below is the XML code:
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/newmapsactivity"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="gmaps.hornok.driverhornok.view.activity.NewMapsActivity">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/opensidenav_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="15dp"
android:background="#drawable/ripple_backnewbutton"
android:clickable="true"
android:padding="10dp">
<ImageView
android:id="#+id/arrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:background="#drawable/sidemore" />
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
<RelativeLayout
android:id="#+id/drawer"
android:layout_width="304dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#ffffff">
<RelativeLayout
android:id="#+id/profilelayout"
android:layout_width="match_parent"
android:layout_height="148dp"
android:background="#5ec0cb">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/driver_image"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_centerVertical="true"
android:layout_marginLeft="16dp"
android:background="#drawable/oval"
android:elevation="1dp" />
<com.daniribalbert.customfontlib.views.CustomFontTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="17dp"
android:layout_toRightOf="#+id/driver_image"
android:text="Driver name"
android:textColor="#ffffff"
android:textSize="14dp"
app:font="gotham_medium_webfont" />
</RelativeLayout>
<ListView
android:id="#+id/listview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/profilelayout"
android:choiceMode="singleChoice"
android:clickable="true"
android:divider="#null" />
</RelativeLayout>
</android.support.v4.widget.DrawerLayout>
Java Code :
SideDrawerlistAdpater drawerlistAdpater = new SideDrawerlistAdpater(SideNavigationDrawer.this, titles, icons);
listview.setAdapter(drawerlistAdpater);
listview.setOnItemClickListener(new AdapterView.OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
Log.d(TAG,"get poisition" +position);
selectItem(position);
}
});
public void selectItem(int position) {
switch (position) {
case 0:
Intent intent = new Intent(NewMapsActivity.this, DriverEarningsTabbedActivity.class);
startActivity(intent);
overridePendingTransition(R.anim.activity_in, R.anim.activity_out);
break;
case 1:
startActivity(new Intent(NewMapsActivity.this, Subscriptions.class));
overridePendingTransition(R.anim.activity_in, R.anim.activity_out);
break;
}
}
here is the solution ..
in your XML code ..
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="false"
android:background="#f1ecec"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>
inside your #menu/activity_main_drawer .. apply this
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:showIn="navigation_view">
<item
android:id="#+id/nav_home"
android:title="Home" />
<item
android:id="#+id/nav_aboutus"
android:title="About US" />
<item
android:id="#+id/nav_portfolio"
android:title="Portfolio" />
<item
android:id="#+id/nav_career"
android:title="Career" />
<item
android:id="#+id/nav_services"
android:title="Services" />
<item
android:id="#+id/nav_contact"
android:title="Contact" />
</menu>
so it will solved your problem . if you need detail explanation . than you can visit .
Navigation Drawer
I need to create a navigation drawer such that, the first menu contains 5 pre-defined items (these will never change). Below that first menu, I want to have a second menu that contains a variable amount of items with a custom layout.
Explained in an image:
Here is what my main activity looks like right now:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay" />
<android.support.design.widget.TabLayout
android:id="#+id/tablayout"
android:layout_width="match_parent"
android:layout_height="48dp" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<include
layout="#layout/nav_header_drawer" />
<ListView
android:id="#+id/drawer_listview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="left"
android:choiceMode="singleChoice" />
</LinearLayout>
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
Which works, except now I can't use the app:menu="#menu/navigation_drawer_items" property for NavigationView because the ListView items overlap the menu items.
Here is the menu XML:
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:title="Communicate">
<menu>
<item
android:id="#+id/nav_share"
android:icon="#drawable/ic_menu_share"
android:title="Share" />
<item
android:id="#+id/nav_send"
android:icon="#drawable/ic_menu_send"
android:title="Send" />
</menu>
</item>
</menu>
Is there a way that I can load the menu XML AND show a custom layout below the menu? Is there a different want to do this?
NavigationView does not seem to have support for custom footers. In my project I have made this little monster based on some other SO answers.
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimary"
android:fitsSystemWindows="true"
tools:context=".ui.MainActivity">
...screen content...
<android.support.design.widget.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom"
android:orientation="vertical">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1">
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
app:elevation="0dp"
app:headerLayout="#layout/drawer_header"
app:menu="#menu/drawer">
</android.support.design.widget.NavigationView>
<View
android:layout_width="match_parent"
android:layout_height="21dp"
android:layout_alignParentBottom="true"
android:background="#drawable/bg_navbarscroll"/>
</RelativeLayout>
<include
android:id="#+id/premium_footer"
layout="#layout/drawer_footer"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
What we have here are two nested NavigationViews. This may be a bit overkill but I wasn't able to make it work otherwise. This is based on the work in this question so all the credit goes there: How to add footer to NavigationView - Android support design library?
The real NavView is the inner one, it has the header, it has the menu, but it doesn't fit system windows. The first one fits system windows and handles the drawer movement. The problem you are facing is because the ListView does not know the size the content in NavView holds. So you need to make sure nothing is in the same layout so there is no overlapping. Your listView has to be in parent of the NavView parent. And because this will likely destroy the mechanism for controls of the DrawerLayout you need the first, outer NavigationView.
Alternatively if you can live without inflating menus in drawer just make a custom "old-fashioned" drawer like the ones before the NavigationViews appeared.
In my case I wanted to add some info text at the bottom of the drawer. After fiddling a bit I managed to obtain the desired result by adding a ConstraintLayout in the NavigationView:
<androidx.drawerlayout.widget.DrawerLayout
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<include
android:id="#+id/app_bar"
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<com.google.android.material.navigation.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/bottom_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.navigation.NavigationView>
For now everything seems to be working, but there could be some hidden pitfalls.
A fixed (non-scrolling) footer in your navigation menu, can be achieved by wraping the NavigationView around another layout, like you've posted. you can arrange it, using LinearLayout for the footer items as shown below:
<android.support.design.widget.NavigationView
android:id="#+id/drawer"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/drawer_header"
app:menu="#menu/drawer">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:clickable="true"
android:orientation="vertical">
<TextView
android:id="#+id/footer_item_1"
android:layout_width="match_parent"
android:layout_height="48dp"
android:gravity="center"
android:text="Footer Item 1" />
<TextView
android:id="#+id/footer_item_2"
android:layout_width="match_parent"
android:layout_height="48dp"
android:gravity="center"
android:text="Footer Item 2" />
</LinearLayout>
</android.support.design.widget.NavigationView>
You can use whatever you want in place of the TextViews. Structuring your bottom layout well is necessary to avoid overlapping of views.
Menu XML
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:title="Communicate">
<menu>
<item
android:id="#+id/nav_share"
android:icon="#drawable/ic_menu_share"
android:title="Share" />
<item
android:id="#+id/nav_send"
android:icon="#drawable/ic_menu_send"
android:title="Send" />
</menu>
</item>
You can finally add onclick listeners to your layout
View navFooter1 = findViewById(R.id.footer_item_1);
navFooter1.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
// Do footer action
}
});
View navFooter2 = findViewById(R.id.footer_item_2);
navFooter2.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
// Do footer action
}
});
This will help you must set your custom adapter in recyclerView.
<androidx.drawerlayout.widget.DrawerLayout
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".DrawerActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/purple_200" />
</LinearLayout>
<com.google.android.material.navigation.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="end">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="#layout/header_layout" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</com.google.android.material.navigation.NavigationView>
</androidx.drawerlayout.widget.DrawerLayout>
I'm trying to add a switch as menuitem in NavigationView like this
I used the the actionViewClass attribute but it only shows the title.
<item
android:id="#+id/navi_item_create_notifications_sound"
android:title="Notifications Sounds"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:actionViewClass="android.support.v7.widget.SwitchCompat"
app:showAsAction="always" />
The new support library 23.1
allows using a custom view for the items in Navigation View using app:actionLayout or using MenuItemCompat.setActionView().
Here's how I managed to display a SwitchCompat
menu_nav.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group
android:id="#+id/first"
android:checkableBehavior="single">
<item
android:id="#+id/navi_item_1"
android:icon="#drawable/ic_feed_grey_500_24dp"
android:title="Feed" />
<item
android:id="#+id/navi_item_2"
android:icon="#drawable/ic_explore_grey_500_24dp"
android:title="Explore" />
<item
android:id="#+id/navi_item_4"
android:icon="#drawable/ic_settings_grey_500_24dp"
android:title="Settings" />
</group>
<group
android:id="#+id/second"
android:checkableBehavior="single">
<item xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/navi_item_create_notifications_sound"
android:title="Notifications Sounds"
app:actionLayout="#layout/menu_swich"
app:showAsAction="always" />
</group>
</menu>
menu_switch.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.SwitchCompat xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="right|center_vertical"
app:buttonTint="#color/colorPrimary"
app:switchPadding="#dimen/spacing_small" />
To get the View and assign events to it, you should do :
SwitchCompat item = (SwitchCompat) navigationView.getMenu().getItem(3).getActionView();
item.setOnCheckedChangeListener( new CompoundButton.OnCheckedChangeListener(){
#Override public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
Logr.v(LOG_TAG, "onCheckedChanged" + isChecked);
}
});
Simple solution as you are using NavigationView
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:menu="#menu/activity_main_drawer">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="horizontal">
<android.support.v7.widget.SwitchCompat
android:id="#+id/mSwitch"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="Night Mode" />
</LinearLayout>
</android.support.design.widget.NavigationView>
Try to wrap your Switch into a separate Layout file:
Menu:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/menu_switch"
android:title="Switch Title"
app:actionLayout="#layout/layout_my_switch"
app:showAsAction="always" />
</menu>
Switch: "layout_my_switch.xml"
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.SwitchCompat
android:id="#+id/my_switch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" />
</RelativeLayout>
[Update 03-03-2017]
The answer is outdated. Don't refer this. Refer the accepted answer.
Unfortunately currently NavigationView is not much allow customization ...
You have to take the Customized ListView inside NavigationView.
<android.support.design.widget.NavigationView
android:id="#+id/navView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start">
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.design.widget.NavigationView>
And create cell for this listview by taking TextView to left side and SwitchCompact to right side.
I hope it help you ...
I used Below layout in Drawer Layout where Navigation View code has been used.
<android.support.design.widget.NavigationView
android:id="#+id/navi_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start|top"
android:background="#color/navigation_view_bg_color"
app:theme="#style/NavDrawerTextStyle">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="#layout/drawer_header" />
<include layout="#layout/navigation_drawer_menu" />
</LinearLayout>
</android.support.design.widget.NavigationView>
Are you looking for something like this,
Then there is a custom component available in Synfusion, called Navigation drawer.
You can find the respective documentation here.
Man.! they offers Community license also.