I am using Xamarin (C#) and in my app I have a navigation view with some menu items.
I want to align all of them to the center of the view.
How can I achieve this?
I have already tried with android:layout_gravity="center" and android:gravity="center" but they both didn't work.
enter image description here
main.axml
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/drawer_layout"
android:fitsSystemWindows="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" />
<LinearLayout xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_below="#+id/toolbar"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/main_content">
<EditText
android:inputType="textPersonName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/editText1" />
<Button
android:id="#+id/myButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Play" />
</LinearLayout>
</RelativeLayout>
<android.support.design.widget.NavigationView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:layout_marginEnd="-65dp"
android:layout_marginRight="-65dp"
android:fitsSystemWindows="true"
android:id="#+id/nav_view"
app:menu="#menu/navmenu"
app:headerLayout="#layout/headerdrawerlayout" />
</android.support.v4.widget.DrawerLayout>
navmenu.axml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<group android:checkableBehavior="single">
<item
android:id="#+id/nav_item_overview"
android:title="Play"/>
<item
android:id="#+id/nav_item_notifications"
android:title="Notifications"/>
<item
android:id="#+id/nav_item_leaderboard"
android:title="Leaderboard"/>
<item
android:id="#+id/nav_item_profile"
android:title="My Profile"/>
<item
android:id="#+id/nav_item_friends"
android:title="Friends"/>
<item
android:id="#+id/nav_item_createQuestion"
android:title="Create Question"/>
</group>
<group android:id="#+id/group_settings_id"
android:checkableBehavior="single">
<item
android:title="Settings" />
<item
android:title="Log Out" />
</group>
</menu>
Edit
I have added a ListView to my NavigationView, but I am still not able to center menu items.
Do you have any idea how it could be solved?
Main.axml
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="#style/MyTheme"
android:id="#+id/drawer_layout"
android:fitsSystemWindows="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" />
<LinearLayout xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_below="#+id/toolbar"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/main_content">
<EditText
android:inputType="textPersonName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/editText1" />
<Button
android:id="#+id/myButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Play" />
<Button
android:text="image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/button1" />
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageView1" />
</LinearLayout>
</RelativeLayout>
<android.support.design.widget.NavigationView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:layout_marginEnd="-65dp"
android:layout_marginRight="-65dp"
android:fitsSystemWindows="true"
android:id="#+id/nav_view">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:orientation="vertical">
<include
layout="#layout/headerdrawerlayout" />
<ListView
android:id="#+id/list_menu"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:choiceMode="singleChoice" />
</LinearLayout>
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
MainActivity.cs
protected override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);
SetContentView(Resource.Layout.Main);
drawerLayout = FindViewById<DrawerLayout>(Resource.Id.drawer_layout);
// Initialize toolbar
var toolbar = FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.toolbar);
SetSupportActionBar(toolbar);
SupportActionBar.SetTitle(Resource.String.app_name);
// Attach item selected handler to navigation view
var navigationView = FindViewById<NavigationView>(Resource.Id.nav_view);
var navListView = navigationView.FindViewById<ListView>(Resource.Id.list_menu);
List<string> listItems = new List<string> { "Play", "Notifications", "Leaderboard", "My Profile", "Friends", "Create Question" };
ArrayAdapter<string> adapter = new ArrayAdapter<string>(this, Android.Resource.Layout.SimpleListItem1, listItems);
navListView.Adapter = adapter;
//navigationView.NavigationItemSelected += NavigationView_NavigationItemSelected;
// Create ActionBarDrawerToggle button and add it to the toolbar
var drawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, Resource.String.app_name, Resource.String.app_name);
drawerLayout.AddDrawerListener(drawerToggle);
drawerToggle.SyncState();
// Add close button handler to navigation view
var navigationCloseButton = navigationView.FindViewById<ImageButton>(Resource.Id.closeButton);
navigationCloseButton.Click += delegate
{
drawerLayout.CloseDrawers();
};
}
Screenshot
Related
I'm updating an existing project from a different developer in our company and am trying to set the colour of the icons to match the text (as you can see from the screenshot below). I've succeeded for the current selected item but not for the items that aren't selected. I cannot figure out why either of these do/don't work at the moment.
My layout
<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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="#layout/appbar_basic"/>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<include layout="#layout/activity_home_content"/>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
<include layout="#layout/navigation_view"/>
</android.support.v4.widget.DrawerLayout>
My code
#Bind(R.id.drawer_layout)
DrawerLayout mDrawerLayout;
private void initDrawer() {
Menu m = mNavigationView.getMenu();
for (ModuleVO module : Modules.getActiveModules()) {
m.add(0, module.id, 1, module.textRef).setIcon(module.drawerIconRef);
}
}
I have already done some searching and tried a couple of things, including the answers listed here:
Changing text color of menu item in navigation drawer
How to style Menu Items in Navigation Drawer in Android?
Using app:itemIconTint doesn't work and neither does writing a selector. The only way I've been able to change the colours has been by changing these attributes in my themes.xml file.
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:textColorPrimary">#color/text</item>
<item name="android:textColorSecondary">#color/primary</item>
</style>
</resources>
I will be happy to provide more information/code if required to solve the issue!
I have also have that issue but I have found that solution may be it will work for you :-
<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_home"
app:itemBackground="#android:color/transparent"
app:itemIconTint="#drawable/drawer_item"
app:itemTextColor="#drawable/drawer_item"
app:menu="#menu/activity_home_drawer" />
and drawer_item.xml:-
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/colorPrimaryDark" android:state_checked="true" />
<item android:color="#000000" />
</selector>
nav_header_home.xml is:-
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="#dimen/nav_header_height"
android:background="#000"
android:gravity="bottom"
android:orientation="vertical"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:theme="#style/ThemeOverlay.AppCompat.Dark">
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="#dimen/nav_header_vertical_spacing"
app:srcCompat="#drawable/user"
tools:ignore="VectorDrawableCompat" />
<LinearLayout
android:id="#+id/llLogin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:orientation="horizontal">
<TextView
android:id="#+id/tvSignIn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:text="Sign In"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#fff"
android:textSize="16sp"
android:textStyle="bold" />
<View
android:layout_width="2dp"
android:layout_height="match_parent"
android:background="#fff" />
<TextView
android:id="#+id/tvJoin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:text="Join Free"
android:textColor="#fff"
android:textSize="16sp"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
I found the answer! When looking over my layout file again I found <include layout="#layout/navigation_view"/> and when I applied a selector to navigation_view it worked! Below is my working code.
activity_home.xml
<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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="#layout/appbar_basic"/>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<include layout="#layout/activity_home_content"/>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
<include layout="#layout/navigation_view"/>
</android.support.v4.widget.DrawerLayout>
navigation_view.xml
<merge xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:itemIconTint="#drawable/drawer_item"
app:itemTextColor="#drawable/drawer_item"
/>
</merge>
drawer_item.xml (Kudos to Abhinav Gupta for this part)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/primary" android:state_checked="true" />
<item android:color="#color/text" />
</selector>
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>
In iOS Amazon app, they implemented both back and menu button together. Is it possible to implement the same in Android?
You can create a custom toolbar design in XML as
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:minHeight="?attr/actionBarSize">
<ImageView
android:id="#+id/backButton"
android:background="#drawable/back_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageView
android:id="#+id/homeButton"
android:background="#drawable/menu_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</android.support.v7.widget.Toolbar>
Then set listeners to perform task such as openDrawer and goto previous screen.
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
ImageView homeButton = (ImageView) toolbar.findViewById(R.id.homeButton);
homeButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
drawerLayout.openDrawer(GravityCompat.START);
}
});
you can create a Toolbar with custom layout like this:
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/main_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize">
<ImageView
android:id="#+id/backButton"
android:background="#drawable/ic_back_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageView
android:id="#+id/hamburgerButton"
android:background="#drawable/ic_home_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageView
android:id="#+id/logo"
android:background="#drawable/logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</android.support.v7.widget.Toolbar>
If you want something special create it by your own :)
If you're using latest design library its possible to create your custom toolbar panel and add any item you want there.
I was achieving that behaviour this way:
main_activity.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
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">
<!-- this is top bar where you need to add both drawer toggle and back button-->
<include
layout="#layout/app_bar_navigation"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- Content of sliding menu-->
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="end"
android:background="#color/primary_blue_dark"
android:fitsSystemWindows="true">
<!-- Custom menu list. Feel free to customize it as listview-->
<ListView
android:id="#+id/lv_menu"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.design.widget.NavigationView>
layout/app_bar_navigation.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="#dimen/nav_header_size_pre5"
android:background="#color/primary_blue_dark"
android:padding="6dp">
<!-- This is where you need to place those items. I had title and imageview there. You may add anything-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_centerHorizontal="true"
android:gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/ic_logo"
android:adjustViewBounds="true"/>
<TextView
android:id="#+id/tv_app_logo"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="#string/app_name"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
android:textColor="#color/primary_yellow"
android:textSize="#dimen/middle_text"
android:gravity="center"/>
</LinearLayout>
<ImageView
android:id="#+id/iv_drawer_open"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/ic_drawer_toggle"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:tint="#color/primary_white"/>
</RelativeLayout>
<!-- This is main content-->
<include layout="#layout/content_navigation" />
Yes absolutely possible you just have to hide the default toolbar by doing following in your Styles.xml :
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
Then you have to create youe own xml file of toolbar let's name it custom_toolbar.xml
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp">
<ImageView
android:id="#+id/back_button"
android:background="#drawable/back_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageView
android:id="#+id/menu_button"
android:background="#drawable/menu_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginRight="10dp"
android:textColor="#android:color/black"
android:textSize="#dimen/actionbar_textsize"
android:textStyle="bold" />
</android.support.v7.widget.Toolbar>
Then you have to add that toolbar in your activity add toolbar like below
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="betasoft.com.blankblank.ui.ui.activity.SignUp">
<include
android:id="#+id/toolbar"
layout="#layout/custom_toolbar" />
<FrameLayout
android:id="#+id/main_data"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/toolbar />
</RelativeLayout>
then you can access the toolbar in your activity like :
Toolbar mToolBar;
ImageView mToolBarBack,mToolBarMenu;
TextView mToolBarTitle;
//Inside onCreate
mToolBar = (Toolbar) findViewById(R.id.toolbar);
mToolBarBack = (ImageView) mToolBar.findViewById(R.id.toolbar_back);
mToolBarTitle = (TextView) mToolBar.findViewById(R.id.toolbar_title);
mToolBarMenu= (TextView) mToolBar.findViewById(R.id.menu_button);
// then create a public method so like below so that you can access the toolbar content at any fragment
public void setActionBarTitle(String title) {
mToolBarTitle.setText(title);
}
I am new on Android.
Through this simple program I want to to open a drawer using button onclick().But This gives null exception error.I tried the solution by googling but unfortunately didn't solve it.
This is onCreate() method
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
navListener();
}
navListener()
public void navListener(){
final DrawerLayout mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerlayout);
ImageView nav = (ImageView) findViewById(R.id.navbarimagebutton);
nav.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
mDrawerLayout.openDrawer(GravityCompat.START);
}
});
}
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity">
<include layout="#layout/app_bar" />
</RelativeLayout>
DrawerLayout
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawerlayout"
android:layout_height="match_parent"
android:layout_width="120dp"
xmlns:android="http://schemas.android.com/apk/res/android">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"></ListView>
</FrameLayout>
</android.support.v4.widget.DrawerLayout>
app_bar
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/red">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:id="#+id/navbarimagebutton"
android:layout_width="0dp"
android:layout_weight=".25"
android:layout_height="fill_parent"
android:src="#drawable/menu"
/>
<View
android:id="#+id/homepagefirstview"
android:layout_width="10dp"
android:layout_height="fill_parent"></View>
<ImageView
android:layout_weight="1"
android:layout_width="0dp"
android:src="#drawable/hometitle"
android:layout_height="fill_parent" />
<View
android:layout_width="10dp"
android:layout_height="fill_parent"/>
<ImageView
android:layout_weight=".25"
android:layout_width="0dp"
android:src="#drawable/search"
android:layout_height="fill_parent" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
Your problem is your Asking your activity to setContentView(R.layout.activity_main);
And this file does not include your DrawerLayout
you need to do:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity">
<!-- add an id here since your using RelativeLayout -->
<include layout="#layout/app_bar" android:id="#+id/app_bar" />
<!-- include the drawer this way, probably need to add layout_below="#+id/app_bar" or whatever the id is for your app bar -->
<!-- Uncomment this <include layout="#layout/drawer_layout"/> -->
<!-- Or simply copy the drawer layout xml and add layout_below="#+id/app_bar" -->
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawerlayout"
android:layout_below="#+id/app_bar"
android:layout_height="match_parent"
android:layout_width="match_parent">
<!-- main content area -->
<FrameLayout
android:id="#+id/content_area"
android:layout_height="match_parent"
android:layout_width="match_parent"/>
<!-- Slide out drawer section -->
<FrameLayout
android:layout_gravity="start"
android:layout_width="320dp"
android:layout_height="match_parent">
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</FrameLayout>
</android.support.v4.widget.DrawerLayout>
</RelativeLayout>
You are running into NullPointerException because your inflated view does not contain this DrawerLayout you are referencing