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=""
/>
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 have tried this but its not showing fab icon size bigger in centre and used almost solution on this site .
I want to achieve like below youtube bottom centre icon.
<!-- Bottom Menu -->
<RelativeLayout
android:id="#+id/home_page_navigation"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.7"
android:background="#color/background_color"
android:gravity="bottom"
android:layout_marginTop="2dp"
android:orientation="horizontal">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/navigation_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#color/bottom_navigation_view_color"
app:itemIconTint="#color/selector_item_primary_color"
app:itemTextColor="#color/selector_item_primary_color"
app:labelVisibilityMode="labeled"
app:menu="#menu/menu_navigation"/>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:src="#drawable/ic_add_icon"
android:tint="#color/colorGray"
android:background="#color/bottomcolor"
app:borderWidth="0dp"
app:elevation="9dp"
android:contentDescription="add" />
</RelativeLayout>
Use ConstraintLayout and apply
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
Refer https://riggaroo.dev/constraintlayout-guidelines-barriers-chains-groups/
I have achieved this using coordinator layout , might be it will help others. Here is my code
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="#+id/home_page_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/nav_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#color/bottom_navigation_view_color"
app:itemIconTint="#color/selector_item_primary_color"
app:itemTextColor="#color/selector_item_primary_color"
app:labelVisibilityMode="labeled"
app:elevation="0dp"
app:menu="#menu/menu_navigation"
app:theme="#style/Theme.MaterialComponents"/>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:contentDescription="add"
android:src="#drawable/ic_add_icon"
app:backgroundTint="#color/bottom_navigation_view_color"
app:elevation="0dp"
app:layout_anchor="#+id/nav_view"
app:layout_anchorGravity="center"
app:maxImageSize="40dp" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>`
I have a complete solution for those who are looking for an answer.
Setup bottom_nav 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">
<item
android:id="#+id/homeFragment"
android:icon="#drawable/ic_home"
android:title="#string/home"
app:showAsAction="always" />
<item
android:id="#+id/shopFragment"
android:icon="#drawable/ic_shop"
app:showAsAction="always"
android:title="#string/shop"/>
// make the center icon have no title nor icon
<item
android:id="#+id/add"
app:showAsAction="always"
android:title=""/>
<item
android:id="#+id/notificationFragment"
android:icon="#drawable/ic_notification"
app:showAsAction="always"
android:title="#string/notification"/>
<item
android:id="#+id/profileFragment"
android:icon="#drawable/ic_profile"
app:showAsAction="always"
android:title="#string/profile"/>
</menu>
Using ConstraintLayout align you center button to its bottom
<?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.fragment.app.FragmentContainerView
android:id="#+id/main_navhost_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
app:defaultNavHost="true"
app:navGraph="#navigation/main_nav_graph"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/fl_bottom_nav"/>
<FrameLayout
android:id="#+id/fl_bottom_nav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:elevation="4dp"
app:labelVisibilityMode="selected"
app:menu="#menu/menu_main_bottom_nav"
app:layout_constraintBottom_toBottomOf="parent"/>
</FrameLayout>
<ImageView
android:id="#+id/iv_add_media"
android:layout_width="40dp"
android:layout_height="40dp"
android:src="#drawable/ic_baseline_add_circle_outline_24"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#id/fl_bottom_nav"/>
</androidx.constraintlayout.widget.ConstraintLayout>
The result is something like this.
Call iv_add_media's onclickListener in the activity
binding.ivAddMedia.setOnClickListener {
// you can navigate to any fragment in the nav_graph
// for my case I will open another activity
navController.navigate(R.id.mediaActivity)
}
If there is any better solution please let me know. Thanks
My Bottomnavigationbar has no animations when i tap items. I tried changing themes, colors etc. they still don't show up. I want the items to get bigger and show the titles. Normal bottomnavigationbar also has the same issue. Do i need to do this programmatically or is it supposed to animate the items when they are pressed?
BottomNavigation:
<?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:id="#+id/linearLayout4"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Main">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.fragment.app.FragmentContainerView
android:id="#+id/mainFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/btnm"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/toolbar" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/btnm"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/mainFragment"
app:menu="#menu/nav_menu" />
</androidx.constraintlayout.widget.ConstraintLayout>
Items:
<?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/settings"
android:title="Settings"
android:icon="#drawable/ic_settings_black_24dp" />
<item
android:id="#+id/pls"
android:icon="#drawable/ic_storage_black_24dp"
android:title="Plugins" />
<item
android:id="#+id/software"
android:icon="#drawable/ic_baseline_home_24"
android:title="Manage" />
<item
android:id="#+id/deletepls"
android:icon="#drawable/ic_delete_sweep_black_24dp"
android:title="Delete plugins" />
<item
android:id="#+id/consolepage"
android:icon="#drawable/ic_desktop_mac_black_24dp"
android:title="Console"/>
</menu>
how to add a text over the item of bottomnavigationview?
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNavigationView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#color/lightGray"
android:layoutDirection="rtl"
app:itemIconTint="#drawable/nav_color_selecton"
app:itemTextAppearanceActive="#style/bottom_navigation_textappreance"
app:itemTextAppearanceInactive="#style/bottom_navigation_textappreance"
app:itemTextColor="#drawable/nav_color_selecton"
app:menu="#menu/bottom_nav_menu"
android:elevation="0dp"
/>
in menu I add tooltipText for an item. but it doesn't show anything.
<?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/nav2"
android:icon="#drawable/ic_filter_list_green_24dp"
android:title="nav2"
/>
<item
android:id="#+id/nav1"
android:icon="#drawable/ic_baseline_more_horiz_24"
android:title="more"
android:tooltipText="123"
/>
</menu>
I want to have something like this:
picture of it
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>