I need to make a custom BottomNavigationView that has a bigger icon in the center without a title like the picture below and other icons are normal in size and have a title below each icon.
I am using the android navigation component Library.
How to achieve that?
my activity_main.xml
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.main.MainActivity">
<fragment
android:id="#+id/main_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="0dp"
android:layout_height="0dp"
app:defaultNavHost="true"
app:layout_constraintBottom_toTopOf="#+id/bottom_navigation"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:navGraph="#navigation/nav_graph" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:labelVisibilityMode="labeled"
android:background="#FFF"
app:itemIconTint="#drawable/nav_item_color_state"
app:itemTextColor="#drawable/nav_item_color_state"
app:layout_constraintBottom_toBottomOf="parent"
app:menu="#menu/main_navigation_menu" />
</androidx.constraintlayout.widget.ConstraintLayout>
and the main_navigation_menu
<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">
<item
android:id="#+id/billFragment"
android:checkable="true"
android:icon="#drawable/ic_bill"
android:title="#string/bill"
app:showAsAction="always"
tools:ignore="AlwaysShowAction" />
<item
android:id="#+id/paymentsFragment"
android:checkable="true"
android:icon="#drawable/ic_payments"
android:title="#string/payments"
app:showAsAction="always" />
<item
android:id="#+id/cachedFragment"
android:checkable="true"
android:icon="#drawable/ic_cached"
android:title="#string/cached"
app:showAsAction="always" />
<item
... />
<item
... />
</menu>
For middle item set its title to " ". For make middle icon bigger, see here: Change Bottom Bar icon size android
Related
bottom Navigation bar is long seems like a space is excreted, i tried to solve this problem a days.
This is the problem
:
This is the xml code :
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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"
android:fitsSystemWindows="true"
tools:context=".Home_activity">
<!-- 813dp -->
<fragment
android:id="#+id/fragment"
android:name="com.anonymous.nr_chemistryteam.BlankFragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bottomAppBar"
style="#style/Widget.MaterialComponents.BottomAppBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:backgroundTint="#color/white"
android:theme="#style/AppThemeMaterial2"
app:fabCradleMargin="8dp"
app:fabCradleRoundedCornerRadius="50dp"
app:fabCradleVerticalOffset="6dp">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/homeNvBottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:background="#drawable/empty_background"
app:menu="#menu/bottom_menu" />
</com.google.android.material.bottomappbar.BottomAppBar>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/floatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="#ff5e00"
android:src="#drawable/ic_cart"
app:fabCustomSize="72dp"
app:layout_anchor="#id/bottomAppBar"
app:maxImageSize="34dp" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
This is the menu xml code :
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/home_page2"
android:icon="#drawable/ic_home2"
android:title="Home" />
<item
android:id="#+id/message_page2"
android:icon="#drawable/ic_message1"
android:title="Message" />
<item
android:id="#+id/placeholder"
android:checkable="false"
android:title="" />
<item
android:id="#+id/help_page2"
android:icon="#drawable/ic_help"
android:title="Help" />
<item
android:id="#+id/settings_page2"
android:icon="#drawable/ic_settings"
android:title="Settings" />
I am using coordinator layout so i think coordinator layout is the problem or might be the fragment i used.
what should i do to remove this space (space below bottom Navigation bar that already in picture)?
You could try making the height of the Bottom Bar 100dp.
I am using a bottom Navigation View with menus. I need to place the menu icons in the center of the BNV as I don't want to place text with the icons.
Here is my bottom Navigation View:
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.fragment.app.FragmentContainerView
android:id="#+id/nav_host_fragment_dashboard"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
app:defaultNavHost="true"
app:layout_constraintBottom_toTopOf="#+id/bottomNavigationView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:navGraph="#navigation/dashboard_navigation" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNavigationView"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:menu="#menu/bottom_nav_menu"
app:labelVisibilityMode="labeled"
android:background="#color/white"
app:elevation="12dp"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
And here is the menu code
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/homeFragment"
android:title=""
android:icon="#drawable/home_icon"/>
<item
android:id="#+id/chatFragment"
android:title=""
android:icon="#drawable/chat_icon"
/>
<item
android:id="#+id/nonSulinCommunityFragment"
android:title=""
android:icon="#drawable/nonsulin_community_icon"
/>
<item
android:id="#+id/notificationsFragment"
android:title=""
android:icon="#drawable/notification_icon"
/>
<item
android:id="#+id/profileFragment"
android:title=""
android:icon="#drawable/profile_icon"
/>
</menu>
Here is the ss of the bottom nav and I need to place icons in the center of the bottom Nav Menu.
Get rid of the android:title="" in the xml file and it should work
So I resolved the issue by changing
app:labelVisibilityMode="labeled"
to
app:labelVisibilityMode="unlabeled"
as I was not using any title with the menu.
I am trying to implement a simple bottom navigation bar on my android app using the Material Design library. I looked at tutorials and several other sites and Medium articles, and the code seems pretty simple/boilerplate; however, the icons in my bottom navigation bar do not seem to exist (given that setting (layout_height = wrap_content makes the entire bar shrink to nothing).
I am not sure why the bottom nav bar appears to be empty or not show anything.
activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="400dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:listitem="#layout/layout" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_nav_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:attr/windowBackground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:menu="#menu/bottom_nav"
app:labelVisibilityMode="labeled"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
bottom_nav.xml:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/nav_rest"
android:icon="#drawable/ic_rest_nav"
android:enabled="true"
android:title="Restaurant-List"
/>
<item
android:id="#+id/nav_maps"
android:icon="#drawable/ic_location_24dp"
android:enabled="true"
android:title="Map"
/>
<item
android:id="#+id/nav_menu"
android:icon="#drawable/ic_menu_24dp"
android:title="Menu"
/>
<item
android:id="#+id/nav_cart"
android:icon="#drawable/ic_cart_24dp"
android:title="nav_cart"
/>
</menu>
in your activity_main.xml :RecyclerView
app:layout_constraintBottom_toBottomOf="parent"
android:layout_width="400dp"
should be
app:layout_constraintBottom_toTopOf="#id/bottom_nav_bar"
android:layout_width="0dp"
I want to do something like this in my android app.
I tryied with app bar and fab button but was unsuccessful.
Do you have any ideas?
I have created a Bottom navigationView with 5 menu items.
The middle item has no image.
So I added an imageButton(android:clickable="false") inside the bottom navigationView.
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_nav_instructor"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_gravity="bottom"
android:background="#color/bg_bottom_nav_bar"
android:elevation="15dp"
app:itemIconSize="30dp"
app:itemIconTint="#drawable/bottom_navigation_colors"
app:itemTextAppearanceActive="#style/TextStyleTab"
app:itemTextAppearanceInactive="#style/TextStyleTab"
app:labelVisibilityMode="labeled"
app:menu="#menu/instructor_bottom_nav">
<ImageButton
android:layout_width="56dp"
android:layout_height="56dp"
android:layout_gravity="center"
android:layout_marginBottom="15dp"
android:background="#drawable/fab"
android:clickable="false"
android:src="#drawable/ico_add" />
</com.google.android.material.bottomnavigation.BottomNavigationView>
to acheive this you need a custom view. You can do this by creating a custom view class with extending BottomNavigationBar.
You can look at this article to try to acheive your desired look for your BottomNavigationBar.
Originally answered here: https://stackoverflow.com/a/70409454/8956093
I achieved same UI using Frame layout. Here is the code
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<fragment
android:id="#+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
app:defaultNavHost="true"
app:layout_constraintBottom_toTopOf="#id/bottom_navigation"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:navGraph="#navigation/nav_graph_home" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/background_white_rounded_top"
app:itemTextColor="#color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:menu="#menu/bottom_nav_bar_home_items"
app:labelVisibilityMode="unlabeled">
</com.google.android.material.bottomnavigation.BottomNavigationView>
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
<ImageView
android:id="#+id/toggle_alignment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_home_scan" />
</FrameLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
and do not give icon for middle item.
<?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:id="#+id/firstFragment"
android:icon="#drawable/ic_one"
android:title="" />
<item
android:id="#+id/secondFragment"
android:icon="#drawable/ic_two"
android:title="" />
<item
android:id="#+id/thirdFragment"
android:title="" />
<item
android:id="#+id/fourthFragment"
android:icon="#drawable/ic_four"
android:title=""/>
<item
android:id="#+id/fifthFragment"
android:icon="#drawable/ic_five"
android:title="" />
</group>
</menu>
I want to make exactly the same, bottom bar with floating action button. I have used standart BottomNavigationView as well as this library, but I can't increase the distance between items. Is there a way to do that?
Add a fifth item to your bottom navigation. Give it an empty string for its label and a completely transparent image for its icon. Also make it disabled. Put this item in the middle position.
The visual effect will be that there's no item in the center of the screen, and the rest of the buttons should be spaced nicely around the floating action button.
this is work for me.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:background="#color/colorAccent" />
</RelativeLayout>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:backgroundTint="#color/white"
android:scaleType="center"
app:fabSize="normal"
app:layout_anchor="#+id/bottom_navigation"
app:layout_anchorGravity="top|center_horizontal" />
</android.support.design.widget.CoordinatorLayout>
This worked for me Just add fifth item with:
<item android:title=""/>
This will add extra spaces between items.
Happy coding.
Add 5th item and then disable it programatically
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<fragment
android:id="#+id/nav_host_fragment_activity_main"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:defaultNavHost="true"
app:navGraph="#navigation/fitness_navigation" />
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bottomAppBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:backgroundTint="#color/colorSecondary"
app:fabCradleMargin="6dp"
app:fabCradleRoundedCornerRadius="20dp"
app:fabCradleVerticalOffset="1dp">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/nav_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
app:labelVisibilityMode="labeled"
android:layout_marginEnd="16dp"
app:itemIconTint="#drawable/tab_color"
app:itemTextColor="#drawable/tab_color"
app:menu="#menu/bottom_nav_menu" />
</com.google.android.material.bottomappbar.BottomAppBar>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab_start_exercise"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/title_start"
app:tint="?colorOnPrimary"
android:theme="#style/FabButtonTheme"
app:maxImageSize="45dp"
android:src="#drawable/ic_run"
app:layout_anchor="#id/bottomAppBar" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/navigation_home"
android:icon="#drawable/ic_home"
android:title="#string/title_home" />
<item
android:id="#+id/navigation_plan"
android:icon="#drawable/ic_plan"
android:title="#string/title_plan" />
<item
android:id="#+id/navigation_placeholder"
android:title="" />
<item
android:id="#+id/navigation_diet"
android:icon="#drawable/ic_diet"
android:title="#string/title_diet" />
<item
android:id="#+id/navigation_profile"
android:icon="#drawable/ic_profile"
android:title="#string/title_profile" />
</menu>
private fun disableCenterItem(){
val navView = findViewById(R.id.nav_view)
val menuNav = navView.menu
val placeHolderItem = menuNav.findItem(R.id.navigation_placeholder)
placeHolderItem.isEnabled = false
}
Please add to in your menu xml 3 rd position item shown below
<item
android:id="#+id/page_3"
android:enabled="false"
android:title=""
/>