How to change Bottom Navigation Text appearance in right side of the icon

て烟熏妆下的殇ゞ 提交于 2020-12-06 13:52:48

问题


I want to create a Bottom Navigation Bar in which text should be aligned right side of the icon. default implementation displays the text below the icon.

XML:

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_nav_bar"
        style="@style/Widget.MaterialComponents.BottomNavigationView.Colored"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:itemIconTint="@color/selector_icon_tint_bottom_nav"
        app:itemTextColor="@color/selector_icon_tint_bottom_nav"
        app:labelVisibilityMode="labeled"
        app:menu="@menu/bottom_nav" />

bottom_nav.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/home_nav"
        android:contentDescription="@string/home"
        android:icon="@drawable/ic_home"
        android:title="@string/home" />
    <item
        android:id="@+id/live_tv_nav"
        android:contentDescription="@string/live_tv"
        android:icon="@drawable/ic_live_tv"
        android:title="@string/live_tv" />
    <item
        android:id="@+id/vod_nav"
        android:contentDescription="@string/vod"
        android:icon="@drawable/ic_vod"
        android:title="@string/vod" />
    <item
        android:id="@+id/broadcast_nav"
        android:contentDescription="@string/search"
        android:icon="@drawable/ic_search"
        android:title="@string/search" />
</menu>

回答1:


Change the Navigation layout gravity to:

android:layout_gravity="end"

Navigation View

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_nav_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="end"
        app:itemIconTint="@color/selector_icon_tint_bottom_nav"
        app:itemTextColor="@color/selector_icon_tint_bottom_nav"
        app:labelVisibilityMode="labeled"
        app:menu="@menu/bottom_nav" />


来源:https://stackoverflow.com/questions/60088829/how-to-change-bottom-navigation-text-appearance-in-right-side-of-the-icon

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!