I am having a bottom navigation view and I would want to hide it by showing a dummy view on top of it. In the relative layout, I am placing the dummy view on top of the bottom navigation view. But always the bottom navigation view shows on top. Why does the bottom navigation view does not follow layout hierarchy?
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<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/white"
android:theme="#style/BottomBar"
android:visibility="visible"
app:itemTextAppearanceActive="#style/BottomNavigationViewTextStyle"
app:itemTextAppearanceInactive="#style/BottomNavigationViewTextStyle"
app:labelVisibilityMode="labeled"
app:menu="#menu/bottom_navigation_menu" />
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:background="#color/black" />
</RelativeLayout>
I expect the View to be shown on top of the bottom navigation view(So that the bottom navigation view is invisible), but bottom navigation view always shown on top
Based on the following link https://material.io/components/bottom-navigation/android, the bottom navigation view has a default elevation of 8dp. Changing the elevation of dummy layout will fix the issue.
Related
I want to achieve something like this :
But when I am using this Bottom Navigation I am getting this, not able to replicate.
Both spacing and elevation are missing.
This is my Navigation view
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/nav_view"
android:layout_width="match_parent"
android:layout_height="68dp"
app:labelVisibilityMode="unlabeled"
android:background="#color/dark"
app:itemIconTint="#drawable/bottom_navigation_colors"
android:layout_alignParentBottom="true"
app:menu="#menu/bottom_nav_menu"
app:itemHorizontalTranslationEnabled="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:itemBackground="#drawable/bottom_navigation_colors"/>
Try removing the padding you specified in the Bottom Navigation Bar. Padding is used to specify the space/gap inside the container between its border and inside content. The padding attribute specified in the Navigation Bar may be pushing the menu items towards the center of the navigation bar. Removing the padding attribute should do the trick of evenly spacing the menu items across the navigation bar.
I'm using a tab layout and underneath a view pager to display the content of selected fragment.
On top of the layout there is the tab layout and underneath the view pager. Problem is: the view pager takes the height of the full screen and as a result (since it is constrained to the navigation tabs), its height goes out of the screen like so:
My xml:
<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=".activities.MeetActivity">
<com.google.android.material.tabs.TabLayout
android:id="#+id/navigationTabs"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#drawable/navigation_shadow"
app:layout_constraintTop_toTopOf="parent"
app:tabIndicator="#null"
app:tabMinWidth="#dimen/navigation_height"
app:tabRippleColor="#null" />
<!-- // the fragment will be displayed here:-->
<androidx.viewpager.widget.ViewPager
android:id="#+id/fragmentContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/navigationTabs"/>
Is there a way to constrain the view pager to the top of the navigation tabs and force its height to stay within the bounds of the screen? This might look insignificant but it causes widgets in the fragments to appear outside of the screen
the view pager takes the height of the full screen
In ViewPager onMeasure function,wrap_content is calculated as the container size (in this case, ConstaraintLayout).
Try this.
<androidx.viewpager.widget.ViewPager
android:id="#+id/fragmentContainer"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/navigationTabs" />
Here your view pager is taking height of the full screen. Please use
below code to show the view pager below your tab :
<androidx.viewpager.widget.ViewPager
android:id="#+id/fragmentContainer"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/navigationTabs" />
I have a CoordinatorLayout in which I have a BottomSheet and an ImageView.
This is my BottomSheett:
<include layout="#layout/bottom_sheet_layout"
android:id="#+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:behavior_hideable="false"
app:behavior_peekHeight="80dp"
app:layout_behavior="#string/bottom_sheet_behavior"/>
And this my ImageView:
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/image_location_crosshairs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="20dp"
android:layout_marginRight="20dp"
app:layout_anchorGravity="top|end"
app:layout_anchor="#id/bottom_sheet"
app:srcCompat="#drawable/my_svg_icon"/>
Regardless of the view order in my XML layout, I always get the same result: my ImageView is nicely anchored to the bottomsheet, but the anchor takes place at the center of my image.
I would like to know how can I have my image bottom being anchored instead of its center.
Trying to apply any kind of bottom margin will only have the bottomsheet slide until reaching center of image before making the image slides as well.
Thanks for the help !
You can create an empty View, with layout_height and layout_width set to wrap_content.
<View
android:id="#+id/view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
And then link this empty View to the BottomSheet.
Used : BottomNavigationViewEx
Want to align Text or add margin of Bottom Navigation Tab. Not able to find method which will push Text of Bottom bit on edge of bottom.
Layout :
<FrameLayout
android:id="#+id/bottomNavigationViewLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<com.application.ui.view.BottomNavigationViewEx
android:id="#+id/bottomNavigationView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/login_orange"
android:elevation="16dp"
android:minHeight="60dp"
app:itemIconTint="#color/bottom_nav_item_state"
app:itemTextColor="#color/bottom_nav_item_state"
app:menu="#menu/bottom_nav_menu" />
</FrameLayout>
Tried :
Setting Icon Margin but it doesn't push text.
Need :
Align Text to Bottom or atleast add margin from Icon
I'm trying to use the support library's BottomSheetDialogFragment to replicate the standard sheet that shows when you tap a Share button (see below). How would I achieve a similar layout, where there's a title at the top, independently scrollable content in the center, but an bottom anchored view with buttons that always stay on top.
You need to build a custom layout for the bottomSheet, for example share_bottom.xml. Within that layout you could
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/bottomSheet"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="#string/bottom_sheet_behavior"
app:behavior_hideable="true"
app:behavior_peekHeight="200dp">
<TextView
android:layout_width="match_parent"
android:text="header"
android:layout_height="wrap_content"/>
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"/>
<LinearLayout
android:layout_weight="0"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
And then include it at he bottom of your fragment's layout:
After that you can control the visibility of this sheet
//retrieve the bottomsheet
bottomSheet = (LinearLayout) findViewById(R.id.bottomSheet);
//get the behaviour controller
bsb = BottomSheetBehavior.from(bottomSheet);
//hide the sheet
bsb.setState(BottomSheetBehavior.STATE_HIDDEN);
//showthe sheet
bsb.setState(BottomSheetBehavior.STATE_EXPANDED);
I was also having the same problem. I solved using these steps.
Make FrameLayout as your root layout.
Include the view to be anchored as second child and first child should contain all the content of activity.
Animate the second child to be visible when bottom sheet is expanded and make it invisible when bottom sheet is collapsed.
The independently scrolling content inside bottom sheet can be acheived by using a scroll view or nested scroll view inside bottom sheet.
To dim background refer this link
This is just a workaround. Basically what I did is replicate the persistent bottom sheet to behave like modal sheet.