0

I'm currently facing two different issues, both regarding fab gravity behavior.

In my layout I have a section consisting in a FrameLayout with an ImageView and a FloatingActionButton as children views.

`<RelativeLayout ...>

    *Here's a toolbar*

    <ScrollView ...>

        <LinearLayout ...>

            <FrameLayout
                android:id="@+id/prof_img"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="@dimen/activity_vertical_margin">

                <de.hdodenhof.circleimageview.CircleImageView
                    android:id="@+id/profile_image"
                    android:layout_width="@dimen/size_editing_pic"
                    android:layout_height="@dimen/size_editing_pic"
                    android:src="@drawable/ic_profilo_utente"/>

                <android.support.design.widget.FloatingActionButton
                    android:id="@+id/floating_btn"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom|end"
                    android:scaleType="center"
                    android:tint="@color/dark_gray"
                    app:layout_anchor="@id/profile_image"
                    app:layout_anchorGravity="bottom|end|right"
                    app:srcCompat="@drawable/ic_camera"
                    app:backgroundTint="@color/colorAccentEasy"
                    app:fabSize="mini"/>
            </FrameLayout>

            *Other sections*

        </LinearLayout>
    </ScrollView>
</RelativeLayout>`
  • Issue 1: Android version >= Lollipop

The FAB is right where it should be but you can see that its shadow is clearly cut without the supposed fading.

Post-Lollipop behavior

  • Issue 2: Android version < Lollipop

The FAB is not where it's supposed to be.

Pre-Lollipop behavior

I tried anything that came to my mind and that I found online and here on SO. I understand that it has to do with the different padding management that the core code does if the OS is pre or post Lollipop, and with the attribute useCompatPadding (which I tried in different combinations), but I can't figure out how to successfully resolve it.

UPDATE

Thanks to the suggestion I managed to solve Issue #1.

As far as Issue #2 is concerned, though, I still can't solve it. In my new fabStyle-v21 a layout_margins of 5dp since it perfectly suited my needs. I then tried putting a 0dp margin in the default style, but still nothing, even trying negative margins.

Massimo Baldrighi
  • 365
  • 2
  • 6
  • 17

1 Answers1

1

Issue 1- If you want to see the elevation(shadow) of Views like FAB, Button etc. you must leave space around them. For example, you can set margins. Using padding to the parent Layout of FAB, will not work if there is no space between FAB and edges of parent Layout

Issue 2- Floating Action Button has different margin and padding values before Lollipop devices. You can use different styles.xml files for different api levels.

styles.xml for different folders:

values-v21

<style name="fabStyle">
    <item name="android:layout_margin">16dp</item>
</style>

values (default)

<style name="fabStyle">
    <item name="android:layout_marginLeft">0dp</item>
    <item name="android:layout_marginTop">0dp</item>
    <item name="android:layout_marginRight">8dp</item>
    <item name="android:layout_marginBottom">0dp</item>
</style>

usage:

<android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    style="@style/fabStyle"
    app:useCompatPadding="true"
    app:elevation="6dp"/>

UPDATE: try adding app:useCompatPadding="true" to your FAB without changing other arrangements.

Oğuzhan Döngül
  • 7,856
  • 4
  • 38
  • 52