I'm trying to attach a FAB button to the BottomSheet view like Google Maps does. However I cannot make it work,
this is the code of the FAB button:
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/ic_dialog_email"
app:layout_anchor="#+id/nestedscrollview" --> BottomSheet view ID
app:layout_anchorGravity="bottom|end"
app:elevation="4dp"
/>
and this is the code of the BottomSheet View
<android.support.v4.widget.NestedScrollView
android:id="#+id/nestedscrollview"
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"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
tools:context="com.pub.uac.ui.location.LocationActivity"
android:background="#color/background_white_trasnparent"
>
...
</...
It depends on what you mean by "cannot make it work" and also what you try to achieve.
Does it work better if you set on the FAB:
app:layout_anchorGravity="top|end"
You used "bottom" instead of "top", so the FAB will not be pushed by the bottom sheet, it will stay at the bottom. With "top" it should at least follow the sheet.
Related
my floating action button shows up too low, even though it looks just fine in the Android Studio preview (see below).
FB is placed in root under CoordinatorLayout and set to show at the bottom end using android:layout_gravity.
This Layout is used in Fragment (extends Fragment) with Tabbed Activity using ViewPager. Android X.
Thanks
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/fragmentTableCoordinator"
tools:context=".fragment.FragmentTable">
<!-- CoordinatorLayout for Floating Button -->
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/fragmentTable"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorBackgroundCards">
<!-- Total Card -->
<androidx.cardview.widget.CardView
android:id="#+id/card_viewNew"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="5dp"
card_view:cardCornerRadius="2dp"
card_view:contentPadding="10dp"
card_view:layout_constraintEnd_toEndOf="parent"
card_view:layout_constraintStart_toStartOf="parent"
card_view:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="fill_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.Guideline
android:id="#+id/Total_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
card_view:layout_constraintGuide_percent="0.5" />
<!-- some textViews here -->
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
<!-- RecyclerView with months -->
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/Total_recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:scrollbars="vertical"
android:visibility="visible"
card_view:layout_constraintEnd_toEndOf="parent"
card_view:layout_constraintStart_toStartOf="parent"
card_view:layout_constraintTop_toBottomOf="#+id/card_viewNew" />
</androidx.constraintlayout.widget.ConstraintLayout>
<!-- Floating button -->
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/floating_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:contentDescription="TODO"
app:srcCompat="#android:drawable/ic_dialog_email" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
My own fix : after hours trying to fix in in Fragment Layout - the best for me worked :
place Floating button into activity_main layout
hide it (setVisibility) for Fragment you dont need.
This solved this for me
You're setting ConstraintLayout inside the CoordinatorLayout and also CoordinatorLayout in the Fragment layout. You'll need to change it a bit.
Use FloatingActionButton inside your main activity layout with CoordinatorLayout, AppBarLayout and maybe a NestedScrollView, use ConstraintLayout in your Fragment layout and then, as you already mentioned, you'll be able to see FloatingActionButton with desire effect which is also stable at the bottom of the page and then you can hide it in the Fragments you don't want to use.
I have currently a problem with a recycler view and a floating action button in my android app. The button always jumps to the right top of the page when I start the app.
The RecyclerView and the Button are inside a fragment. Currently I am using a ConstraintLayout to say the Button should always appear at the right end of the screen. However, I also tried it with a RelativeLayout and CoordinatorLayout with anchor and gravity attributes. In Android Studio, the layout shows it correct, with the button at the bottom right side of the screen. As soon as I start the app on my phone, it appears on the top right side of the screen...
Layout preview:
When I start the app on my phone:
Here's my Code I am using right now for the fragment:
<?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"
android:id="#+id/fragment_bucketlist"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:background="#color/colorPrimary">
<android.support.v7.widget.RecyclerView
android:id="#+id/rv_bucketList"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_addToBucketList"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
</android.support.constraint.ConstraintLayout>
Thanks in advance for helping!
Try using the recyclerview and fab button within a CoordinatorLayout.
The attribute app:layout_anchorGravity: will specify how an object should be positioned relative to an anchor, on both the X and Y axes, within its parent’s bounds.
<android.support.design.widget.CoordinatorLayout
android:id="#+id/fragment_bucketlist"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimary">
<android.support.v7.widget.RecyclerView
android:id="#+id/rv_bucketList"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/floating_action_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:scaleType="center"
android:src="#drawable/android_floating_action_button_icon"
app:layout_anchor="#id/rv_bucketList"
app:layout_anchorGravity="bottom|right|end"
app:borderWidth="1dp"
app:elevation="10dp" />
</android.support.design.widget.CoordinatorLayout>
I solved the problem using a RelativeLayout. There was a problem that the Floating Action Button always showed up on the bottom edge and "stucked" at the bottom navigation bar (HUAWEI devices). The attribute app:useCompatPadding="true" solved the issue.
Here is the updated code:
<?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:id="#+id/fragment_bucketlist"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:background="#color/colorPrimary">
<android.support.v7.widget.RecyclerView
android:id="#+id/rv_bucketList"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_addToBucketList"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_edit"
app:useCompatPadding="true"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>
My FloatingActionButton works well in API 20+, but on API 19 I have this strange circle behind it.
You can see around the orange circle there is another rounded rectangle or I don't really know what is that... but it is there.
How could I hide that thing?
This only appears on API 19 (Android 4.4)
I use 'com.android.support:design:26.0.2'
Thanks in advance.
E D I T:
I don't use elevation.
XML source:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:clipChildren="false"
android:clipToPadding="false"
android:orientation="vertical"
android:padding="8dp">
<android.support.design.widget.FloatingActionButton
android:id="#+id/stream_toggle_btn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:srcCompat="#drawable/ic_stream_video_white" />
</LinearLayout>
FAB is using shadow, LinearLayout not suitable for, because it wrap view content and ignore fab shadow.
FAB should be in RelativeLayout, FrameLayout (most suitable) or CoordinatorLayout. Wich as parent of FAB and main layout of view not wrap FAB size.
Basic usage of FAB in those is -
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="16dp"
app:fabSize="normal"
app:srcCompat="#drawable/ic_add_white_24dp" />
Let's assume that we have the following 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"
android:id="#+id/main_content"
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.support.v7.widget.SearchView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed"/>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="#dimen/fab_margin"
app:srcCompat="#android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
In this layout, if I drag the SearchView upward, it will collapse and disappear. But I wonder how I can attach this dragging effect to my RecyclerView. Means I like to collapse the SearchView whenever I scroll RecyclerView items upward, but expand SearchView when I scroll RecylcerView items downward. Do I need to create a custom behavior for SearchView or it is possible to create this effect by available behaviors?
Best Regards
Use a collapsing toolbar layout and wrap up the searchView inside it... and also wrap up the recyclerView with a nestedScrollView and add the app:layout_behavior="#string/appbar_scrolling_view_behavior"/> to the nested scroll view instead
Dont forget to add scrollFlags and content_scrim to your collapsing toolbar layout..
The collapsing toolbar layout should be inside the appBarLayout
For reference check this out
https://antonioleiva.com/collapsing-toolbar-layout/
The only change you have to make is to add |enterAlways to your existing app:layout_scrollFlags attribute.
I'm working on animating the drawable of a FAB. The animation makes the part of the drawable twice as big. However, once is starts growing, it is clipped under the layout of the FAB:
Is there a way that I can avoid this clipping?
It's placed in a CoordinatorLayout, so it isn't possible to place an ImageView on top of FAB, and make it look like there's only one item.
Also, it is not possible to edit clipChildrenproperty, since that property is related to ViewGroup, and this is only a View.
Here's the layout:
<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:fitsSystemWindows="true"
android:clipChildren="false"
tools:context="com.example.aleksandar.rasporedcasova.MainActivity">
[other contents of 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/bluetooth_drawable_animated" />
</android.support.design.widget.CoordinatorLayout>