Android Drawer Submenu with Edit Action and Title [Google Keep Example] - android

I want to have a group in my navigation drawer which has a title and next to the title there should be an edit button like in the new Google Keep App (see example below). Currently I can't find a sleek and working solution.
My menu layout at the moment:
<?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:title="Accounts"
app:actionLayout="#layout/edit_action"
app:showAsAction="always"
android:enabled="false">
<menu>
<group android:checkableBehavior="single">
<item android:title="Item 1" android:icon="#drawable/ic_outline_calendar_today"/>
<item android:title="Item 2" android:icon="#drawable/ic_outline_calendar_today"/>
</group>
<item android:title="Add new Item" android:icon="#drawable/ic_outline_add"/>
</menu>
</item>
<group>
<item android:title="Settings" android:icon="#drawable/ic_outline_settings"/>
<item android:title="Trash" android:icon="#drawable/ic_outline_delete"/>
<item android:title="Help \u0026 Feedback" android:icon="#drawable/ic_outline_feedback"/>
</group>
</menu>
Currently only the title is displayed in the submenu but the edit button is missing. But if you just create an item without a menu child, the edit button will be displayed but the item is now an item and not a title as before.
I would like to have the same result as in the picture. The padding as well as the text size and color should be the default values from Android.
My edit_action.xml file looks like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
style="?android:attr/actionButtonStyle"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clickable="true">
<TextView
android:text="Edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/colorPrimary"
android:id="#+id/edit"/>
</RelativeLayout>
My menu looks like this at the moment:

Related

How do I get an icon to always appear on the right in the ActionBar?

I have a fragment with an actionbar and one icon, and another fragment which is placed over the first one with it's own actionbar and two icons. I have it so the second fragment will show all three items in the actionbar and the first one shows only it's one:
fragment with 3 items
fragment with 1 item
I'd like the red square in the fragment with 3 items to be on the right hand side of the other two items.
Fragment layout for 2 items:
<?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:title="#string/menu_sort"
android:id="#+id/menu_sort"
app:showAsAction="always"
android:icon="#drawable/ic_baseline_sort_24">
<menu>
<item android:title="Distance"/>
<item android:title="Salary"/>
<item android:title="Date Posted"/>
</menu>
</item>
<item
android:title="#string/menu_filter"
android:id="#+id/menu_filter"
app:showAsAction="always"
android:icon="#drawable/ic_baseline_filter_list_24">
<menu>
<item android:title="Freelance"/>
<item android:title="Zero Hour"/>
<item android:title="Part Term"/>
<item android:title="Internship"/>
</menu>
</item>
</menu>
Fragment layout for 1 item:
<?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:title="#string/menu_profile"
android:id="#+id/menu_profile"
app:showAsAction="always"
app:actionLayout="#layout/profile_menu_layout"/>
</menu>
Profile_menu_layout used above:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clipToPadding="false"
android:padding="5dp"
android:clickable="true"
>
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/toolbar_profile_image"
android:layout_width="30dp"
android:layout_height="30dp"
android:src="#mipmap/ic_launcher"/>
</FrameLayout>
You could achieve this by setting the android:orderInCategory on the menu items. For reference..

Android How to move menu to the left on small screens

When i added additional item to menu, it go off the screen on phone with smaller screen like 400x800. I tried to add padding but i don't want to make icon smaller but only move whole menu a little bit to the left because i see there is space for that. Does anyone has similar problem and resolve it ?
code:
<?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/graphic"
android:icon="#drawable/ic_graphic_white_30dp"
android:title="Graphic"
app:showAsAction="always" />
<item
android:id="#+id/save"
android:icon="#drawable/ic_save_white_24dp"
android:title="#string/save"
app:showAsAction="always" />
<item
android:id="#+id/share"
android:icon="#drawable/ic_share_white_24dp"
android:title="#string/share"
app:showAsAction="always" />
<item
android:id="#+id/count"
android:icon="#drawable/ic_pie_chart_white_24dp"
android:title="#string/count"
app:showAsAction="always" />
<item
android:id="#+id/camera"
android:icon="#drawable/ic_camera_alt_white_24dp"
android:title="#string/photo"
app:showAsAction="always" />
<item
android:id="#+id/lock"
android:icon="#drawable/ic_action_secure"
android:title="#string/lock"
app:showAsAction="always" />
</menu>
You can use configrations of your actionBar as below:
ActionBar mActionBar = getSupportActionBar();
mActionBar.setNavigationMode(NAVIGATION_MODE_LIST);
mActionBar.setListNavigationCallbacks(mAdapter, mNavigationCallback);
You can follow this example : Sample Here

