android navigation view badge on menu icon - android

I'm using Navigation view for slide drawer, and setting options using app:menu property. I want to show the notification count on Menu Icon.
I have specified android:actionLayout in menu xml, but it is showing the badge to the right of title but I want it on top right corner of the Icon.
My Code is like this:
<android.support.design.widget.NavigationView
android:id="#+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="end"
android:background="?attr/colorPrimary"
app:headerLayout="#layout/navigation_header"
app:itemIconTint="#android:color/white"
app:itemTextColor="#android:color/white"
app:menu="#menu/menu_main" />
main_menu.xml
<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/drawer_notification"
android:icon="#drawable/menu_notfication"
app:actionViewClass="android.widget.TextView"
android:actionLayout="#layout/menu_counter"
android:title="Notification"/>
<item
android:id="#+id/drawer_settings"
android:icon="#drawable/menu_setting"
android:title="Settings"/>
<item
android:id="#+id/drawer_faq_help"
android:icon="#drawable/menu_faq"
android:title="FAQ and Help"/>
.
.
.
</group>
menu_counter.xml
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:background="#drawable/circle_bagde"
android:gravity="center_vertical"
android:padding="5dp"
android:text="12"
android:textColor="#android:color/white"
android:textSize="16sp" />
I want it like this:

You can Customize NavigationView also.
Just use Code like below.
<android.support.design.widget.NavigationView
android:layout_width="300dp"
android:layout_gravity="start"
android:id="#+id/navigationView"
android:layout_height="match_parent">
<include layout="#layout/drawer_layout"/>
</android.support.design.widget.NavigationView>
Now in include tag, Add a layout with the recycler and in the recyclerView's onCreateView give the recycler the layout you want and set whatever values you want to set in onBind method like you do normally.
Just remember to call findViewById for recycler in navigationView like : navigationView.findViewById(R.id.recyclerVIew)

You can use SublimeNavigationView to do this.
if you don't want to use third party drawer then you can create Navigation Drawer with RecyclerView or ListView instead of NavigationView. and you can easily customize RecyclerView or ListView.

Related

How do I add a paddingBottom to a drawer layout in android?

I am working on an android project that uses a drawer layout. The drawer layout contains many items and is therefore scrollable. The problem is, I need the last item to have a padding bottom such that there will be some spacing after scrolling to the last item.
From the screenshot above, how can I add some padding between the last item 'Log out' and the end of the screen.
I have tried adding padding bottom to the drawerlayout but its still not working
<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:fitsSystemWindows="true"
tools:openDrawer="start"
android:paddingBottom="#dimen/_120sdp"
android:clipToPadding="false">
I have also tried enclosing navigation view in a scrollview but it is also not working
<ScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clipToPadding="false"
android:paddingBottom="#dimen/_120sdp">
<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" />
</ScrollView>
This is my last element in the drawer layout
<item
android:paddingBottom="#dimen/_190sdp"
android:title="#string/action">
<menu>
<item
android:id="#+id/nav_rate_us"
android:title="#string/rate_us" />
<item
android:id="#+id/nav_log_out"
android:paddingBottom="#dimen/_120sdp"
android:title="#string/log_out" />
</menu>
</item>
How can I achieve this?
add one dummy items to the end of your menu resource file.
<item
android:title=""
android:enabled="false" >
</item>

Use image as item in menu for Navigation Menu Drawer

I'm creating a project with Navigation Drawer Menu in Android, however, so far the menu only shows an icon and title in the menu.
How do I change the whole menu item to become an image with text inside?
Currently: the menu is:
However, I would prefer it to be like this:
You should use listview or recycler view in your NavigationView like this:
<android.support.design.widget.NavigationView
android:id="#+id/navigation_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="match_parent"
android:orientation="vertical">
<include
android:id="#+id/Mainheader"
layout="#layout/nav_header" />
<ListView
android:id="#+id/exp_navigationmenu"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimary" />
</LinearLayout>
</android.support.design.widget.NavigationView>
After that, set data in Listview.
You may use NavigationView#addHeaderView(View) API and provide your custom view as a content of NavigationView.
The alternative is to use app:headerLayout="#layout/your_layout" through xml.

