I have the below design to implement for the Android Navigation App Drawer of the app and I am confused how to go about it.
In my design, there is a black strip on the left side, which also has an image. My query is how do I create that space in the app drawer ?
I tried to add a Layout inside the app drawer but couldn't. It only allows 'Items' and 'Groups' to be added. What are my possible options ?
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
android:background="#color/colorBg"
<group android:checkableBehavior="single">
android:background="#color/colorBg"
<item
android:id="#+id/myasset"
android:background="#color/colorBg"
android:title="My Asset" />
<item
android:id="#+id/account"
android:background="#color/colorBg"
android:title="Account" />
<item
android:id="#+id/howitworks"
android:background="#color/colorBg"
android:title="How it works" />
<item
android:id="#+id/feedback"
android:background="#color/colorBg"
android:title="Feedback" />
<item
android:id="#+id/legal"
android:background="#color/colorBg"
android:title="Legal" />
<item
android:id="#+id/exit"
android:background="#color/colorBg"
android:title="Exit" />
</group>
</menu>
When you create new project in Android Studio, there is an option that help you build NavigationDrawer.
Default activity_main.xml in layout
<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">
<include
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<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"
app:menu="#menu/activity_main_drawer" />
And you can do anything with activity_main_drawe or nav_header_main.
You can create custom navigation drawer. Try below tutorial :
Custom navigation drawer 1
Custom navigation drawer 2
The solution that worked for me is Hamzeh Soboh's answer here.
https://stackoverflow.com/a/31716815/609235
Related
I'm having a little bit of trouble trying to implement a Bottom Navigation Bar with icons and text in my Android application.
The bar currently functions as expected and takes you to the desired fragment but isn't showing icons or text for some reason.
I've done a few searches but haven't been able to find a solution or a reason as to why it is behaving this way.Any help would be appreciated. Thanks.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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">
<FrameLayout
android:id="#+id/frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="?android:attr/windowBackground"
app:itemBackground="#color/turquoise"
android:foreground="#color/colorPrimary"
app:itemIconTint="#android:color/white"
app:itemTextColor="#android:color/white"
app:menu="#menu/navigation" />
</android.support.design.widget.CoordinatorLayout>
navigation.xml
<?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">
<item
android:id="#+id/nav_0"
android:icon="#drawable/ic_launcher_foreground"
android:title="home"
app:showAsAction="ifRoom|withText"/>
<item
android:id="#+id/nav_1"
android:icon="#drawable/ic_launcher_foreground"
android:title="email"
app:showAsAction="ifRoom|withText"/>
<item
android:id="#+id/nav_2"
android:icon="#drawable/ic_home"
android:title="profile"
app:showAsAction="ifRoom|withText"/>
<item
android:id="#+id/nav_3"
android:icon="#drawable/ic_home"
android:title="map"
app:showAsAction="ifRoom|withText"/>
</menu>
in MainActivity.java
toolbar = getSupportActionBar();
BottomNavigationView navigation = (BottomNavigationView) findViewById(R.id.navigation);
navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);
Remove android:foreground="#color/colorPrimary" attribute inside your BottomNavigationView
I want to add a menu item entry without icon to navigation drawer in my android app.
I have checked the samples at NavigationDrawer
and read through the tutorial at Android Developer training article.
I edited the sample menu to add new menu items "My Text 1" and "My Text 2" as per this xml file following this image:
<?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/nav_camera"
android:icon="#drawable/ic_menu_camera"
android:title="Import" />
<item
android:id="#+id/nav_gallery"
android:icon="#drawable/ic_menu_gallery"
android:title="Gallery" />
<item
android:id="#+id/nav_slideshow"
android:icon="#drawable/ic_menu_slideshow"
android:title="Slideshow" />
<item
android:id="#+id/nav_manage"
android:icon="#drawable/ic_menu_manage"
android:title="Tools" />
<item
android:id="#+id/example"
android:title="My Text 1" />
</group>
<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" />
<item
android:id="#+id/sample"
android:title="My Text 2" />
</menu>
</item>
</menu>
If i remove the two lines declaring icons for "Share" and "Send", then "My Text 2" gets aligned to the left as shown in this image
But i want to keep the icons of other items, and just add a text item, i hope there is some parameter that allows no icon menu item in groups.
I tried using android_icon="#android/color:transparent", but that doesn't/can't solve the problem either.
I dont want to provide any icons for my menu items, but i expect that text to align to the left. Is that achievable? If yes, how?
No custom layout here.
You have to create a second group with an ID (even dummy) then in this group put all the items without any icon.
Note: every time the group ID changes Android adds a separator line.
<menu 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"
tools:showIn="navigation_view">
<group android:checkableBehavior="single">
<item
android:id="#+id/nav_home"
android:icon="#drawable/ic_menu_dummy1"
android:title="#string/nav_menu_home"/>
<item
android:id="#+id/nav_profile"
android:icon="#drawable/ic_menu_dummy2"
android:title="#string/nav_menu_profile"/>
</group>
<group android:id="#+id/dummy">
<item
android:id="#+id/nav_info"
android:title="#string/nav_menu_info"/>
<item
android:id="#+id/nav_settings"
android:title="#string/nav_menu_settings"/>
</group>
Create your custom layout for the Navigation Drawer and do whatever you want with that:
This is my xml file for custom design of drawer layout-
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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=".HomeActivity">
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- The main content view -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
android:id="#+id/rl_topbar"
layout="#layout/inflate_topbar" />
<FrameLayout
android:id="#+id/fl_content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/rl_topbar" />
</LinearLayout>
<!-- The navigation drawer -->
<LinearLayout
android:id="#+id/ll_navbar_container"
android:layout_width="#dimen/navbar_width"
android:layout_height="match_parent"
android:layout_gravity="right"
android:background="#color/color_255_255_255"
android:orientation="vertical">
<!--This is my custom layout how I want, you can design as you want and include it-->
<include
android:id="#+id/ll_navbar"
layout="#layout/inflate_navbar" />
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
<!--Add progress bar-->
<!--Add other views-->
</RelativeLayout>
Now in your activity of this xml file take the references of views and make click events or other changes easily.
A simple alternative would be to use a custom layout instead of a menu.
It'll be a simple change. Simply, you can just create a custom layout as you would in any other layout but instead of indicating the corresponding menu within the NavigationView, instead of using the app:menu="#menu/drawer_view" attribute.
You can simply follow the layout structure of in your Activity.
<android.support.design.widget.CoordinatorLayout
<android.support.v4.widget.DrawerLayout
<RelativeLayout/>
<LinearLayout/>
</android.support.v4.widget.DrawerLayout>
</android.support.design.widget.CoordinatorLayout>
There's no fundamental difference between the structure of the tutorial and that of this layout except, I've chosen to use a LinearLayout instead of a menu resource for the side menu (obviously the rootlayout for the side view will be at your discretion but for your use-case LinearLayout fits best.).
An Example
Activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#color/colorAccent"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:fitsSystemWindows="true">
<include layout="#layout/content_activity_main"/>
<include layout="#layout/layout_side_view"/>
</android.support.v4.widget.DrawerLayout>
</android.support.design.widget.CoordinatorLayout>
You'll notice in this layout that there are two include statements in place of the layouts before as shown in the structure before. One for the actual content of the activity and one for the side view. I'll show you an example of your requested use case layout below:
layout_side_view.xml
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:background="#color/white"
android:layout_width="match_parent"
android:layout_height="50dp">
<TextView
android:id="#+id/with_icon"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:textColor="#color/black"
android:drawableLeft="#drawable/icon"
android:drawableStart="#drawable/icon"
android:drawablePadding="15dp"
android:gravity="start|center_vertical"
android:text="TextView 1"/>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:background="#color/white"
android:layout_width="match_parent"
android:layout_height="50dp">
<TextView
android:id="#+id/without_icon"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:textColor="#color/black"
android:gravity="start|center_vertical"
android:text="Text View 2"/>
</LinearLayout>
</LinearLayout>
You can then simply customize your layout and where you want a TextView with an icon on the left use the DrawableLeft | DrawableStart attribute, and if you don't want an icon simply just don't use it.
I hope this helps.
Note:
I would look into what the DrawerLayout does and why it is structured that way, the content goes below the menu for what reason? Looking into these things helps you develop an understanding where you can customize layout structures to your liking.
I need your help please help me.
I have a navigation drawer in my app. i want to move navigation drawer to right completely . I moved the navigation itself but i want to move menu items to right too.
My Screenshot of Navigation Drawer
Activity_main:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_marginleft="100dip"
android:fitsSystemWindows="true"
tools:openDrawer="end">
<include
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<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:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>
My items of menu in xml :
Activity_Main_Drawer:
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="#+id/nav_home"
android:icon="#drawable/ic_home_black_24dp"
android:title="#string/nav_home" />
<item
android:id="#+id/nav_photos"
android:icon="#drawable/ic_photo_library_black_24dp"
android:title="#string/nav_photos" />
<item
android:id="#+id/nav_movies"
android:icon="#drawable/ic_local_movies_black_24dp"
android:title="#string/nav_movies" />
<item
android:id="#+id/nav_notifications"
android:icon="#drawable/ic_notifications_black_24dp"
android:title="#string/nav_notifications" />
<item
android:id="#+id/nav_settings"
android:icon="#drawable/ic_settings_black_24dp"
android:title="#string/nav_settings" />
</group>
<item android:title="Other">
<menu>
<item
android:id="#+id/nav_about_us"
android:title="#string/nav_about_us" />
<item
android:id="#+id/nav_privacy_policy"
android:title="#string/privacy_policy" />
</menu>
</item>
</menu>
first: You can put your device in RTL mode, go to develop settings (Force RTL layout direction).
After doing this all the layouts will mirror correctly.
If you don't want to change the whole device into RTL use this code in onCreate method of mainactivity before super and before you inflate the content view
window.decorView.layoutDirection = View.LAYOUT_DIRECTION_RTL
You need to use a custom layout for NavigationView.
According to this: http://www.kamilslesinski.com/home/navigation-drawer-customising-navigationview-items you can override the layout by copying original file and customizing it, or you can add a reference to your custom layout, like that:
how to customize snackBar's layout?
in refs.xml.
I have a Navigation Drawer that opens from right to left, everything is working fine and the hamburger icon is working fine and it's in the right corner but menu icons are at the left of menu items.
How to move them to the right of menu items?
Please see the screen shot
This is my menu.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="none">
<item
android:id="#+id/nav_home"
android:icon="#drawable/ic_navigation_home"
android:title="#string/nav_menu_home" />
<item
android:id="#+id/nav_profile"
android:icon="#drawable/ic_menu_profile"
android:title="#string/nav_profile" />
<item
android:id="#+id/nav_help"
android:icon="#drawable/ic_navigation_help"
android:title="#string/nav_help" />
<item
android:id="#+id/nav_manage"
android:icon="#drawable/ic_menu_manage"
android:title="#string/nav_manage" />
<item
android:id="#+id/nav_logout"
android:icon="#drawable/ic_logout"
android:title="#string/nav_logout" />
</group>
<item android:title="#string/nav_communicate">
<menu>
<item
android:id="#+id/nav_facebook"
android:icon="#drawable/ic_facebookx"
android:title="#string/nav_face_page" />
<item
android:id="#+id/nav_send"
android:icon="#drawable/ic_menu_send"
android:title="#string/nav_contact" />
</menu>
</item>
</menu>
and this is my layout
<?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="match_parent"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<include
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<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"
app:menu="#menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>
</LinearLayout>
I searched a lot but didn't find anything related to this issue.
Thanks in advance.
If you want to use NavigationView for handling DrawerLayout, make your NavigationView right to left by following code:
#TargetApi(Build.VERSION_CODES.JELLY_BEAN_MR1) //call this before super.onCreate
private void forceRtlIfSupported() {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
getWindow().getDecorView().setLayoutDirection(View.LAYOUT_DIRECTION_RTL);
}
}
and set RTL flag in AndroidManifiest.xml
android:supportsRtl="true"
unfortunately above code only supported for API 16 and later. In order to handle lower API, you can also implement DrawerLayout with ListView and do whatever you want. You can find a tutorial about this approach here.
according to recent Ian Lake post
And if you haven't looked at NavigationView recently, it actually got
quite an update in version 23.1.0 [1] with the addition of
app:actionLayout support for custom view support.
How can I use app:actionLayout in NavigationView?
Using
<group android:checkableBehavior="single">
<item
android:id="#+id/navigation_drawer_item_1"
android:icon="#drawable/ic_menu_1"
android:title="#string/navigation_drawer_item_1"
app:actionLayout="#layout/menu_test_1"
/>
<item
android:id="#+id/navigation_drawer_item_2"
android:icon="#drawable/ic_menu_2"
android:title="#string/navigation_drawer_item_2"
app:actionLayout="#layout/menu_test_1"
/>
</group>
with
<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"
app:menu="#menu/activity_main_drawer">
It doesn't work.
It shows the actionLayout on the right side of the item.
Also removing android:icon and android:title seems not working.
How can i fix it?
Thank you
Regards
I beat this problem by removing any text from android:title.
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"
app:menu="#menu/activity_main_drawer" />
Menu code (activity_main_drawer):
<?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_item1"
app:showAsAction="always"
android:title=""
app:actionLayout="#layout/menu_item_layout" />
</group>
</menu>
menu_item_layout:
<?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="match_parent">
<TextView android:id="#+id/item_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:text="Item text" />
</RelativeLayout>
Try this
<group
android:id="#+id/group2"
android:checkableBehavior="none">
<item
android:id="#+id/nav_build_info"
android:icon="#null"
android:title="#null"
app:actionLayout="#layout/layout"
app:showAsAction="always" />
</group>
And also make actionLayout's layout as android:layout_width="wrap_content"