Some of my floating action buttons don't remain where I want, and I cannot understand why.
The first is how they should be (and actually sometimes it works), the other two images show how they behave sometimes... and I cannot find a "pattern" in this behavior.
This is the layout (only one half):
<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/lay_attivita_edit_ubicazioni"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingLeft="#dimen/list_padding_lateral"
android:paddingRight="#dimen/list_padding_lateral">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical"
android:id="#+id/container_attivita_edit_origini">
<TextView
style="#style/FieldLabel"
android:layout_marginTop="20dp"
android:text="#string/attivita_edit_origini" />
<ListView
style="#style/ListView"
android:id="#+id/list_attivita_edit_origini"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
android:fadeScrollbars="false"
android:background="#drawable/border_rectangle" />
</LinearLayout>
</LinearLayout>
<android.support.design.widget.FloatingActionButton
style="#style/FloatingActionButton.Small"
android:id="#+id/fab_attivita_edit_ubicazioni_edit_origini"
app:layout_anchor="#id/list_attivita_edit_origini"
app:layout_anchorGravity="top|right|end" />
</android.support.design.widget.CoordinatorLayout>
I tried also to se anchor and anchorGravity programmatically but the result is the same. It could happen because depending on some logic one of the two sections could not be visible, in case I make them invisible at the end of OnCreateView.
It doesn't depend on the visibility of the "anchor list" because the fab move even if I always leave both the lists visible.
I tried also to change programmatically anchor and anchorId of the fab at every change of visibility of them or of their lists, nothing.
CoordinatorLayout.LayoutParams editOrigineFabParams = (CoordinatorLayout.LayoutParams)editOrigineFab.LayoutParameters;
editOrigineFabParams.AnchorId = Resource.Id.list_attivita_edit_origini;
editOrigineFabParams.AnchorGravity = (int)(GravityFlags.Top | GravityFlags.Right | GravityFlags.End);
editOrigineFab.LayoutParameters = editOrigineFabParams;
With the same conditions/code sometimes they work and sometimes they don't. It looks like a bug in Android. I tried with Android 7.0 and 7.1, Xamarin.Android.Support.Compat.25.3.1.
Anyone who had a similar problem or who has an idea of what could be the reason?
Use FAB by james montemagno.
Add FAB by james montemagno from nuget to your project.
https://www.nuget.org/packages/Refractored.FloatingActionButton/
<Refractored.Fab.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_margin="16dp"
android:src="#drawable/ic_action_content_new"
app:app_colorNormal="#color/primary"
app:app_colorPressed="#color/primary_pressed"
app:app_colorRipple="#color/ripple" />
use layout_gravity for positioning .
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:src="#drawable/ic_edit"
android:layout_marginRight="15dp"
android:layout_marginBottom="15dp" / >
Related
I've spent the last two days trying to wrap my head around this layout I got asked by the designer to do, the shape is something like:
| ___ |
|___ ___ / \ ___ ___|
|btn|btn\\btn//btn|btn|
|___|____\\_//____|___|
That part of the screen is a button row at the bottom of the screen, the problem comes with responsiveness, if I use an image button on the non square buttons they dont resize properly, adding margins instead of reshaping the image itself, but if I use regular buttons, i lose the cool shapes they ask for. Any ideas/tutorials I could use? Maybe I'm not looking it up as it should be done, but I don't seem to find anything relevant to my problem.
I have made this with the help of floating action button and the bottom navigation view.Check out given 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"
android:background="#color/purple_500"
tools:context=".MainActivity">
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/btmbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:backgroundTint="#color/purple_200"
app:fabCradleMargin="10dp"
app:fabCradleRoundedCornerRadius="40dp"
app:fabCradleVerticalOffset="10dp">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/menu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:background="#android:color/transparent"
app:labelVisibilityMode="unlabeled"
app:menu="#menu/btm_menu" />
</com.google.android.material.bottomappbar.BottomAppBar>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:alpha="10"
android:background="#null"
android:elevation="0dp"
android:src="#drawable/fire"
app:backgroundTint="#android:color/transparent"
app:elevation="0dp"
app:fabSize="normal"
app:layout_anchor="#id/btmbar"
app:tint="#null" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Output will look like this:
You can make the changes in below properties to make the space between the bottom app bar.
app:fabCradleMargin="16dp"
app:fabCradleRoundedCornerRadius="40dp"
app:fabCradleVerticalOffset="10dp"
My app and the RecyclerView was working fine until I add the second RecyclerView on to the fragment. Since I added the second fragment, I added a ScrollView to the fragment. Then I faced some issue with the scrolling within the recyclerview, it didn't scroll smoothly. After going through a lot of articles online including StackOverflow, I changed the ScrollView with androidx.core.widget.NestedScrollView. This fixed the issue with scrolling but some major issue occured. The loading of items in the RecyclerView took more time, when I hit the searchbutton, that's there on the menu bar at the top, it took long time to expand the search field and some times app show 'not responding' message. Some articles say add .setNestedScrollingEnabled=false and I added it like the following in onCreateView() of the fragment. But I am still facing the issue.
I am using kotlin
binding.rv_home_items.isNestedScrollingEnabled=false
binding.rv_home_categories.isNestedScrollingEnabled=false
Following is the xml
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorOffWhite"
android:orientation="vertical"
tools:context=".ui.fragments.HomeFragment">
<FrameLayout
android:id="#+id/framelayout_category"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rv_home_categories"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:orientation="horizontal"
android:paddingBottom="15dp" />
<ImageButton
android:id="#+id/ibutton_show_category"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_margin="5dp"
android:background="#drawable/ic_show_category" />
</FrameLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/framelayout_category">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.denzcoskun.imageslider.ImageSlider
android:id="#+id/image_slider"
android:layout_width="match_parent"
android:layout_height="200dp"
android:visibility="gone"
app:iss_auto_cycle="true"
app:iss_corner_radius="5"
app:iss_delay="0"
app:iss_error_image="#color/colorDarkGrey"
app:iss_period="2500"
app:iss_placeholder="#color/colorDarkGrey"
app:iss_selected_dot="#drawable/default_selected_dot"
app:iss_unselected_dot="#drawable/default_unselected_dot"
tools:visibility="visible" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rv_home_items"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/image_slider"
android:layout_marginBottom="50dp" />
</RelativeLayout>
</androidx.core.widget.NestedScrollView>
</RelativeLayout>
I am completely stuck on my project, any help with this is highly appreciated
Edit:
When I launch the app, in a few seconds it's shows a message that the app is not responding.
If you have more than one RecyclerView and even all of them have same scroll direction, seems ConcatAdapter can be preferred solution.
ConcatAdapter enables sequentially combine multiple adapters to a single RecyclerView.
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>
I need to make FloatingActionButton always stick to the bottom of my fragment where I display WebView. The problem is that the button in my current XML is cut in half and I can't manage to fix it. Here is my layout.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorBackgroundWhite"
tools:context=".fragments.CpuComparisionFragment">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<WebView
android:id="#+id/web_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/button_compare"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_marginBottom="#dimen/fb_margin_16dp"
android:layout_marginEnd="#dimen/fb_margin_16dp"
android:alpha="0.7"
android:src="#drawable/ic_compare" />
</android.support.design.widget.CoordinatorLayout>
</FrameLayout>
What am i doing wrong? Any ideas how to fix this? Here is screenshot how my app looks now.
It seems the android version installed on the device you're testing your app on doesn't support some of your xml attributes. Anyways, replace the FAB code with the below snippet. I hope it work for you.
<android.support.design.widget.FloatingActionButton
android:id="#+id/button_compare"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_marginBottom="#dimen/fb_margin_16dp"
android:layout_marginEnd="#dimen/fb_margin_16dp"
android:alpha="0.7"
app:layout_anchorGravity="bottom|right|end"
android:src="#drawable/ic_compare" />
Try to add android:fitsSystemWindows="true" to your FrameLayout .
I've a weird behaviour problem:
on any device or emulator with a version lower than lollipop the floating action button and other components which float over the toolbar(e.g. the popup of a Spinner) are positioned wrong. They seem to move based on the value of the app:elevation, but even app:elevation="0" doesn't position them equal to lollipop devices.
EDIT:
I just wanted to explain the behavior of the FAB better. When i add an elevation tag on a pre lollipop device to the fab, its x and y coordinates increase. On a lollipop device the elevation tag has no influence on the position.
EDIT 2:
After some experiments I found out that the problem is that the layout size increases on pre lollipop devices to draw the shadow. This also increases the click able area. This behaviour makes it impossible to create 2 different layouts for lollipop and pre lollipop devices, because the behaviour and size of the FAB are just wrong. On lollipop devices the layout is (as wanted) 40dp * 40dp and the FAB draws its shadow on the layout below it.
Layout:
<android.support.v4.widget.DrawerLayout
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:fitsSystemWindows="true"
android:id="#+id/id_drawer_layout">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:layout_height="128dp"
android:layout_width="match_parent"
android:background="#color/primaryColor"
android:id="#+id/id_toolbar"
android:elevation="20dp"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<Spinner
android:layout_marginStart="12dp"
android:layout_marginTop="62dp"
android:id="#+id/id_toolbar_spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</android.support.v7.widget.Toolbar>
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/id_swipe_refresh_layout"
android:layout_below="#id/id_toolbar"
android:layout_height="match_parent"
android:layout_width="match_parent">
<android.support.v7.widget.RecyclerView
android:layout_below="#id/id_toolbar"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:id="#+id/id_filemanager_recycler_view"
android:background="#android:color/white"/>
</android.support.v4.widget.SwipeRefreshLayout>
<android.support.design.widget.FloatingActionButton
android:layout_below="#id/id_toolbar"
android:layout_marginTop="-20dp"
android:layout_marginStart="16dp"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/id_floating_action_button"
android:src="#drawable/ic_add_white_24dp"
app:elevation="30dp"
app:borderWidth="0dp"
app:fabSize="mini"/>
</RelativeLayout>
<android.support.design.widget.NavigationView
android:layout_width="288dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#android:color/white"
android:id="#+id/id_main_navigation_view"
app:menu="#menu/menu_drawer_main"/>
Pre Lollipop
Lollipop
I had the same problem. The solution is to put your FloatingActionButton inside android.support.design.widget.CoordinatorLayout.
This is what i'm using
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|bottom"
android:layout_margin="16dp"
android:src="#drawable/ic_add_white_24dp"
app:elevation="6dp"
app:fabSize="normal"
app:pressedTranslationZ="12dp" />
</android.support.design.widget.CoordinatorLayout>
You can modify this code to meet your needs.
Add these lines to your FloatingActionButton tag, also change the appBar in my code snippet to the id of the layout you want to attach FloatingActionButton to.
app:layout_anchor="#+id/appBar"
app:layout_anchorGravity="bottom|left|end"