Navigation View Multiline Text

I have an app with a Navigation View for my DrawerLayout. I add programmatically items in the menu because I receive the information over the network. But sometimes, an item name can be very long and is just cut off with even having the ellipsize icon "..."
Does someone have an idea on how to have multiline for my menu items?
Thanks
Override design_navigation_menu_item.xml from the Android Support Design Library and modify the things you need (set android:ellipsize="end" and android:maxLines="2")
Your res/layout/design_navigation_menu_item.xml should look like this:
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<CheckedTextView
android:id="#+id/design_menu_item_text"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:drawablePadding="#dimen/design_navigation_icon_padding"
android:gravity="center_vertical|start"
android:textAppearance="#style/TextAppearance.AppCompat.Body2"
android:ellipsize="end"
android:maxLines="2" />
<ViewStub
android:id="#+id/design_menu_item_action_area_stub"
android:inflatedId="#+id/design_menu_item_action_area"
android:layout="#layout/design_menu_item_action_area"
android:layout_width="wrap_content"
android:layout_height="match_parent" />
</merge>
However, you should just ellipsize the text to properly follow the Material Design guidelines.
You have not to override anything to just ellipsize the text:
Add a new style to the styles.xml
Set the new style to the NavigationView
res / values / styles.xml
<style name="TextAppearance">
<item name="android:ellipsize">end</item>
</style>
res / layout / activity_main.xml
<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"
app:theme="#style/TextAppearance" />
Just add app:itemMaxLines="2" attribute on the NavigationView tag like this:
<com.google.android.mayerial.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"
app:itemMaxLines="2" />
NOTE: Material dependency is--
implementation 'com.google.android.material.material:1.0.0'
Add a style to your NavigationDrawer and then include 2 lines in the style.
<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:background="#drawable/estilo"
android:fitsSystemWindows="true"
app:itemTextColor="#color/white"
app:theme="#style/NavigationDrawerStyle"
app:menu="#menu/activity_main_drawer" />
<style name="NavigationDrawerStyle">
<item name="android:lines">2</item>
</style>
Check out this answer. Default android slide menu is not very flexible, most likely you will have to create your custom view.
I really this tutorial from AndroidHive.
I had the same problem and I tried and tried, There was no progress with Menu, I don't say it was impossible but I couldn't find a way to break MenuItem lines.
But if you don't insist on using Menu I suggest you to use a ListView or RecyclerView in your layout like this:
<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:headerLayout="#layout/nav_draw_header">
<android.support.v7.widget.RecyclerView
android:id="#+id/rv"
android:layout_marginTop="160dp"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.design.widget.NavigationView>
As you can see there is no special thing to explain, no menu, just a RecyclerView, layout_marginTop value is same as header height, I'm sure you know the rest of the story (How to fire up RecyclerView), This approach gives more flexibility to NavigationView menu items (actually RecyclerView items).
If my answer is not clear enough to you let me know.
Here is the result:
You shouldn't change that.
Check out the material design guideline: https://material.io/design/components/navigation-drawer.html#anatomy
Add a style in your NavigationDrawer that declares the number of lines as 'two', like so:
<style name="NavigationDrawerStyle">
<item name="android:lines">2</item>
</style>
and in your view:
<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:background="#drawable/estilo"
android:fitsSystemWindows="true"
app:itemTextColor="#color/white"
app:theme="#style/NavigationDrawerStyle"
app:menu="#menu/activity_main_drawer" />

How can I add divider between action Items in Toolbar