How to add an horizontal line next to the title of a group in a navigation drawer?

I'd like to move the horizontal separator that separates between different item groups in a navigation drawer and put it next to the titles of the group.
let's say I have the following XML:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:showIn="navigation_view">
<group android:checkableBehavior="single">
<item
android:id="#+id/mainFragment"
android:title="Principal" />
</group>
<item android:title="Second menu">
<menu>
<group android:checkableBehavior="single">
<item
android:id="#+id/listOption"
android:title="List" />
<item
android:id="#+id/favoriteOption"
android:title="Favorite" />
</group>
</menu>
</item>
</menu>
which has the following result
I would like to get a result where the separating line is next to "Second Menu" in way that it's positioned in the center. like this

Android menu item with both icon and text together when showAsAction is never

Hi, how can I make my menu items have icons as well when showAsAction is never ?
Use android:actionLayout in menu item tag to specify custom lyout (icon with text).
Menu item will look like:
<item
android:id="#+id/edit_menu"
android:actionLayout="#layout/custom_edit_row"
android:orderInCategory="100"
android:title="#string/edit"
app:showAsAction="always"></item>
Edit
custom_edit_row.xml
will be:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativeLayout1"
style="#android:style/Widget.ActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true">
<ImageView
android:id="#+id/imageViewEdit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/edit_ic" />
<TextView
android:id="#+id/tvEdit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Edit" />
<menu 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"
tools:context=".YourActivityName">
<item
android:id="#+id/action_settings"
android:icon="#android:drawable/btn_dialog"
android:title="#string/action_settings"
app:showAsAction="always">
<menu>
<item
android:id="#+id/profile"
android:icon="#drawable/common_google_signin_btn_icon_light_disabled"
android:title="PROFILE"
app:showAsAction="always" />
</menu>
</item>
Use this menu file, it worked fine for me.
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="#+id/action_m"
android:showAsAction="never"
android:title="menu">
<menu>
<item
android:id="#+id/action_one"
android:icon="#android:drawable/ic_popup_sync"
android:showAsAction="always"
android:title="Sync"/>
<item
android:id="#+id/action_two"
android:icon="#android:drawable/ic_dialog_info"
android:title="About"/>
</menu>
</item>
</menu>
In createOptionsMenu, set the icon and text to MenuItem.
Elaborate the problem a little more.
Just change root item of Harry Mad answer
<item
android:title="Ещё"
app:showAsAction="always"
android:icon="#drawable/ic_more_vert">
...

How to add master on/off buttons and a heading to sub menus in the action bar

I need to add master on/off buttons in to sub menus in my action bar menus and small description under the title.Also I need to add heading for sub menus. I don't have idea how to do it. Do I have to use separate layout for each sub menu or else is there any way to fix using current menu.xml file?
This is what I want to do :
This is my menu.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/action_settings"
android:showAsAction="always"
android:title="#string/action_settings"
android:icon="#drawable/settings">
<menu >
<item
android:id="#+id/title"
android:title="HEADING"/>
<item
android:id="#+id/theme"
android:title="theme"
android:showAsAction="never"
android:orderInCategory="1"
android:icon="#drawable/ic_action2"
android:actionLayout="#layout/switch_layout"/>
<item
android:id="#+id/volunm"
android:title="Volumn"
android:orderInCategory="2"
android:showAsAction="never"
android:icon="#drawable/ic_action1"/>
</menu>
</item>
</menu>
This is my switch_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<Switch
android:id="#+id/switchForsetting"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="on/off" />
</RelativeLayout>
But I'm not getting Switch button.
Use Action provider for this. It will be easier. here

Categories

Resources