Floating Action Button rendering as oval on lower end devices

Question

I am using a floating action button (without using third part library)

The fab appears fine on mdpi and hdpi devices but appears as a distinctive oval shape on ldpi devices

For reference here are the screenshots -

Here is the fab rendering fine on mdpi devices

The fab rendering fine

Here is the fab rendering as an oval on ldpi devices

enter image description here

The main layout has an include element to include the fab layout . The fab layout includes a background as a drawable . background=@drawable/fab_drawable

A. fab_drawable.xml in res/drawable

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="8px">
    <layer-list>
        <item>
            <shape android:shape="oval">
                <solid android:color="#14000000"/>
                <padding
                    android:bottom="1px"
                    android:left="0px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#15000000"/>
                <padding
                    android:bottom="1px"
                    android:left="0px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#16000000"/>
                <padding
                    android:bottom="1px"
                    android:left="0px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#17000000"/>
                <padding
                    android:bottom="1px"
                    android:left="0px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
    </layer-list>
</item>
<item android:id="@+id/fab_drawable_shape">
    <shape android:shape="oval" >
        <solid android:color="#404952" />
    </shape>
</item>
<item android:drawable="@drawable/onboarding_selector"/>

B. fab_drawable.xml in drawable-v21

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorControlHighlight" >

<item>
    <shape android:shape="oval" >
        <solid android:color="?android:colorAccent" />
    </shape>
</item>

C. In my basefragment i am checking if build is lollipop then use this clipping code

ViewOutlineProvider fabOutlineProvider = new ViewOutlineProvider() {

            @Override
            public void getOutline(View view, Outline outline) {
                int diameter = getResources().getDimensionPixelSize(
                        R.dimen.fab_diameter);
                outline.setOval(0, 0, diameter, diameter);
            }
        };

        mComposeFabButtonView.setOutlineProvider(fabOutlineProvider);
        mComposeFabButtonView.setClipToOutline(true);

D. The dimensions of the fab button diameter are 60sp for all devices

But the team i am part of requires the design to be consistent across a range of devices — borax12, Apr 15 '15 at 10:05
I see, but what if there are not ldpi devices on the market ? — Blackbelt, Apr 15 '15 at 10:12
Can you post you implementation of the fab so we can help? Also do you have a values-ldpi or values-mdpi folder as you might be over riding them values in there. — Bin power93, Apr 15 '15 at 10:57
@Blackbelt I still proudly own **2** ldpi devices. And according to the [dashboard](https://developer.android.com/about/dashboards/index.html?utm_source=suzunone), they are still the **4.4%** of the global market. — Phantômaxx, Apr 15 '15 at 10:59
**1** - use `dp` instead of `px`. **2** - there is some **asymmetry** in your paddings (1, 0, 1, 1). — Phantômaxx, Apr 15 '15 at 11:15
@DerGolem - Thanks that solved it . I was of the opinion that the asymmetry was in place for creating the shadow layers on pre lollipop devices , but it seems the asymmetry was causing the problem — borax12, Apr 15 '15 at 11:27

score 1 · Answer 1 · answered Apr 15 '15 at 11:32

I solved the rendering issue by making the padding details in the layer list items to be 1 dp for all sides

Here is the code -

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="8dp">
    <layer-list>
        <item>
            <shape android:shape="oval">
                <solid android:color="#14000000"/>
                <padding
                    android:bottom="1dp" <--- Here are the changes
                    android:left="1dp"   <---
                    android:right="1dp"  <---
                    android:top="1dp"    <---
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#15000000"/>
                <padding
                    android:bottom="1dp"
                    android:left="1dp"
                    android:right="1dp"
                    android:top="1dp"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#16000000"/>
                <padding
                    android:bottom="1dp"
                    android:left="1dp"
                    android:right="1dp"
                    android:top="1dp"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#17000000"/>
                <padding
                    android:bottom="1dp"
                    android:left="1dp"
                    android:right="1dp"
                    android:top="1dp"
                    />
            </shape>
        </item>
    </layer-list>
</item>
<item android:id="@+id/fab_drawable_shape">
    <shape android:shape="oval" >
        <solid android:color="#404952" />
    </shape>
</item>
<item android:drawable="@drawable/onboarding_selector"/>

score 0 · Answer 2 · answered Apr 15 '15 at 11:18

0

Try changing the dimension from sp to dp. Hopefully, it will solve the problem.

If not, but the FAB inside a separate layout and give that layout the dp dimensions. FAB should use match_parent x2.

answered Apr 15 '15 at 11:18

Kelevandos

7,024
2
29
46

score 0 · Answer 3 · edited May 23 '17 at 12:06

0

Only use SP for defining the font size, as it changes size if the user has the large text option enabled. For all other purposes use dp. For more information refer to What is the difference between "px", "dp", "dip" and "sp" on Android?

Also it would be best to use a library like Makovkastar's Floating Action Button Library.

Hope this helps

edited May 23 '17 at 12:06

Community

1
1

answered Apr 15 '15 at 12:08

Bin power93

127
1
1
8

Well our app is pretty close to the 65K limit of method references and i thought of achieving the fab button without any dependency . – borax12 Apr 15 '15 at 12:37

Floating Action Button rendering as oval on lower end devices

3 Answers3