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>
Related
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 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>
I want imitate the menu as saw in picture.
Tried by using compile 'com.github.armcha:SpaceNavigationView:1.6.0' but is old and don't wanna change all entire code of my default activity with bottom navigation view.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".activities.MainActivity">
<include
layout="#layout/content_main"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/nav_view"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
/>
<!-- app:layout_constraintTop_toBottomOf="#+id/appBarLayout"-->
<android.support.design.widget.BottomNavigationView
android:id="#+id/nav_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:layout_marginEnd="5dp"
android:layout_marginBottom="5dp"
android:background="#drawable/rett_arr_blu"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="#menu/bottom_nav_menu"
app:labelVisibilityMode="unlabeled"
/>
</android.support.constraint.ConstraintLayout>
bottom_nav_menu.xml
<?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_black_24dp"
android:iconTint="#android:color/white"
android:title="#string/title_home" />
<item
android:id="#+id/navigation_news"
android:icon="#drawable/ic_notifications_black_24dp"
android:title="#string/title_news" />
<item
android:id="#+id/navigation_mappa"
android:icon="#drawable/ic_map_black_24dp"
android:title="#string/title_mappa" />
<item
android:id="#+id/navigation_convenzioni"
android:icon="#drawable/ic_convention"
android:title="#string/title_convenzioni" />
<item
android:id="#+id/navigation_altro"
android:icon="#drawable/ic_altro"
android:iconTint="#android:color/white"
android:title="#string/title_altro" />
</menu>
Result must be as picture in this repository: armcha/Space-Navigation-View. Search by google and find it...
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=""
/>