CODEWITHSUNDEEP
androidandroid-layoutandroid-buttonfloating-action-buttonmaterial-components-android
QThompson
QThompson

Reputation: 1698

How do I change shape of Extended Floating Action Button?

I am trying to change the shape of my action button from this default shape to a rectangle. Here is my xml: 

<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:cornerRadius="90dp"
        android:text="@string/create_player_text"
        android:fontFamily="@font/proximanova_semibold"
        app:layout_constraintHorizontal_bias="0.99"
        app:layout_constraintVertical_bias="0.01"/>

enter image description here

Upvotes: 10

Views: 8150

Answers (3)

Gabriele Mariotti
Gabriele Mariotti

Reputation: 363449

If you want to change the shape of the ExtendedFloatingActionButton you can use the shapeAppearanceOverlay attribute in the layout:

    <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
        app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlayExtended"
        ../>

With:

  <style name="ShapeAppearanceOverlayExtended" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">0dp</item>
  </style>

If you want a corner radius just change the value in the <item name="cornerSize">0dp</item>.

enter image description here

Upvotes: 24

Kyo Huu
Kyo Huu

Reputation: 578

Create an xml file like this:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:shape="rectangle">
            <corners android:radius="@dimen/_100sdp"/>
        </shape>
    </item>
</layer-list>

and use it in ur extended fab - use with shapeAppearanceOverlay

<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
            style="@style/Widget.MaterialComponents.ExtendedFloatingActionButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:shapeAppearanceOverlay="@drawable/bg_circle_black"
            android:text="Sign in to setup follow page"
            android:textAlignment="center"
            app:layout_anchor="@id/scrollView"
            app:layout_anchorGravity="bottom|center|center_horizontal" />

Upvotes: 0

hnspaces
hnspaces

Reputation: 44

I think Material Button would fit perfectly regarding to your needed, also Material Button have rectangular shape with small radius in corners. You should try it instead using Extended Floating Action Button.

Check the Official document how to use it with guidelines

Material Button

Upvotes: 0

Related Questions