Floating Action Button is changed to square in Shape

Question

No, this is not a duplicate question. seems to be duplicate link.That is the question that solved the issue of FAB in square which is below <API 16. But here in API 16.,It is working.Only the above,that mean API 21,it is in SQUARE.

I have implemented a Floating Action Button.Initially it was circle in shape.Later I changed its background color using,

app:backgroundTint="@android:color/holo_green_dark" even I tried

app:borderWidth="0dp" to get in Circle in shape.But these way didn't help me.

In API 16 it is working nice. Only an issue in API 21.

xml:

  <android.support.design.widget.FloatingActionButton
            android:id="@+id/cartfab1"
            style="@style/Layout_ww"
            android:layout_above="@+id/txt_categoryName"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:layout_gravity="right"
            android:layout_marginEnd="40dp"
            android:layout_marginRight="40dp"
            android:src="@drawable/ic_shopping_cart"
            app:backgroundTint="@color/colorPrimary"
            app:borderWidth="0dp" />

@appukrb it is working nice in API 16.Above 16 only it is not working good. — Parama Sudha, Apr 06 '16 at 05:25
Possible duplicate of http://stackoverflow.com/questions/30538604/fab-square-on-pre-lollipop-and-without-shadow-on-lollipop, post `xml` of FAB — Ajay Kulkarni, Apr 06 '16 at 05:59

score 1 · Answer 1 · answered Nov 19 '20 at 09:49

In your layout

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:shapeAppearanceOverlay="@style/fab_rounded"
    android:layout_gravity="bottom|end"
    android:layout_margin="@dimen/fab_margin"
    app:srcCompat="@android:drawable/ic_dialog_email" />

In your values/styles.xml

<style name="fab_3_rounded">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
    <item name="cornerSizeTopLeft">20dp</item>
    <item name="cornerSizeTopRight">20dp</item>
    <item name="cornerSizeBottomLeft">20dp</item>
    <item name="cornerSizeBottomRight">20dp</item>
</style>

This will give you a rounded, set cornerSizeTopLeft, cornerSizeTopRight, cornerSizeBottomLeft and cornerSizeBottomRight and adjust them to the size you want. If you want square change it to 0dp for each section

Parama Sudha · Answer 2 · 2016-04-06T07:55:36.103

-2

Fixed the bug.

In my xml layout I used these code inside of Floating Action Bar for changing this as a desired color.

app:backgroundTint="@android:color/holo_green_dark"

here, I imported

xmlns:app="http://schemas.android.com/tools"

After changing this to,

xmlns:app="http://schemas.android.com/apk/res-auto".

It is working nice even in API 21.

edited Apr 06 '16 at 07:55

answered Apr 06 '16 at 07:06

Parama Sudha

2,583
3
29
48

Floating Action Button is changed to square in Shape

2 Answers2