How can I get the elevation for BottomAppBar. I think by default it has elevation as 8dp but I'm not getting any elevation.
Here's my 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"
tools:context=".MainActivity">
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bottom_bar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
style="#style/Widget.MaterialComponents.BottomAppBar" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="#id/bottom_bar"
android:src="#android:drawable/ic_input_add"
android:tint="#color/colorPrimary"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Part of the problem is the way the lighting system works on Android. There is a light source from the top and a light source directly in the middle. This means shadows are generally not visible on top of Views.
We have a bug to fake the shadow for the BottomAppBar, but it's not as trivial as BottomNavigation for instance because the fab can move and change shape, so the shadow should change as well.
Related
I'm using Material FAB and BottomSheet in my Android App and i'm having some issues with the FAB which is overlaying the BottomSheet and i would prevent it.
Actually i have two BottomSheets when the BottomSheet1 is completly expanded i would the FAB to be behind the BottomSheet while when the BottomSheet2 is HalfExpanded i would it to be over the BottomSheet and make it behind it when it's fully expanded.
I've yet tried to make the BottomSheet elevation highter than the FAB one but it's not working any way.
Here is how my code looks like:
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/content"
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=".LetturaActivity">
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bottomAppBar"
style="#style/Widget.MaterialComponents.BottomAppBar.Colored"
android:layout_gravity="bottom"
app:navigationIcon="#drawable/ic_baseline_menu_24"
app:menu="#menu/bottom_app_bar"
app:hideOnScroll="true"
android:layout_width="match_parent"
android:layout_height="wrap_content" \>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fabNuovo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#drawable/ic_add"
android:elevation="4dp"
app:tint="#color/white"
android:contentDescription="#string/nuovo_documento"
app:layout_anchor="#id/bottomAppBar"
/>
<include layout="#layout/bottom_sheet_testata" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
And the BottomSheet parent layout is the following:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/bottomSheetTestata"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
app:behavior_hideable="true"
android:elevation="5dp"
android:clickable="false"
android:focusable="false"
app:behavior_peekHeight="0dp"
app:layout_behavior="#string/bottom_sheet_behavior"
android:orientation="vertical">
...
<\LinearLayout>
But it looks like this when BottomSheet is expanded:
Is not overlapping is overlaying, the problem is the elevation.
From the documentation you can see all elements have different elevations.
Fab is 6dp, although the BottomSheet is not easy to find is there, it should be 16dp (you can use your browser functionality for the keyword bottom)
So change your elevation to
android:elevation="16dp"
I'm building an app and when I load the view with the BottomNavigationView, I have odd issues all the time, sometimes, I have an extra space and other times, the toolbar is wrongly located, for example:
With bottom navigation:
Without bottom navigation:
This is my code for the 1st image:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#android:color/white"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
layout="#menu/toolbar_recipe" />
<FrameLayout
android:id="#+id/content_frame"
android:layout_height="0dp"
android:layout_weight="1"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent" />
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:menu="#menu/bottom_nav_menu"
app:labelVisibilityMode="unlabeled"
app:itemBackground="#color/colorPrimary"
app:itemIconTint="#color/bottom_nav_color"
app:itemTextColor="#color/bottom_nav_color" />
</LinearLayout>
</RelativeLayout>
Toolbar:
<?xml version="1.0" encoding="UTF-8" ?>
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar_recipe"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:theme="#style/ToolBarStyle"
android:minHeight="?android:attr/actionBarSize"
android:background="#color/colorPrimary"/>
And this is how it behaves with the CoordinatorLayout, after I set the paddingTop as ?attr/actionBarSize the FrameLayout moved some space, but it's still wrongly located.
With CoordinatorLayout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#android:color/white"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:layout_above="#+id/bottom_navigation">
<include
layout="#menu/toolbar_recipe" />
<FrameLayout
android:id="#+id/content_frame"
android:paddingTop="?attr/actionBarSize"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:menu="#menu/bottom_nav_menu"
app:labelVisibilityMode="unlabeled"
app:itemBackground="#color/colorPrimary"
app:itemIconTint="#color/bottom_nav_color"
app:itemTextColor="#color/bottom_nav_color" />
</RelativeLayout>
Without that addition, it just stays behind. I'm working in Android 8+, but I don't think it's the issue and I'm out of ideas how to coordinate that situation. Has anyone experienced it?
Thanks for any comment, especially of why it's happening since I cannot understand it.
I found the answer based on this line:
android:fitsSystemWindows="true"
I needed to add it to the root element more or less like this:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#android:color/white"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:layout_height="match_parent">
And here is a description of the property:
System windows are the parts of the screen where the system is drawing
either non-interactive (in the case of the status bar) or interactive
(in the case of the navigation bar) content.
Most of the time, your app won’t need to draw under the status bar or
the navigation bar, but if you do: you need to make sure interactive
elements (like buttons) aren’t hidden underneath them. That’s what the
default behavior of the android:fitsSystemWindows="true" attribute
gives you: it sets the padding of the View to ensure the contents
don’t overlay the system windows.
I found it here:
Why would I want to fitsSystemWindows?
I want to hide my bottom bar on scroll but a FAB should stay on the screen.
If I put the FAB on top of BottomNavigationView using anchors but it appears behind it.
If I put layout_insetEdge="bottom" to the BottomNavigationView then it works but make my tests fail (https://issuetracker.google.com/issues/70162122) so I cannot use that at the moment.
Layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.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:id="#+id/mainLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".screens.main.MainActivity">
<FrameLayout
android:id="#+id/mainContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/scrolling_view_behaviour" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/mainNewQuestionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/spacing_8dp"
app:layout_anchor="#+id/mainBottomNavigationView"
app:layout_anchorGravity="top|right|end"
app:srcCompat="#drawable/create_question"
tools:visibility="visible" />
<android.support.design.widget.BottomNavigationView
android:id="#+id/mainBottomNavigationView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:itemBackground="#color/my_gray"
app:itemIconTint="#drawable/selector_bottombar_item"
app:itemTextColor="#drawable/selector_bottombar_item"
app:layout_anchor="#id/mainContainer"
app:layout_anchorGravity="bottom"
app:layout_behavior="#string/hide_bottom_navigation_view_behaviour"
app:menu="#menu/bottom_navigation_main" />
</android.support.design.widget.CoordinatorLayout>
Just use:
<androidx.coordinatorlayout.widget.CoordinatorLayout>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_gravity="bottom"
.../>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:layout_gravity="top"
app:layout_anchor="#id/bottom_navigation"
app:layout_anchorGravity="top|end"
/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
You seem to be having a Z-Ordering issue here.
You could try the fab.bringToFront() followed by fab.invalidate() for api's below 21, and ViewCompat.setZ(fab, someFloat) for api's above 21.
I used these methods to bring a custom FloatingActionMenu, consisting of a series of FAB's I wrote for a project, to the front so they would overlap everything on the screen.
Problem : Trying to achieve Toolbar with arched bottom. The content when scrolling should go through this arc space.
Only thing I could think of (as well as tried) is to set the background of toolbar with a drawable which has arch. Lookwise it solves things. But then when the content is scrolled up, the white space in the arch remain, since Toolbar maintains it's rectangle shape.
I'm also trying to avoid using custom shapes instead of Toolbar because this toolbar is part of a Collapsibletoolbarlayout and Appbarlayout controlled by Coordinator layout.
Any suggestions ?
This can be done fairly easily.
<android.support.design.widget.CoordinatorLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#0000"
app:elevation="0dp">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
app:layout_collapseMode="pin"/>
<!--Other collapsing toolbar components here-->
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<!--Your content here-->
</android.support.v4.widget.NestedScrollView>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/curve"
app:layout_anchor="#id/appBar"
app:layout_anchorGravity="bottom"
android:layout_gravity="bottom"/>
</android.support.design.widget.CoordinatorLayout>
The FrameLayout anchored to the bottom of the AppBarLayout acts as the container for the arch. I created a vector drawable that I used as the background for the FrameLayout
curve.xml
<vector android:width="100dp"
android:height="40dp"
android:viewportHeight="50"
android:viewportWidth="400"
xmlns:android="http://schemas.android.com/apk/res/android">
<path
android:pathData="M0,0L400,0L400,50Q200,-50,0,50L0,0"
android:fillColor="#color/colorPrimary"/>
</vector>
Change the android:height property of the drawable to control how high you want the arch to go
Output
The elevation on my BottomNavigationView isn't woking, when I start my app all the other UI components get their specific elevation but the BottomNavigationView.
Here's the XML:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/main_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/bottom_navigation"
android:layout_alignParentTop="true">
</FrameLayout>
<android.support.design.widget.BottomNavigationView
android:elevation="8dp"
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:itemBackground="#color/white"
app:itemIconTint="#drawable/nav_item_color_state"
app:itemTextColor="#drawable/nav_item_color_state"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
What can I do?
Note: no color is transparent.
You should use the namespace xmlns:app="http://schemas.android.com/apk/res-auto" and use the app:elevation = "8dp" instead of android:elevation="8dp"
Shadow is drawn downwards (from the bottom of the view), you can see that android:elevation="8dp" is applied if you try to show Snackbar, you won't be able to see it.
If you want to add shadow that will be shown from the top of the BottomNavigationView you need to draw it manually.