I've been trying to get a BottonNavigationView working. It just keeps sticking to the top of the layout and it's driving me nuts.
I've looked at Material Design Documentation for BottomNavigationView and it seems really simple, but I can't get it to work, https://material.io/develop/android/components/bottom-navigation/. I even tried making a completely clean project where I tried it and the same thing happened.
<?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="wrap_content"
android:orientation="vertical"
tools:context=".MainActivity"
android:id="#+id/mainLayout">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNavigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
app:menu="#menu/bottom_bar_menu" />
</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/content"
android:enabled="true"
android:icon="#drawable/ic_menu_black_24dp"
android:title="Content"/>
<item
android:id="#+id/document"
android:enabled="true"
android:icon="#drawable/ic_picture_as_pdf_black_24dp"
android:title="Document"/>
<item
android:id="#+id/search"
android:enabled="true"
android:icon="#drawable/ic_search_black_24dp"
android:title="Search"/>
</menu>
Screenshot
Any ideas?
The gravity of your bottom navigation is set to start android:layout_gravity="start" changing it to android:layout_gravity="bottom" should work for you.
I would like to recommend to use ConstraintLayout and set constraints in Designer tool. Will be easier if you are new in android world.
<?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:id="#+id/mainLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNavigation"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:menu="#menu/bottom_bar_menu" />
</androidx.constraintlayout.widget.ConstraintLayout>
Related
I'm trying to implement a bottomr navigation bar for an app.
I'm using the BottomNavigationView
I was following the explanation from a youtube video step by step yet when getting to that part, when adding the menu in it doesnt even display in the activity main
I have not found an answer to a similar problem anywhere else, and im hoping its something im just missing as codes are almost identical to the explanations
This is my activity main
<?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"
tools:context=".MainActivity">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bnv"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#d6ecef"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEndtoEndof="parent"
app:layout_constraintStart_toStartOf="parent"
app:labelVisibilityMode="labeled"
app:menu="#menu/m_1"/>
<androidx.fragment.app.FragmentContainerView
android:id="#+id/fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="409dp"
android:layout_height="673dp"
app:defaultNavHost="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintEndtoEndof="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:navGraph="#navigation/my_nav"
tools:ignore="MissingConstraints" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
This is linked from my menu class, which have ids linked to my fragments in a nav graph
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/firstFragment"
android:icon="#drawable/ic_baseline_home_24"
android:title="Home"></item>
<item
android:id="#+id/secondFragment"
android:icon="#drawable/ic_baseline_directions_bus_24"
android:title="Bus"></item>
<item
android:id="#+id/frag3"
android:icon="#drawable/ic_baseline_settings_24"
android:title="Settings"></item>
</menu>
I struggled with your code for about half an hour. The main problem is choosing a theme.
Change the theme to "Theme.AppCompat.Light.NoActionBar" The problem is solved
I am trying to add a bottom navigation menu for the application i am trying to make, I followed every step of the video and the bottom nav menu still not showing up. Can someone help me?
Dashboard 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="Dashboard.Dashboard">
<androidx.fragment.app.FragmentContainerView
android:id="#+id/fragmentContainerView"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
app:defaultNavHost="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:navGraph="#navigation/bottom_nav" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_nav_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:menu="#menu/bottom_nav_menu"/>
</androidx.constraintlayout.widget.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/feedFragment"
android:title="#string/home"
android:icon="#drawable/home_icon"/>
<item
android:id="#+id/searchFragment"
android:title="#string/search"
android:icon="#drawable/search_icon"/>
<item
android:id="#+id/postFragment"
android:title="#string/add"
android:icon="#drawable/add_post"/>
<item
android:id="#+id/notificationFragment"
android:title="#string/notification"
android:icon="#drawable/notification_icon"/>
<item
android:id="#+id/profileFragment"
android:title="#string/profile"
android:icon="#drawable/person_icon"/>
</menu>
never mind, I got it work somehow. Everything was working perfectly. I just needed to add a library before I use the bottom navigation bar.
This library in your build.grandle
implementation 'androidx.navigation:navigation-fragment:2.4.1'
implementation 'androidx.navigation:navigation-ui:2.4.1'
I'm using Android support design widget BottomNavigationView for making my bottom navigation items. It doesn't show the icons, but it shows text and is working fine. I am using the support library version com.google.android.material:material:1.4.0 and my XML code for bottomnavigationView is:
<?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"
android:background="#color/white"
tools:context=".MainActivity">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#drawable/gradient_bg"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/_30sdp">
<ImageView
android:layout_width="#dimen/_55sdp"
android:layout_height="#dimen/_35sdp"
android:src="#drawable/logo1" />
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/_54sdp"
android:gravity="center"
android:text=""
android:textColor="#color/white"
android:textSize="#dimen/_12sdp" />
</androidx.appcompat.widget.Toolbar>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/layout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/toolbar" />
<LinearLayout
android:id="#+id/layout"
android:layout_width="match_parent"
android:layout_height="#dimen/_45sdp"
android:layout_weight="0.90"
android:background="#color/app_col1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
android:gravity="center"
android:orientation="vertical">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_nav_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/app_col1"
app:itemIconTint="#color/white"
app:labelVisibilityMode="labeled"
android:layout_gravity="center"
android:theme="#style/Theme.App"
app:itemTextColor="#drawable/tab_color"
app:menu="#menu/bottom_navigation_menu"/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
My menu XML code is below
<?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/page_1"
android:enabled="true"
android:iconTint="#drawable/ic_baseline_home_24"
app:showAsAction="ifRoom"
android:title="Home"/>
<item
android:id="#+id/page_2"
android:iconTint="#drawable/ic_baseline_home_24"
app:showAsAction="withText"
android:title="Category"/>
<item
android:id="#+id/page_3"
app:showAsAction="ifRoom"
android:iconTint="#drawable/user"
android:title="Profile"/>
</menu>
How can I solve this issue?
In your activity layout add the following code.
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/btmMenu"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
app:itemIconSize="#dimen/bottom_navigation_icon_size"
app:labelVisibilityMode="labeled"
android:background="#color/white_color"
app:menu="#menu/menu"
app:elevation="0dp"></com.google.android.material.bottomnavigation.BottomNavigationView>
Create a menu.xml file and add the below code.
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/Home"
android:title="Home"
android:icon="#drawable/home_selector"/>
<item
android:id="#+id/Statistics"
android:title="Statistics"
android:icon="#drawable/statitics_selector"/>
<item
android:id="#+id/Analytics"
android:title="Analytics"
android:icon="#drawable/analytics_selector"/>
<item
android:id="#+id/Profile"
android:title="Profile"
android:icon="#drawable/profile_selector"/>
</menu>
I don't know why fragment is not working. I am creating bottom navigation. My code is here. Please solve my problem.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/draw">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bot_nav_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="0dp"
android:layout_marginEnd="0dp"
android:background="?android:attr/windowBackground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="#menu/bottom_navigation_menu" />
This is the fragment part. Please solve my problem. The app is not working.
This is the fragment part. Please solve my problem. The app is not working.
<fragment
android:id="#+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:defaultNavHost="true"
app:layout_constraintBottom_toTopOf="#id/bot_nav_view"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:navGraph="#navigation/bot_navigation"
/>
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="MissingConstraints">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:fitsSystemWindows="false"
app:popupTheme="#style/AppTheme.AppBarOverlay." />
</com.google.android.material.appbar.AppBarLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
This is the bot_navigation.xml code. Please check it also.
<?xml version="1.0" encoding="utf-8"?>
<navigation 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/bot_navigation"
tools:ignore="UnusedNavigation">
<fragment
android:id="#+id/navigation_feed"
android:name="com.example.reducestress.ui.feed.feed"
android:label="#string/title_feed"
tools:layout="#layout/feed_fragment" />
<fragment
android:id="#+id/navigation_diary"
android:name="com.example.reducestress.ui.diary.diary"
android:label="#string/title_diary"
tools:layout="#layout/diary_fragment" />
<fragment
android:id="#+id/navigation_profile"
android:name="com.example.reducestress.ui.profile.profile"
android:label="#string/title_profile"
tools:layout="#layout/profile_fragment" />
</navigation>
With the new JetPack Navigation, you need to add the fragments you want to show to your NavGraph. You can find your NavGraph under the navigation directory from the res directory. In your case, your NavGraph is bot_navigation.xml.
If you don't see the fragment you want to show, once you are inside your NavGraph, there will be this icon
Click it and you will see a list of the available fragments and activities. Just click the one you want.
If your fragments are already placed, make sure the id's match with the id's in your bottom_navigation_menu.xml. Also, make sure that in your host activity you are setting up the Navigation with the right NavController and with the right BottomNavigationView.
Let me know if it helped.
try to change <fragment to <FrameLayout its work for me when i use FrameLayout
and turn black when i change it to <fragment
You forgot in navigation app: startDestination = "# id / navigation_feed instead of navigation_feed put the fragment that should be launched first and i think you should remove unusedNavigation
The code that should look like:
<?xml version="1.0" encoding="utf-8"?>
<navigation 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/bot_navigation"
app:startDestination="#id/navigation_feed">
...
</navigation>
I have created a persistent bottom sheet in android with the intent of displaying a ListView containing additional information about locations. I want the sheet to have rounded corners. I got a ton of results for modal dialog but none for persistent. Is it possible or should I use the modal version?
As suggested in an answer here, I tried wrapping it in a card view but the app crashes when I try to open the fragment.
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
tools:context=".fragments.MapFragment">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
app:cardCornerRadius="20dp">
<fragment
android:id="#+id/autocomplete_fragment"
android:name="com.google.android.libraries.places.widget.AutocompleteSupportFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:layout="#layout/places_autocomplete_item_powered_by_google" />
</androidx.cardview.widget.CardView>
<com.google.android.gms.maps.MapView
android:id="#+id/mapView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="450dp"
app:cardCornerRadius="24dp"
app:cardElevation="8dp"
app:layout_behavior="#string/bottom_sheet_behavior"
app:behavior_hideable="true"
app:behavior_peekHeight="55dp">
<androidx.core.widget.NestedScrollView
android:id="#+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/tvBottomSheet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/placeholder_text"
android:textColor="#color/colorCommon_BLACK"
android:textSize="37sp" />
</androidx.core.widget.NestedScrollView>
</androidx.cardview.widget.CardView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
With the new Material Component library you can customize the shape of your component using the shapeAppearanceOverlay attribute.
You can use something like:
<!-- BottomSheet -->
<style name="CustomBottomSheet" parent="Widget.MaterialComponents.BottomSheet">
<item name="shapeAppearanceOverlay">#style/CustomShapeAppearanceOverlay.MaterialComponents.BottomSheet</item>
....
</style>
<style name="CustomShapeAppearanceOverlay.MaterialComponents.BottomSheet" parent="">
<item name="cornerSizeTopRight">16dp</item>
<item name="cornerSizeTopLeft">16dp</item>
<item name="cornerSizeBottomRight">0dp</item>
<item name="cornerSizeBottomLeft">0dp</item>
</style>
Then you can apply this style to your single component or your theme app.
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light">
...
<item name="bottomSheetStyle">#style/CustomBottomSheet</item>
</style>
If you are using a non-modal bottom sheet just apply the style. For example:
<LinearLayout
android:id="#+id/standardBottomSheet"
app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior"
style="?attr/bottomSheetStyle"
...>
U can add shape for you bottom sheet background background
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/you_color"/>
<corners
android:bottomRightRadius="2dp"
android:bottomLeftRadius="2dp"
android:topLeftRadius="2dp"
android:topRightRadius="2dp"/>
</shape>
You could also use the app:shapeAppearance attribute:
Create a ShapeAppearance in styles.xml:
<resources>
...
<style name="BottomSheetShapeAppearance">
<item name="cornerFamily">rounded</item>
<item name="cornerSizeTopLeft">16dp</item>
<item name="cornerSizeTopRight">16dp</item>
</style>
</resources>
Set the app:shapeAppearance attribute on the BottomSheet component:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
style="#style/Widget.MaterialComponents.BottomSheet"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior"
app:shapeAppearance="#style/BottomSheetShapeAppearance">
...
</LinearLayout>
Here's how it looks:
More info: https://material.io/develop/android/theming/shape
You can wrap your sheet layout with a card view to have rounded corners.
<?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">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="450dp"
app:layout_behavior="#string/bottom_sheet_behavior"
app:cardCornerRadius="24dp"
app:cardElevation="8dp"
app:behavior_hideable="true"
app:behavior_peekHeight="55dp">
<androidx.core.widget.NestedScrollView
android:id="#+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/tvBottomSheet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="ABC"
android:textSize="37sp" />
</androidx.core.widget.NestedScrollView>
</androidx.cardview.widget.CardView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>