I'm trying to create a layout with an FAB on top of the bottom navigation menu, but the menu always stays above the button. :(
My layout.xml
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/container"
tools:context="com.example.mytest.money.MainActivity">
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view"
android:layout_width="match_parent"
android:layout_margin="10dp"
android:layout_height="110dp"
android:padding="15dp"
card_view:cardElevation="2dp"
card_view:cardCornerRadius="4dp">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Test" />
</android.support.v7.widget.CardView>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/bottom_navigation"
android:layout_alignParentTop="true"
android:foreground="#color/colorBackground">
</ScrollView>
<com.aurelhubert.ahbottomnavigation.AHBottomNavigation
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:selectedBackgroundVisible="false"
android:layout_gravity="bottom" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/create_gain_expense"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center"
android:layout_margin="15dp"
android:layout_above="#id/bottom_navigation"
android:src="#drawable/ic_add_white_24dp"
app:fabSize="normal" />
</android.support.design.widget.CoordinatorLayout>
What I expect:
Expectation
What I got:
Reality
What can I do to change this? :D
I guess the problem is, AHBottomNavigation has higher elevation than FloatingActionButton that's why its showing above the FloatingActionButton.
FloatingActionButton has default 6dp elevation and the default elevation of AHBottomNavigation is 8dp(From AHBottomNavigation source)
Try setting more higher elevation to FloatingActionButton:
<android.support.design.widget.FloatingActionButton
android:id="#+id/create_gain_expense"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center"
android:layout_margin="15dp"
android:layout_above="#id/bottom_navigation"
android:src="#drawable/ic_add_white_24dp"
app:fabSize="normal"
app:elevation="12dp"
app:borderWidth="0dp" />
#. You can also use android.support.design.widget.BottomNavigationView instead of AHBottomNavigation.
Below is an Orthographic view of app structure:
See documentation.
Hope this will help~
Try this code :
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/container">
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view"
android:layout_width="match_parent"
android:layout_margin="10dp"
android:layout_height="110dp"
android:padding="15dp"
card_view:cardElevation="2dp"
card_view:cardCornerRadius="4dp">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Test" />
</android.support.v7.widget.CardView>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/bottom_navigation"
android:layout_alignParentTop="true"
android:foreground="#color/white">
</ScrollView>
<android.support.design.widget.BottomNavigationView
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_weight="1"
android:layout_gravity="bottom"
android:background="#color/green"
app:itemIconTint="#color/white"
app:itemTextColor="#color/white"
android:id="#+id/bottomnav"
app:menu="#menu/main">
</android.support.design.widget.BottomNavigationView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/create_gain_expense"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center"
android:layout_margin="15dp"
android:layout_above="#id/bottom_navigation"
android:src="#drawable/ic_add_black_24dp"
app:fabSize="normal"
app:elevation="12dp"
app:borderWidth="0dp" />
</android.support.design.widget.CoordinatorLayout>
You can replace this bottom navigation bar with your own.
Related
The code on floating action menu is working but other floating action buttons are not displayed. I have a Google Map and a recyclerview below the map. It seems that the map is covering the other floating action buttons. Below is the code for the floating action button. I followed a youtube video for it.
<android.support.design.widget.CoordinatorLayout android:id="#+id/profilenav"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MapView"
background="#FFF9C4"
android:orientation="vertical"
android:gravity="center"
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">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center">
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MapviewPage"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:id="#+id/mapview"
android:layout_width="match_parent"
android:layout_height="350dp"/>
<view class="android.support.v7.app.AlertController$RecycleListView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical"
android:visibility="visible">
</view>
</LinearLayout>
</ScrollView>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_marginRight="#dimen/fab_margin_right"
android:layout_marginBottom="16dp"
android:src="#drawable/menu"
android:elevation="6dp"
android:id="#+id/fab_nav"
app:pressedTranslationZ="12dp"
android:backgroundTint="#color/fab1_color"/>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_marginRight="#dimen/fab_margin_right"
android:layout_marginBottom="100dp"
android:src="#drawable/settings"
android:elevation="6dp"
android:id="#+id/fab_settings"
app:pressedTranslationZ="12dp"
android:backgroundTint="#color/fab2_color"
android:visibility="invisible"/>
</android.support.design.widget.CoordinatorLayout>
The buttons should overlay on the Google Map and the recyclerview.
You have to add two more line in floating button.
<android.support.design.widget.CoordinatorLayout android:id="#+id/profilenav"
android:layout_width="match_parent"
android:layout_height="match_parent"
background="#FFF9C4"
android:orientation="vertical"
android:gravity="center"
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">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/test"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center">
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:map="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="350dp"
tools:context=".view.activities.TestMap" />
<view class="android.support.v7.app.AlertController$RecycleListView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
android:visibility="visible">
</view>
</LinearLayout>
</ScrollView>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_marginRight="#dimen/fab_margin_right"
android:layout_marginBottom="16dp"
android:src="#drawable/ic_check_circle_black_24dp"
android:elevation="6dp"
android:id="#+id/fab_nav"
app:pressedTranslationZ="12dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:backgroundTint="#color/color_type_help"/>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_marginRight="#dimen/fab_margin_right"
android:layout_marginBottom="100dp"
android:src="#drawable/logo"
android:elevation="6dp"
android:id="#+id/fab_settings"
app:pressedTranslationZ="12dp"
app:layout_anchor="#id/test"
app:layout_anchorGravity="bottom|right|end"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:backgroundTint="#color/translucent"
android:visibility="visible"/>
</android.support.design.widget.CoordinatorLayout>
three line add this in floating button.
app:layout_anchor="#id/test"
app:layout_anchorGravity="bottom|right|end"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
I want to have two FloatingActionButtons in my CoordinatorView. But when I try to add margin to the top FloatingActionButton, It applies from end of the view - It should add space between FloatingActionButtons.
XML
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/main_content"
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">
<android.support.design.widget.FloatingActionButton
android:id="#+id/wordpackAddButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
android:src="#drawable/add"
app:elevation="5dp"
app:layout_anchor="#id/wordpacks_list"
app:layout_anchorGravity="bottom|right|end" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/importWordpack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginBottom="16dp"
android:src="#drawable/add"
app:elevation="5dp"
app:layout_anchor="#id/wordpackAddButton"
app:layout_anchorGravity="top" />
<ListView
android:id="#+id/wordpacks_list"
android:layout_width="match_parent"
android:layout_height="match_parent"></ListView>
</android.support.design.widget.CoordinatorLayout>
SOLUTION 1:
Add another View to make a gap between two FAB's. Set the anchor of View to top position of the wordpackAddButton and set the anchor of importWordpack to top-right position of the View.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/main_content"
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">
<ListView
android:id="#+id/wordpacks_list"
android:layout_width="match_parent"
android:layout_height="match_parent">
</ListView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/wordpackAddButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
android:src="#drawable/add"
app:elevation="5dp"
app:layout_anchor="#id/wordpacks_list"
app:layout_anchorGravity="bottom|right|end" />
<View
android:id="#+id/gap"
android:layout_width="16dp"
android:layout_height="16dp"
app:layout_anchor="#id/wordpackAddButton"
app:layout_anchorGravity="top">
</View>
<android.support.design.widget.FloatingActionButton
android:id="#+id/importWordpack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:src="#drawable/add"
app:elevation="5dp"
app:layout_anchor="#id/gap"
app:layout_anchorGravity="top|center" />
</android.support.design.widget.CoordinatorLayout>
SOLUTION 2:
Wrap two FAB into a LinearLayout and anchor this layout to the bottom-right position of ListView.
Here is an workaround:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/main_content"
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">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_anchor="#id/wordpacks_list"
app:layout_anchorGravity="bottom|right|end"
android:layout_margin="16dp"
android:background="#android:color/transparent"
android:clipToPadding="false">
<android.support.design.widget.FloatingActionButton
android:id="#+id/importWordpack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:src="#drawable/add"
app:elevation="5dp" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/wordpackAddButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="16dp"
android:src="#drawable/add"
app:elevation="5dp" />
</LinearLayout>
<ListView
android:id="#+id/wordpacks_list"
android:layout_width="match_parent"
android:layout_height="match_parent">
</ListView>
</android.support.design.widget.CoordinatorLayout>
OUTPUT:
Add this view after Fab button and change top level fab's
layout_anchor to transparent_view.
<View
android:layout_width="8dp"
app:layout_anchor="#id/wordpackAddButton"
app:layout_anchorGravity="top"
app:useCompatPadding="false"
android:layout_gravity="end"
android:background="#android:color/transparent"
android:id="#+id/transparent_view"
android:layout_height="8dp"/>
Hope it helps.
I have faced a similar problem while implementing a FAB Menu.
You can solve this problem by wrapping the second FAB in a FrameLayout like so:
<android.support.design.widget.FloatingActionButton
android:id="#+id/wordpackAddButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
app:elevation="5dp"
app:layout_anchorGravity="bottom|right|end" />
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="56dp"
app:layout_anchor="#id/wordpackAddButton"
app:layout_anchorGravity="top|right">
<android.support.design.widget.FloatingActionButton
android:id="#+id/importWordpack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_margin="16dp"
app:elevation="5dp"
app:layout_anchor="#id/wordpackAddButton" />
</FrameLayout>
This might be a bit of a hacky solution but it is simple and it works. The padding value of the FrameLayout is set to 56dp since that is the size of the FAB.
How do you add margin between a bottom sheet and a Floating Action Button in android. I made it working by using another FAB and making it invisible but the FAB is only just above the Bottom Sheet. See this picture : 1
And the code :
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinator"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:theme="#style/Theme.AppCompat.NoActionBar"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<RelativeLayout
android:id="#+id/search_relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="#style/Theme.AppCompat.NoActionBar">
<com.google.android.gms.maps.MapView
android:id="#+id/mapView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="#android:color/white"
android:elevation="1dp"
app:behavior_hideable="true"
app:behavior_peekHeight="0dp"
app:layout_behavior="#string/bottom_sheet_behavior">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/circle_picture"
android:src="#mipmap/login_background"
android:layout_margin="10dp"
android:layout_width="50dp"
android:layout_height="50dp" />
<TextView
android:id="#+id/name_bottom_sheet"
android:layout_toEndOf="#id/circle_picture"
android:text="Title"
android:textColor="#color/buttonLoginColor"
android:layout_margin="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/address_bottom_sheet"
android:layout_below="#id/name_bottom_sheet"
android:layout_toEndOf="#id/circle_picture"
android:layout_marginStart="10dp"
android:textColor="#color/btn_create"
android:text=""
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="invisible"
android:layout_margin="15dp"
app:layout_anchor="#id/bottom_sheet"
app:layout_anchorGravity="top|end"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/floatingButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="50dp"
android:layout_marginEnd="15dp"
app:backgroundTint="#color/buttonLoginColor"
app:borderWidth="0dp"
app:elevation="6dp"
app:layout_anchor="#id/fab2"
app:layout_anchorGravity="top"/>
</android.support.design.widget.CoordinatorLayout>
I'm using a NestedScrollView to display the bottom sheet.
I had the same issue. After hours of researching I figured out it can't be made through layout_anchor because of Material design guidelines. You need to use trick like one below. I'm using a transparent view that makes margin between fab and bottom sheet content view.
This is how I solved the issue:
FAB itself:
<android.support.design.widget.FloatingActionButton
...
app:layout_anchor="#+id/bottomPanel"
app:layout_anchorGravity="right"/>
BottomSheet:
<FrameLayout
android:id="#+id/bottomPanel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:backgound="#android:color/transparent"
app:layout_behavior="#string/bottom_sheet_behavior">
<ContentView
android:layout_width="match_parent"
android:layout_height="300dp"
android:layout_marginTop="44dp"
android:backgound="#color/colorPrimary" />
</FrameLayout>
Just make the root view transparent and your content view put inside that and add margin of 44dp (fab size = 56dp. fab padding = 16dp. 56/2 + 16 = 44)
Yes, you can try with RelativeLayout , I'm still not able to understand why you have gave bottom sheet fixed height with 300dp, anyway this will do it without another fab button..
<RelativeLayout
android:id="#+id/coordinator"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:theme="#style/Theme.AppCompat.NoActionBar"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<RelativeLayout
android:id="#+id/search_relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="#style/Theme.AppCompat.NoActionBar">
<com.google.android.gms.maps.MapView
android:id="#+id/mapView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="300dp"
android:layout_alignParentBottom="true"
android:background="#android:color/white"
android:elevation="1dp"
app:behavior_hideable="true"
app:behavior_peekHeight="0dp"
app:layout_behavior="#string/bottom_sheet_behavior">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/circle_picture"
android:src="#mipmap/login_background"
android:layout_margin="10dp"
android:layout_width="50dp"
android:layout_height="50dp" />
<TextView
android:id="#+id/name_bottom_sheet"
android:layout_toEndOf="#id/circle_picture"
android:text="Title"
android:textColor="#color/buttonLoginColor"
android:layout_margin="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/address_bottom_sheet"
android:layout_below="#id/name_bottom_sheet"
android:layout_toEndOf="#id/circle_picture"
android:layout_marginStart="10dp"
android:textColor="#color/btn_create"
android:text=""
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/floatingButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/bottom_sheet"
android:layout_margin="15dp"
app:backgroundTint="#color/buttonLoginColor"
app:borderWidth="0dp"
android:layout_alignParentRight="true"
app:elevation="6dp"
app:layout_anchorGravity="top"/>
</RelativeLayout>
You can also set your fab button margins as per your requirement.
In the following layout , after the AppBarLayout and before RecyclerView , some extra whitespace is coming , i am unable to figure out how it is coming.
I've checked margins and all , seems to be fine .
Also due to same reason , i believe the last element of RecyclerView is cropped out of the layout view .
Any help appreciated .
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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">
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/transMain"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="80dp"
android:fitsSystemWindows="true"
android:paddingLeft="12dp"
app:contentScrim="?android:attr/colorPrimary"
app:layout_scrollFlags="exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbarAct"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
app:layout_scrollFlags="scroll">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<!--button was here-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<RelativeLayout
android:id="#+id/monthSelLay"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/monthButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:textColor="#000"
android:textSize="14sp" />
<ImageView
android:layout_width="22dp"
android:layout_height="22dp"
android:layout_marginTop="12dp"
android:layout_toRightOf="#id/monthButton"
android:src="#drawable/ic_keyboard_arrow_down_black_24dp" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/syncLay"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/syncButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:layout_marginTop="8dp"
android:text="SyncUp"
android:textAlignment="center"
android:textColor="#000" />
<ImageView
android:layout_width="22dp"
android:layout_height="22dp"
android:layout_marginTop="5dp"
android:layout_toRightOf="#+id/syncButton"
android:src="#drawable/ic_cached_black_48dp" />
</RelativeLayout>
</LinearLayout>
<!--switch was here-->
</RelativeLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.v7.widget.SearchView
android:id="#+id/searchTrans"
android:layout_width="350dp"
android:layout_height="40dp"
android:layout_below="#+id/toolbar"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:background="#fff"
android:hint="Start typing an Amount/Description"
android:textColor="#000"
android:textColorHint="#ccc"
app:tabMode="scrollable" />
<!--need to change the background as an object oval prbbly-->
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/trans"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</android.support.v7.widget.RecyclerView>
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/ic_add_black_24dp"
app:backgroundTint="#color/colorAccent"
app:elevation="6dp"
app:pressedTranslationZ="12dp" />
</FrameLayout>
In the first image , i've scrolled up slightly to show the whitespace.
With cropped last element of RecyclerView .
Remove this line from your RecyclerView
android:layout_gravity="center_horizontal"
Remove this line:
android:layout_gravity="center_horizontal"
or
Make your coordinator height to wrap_content.
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/transMain"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
i want to anchor FloatingActionButton on top of the view ,
and this is my code :
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".ui.activity.MainActivity">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<com.alirezaafkar.toolbar.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:direction="rtl"
app:navigationIcon="#drawable/ic_arrow_back_white_24dp"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:title="#string/app_name">
<TextView
android:id="#+id/tv_toolbar_title"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:textColor="#android:color/white"
android:textSize="20dp"
android:textStyle="bold" />
</com.alirezaafkar.toolbar.Toolbar>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/container_body"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</FrameLayout>
<ViewSwitcher
android:id="#+id/viewSwitcherBottomBar"
android:layout_width="wrap_content"
android:layout_height="120dp"
android:layout_gravity="bottom"
android:inAnimation="#android:anim/slide_in_left">
<include layout="#layout/bottom_bar_dest" />
<include layout="#layout/bottom_bar_request" />
</ViewSwitcher>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_my_location"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="16dp"
android:layout_marginBottom="60dp"
android:paddingBottom="60dp"
android:src="#drawable/ic_my_location_white_24dp"
app:borderWidth="0dp"
app:elevation="6dp"
app:fabSize="mini"
app:layout_anchor="#id/viewSwitcherBottomBar"
app:layout_anchorGravity="top|right" />
</android.support.design.widget.CoordinatorLayout>
and this is the result ,
but the result is not exactly at the top of view :
how can i bring floatingActionButton exactly on top of the view ?
edit :
i want the floatingActionButton to have no overlaping with anchored view .
instead of giving padding and margin to FloatingActionButton , i set the padding in the view and it works :
<ViewSwitcher
android:id="#+id/viewSwitcherBottomBar"
android:layout_width="wrap_content"
android:layout_height="120dp"
android:paddingTop="25dp"
android:layout_gravity="bottom"
android:inAnimation="#android:anim/slide_in_left">
<include layout="#layout/bottom_bar_dest" />
<include layout="#layout/bottom_bar_request" />
</ViewSwitcher>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_my_location"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:src="#drawable/ic_my_location_white_24dp"
app:borderWidth="0dp"
app:elevation="6dp"
app:fabSize="mini"
app:layout_anchor="#id/viewSwitcherBottomBar"
app:layout_anchorGravity="top|right" />
Below three lines are essential:
android:layout_gravity="top"
app:layout_anchor="#+id/layout_store_detail"
app:layout_anchorGravity="top|end"
The whole XML looks like this:
<?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:layout_width="match_parent"
android:layout_height="match_parent"
>
<!-- This is the bottom sheet which pops up -->
<LinearLayout
android:id="#+id/layout_store_detail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
android:orientation="vertical"
app:behavior_hideable="true"
app:behavior_peekHeight="0dp"
app:behavior_skipCollapsed="true"
app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior"
>
...
</LinearLayout>
<!-- This is the Floating action button with a margin of 16dp -->
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
app:layout_anchor="#+id/layout_store_detail"
app:layout_anchorGravity="top|end"
>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab_locate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:src="#drawable/globe"
/>
</FrameLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>