place the text next to the image , navigation view - android

I have a problem I want to move the text next to the picture this is a picture of the problem
https://imgur.com/a/E2mKn
I want to get this
https://imgur.com/a/7wgkn
My menu
<?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"
android:layoutDirection="ltr">
<group>
<item
android:id="#+id/menu_login"
android:title="Login"
android:icon="#drawable/icon_login"
/>
<item
android:id="#+id/menu_myfile"
android:title=""
android:icon="#drawable/icon_login"
android:visible="false"
/>
<item
android:id="#+id/menu_favorites"
android:title="Favorites"
android:icon="#drawable/icon_favorites"/>
<item
android:id="#+id/menu_rate"
android:title="Rate us"
android:icon="#drawable/icon_rate"/>
<item
android:id="#+id/menu_logout"
android:title="Logout"
android:icon="#drawable/icon_logout"
android:visible="false"
/>
</group>
<group
android:id="#+id/group_two">
<item android:title="Subscribe to us">
<menu>
<item
android:id="#+id/menu_facebook"
android:title="Facebook"
android:icon="#drawable/icon_facebook"/>
<item
android:id="#+id/menu_telegram"
android:title="Telegram"
android:icon="#drawable/icon_telegram"/>
<item
android:id="#+id/menu_instagram"
android:title="Instagram"
android:icon="#drawable/icon_instagram"/>
<item
android:id="#+id/menu_twitter"
android:title="Twitter"
android:icon="#drawable/icon_twitter"/>
</menu>
</item>
</group>
</menu>
I try to use this but it's not working
android:layoutDirection="ltr"
The problem is only on some old devices, I wish to get help thanks a lot.

You have to try like this
<?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:id="#+id/cc_drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
.
.
.
.
.
<android.support.design.widget.NavigationView
android:id="#+id/cc_nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/am_nav_header_main_new"
app:menu="#menu/am_main_navigation_items" />
</android.support.v4.widget.DrawerLayout>
am_main_navigation_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/cc_nav_home"
android:icon="#drawable/ic_dashboard_primary"
android:title="#string/nav_dashboard" />
<item
android:id="#+id/am_nav_auditList"
android:icon="#drawable/ic_audits_primary"
android:title="#string/nav_auditList" />
<item
android:id="#+id/nav_about"
android:icon="#drawable/ic_about_primary"
android:title="#string/cc_nav_about" />
<item
android:id="#+id/nav_app_info"
android:icon="#drawable/ic_info_outline_primary"
android:title="#string/cc_nav_app_info" />
</group>
<group
android:id="#+id/group_two">
<item android:title="Subscribe to us">
<menu>
<item
android:id="#+id/menu_facebook"
android:title="Facebook"
android:icon="#drawable/icon_facebook"/>
<item
android:id="#+id/menu_telegram"
android:title="Telegram"
android:icon="#drawable/icon_telegram"/>
<item
android:id="#+id/menu_instagram"
android:title="Instagram"
android:icon="#drawable/icon_instagram"/>
<item
android:id="#+id/menu_twitter"
android:title="Twitter"
android:icon="#drawable/icon_twitter"/>
</menu>
</item>
</group>
</menu>

This will help, layoutDirection was introduced in API 17, all devices below should call this line:
ViewCompat.setLayoutDirection( findViewById(R.id.my_view) , ViewCompat.LAYOUT_DIRECTION_LTR );
oh and make sure that for the above you will use android.support.v4.view.ViewCompat import
or you can just add this piece to the menu items:
android:layout_gravity="end"

Try placing the entire menu inside a FrameLayout. Then set the layout_width of the frame layout to wrap_content.
<?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="match_parent">
<menu>
<group>
<item
android:id="#+id/menu_login"
android:icon="#drawable/icon_login"
android:title="Login" />
<item
android:id="#+id/menu_myfile"
android:icon="#drawable/icon_login"
android:title=""
android:visible="false" />
<item
android:id="#+id/menu_favorites"
android:icon="#drawable/icon_favorites"
android:title="Favorites" />
<item
android:id="#+id/menu_rate"
android:icon="#drawable/icon_rate"
android:title="Rate us" />
<item
android:id="#+id/menu_logout"
android:icon="#drawable/icon_logout"
android:title="Logout"
android:visible="false" />
</group>
<group android:id="#+id/group_two">
<item android:title="Subscribe to us">
<menu>
<item
android:id="#+id/menu_facebook"
android:icon="#drawable/icon_facebook"
android:title="Facebook" />
<item
android:id="#+id/menu_telegram"
android:icon="#drawable/icon_telegram"
android:title="Telegram" />
<item
android:id="#+id/menu_instagram"
android:icon="#drawable/icon_instagram"
android:title="Instagram" />
<item
android:id="#+id/menu_twitter"
android:icon="#drawable/icon_twitter"
android:title="Twitter" />
</menu>
</item>
</group>
</menu>
</FrameLayout>

