CODEWITHSUNDEEP
androidandroid-resourcesandroid-design-library
tse
tse

Reputation: 6069

How to make custom size of FloatingActionButton

FloatingActionButton by default has two sizes (normal and mini). I need another one (bigger than normal).

app:fabSize parameter from xml became private int mSize; variable in FloatingActionButton class. The real size will be determined by this function:

final int getSizeDimension() {
    switch(this.mSize) {
    case 0:
    default:
        return this.getResources().getDimensionPixelSize(dimen.fab_size_normal);
    case 1:
        return this.getResources().getDimensionPixelSize(dimen.fab_size_mini);
    }
}

Because it declared as final I can not extend it. Any ideas? May be I can redefine dimen.fab_size_mini resource in my app?

Upvotes: 17

Views: 8805

Answers (5)

Nikesh Nayak
Nikesh Nayak

Reputation: 322

Problem solved in New Version Floating Action Button in MaterialComponents Dependency

Use this:

app:maxImageSize="24dp"
app:fabCustomSize="34dp"

Add this dependency:

implementation 'com.google.android.material:material:1.1.0'

Change AppTheme from AppCompat to MaterialComponents to see effect.

styles.xml

<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:fontFamily">@font/raleway</item>
    </style>

Note: Android Project should be migrated in AndroidX

You have to use this dependency

This will work in device above API Level 21 (API >=21)

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_share"
    android:padding="0dp"
    app:backgroundTint="@color/yellow"
    app:maxImageSize="24dp"
    app:fabCustomSize="34dp"
    />

I hope this will help someone.

Upvotes: 2

Saubhik Singh
Saubhik Singh

Reputation: 11

You can set custom size by following

**Set either height or width match_parent and another one according to yourself **

<android.support.design.widget.FloatingActionButton
    android:id="@+id/addPhoto"
    android:layout_width="match_parent"
    android:layout_height="80dp"
    />

Upvotes: 0

osrl
osrl

Reputation: 7828

Since support library 27.1.0 there is an attribute for this:

Just set app:fabCustomSize

Upvotes: 17

Rino
Rino

Reputation: 743

You can define your custom FloatingActionButton in this way

public class CustomSizeFloatingActionButton extends FloatingActionButton {

    public CustomSizeFloatingActionButton(Context context) {
        super(context);
    }

    public CustomSizeFloatingActionButton(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public CustomSizeFloatingActionButton(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int width = getMeasuredWidth();
        int height = getMeasuredHeight();
        setMeasuredDimension((int) (width * 1.5f), (int) (height * 1.5f));
    }

}

instead of 1.5f you can define set your multiplier.
In this way you don't need to redefine resources that may affect other parts of the app.

Upvotes: 6

tse
tse

Reputation: 6069

Because I don't use FAB of mini size, I redefined this size.

dimens.xml:

<resources>
    <dimen name="design_fab_size_mini">100dp</dimen>
</resources>

layout.xml (first FAB will be bigger than second one):

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/addPhoto"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        app:fabSize="mini"
        android:layout_marginBottom="@dimen/fab_margin_bottom"
        android:layout_marginRight="@dimen/fab_margin_right"
        android:src="@drawable/ic_photo_camera_white_24dp"

        />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/addPicture"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_alignParentBottom="true"
        android:layout_toLeftOf="@id/addPhoto"
        android:layout_marginBottom="@dimen/fab_margin_bottom"
        android:layout_marginRight="0dp"
        android:src="@drawable/ic_photo_white_24dp"
        />

Upvotes: 12

Related Questions