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.
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 have an options menu defined as
<?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/action_search"
android:title="#string/action_search"
android:icon="#drawable/ic_search_white_24dp"
android:orderInCategory="1"
app:actionViewClass="android.support.v7.widget.SearchView"
app:showAsAction="always|collapseActionView"/>
<item
android:id="#+id/action_favorite"
android:title="#string/action_favorite_add"
android:icon="#drawable/ic_favorite_border_white_24dp"
android:orderInCategory="2"
app:showAsAction="ifRoom"
/>
<item
android:id="#+id/action_info"
android:title="#string/action_info"
android:icon="#drawable/ic_info_outline_white_24dp"
android:orderInCategory="3"
app:showAsAction="ifRoom"
/>
</menu>
The options menu itself works correctly, however the ifRoom actions do not collapse to an overflow when I have a longer toolbar title. Instead the toolbar title gets truncated.
If I use android:showAsAction instead of app:showAsAction and I ignore the error regarding the support library, the items are always collapsed to an overflow. No matter the length of the title.
I should also mention, that the toolbar is within a collapsible toolbar
I would like to the have the search action item to appear always (no matter the length of the title) and the other two items to appear only if the toolbar title is not truncated.
UPDATE: layout and onCreate
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:background="#color/white">
<android.support.design.widget.AppBarLayout
android:id="#+id/rm_app_bar_layout"
android:layout_width="match_parent"
android:layout_height="160dp"
android:layout_gravity="top"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:elevation="0dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/rm_collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:titleEnabled="false"
app:layout_scrollFlags="scroll|snap|exitUntilCollapsed"
app:contentScrim="#color/colorPrimary"
app:statusBarScrim="?attr/colorPrimary"
>
<RelativeLayout
android:id="#+id/rm_expanded_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax">
<ImageView
android:id="#+id/rm_img_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:imagePlaceholder="#{#drawable/img_placeholder}"
app:imageUrl="#{vm.imageUrl}"
android:scaleType="centerCrop"
/>
<!-- Some other layouts overlayed over the image view -->
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/rm_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:title="#{vm.name}"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<!-- rest of layout -->
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
onCreate
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
activityComponent().inject(this)
setAndBindContentView(R.layout.activity_some_activity, savedInstanceState)
setTranslucentStatusBar()
setSupportActionBar(binding.rmToolbar)
supportActionBar?.let {
it.setDisplayHomeAsUpEnabled(true)
it.setDisplayShowTitleEnabled(true)
}
binding.rmAppBarLayout.addOnOffsetChangedListener(object: AppBarStateChangeListener() {
override fun onStateChanged(appBarLayout: AppBarLayout?, state: State) {
if (state != State.IDLE) { // collapsed or expanded
invalidateOptionsMenu()
}
}
})
// some other view code
// viewModel load code
}
Please try this hope so it will be helpful for you. I don't know if this works in general but in my case it does:
<?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/action_search"
android:title="#string/action_search"
android:icon="#drawable/ic_search_white_24dp"
android:orderInCategory="1"
app:actionViewClass="android.support.v7.widget.SearchView"
app:showAsAction="always|collapseActionView"/>
<item
android:id="#+id/action_favorite"
android:title="#string/action_favorite_add"
android:icon="#drawable/ic_favorite_border_white_24dp"
android:orderInCategory="2"
app:showAsAction="collapseActionView"
/>
<item
android:id="#+id/action_info"
android:title="#string/action_info"
android:icon="#drawable/ic_info_outline_white_24dp"
android:orderInCategory="3"
app:showAsAction="collapseActionView"
/>
</menu>
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
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.
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"