Related

Grouping item with title in toolbar item menu

I wanna grouping this following items, this is a toolbar item menu pic 1 . I want to change it, like below : pic 2 the last one. so what should i do ? please help me. Thanks
This is my xml code :
`
<item
android:id="#+id/action_search2"
android:orderInCategory="100"
android:icon="#drawable/ic_search"
myapp:actionViewClass="android.widget.SearchView"
android:title="Search"
app:showAsAction="always"
android:visible="false"/>
<item
android:id="#+id/filter_city"
android:orderInCategory="100"
android:icon="#drawable/ic_sort_black_24dp"
android:title="filter"
app:showAsAction="always"
android:visible="true">
<menu>
<item
android:id="#+id/cityAll"
android:title="SEMUA" />
<item
android:id="#+id/citySby"
android:title="SURABAYA" />
<item
android:id="#+id/cityJkt"
android:title="JAKARTA" />
<item
android:id="#+id/statusAll"
android:title="SEMUA STATUS" />
<item
android:id="#+id/statusPublish"
android:title="PUBLISH" />
<item
android:id="#+id/statusNotPublish"
android:title="NOT PUBLISH" />
<item
android:id="#+id/statusClose"
android:title="CLOSE" />
</menu>
</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"
xmlns:tools="http://schemas.android.com/tools"
tools:showIn="navigation_view"
tools:context=".MenuActivity">
<item
android:id="#+id/action_search2"
android:orderInCategory="100"
android:icon="#drawable/ic_search"
myapp:actionViewClass="android.widget.SearchView"
android:title="Search"
app:showAsAction="always"
android:visible="false"/>
<item
android:id="#+id/filter_city"
android:title="City"
android:orderInCategory="100"
android:icon="#drawable/ic_sort_black_24dp"
android:title="filter"
app:showAsAction="always"
android:visible="true">
<menu>
<item
android:id="#+id/cityAll"
android:title="SEMUA" />
<item
android:id="#+id/citySby"
android:title="SURABAYA" />
<item
android:id="#+id/cityJkt"
android:title="JAKARTA" />
</menu>
</item>
<item
android:id="#+id/action_search2"
android:orderInCategory="100"
android:icon="#drawable/ic_search"
myapp:actionViewClass="android.widget.SearchView"
android:title="General"
app:showAsAction="always"
android:visible="false"/>
<menu>
<item
android:id="#+id/statusAll"
android:title="SEMUA STATUS" />
<item
android:id="#+id/statusPublish"
android:title="PUBLISH" />
<item
android:id="#+id/statusNotPublish"
android:title="NOT PUBLISH" />
<item
android:id="#+id/statusClose"
android:title="CLOSE" />
</menu>
</item>
</item>
</menu>
Here is your solution try this snippet -
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">
<item
android:id="#+id/cityAll"
android:title="SEMUA" />
<item
android:id="#+id/citySby"
android:title="SURABAYA" />
<item
android:id="#+id/cityJkt"
android:title="JAKARTA" />
<item
android:id="#+id/statusAll"
android:title="SEMUA STATUS" />
<item
android:id="#+id/statusPublish"
android:title="PUBLISH" />
<item
android:id="#+id/statusNotPublish"
android:title="NOT PUBLISH" />
<item
android:id="#+id/statusClose"
android:title="CLOSE" />
</menu>
Here is your output -

How to right align text of MenuItem in Toolbar

My MenuItem:
How to right align text of MenuItem in Toolbar, Icon in first next text, like this:
code of menu_setting.xml for MenuItem:
<?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"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MainActivity">
<item
android:title="Main Menu"
app:showAsAction="always"
android:icon="#drawable/ic_more_vert">
<menu>
<item
android:id="#+id/about_app"
android:orderInCategory="100"
android:title="About app"
android:icon="#drawable/ic_info"
app:showAsAction="never" />
<item
android:id="#+id/contact_us"
android:orderInCategory="100"
android:title="Contact us"
android:icon="#drawable/ic_email"
app:showAsAction="never" />
</menu>
</item>
</menu>
Thanks in advance :)
<?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"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".activities.MainActivity">
<item
android:id="#+id/action_notification1"
android:icon="#android:drawable/btn_dropdown"
android:title="action_notification"
app:showAsAction="always">
<menu>
<item
android:id="#+id/profile"
android:icon="#android:drawable/ic_menu_edit"
android:orderInCategory="100"
android:title="PROFILE" />
<item
android:id="#+id/c"
android:icon="#android:drawable/ic_menu_edit"
android:orderInCategory="100"
android:title="COMPLETED TRIPS" />
</menu>
</item>
</menu>
You can use girdle for align text of MenuItem in Toolbar:
dependencies {
compile 'com.lucasurbas:guidelinescompattoolbar:1.0.0'
}
This is how it should look like:
Change your style.xml code like this:
<style name=”Theme.GuidelinesCompat.Light.DarkToolbar”
parent=”Theme.AppCompat.Light.DarkActionBar”>
...
<!— Toolbar styles -->
<item name=”toolbarStyle”>#style/Custom.Widget.Toolbar</item>
<item name=”toolbarNavigationButtonStyle”>
#style/Custom.Widget.Toolbar.Button.Navigation</item>
</style>
<style name=”Custom.Widget.Toolbar” parent=”Widget.AppCompat.Toolbar”>
<item name=”maxButtonHeight”>48dp</item>
<item name=”android:paddingLeft”>
#dimen/toolbar_horizontal_padding</item>
<item name=”android:paddingRight”>
#dimen/toolbar_horizontal_padding</item>
<item name=”contentInsetStart”>
#dimen/first_keyline</item>
</style>
<style name=”Custom.Widget.Toolbar.Button.Navigation”
parent=”Widget.AppCompat.Toolbar.Button.Navigation”>
<item name=”android:minWidth”>48dp</item>
</style>
Here are necessary resources:
<resources>
<dimen name=”first_keyline”>24dp</dimen>
<dimen name=”second_keyline”>80dp</dimen>
<dimen name=”toolbar_horizontal_padding”>12dp</dimen>
</resources>
layout/layout.xml
<android.support.v7.widget.Toolbar
android:id=”#+id/toolbar”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:minHeight=”?attr/actionBarSize”
android:elevation=”6dp”
android:background=”#color/colorPrimary”
app:navigationIcon=”#drawable/ic_menu_white_24dp”
app:contentInsetStart=”#dimen/second_keyline”
app:theme=”#style/Theme.GuidelinesCompat.DarkToolbar”
app:popupTheme=”#style/Toolbar.Popup.AppCompat” />
Try this it helps you.
You have to try like this
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+id/about"
android:title="About"
android:gravity="right" />
<item android:id="#+id/help"
android:title="Help"
android:gravity="right" />
</menu>

Android Drawer Layout centered

I'm not finding how to create a icon over text centered in the menu of a DrawerLayout. Using standard Drawer layout file with menu items. Tried adding android:gravity but that does not seem to help. Thoughts?
<?xml version="1.0" encoding="utf-8"?>
<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:layout_gravity="center_horizontal"
android:id="#+id/nav_backpack"
android:icon="#drawable/person"
android:title="Backpack" />
<item
android:id="#+id/nav_messages"
android:icon="#drawable/messages"
android:title="Messages" />
<item
android:id="#+id/nav_library"
android:icon="#drawable/book"
android:title="Library" />
<item
android:id="#+id/nav_calendar"
android:icon="#drawable/calendar"
android:title="Calendar" />
<item
android:id="#+id/nav_progress"
android:icon="#drawable/book"
android:title="Progress" />
<item
android:id="#+id/nav_account"
android:title="Account" />
<item
android:id="#+id/nav_help"
android:title="Help" />
<item
android:id="#+id/nav_logout"
android:title="Logout" />
</group>
<group android:checkableBehavior="none">
<item android:title="About">
<menu>
<item
android:id="#+id/nav_version"
android:icon="#drawable/ic_menu_share"
android:title="v1.1(03)" />
</menu>
</item>
</group>
</menu>

android left drawer list icon not showing

activity_main_drawer.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:myapp="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android">
<group>
<item
android:id="#+id/portal"
android:icon="#drawable/memu_icon_home_off"
android:title="#string/menu_home"
/>
</group> <!-- show -->
<item android:title="#string/menu_category"
android:icon="#drawable/memu_icon_category_on"
myapp:showAsAction="always"> <!-- not showing! -->
<menu>
<item
android:id="#+id/ct001"
android:title="#string/title_ct001" />
<item
android:id="#+id/ct002"
android:title="#string/title_ct002" />
<item
android:id="#+id/ct003"
android:title="#string/title_ct003" />
<item
android:id="#+id/ct004"
android:title="#string/title_ct004" />
<item
android:id="#+id/ct005"
android:title="#string/title_ct005" />
<item
android:id="#+id/ct006"
android:title="#string/title_ct006" />
<item
android:id="#+id/ct007"
android:title="#string/title_ct007" />
</menu>
</item>
<group>
<item
android:id="#+id/appinfo"
android:icon="#drawable/memu_icon_set_off"
android:title="#string/appinfo"
/>
</group> <!-- show -->
</menu>
I want to print left listlayout like it
(icon1) home
(icon2) category
category value.....
category value.....
category value.....
category value.....
category value.....
(icon3) app inf
'menu_icon_category_on'(icon2)
this item's icon not showing (groups icon can see)
How can I show it?
try this once
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
>
<item
android:id="#+id/a"
android:icon="#drawable/a"
android:title="#string/a"
app:showAsAction="always"/>
<item
android:id="#+id/b"
android:icon="#drawable/b"
android:title="#string/b"
app:showAsAction="always"/>
<item
android:id="#+id/c"
android:title="#string/c"
android:icon="#drawable/c"
app:showAsAction="always"/>
<!-- More -->
<item
android:id="#+id/more"
android:icon="#drawable/ic_menu_overflow"
app:showAsAction="always"
android:title="More">
<menu>
<item android:id="#+id/d"
android:icon="#drawable/s"
android:title="#string/d"
app:showAsAction="never" />
<item android:id="#+id/e"
android:title="#string/e"
app:showAsAction="never" />
<item android:id="#+id/f"
android:icon="#drawable/f"
android:title="#string/f"
app:showAsAction="never" />
</menu>
</item>
</menu>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:myapp="http://schemas.android.com/apk/res-auto">
<group>
<item
android:id="#+id/portal"
android:icon="#drawable/home"
android:title="Home" />
</group>
<group android:id="#+id/grpidCategory">
<item
android:icon="#drawable/ic_menu_gallery"
android:title="menu_category"
myapp:showAsAction="always" />
</group>
<group android:id="#+id/grpidCatItems">
<item
android:id="#+id/ct001"
android:title="title_ct001" />
<item
android:id="#+id/ct002"
android:title="title_ct002" />
<item
android:id="#+id/ct003"
android:title="title_ct003" />
<item
android:id="#+id/ct004"
android:title="title_ct004" />
<item
android:id="#+id/ct005"
android:title="title_ct005" />
<item
android:id="#+id/ct006"
android:title="title_ct006" />
<item
android:id="#+id/ct007"
android:title="title_ct007" />
</group>
<group android:id="#+id/grpid2">
<item
android:id="#+id/appinfo"
android:icon="#drawable/feedback"
android:title="appinfo" />
</group>
</menu>
You can add images in the subitems of Category if you want.

Animation on items NavigationView - Android?

I have bellow menu :
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="#+id/nav_Search"
android:icon="#drawable/search"
android:title="#string/Search" />
<item
android:id="#+id/nav_Bookmark"
android:icon="#drawable/sign"
android:title="#string/Bookmark" />
</group>
<item android:title="">
<menu>
<item
android:id="#+id/About_Software"
android:icon="#android:drawable/ic_input_add"
android:title="#string/About_Software" />
<item
android:id="#+id/nav_About"
android:icon="#drawable/about_us"
android:title="#string/About" />
<item
android:id="#+id/nav_help"
android:icon="#drawable/help"
android:title="#string/Help" />
<item
android:id="#+id/nav_Setting"
android:icon="#drawable/settings"
android:title="#string/Setting" />
<item
android:id="#+id/nav_Exit"
android:icon="#drawable/exit"
android:title="#string/Exit" />
</menu>
</item>
</menu>
And I use from this menu in :
<android.support.design.widget.NavigationView
android:id="#+id/navigation"
android:layout_width="#dimen/Drawer_Width"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#drawable/background_color"
app:headerLayout="#layout/header_drawer"
app:menu="#menu/menu_start_lowversion" />
Can I have animation on icon's menu or ripple on each items?
Try to add
app:itemBackground="?attr/selectableItemBackground"
to your navigation view xml for the ripple effect.
I'm not sure what you mean by icon animation though. You can provide your own background selector if you want too.

Categories

Resources