Bottom navigation bar android - android

I am trying to implement bottom navigation in fragment but some how it is not working. There is no preview for bottom navigation bar in design tab.
Here is my code for fragment xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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=".studentPanel.hostFragment.StudentPanelFragment">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_nav_st_panel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:menu="#menu/bottom_nav_menu" />
</RelativeLayout>
Here is the code for menu xml file
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/profile"
android:enabled="true"
android:icon="#drawable/profile"
android:title="#string/profile" />
<item
android:id="#+id/conveyance"
android:enabled="true"
android:icon="#drawable/conveyance"
android:title="#string/conveyance" />
<item
android:id="#+id/home"
android:enabled="true"
android:icon="#drawable/home"
android:title="#string/home" />
<item
android:id="#+id/fee"
android:enabled="true"
android:icon="#drawable/fee"
android:title="#string/fee_receipt" />
<item
android:id="#+id/event"
android:enabled="true"
android:icon="#drawable/event"
android:title="#string/event" />
</menu>
I am not able to figure where is error in this code.

Related

Why the texts inside the navigation drawer are not the same?

Can I know why the texts inside the navigation drawer are not the same?
<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".activities.MainActivity"
tools:openDrawer="start">
...
<com.google.android.material.navigation.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="#menu/menu_navigation_drawer" />
</androidx.drawerlayout.widget.DrawerLayout>
----------
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:title="Other">
<menu>
<item
android:icon="#drawable/ic_star"
android:title="Rate the app" />
<item
android:icon="#drawable/ic_share"
android:title="Share the app" />
<item
android:icon="#drawable/ic_shield"
android:title="Privacy policy" />
<item
android:icon="#drawable/ic_document"
android:title="Terms of services" />
</menu>
</item>
</menu>
Notice some items have bold texts and some items have regular texts.
Why is that happening?
I'm using Material Design 3.

The solution
<style name="styleName" parent="TextAppearance.Material3.LabelLarge">
<item name="fontFamily">#font/font_regular</item>
</style>
Then add this inside NavigationView
app:itemTextAppearance="#style/styleName"

How to set text color of ChipNavigationBar

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
android:id="#+id/fragment_container">
<com.ismaeldivita.chipnavigation.ChipNavigationBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:id="#+id/bottom_nav_menu"
app:cnb_textColor ="#color/white"
app:cnb_unselectedColor="#color/black"`enter code here`
android:layout_marginBottom="5dp"
app:cnb_menuResource="#menu/bottom_navigation_menu_chef"
android:layout_alignParentBottom="true"
/>
</RelativeLayout>
How I can set the text color of the selected item using this library on any other way?

In menu item add app:cnb_textColor="#color/home_label"

As i see.. You can set the selected color changing the cnb_textColor in the bottom_navigation_menu_chef.
I will get you an example:
<?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/home"
android:icon="#drawable/ic_home"
android:title="Home"
app:cnb_textColor="#android:color/holo_red_dark"/>
<item
android:id="#+id/activity"
android:icon="#drawable/ic_activity"
android:title="Activity"
app:cnb_textColor="#android:color/holo_green_dark"/>
<item
android:id="#+id/favorites"
android:icon="#drawable/ic_heart"
android:title="Favorites"
app:cnb_textColor="#android:color/black"/>
<item
android:id="#+id/settings"
android:icon="#drawable/ic_settings"
android:title="Settings"
app:cnb_textColor="#android:color/holo_blue_light" />
</menu>

How to change color of icons in bottom app bar

I wanted to change the color of icons in the bottom app bar. I am using the bottom app bar for the first time so I don't have any prior knowledge of it.
The code of the XML file having bottom app bar is below
<RelativeLayout
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=".NavigActivity">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorAccent">
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bottom_app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:backgroundTint="#color/colorAccent"
app:navigationIcon="#drawable/ic_menu_black_24dp"
app:menu="#menu/menu"
app:buttonGravity="center_vertical"
/>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_add_black_24dp"
app:layout_anchor="#id/bottom_app_bar"
android:backgroundTint="#color/colorPrimary"
app:maxImageSize="35dp"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/content_frame"
/>
</RelativeLayout>
The menu file used in this is below
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/home"
android:title="Home"
android:icon="#drawable/ic_home_black_24dp"
app:showAsAction="ifRoom"
/>
<item
android:id="#+id/my_invoices"
android:title="Invoices"
android:icon="#drawable/ic_receipt_black_24dp"
app:showAsAction="ifRoom"
/>
<item
android:id="#+id/notification"
android:title="Notification"
android:icon="#drawable/ic_notifications_black_24dp"
app:showAsAction="ifRoom"
/>
</menu>
I wanted the color o the icon to change to primaryColor but it is not changing..Any help would be appreciated