I want to design a toolbar like:.
I have done most of it but having some problem.
I don't know how to make a divider between the toolbars items and also having no idea how to set a counter variable attached to the action button that increment as order takes place like given in the picture.
Any suggestions?
You can place your layout like below:
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="#+id/..."
android:showAsAction="always."
android:icon="#drawable/..."
android:title="#string/..."
android:actionLayout="#layout/your_layout_here"/>
or
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="#+id/..."
android:showAsAction="always."
android:icon="#drawable/..."
android:title="#string/..."
android:actionViewClass="your_class"/>
where "your_class" - class which inflate and implement your view with separator
Try to create a custom toolbar. Add your views between the toolbar's opening and closing tags.
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="56dip"
android:background="#ff0000">
<!-- the back button -->
<ImageView
android:id="#+id/backButton"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="left"
android:clickable="true"
android:onClick="onBackButtonClick"
android:paddingLeft="16dip"
android:paddingRight="16dip"
android:src="#drawable/ic_back" />
...
<!-- the devider -->
<View
android:layout_width="1dip"
android:layout_height="match_parent"
android:background="#ffffff" />
<ImageView .../>
</android.support.v7.widget.Toolbar>

ActionBar Overflow Menu styling information for manual implementation

I'm trying to duplicate the Overflow Menu dropdown functionality for other ActionBar items. I'm working on a manual implementation of this functionality as I think it has been left out of the environment (likely to force standardisation of UI's). Does anybody know what style / style items are used for the drop down list when you click on the Overflow menu?
EDIT
The overflow button is actually a modified spinner. Here is the style information for it.
<style name="Widget.Holo.Spinner" parent="Widget.Spinner.DropDown">
<item name="android:background">#android:drawable/spinner_background_holo_dark</item>
<item name="android:dropDownSelector">#android:drawable/list_selector_holo_dark</item>
<item name="android:popupBackground">#android:drawable/menu_dropdown_panel_holo_dark</item>
<item name="android:dropDownVerticalOffset">0dip</item>
<item name="android:dropDownHorizontalOffset">0dip</item>
<item name="android:dropDownWidth">wrap_content</item>
<item name="android:popupPromptView">#android:layout/simple_dropdown_hint</item>
<item name="android:gravity">left|center_vertical</item>
</style>
Here is a roundup of what I've cobbled together:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/dropdownContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/leftBuffer"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<LinearLayout
android:layout_width="150dp"
android:layout_height="match_parent"
android:orientation="vertical" >
<ListView
android:id="#+id/actionbarDropdown"
style="#style/Widget.ActionBarDropDown"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:cacheColorHint="#android:color/transparent"
android:entries="#array/sortOptions" />
<LinearLayout
android:id="#+id/bottomBuffer"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<LinearLayout
android:id="#+id/rightBuffer"
android:layout_width="118px"
android:layout_height="match_parent" />
</LinearLayout>
Adding an onClick to an ActionBar item which: adds the above layout as a child to your Activities root ViewGroup gives you the illusion of a drop down.
Adding an onClick to each of the buffers which removes the view from the root ViewGroup allows the drop down to "exit" when you try and move focus.
The styling information for the drop down is:
<item name="android:background">#drawable/menu_dropdown_panel_holo_light</item>
<item name="android:dropDownSelector">#drawable/list_selector_background</item>
The layout for each list item is:
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="48dp"
android:textSize="17sp"
android:gravity="right|center_vertical"
style="?android:attr/dropDownItemStyle"
android:ellipsize="marquee"
android:id="#android:id/text1">
</TextView>
This doesn't give a perfect copy of the functionality of an overflow drop down but it's pretty darn close. I am very interested if anyone else knows a way to reproduce this functionality in a more integrated way!
I achive this by having a simple custom view that I put in the ActionBar:
<?xml version="1.0" encoding="utf-8"?>
<ImageButton xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/action_starred"
android:layout_width="wrap_content"
android:layout_height="match_parent"
style="?android:attr/actionButtonStyle"
android:src="#drawable/ic_action_star" />
I then attach a OnClickListener to it in onCreateOptionsMenu() which simply adds a Fragment which takes care of creating a ListPopupWindow and setting the anchor to be the action view. It finds the action view via getActivity().findViewById(R.id.action_starred).
That's simply it, you can set the popup to be modal to make it behave more like a menu. As list items you can use something like android.R.layout.simple_dropdown_item_1line.
This method should work equally well even if you don't put the view in the ActionBar as I do.

Categories

Resources