CODEWITHSUNDEEP
androidandroid-layoutfloating-action-button
michael
michael

Reputation: 3945

Android: How to change size of app:fabSize="normal" for Floating Action Button

When using the new FloatingActionButton, the size is determined by app:fabSize="normal". How can I set what in dp is the size referenced by "normal"?

I tried to create values/attrs.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="app">
        <attr name="fabSize">
            <enum name="mini" value="50dp" />
            <enum name="normal" value="100dp" />
        </attr>
    </declare-styleable>
</resources>

But I get the error

"normal" in attribute "fabSize" is not a valid integer

Upvotes: 32

Views: 51345

Answers (9)

Avinash Kumar
Avinash Kumar

Reputation: 21

Just add app:fabCustomSize="70dp" in your xml file under FAB component

Here is an example of a FAB button :

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab_AddRoom"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:clickable="true"
    android:src="@android:drawable/ic_input_add"
    app:fabCustomSize="70dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.93"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.93" />

Upvotes: 0

Reone
Reone

Reputation: 41

app:maxImageSize

<android.support.design.widget.FloatingActionButton
    android:id="@+id/floating_action_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    android:layout_marginBottom="60dp"
    android:src="@drawable/icon_return_back"
    app:backgroundTint="#00ffffff"
    app:borderWidth="0dp"
    app:elevation="0dp"
    app:maxImageSize="46dp"
    app:pressedTranslationZ="0dp"
    app:rippleColor="#00ffffff" />

Upvotes: 4

aminography
aminography

Reputation: 22832

• Standard Sizes

There are three options for standard FAB sizes (according to developer.android) which you can set them using app:fabSize.

  1. normal: The normal sized button.
  2. mini: The mini sized button.
  3. auto: Size which will change based on the window size

.

<android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:srcCompat="@drawable/ic_add_black_24dp"
    app:tint="#404D54"
    app:backgroundTint="#ffd500"
    app:fabSize="normal" />

.

• Custom Sizes

To set custom FAB size you can set app:fabCustomSize. Note that android:layout_width and android:layout_height should be "wrap_content".

<android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:srcCompat="@drawable/ic_add_black_24dp"
    app:tint="#404D54"
    app:backgroundTint="#ffd500"
    app:fabCustomSize="36dp" />

Upvotes: 12

Sandeep Sankla
Sandeep Sankla

Reputation: 1260

To change Fab size and to see large image init i have made below changes in android api 28:- thew are as 

    <android.support.design.widget.FloatingActionButton
    android:id="@+id/profile_imageview"
    android:layout_width="@dimen/design_fab_size_mini"
    android:layout_height="@dimen/design_fab_size_mini"
    android:layout_marginTop="10dp"
    android:src="@drawable/pin_check"
    app:borderWidth="0dp"
    app:elevation="0dp"
    app:maxImageSize="90dp" />

where in dimens.xml 

<dimen name="design_fab_size_mini" tools:override="true">90dp</dimen>
<dimen name="design_fab_content_size" tools:override="true">58dp</dimen>

Upvotes: 0

Faheem Ahmad Khan
Faheem Ahmad Khan

Reputation: 548

Just user app:fabCustomSize in xml 

app:fabCustomSize="100dp"

Bingo.

Upvotes: 34

Ankit Gupta
Ankit Gupta

Reputation: 139

<dimen name="design_fab_size_normal">90dp</dimen>
<dimen name="design_fab_size_mini">30dp</dimen>
Set this in dimen file.

Upvotes: 1

Kahtaf Alam
Kahtaf Alam

Reputation: 463

I know it's not recommended, but for those that absolutely need to change the default sizes, I was able to do it by wrapping the FloatingActionButton in a LinearLayout.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:layout_centerInParent="true"
    android:orientation="horizontal" >

    <android.support.design.widget.FloatingActionButton
        android:layout_width="@dimen/custom_fab_size"
        android:layout_height="@dimen/custom_fab_size"
        app:fabSize="normal"
        android:clickable="true"
        android:src="@drawable/ic_mic_white_24dp"
        android:scaleType="center"/>
</LinearLayout>

Upvotes: 16

Hoshouns
Hoshouns

Reputation: 2430

There are two different sizes of FAB available: normal or mini

  1. Normal (56dp) — This size should be used in most situations.

  2. Mini (40dp) — Should only be used when there is a need for visual continuity with other components displayed on the screen.

Upvotes: 53

Javier Mendon&#231;a
Javier Mendon&#231;a

Reputation: 2060

You can override the normal and mini sizes by adding the following to values/dimens.xml:

<!-- Overriding sizes of the FAB -->
  <dimen name="design_fab_size_normal">90dp</dimen>
  <dimen name="design_fab_size_mini">30dp</dimen>

The tricky thing would be if you need more than 2 fab sizes, in that case i guess you need to create a custom view extending the fab.

Upvotes: 41

Related Questions