I have created material.io bottom app bar with a webview, but the bottom app bar overlaps with the webview and hides webview's bottom content.
I'm using im-delight's advance web view which works exactly same as the default android web view
how can I stop the overlapping and make the bottom app bar hide while scrolling in webview ?
Here's the layout file
<?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.coordinatorlayout.widget.CoordinatorLayout
android:id="#+id/container_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<im.delight.android.webview.AdvancedWebView
android:id="#+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent">
</im.delight.android.webview.AdvancedWebView>
<com.google.android.material.progressindicator.LinearProgressIndicator
android:id="#+id/progressBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:indeterminate="true"
app:indicatorColor="#4326EC" />
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bottom_app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:backgroundTint="#F44336"
app:fabAnimationMode="slide"
app:hideOnScroll="true"
app:layout_behavior="#string/hide_bottom_view_on_scroll_behavior">
<ImageView
android:id="#+id/imageViewFavicon"
android:layout_width="15dp"
android:layout_height="15dp"
android:layout_gravity="left"
android:src="#drawable/ic_baseline_home_24"
android:visibility="invisible" />
<TextView
android:id="#+id/webpagename"
android:layout_width="160dp"
android:layout_height="30dp"
android:fontFamily="#font/artifika"
android:gravity="left"
android:text="Torus"
android:textColor="#color/white"
android:textSize="18sp" />
</com.google.android.material.bottomappbar.BottomAppBar>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Related
I have a layout where the main content is scrollable. At the same time the confirm button is always visible at the bottom so no matter where you are scrolling you can always confirm and see the button.
Whenever I touch a EditText the ScrollView scrolls up so the keyboard does not hide the EditText. This is done using android:windowSoftInputMode="adjustResize".
The problem is, that the button always also scrolls up when I touch the EditText. I do not want this behaviour. I want the button to stay hidden behind the keyboard.
Here is the layout I use:
<?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:fitsSystemWindows="true"
tools:context=".SecondFragment">
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:fillViewport="true"
app:layout_constraintBottom_toTopOf="#+id/button_second"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_marginTop="300dp"
android:hint="TYPE..."
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
<Button
android:id="#+id/button_second"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:text="#string/previous"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
And here are two pictures demonstrating:
On the second picture, the Button also scrolls up. But I only want the keyboard below the EditText the button shall stay hidden at the bottom behind the keyboard (Like it would without adjustResize
EDIT:
As suggested with FrameLayout it works when I have no content that needs to scroll. But once I add another EditText like below it stops working again (I am also unfamiliar with FrameLayout, I always only use ConstraintLayout, So I assume somehow the ScrollView has to stay on top of the button anyway)
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".SecondFragment">
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top|center"
app:layout_constraintBottom_toTopOf="#+id/button_second"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
android:id="#+id/editText"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_marginTop="300dp"
android:hint="TYPE..."
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:layout_width="200dp"
android:layout_height="wrap_content"
android:hint="TYPE..."
android:layout_marginTop="400dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.502"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/editText" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
<Button
android:id="#+id/button_second"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:layout_gravity="bottom|center"
android:text="#string/previous"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</FrameLayout>
Is this what you expected?
activity_main.xml
<FrameLayout 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">
<include
layout="#layout/layout_item"
/>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/floatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:src="#android:drawable/ic_menu_add"
android:layout_gravity="bottom|right"
android:layout_marginBottom="16dp"
android:clickable="true" />
</FrameLayout>
layout_item.xml
<FrameLayout 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"
>
<EditText
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center"
android:layout_marginBottom="200dp"
android:hint="TYPE..." />
<Button
android:id="#+id/button_second"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center"
android:layout_marginBottom="20dp"
android:text="previous"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</FrameLayout>
In xamarin Android, I have used the bottomappbar as shown below.I have implemented the hide on scroll behavior of BottomAppBar.Scrolling downward hides the bottom app bar. If a FAB is present, it detaches from the bar and remains on screen.Scrolling upward reveals the bottom app bar, and reattaches to a FAB if one is present.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
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:background="#android:color/white">
<android.support.v7.widget.RecyclerView
android:layout_marginHorizontal="18dp"
android:layout_below="#+id/totalcardview"
android:layout_above="#+id/bar"
android:id="#+id/exppandablerecyclerView"
android:layout_width="match_parent"
android:padding="2dp"
android:layout_marginTop="5dp"
android:layout_height="wrap_content"
/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/baseline_add_24"
android:backgroundTint="#efbe5d"
app:elevation="1dp"
app:borderWidth="0dp"
android:tint="#android:color/white"
app:layout_anchor="#+id/bar" />
<android.support.design.bottomappbar.BottomAppBar
android:id="#+id/bar"
android:layout_width="match_parent"
android:layout_height="58dp"
android:layout_gravity="bottom"
app:fabCradleRoundedCornerRadius="70px"
app:fabCradleMargin="25px"
app:contentInsetStart="0dp"
android:backgroundTint="#204060"
app:hideOnScroll="true"
app:layout_scrollFlags="scroll|enterAlways"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/homeText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableTint="#android:color/white"
android:drawableTop="#drawable/baseline_home_24"
android:scaleX="1.3"
android:scaleY="1.3"
android:layout_margin="4dp"
android:orientation="vertical"></TextView>
<TextView
style="?android:attr/borderlessButtonStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableTop="#drawable/stats"
android:gravity="center"
android:orientation="vertical"
android:textColor="#FFFFFF"
android:visibility="invisible"></TextView>
<TextView
android:id="#+id/statsText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableTint="#android:color/white"
android:drawableTop="#drawable/outline_insert_chart_24"
android:scaleX="1.3"
android:layout_margin="4dp"
android:scaleY="1.3"
android:orientation="vertical"></TextView>
</LinearLayout>
</android.support.design.bottomappbar.BottomAppBar>
</android.support.design.widget.CoordinatorLayout>
The bottomappbar hides and shows when I scroll the recyclerview. However I would like to show it when it reaches the bottom of list.How can I force to show the BottomAppBar?
I want to implement an app bar with a Recyclerview like the one in Gmail and Play store as below:
I tried using AppBarLayout inside a CoordinatorLayout but the App Bar is above the Recyclerview
However, I want it to be like an overlay so if it is transparent or have some margin, the recyclerview content show beneath like this:
I tried putting the app bar in a Relative layout with the recyclerview, but it does not hide when I scroll down (always fixed on the top even when using scroll flags).
This is my XML 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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".fragment.MainFragment"
android:background="#color/lightBackground">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/bottom_navigation"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.fragment.app.FragmentContainerView
android:id="#+id/tab_fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="#dimen/main_action_bar_size"
android:background="#color/white">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
app:layout_scrollFlags="scroll|enterAlways|snap">
<FrameLayout
android:id="#+id/appBarDrawer"
android:layout_width="#dimen/main_action_bar_size"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/ic_menu" />
</FrameLayout>
<FrameLayout
android:id="#+id/appBarSearch"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/appBarDrawer"
app:layout_constraintRight_toLeftOf="#+id/appBarVoiceSearch"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:maxLines="2"
android:text="#string/search"
android:textColor="#color/lightGrayFont"
android:textSize="15sp" />
</FrameLayout>
<FrameLayout
android:id="#+id/appBarVoiceSearch"
android:layout_width="#dimen/main_action_bar_size"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toLeftOf="#+id/appBarMore"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/ic_mic_none" />
</FrameLayout>
<FrameLayout
android:id="#+id/appBarMore"
android:layout_width="#dimen/main_action_bar_size"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/ic_more" />
</FrameLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</RelativeLayout>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:menu="#menu/menu_bottom_navigation"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
I also what it to snap when it hides or shows without affecting the recyclerview scroll like the one in Play Store (seems to be in a deferent layer).
If you look, it's actually a cardview being used as the app bar layout. Something like this should get you what you're looking for:
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.CardView
android:layout_margin="16dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
</android.support.design.widget.AppBarLayout>
</android.support.v7.widget.CardView>
(sorry i don't remember android x libraries off the top of my head, for reference here is the link to find them https://developer.android.com/jetpack/androidx/migrate/artifact-mappings)
I constrain a button to the bottom of the screen, but unfortunately there is a small gap between the bottom border of the screen and the bottom border of the buttom:
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=".MainActivity">
<com.google.android.material.tabs.TabLayout
android:id="#+id/navigationTabs"
android:layout_width="match_parent"
android:layout_height="100dp"
app:layout_constraintTop_toTopOf="parent"
app:tabMinWidth="100dp"
app:tabRippleColor="#null"
/>
<Button
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="BUTTON"
android:layout_margin="0dp"
app:layout_constraintBottom_toBottomOf="parent"/>
<LinearLayout
android:id="#+id/fragmentContainer"
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/navigationTabs" />
</androidx.constraintlayout.widget.ConstraintLayout>
What causes this gap? And how can I get rid of it?
It's the shadow around the button of the default background. Specify your own background and the gap will disappear.
For example:
<Button
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#A4ABA4"
android:text="BUTTON"
android:layout_margin="0dp"
app:layout_constraintBottom_toBottomOf="parent"/>
add this code to <androidx.constraintlayout.widget.ConstraintLayout ...> and <button ...>:
android:layout_margin="0dp"
android:padding="0dp"
add this code to <com.google.android.material.tabs.TabLayout ...> and <LinearLayout ...> and <button ...>:
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
add this code to <button ...>:
android:background="#c0c0c0"
My fragment layout contains a CoordinatorLayout with a FloatingActionButton. The parent activity also contains a CoordinatorLayout with a PageView that brings in the fragment. The problem I have is that the FAB sits under the navigation bar instead of above it. It also moves up and down as I scroll the associated RecyclerView, whereas I want it to remain fixed. Here's the XML layout code for the activity:
<?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"
tools:context="uk.ac.aber.dcs.cs31620.faaversion4.ui.FAAMainActivity">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar_main" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
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.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/nav_header"
app:itemTextColor="?android:textColorPrimary"
app:itemIconTint="?colorPrimaryDark"
app:menu="#menu/menu_nav" />
</android.support.v4.widget.DrawerLayout>
Here's the code for the toolbar:
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:layout_scrollFlags="scroll|enterAlways"/>
Finally, here's the code for the fragment 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/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="uk.ac.aber.dcs.cs31620.faaversion4.ui.cats.CatsFragment">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<GridLayout
android:id="#+id/gridLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:columnCount="2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<Spinner
android:id="#+id/breeds_spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_columnWeight="50"
android:layout_row="0" />
<Spinner
android:id="#+id/gender_spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_columnWeight="50"
android:layout_row="0" />
<Spinner
android:id="#+id/age_spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_columnWeight="50"
android:layout_row="1" />
<TextView
android:id="#+id/proximity_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_columnWeight="50"
android:layout_row="1"
android:text="#string/distance"
android:textAppearance="#style/MyTextAppearance" />
</GridLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/cat_list"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:scrollbars="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/gridLayout" />
</android.support.constraint.ConstraintLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_add_cat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:src="#drawable/ic_add_white_24dp"
android:layout_gravity="bottom|end" />
</android.support.design.widget.CoordinatorLayout>
As a workround I put a layout_MarginBottom on the FAB of 64dp but although it displayed it still moved up and down as the tab bar collapsed. Also, a generated Snackbar was also hidden under the bottom navigation bar. All the examples I've seen have the FAB and coordinator layout at the activity level, and without nesting of a further coordinator layout. Perhaps the only option is to put the FAB in the activity layout and access it from the fragments (e.g. hid it when not needed)? Thanks.
If you are going to use a ConstraintLayout you should think about harnessing the power of it so that your UIs act accordingly. ConstraintLayouts help you remove the nesting of widgets and layouts. It makes them flatter, more readable, reducing code and making your app smoother.
<?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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="uk.ac.aber.dcs.cs31620.faaversion4.ui.FAAMainActivity">
<Spinner
android:id="#+id/breeds_spinner"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toStartOf="#id/gender_spinner"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Spinner
android:id="#+id/gender_spinner"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/breeds_spinner"
app:layout_constraintTop_toTopOf="parent" />
<Spinner
android:id="#+id/age_spinner"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toStartOf="#id/gender_spinner"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/breeds_spinner" />
<TextView
android:id="#+id/proximity_button"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="#string/distance"
android:textAppearance="#style/MyTextAppearance"
app:layout_constraintBottom_toBottomOf="#id/age_spinner"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/age_spinner"
app:layout_constraintTop_toBottomOf="#id/gender_spinner" />
<android.support.v7.widget.RecyclerView
android:id="#+id/cat_list"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/age_spinner" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_add_cat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:src="#drawable/ic_add_white_24dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</android.support.constraint.ConstraintLayout>