You can try on menu.xml
Find the detail on link. (image)
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="[URL]http://schemas.android.com/apk/res/android[/URL]"
xmlns:app="[URL]http://schemas.android.com/apk/res-auto[/URL]">
<item
android:id="#+id/menu_color_change"
android:title="Color Plate"
app:showAsAction="ifRoom"
android:icon="#drawable/ic_color_plate">
</item>
<item
android:id="#+id/menu_other"
android:title="Other"
app:showAsAction="never"
android:iconTint="#android:color/white"
android:icon="#drawable/ic_color_plate">
</item>
</menu>

BottomNavigationView not show menu options

My BottonNavigationView not show other options, beyond the selected item. I did trying set a text color, but the color that has been changed is of the selected item.
<android.support.design.widget.BottomNavigationView
app:menu="#menu/menu_bottom"
android:id="#+id/bottomNavigationView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/darker_gray"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />

You should be able to set colors with these parameters:
app:itemBackground
app:itemIconTint
app:itemTextColor
Here is the full code that I'm using:
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="#dimen/bottom_navigation_height"
app:itemBackground="#color/white"
app:itemIconTint="#color/bottom_bar_item_selector"
app:itemTextColor="#color/bottom_bar_item_selector"
app:menu="#menu/bottom_navigation_main" />
#color/bottom_bar_item_selector.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:color="#color/colorPrimary" />
<item android:color="#color/grey" />
</selector>
#menu/bottom_navigation_main.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/bottom_bar_item_item1"
android:icon="#drawable/ic_1"
android:title="#string/unions"
app:showAsAction="ifRoom"
android:enabled="true" />
<item
android:id="#+id/bottom_bar_item_item2"
android:icon="#drawable/ic_2"
android:title="#string/news"
app:showAsAction="ifRoom"
android:enabled="true" />
<item
android:id="#+id/bottom_bar_item_item3"
android:icon="#drawable/ic_3"
android:title="#string/dictionary"
app:showAsAction="ifRoom"
android:enabled="true" />
<item
android:id="#+id/bottom_bar_item_item4"
android:icon="#drawable/ic_4"
android:title="#string/laws"
app:showAsAction="ifRoom"
android:enabled="true" />
<item
android:id="#+id/bottom_bar_item_item5"
android:icon="#drawable/ic_5"
android:title="#string/for_members"
app:showAsAction="ifRoom"
android:enabled="true" />
</menu>

Android Bottom Nav Bar Customization

I'm trying to create something that's similar to this bottom navigation bar. I would really appreciate any help you can give me :
This is my menu xml code (bottom_navigation_main):
<?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_1"
android:enabled="true"
android:icon="#drawable/ic_1"
android:title="Home"
app:showAsAction="ifRoom" />
<item
android:id="#+id/action_2"
android:enabled="true"
android:icon="#drawable/ic_2"
android:title="Free"
android:textColor="#drawable/nav_bar_selector"
app:showAsAction="ifRoom" />
<item
android:id="#+id/action_3"
android:enabled="true"
android:icon="#drawable/ic_food_white"
android:title="Other"
android:textColor="#drawable/ic_3"
app:showAsAction="ifRoom" />
<item
android:id="#+id/action_4"
android:enabled="true"
android:icon="#drawable/ic_4"
android:title="Other"
android:textColor="#drawable/nav_bar_selector"
app:showAsAction="ifRoom" />
<item
android:id="#+id/action_5"
android:enabled="true"
android:icon="#drawable/ic_5"
android:title="Other"
android:textColor="#drawable/nav_bar_selector"
app:showAsAction="ifRoom" />
</menu>
This is my main layout code:
<?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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#color/fullyTransparent"
android:fitsSystemWindows="true"
android:id="#+id/rlLeftDrawer"
android:layout_weight="1"
>
<RelativeLayout
android:id="#+id/rlContentHolder"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:itemBackground="#color/fullyBlack"
app:itemIconTint="#color/fullyWhite"
app:itemTextColor="#color/fullyWhite"
app:menu="#menu/bottom_navigation_main" />
</RelativeLayout>
</RelativeLayout>
I'm not sure where to go from here. I successfully implemented the new bottom nav bar from Android but I'm having issues styling it.
It currently looks like this:

Categories

Resources