How can I make a floating action button which is proportional to the screen?

Question

I want to make a FAB that grows in size when viewed on a larger screen. Is it possible? If so what can I add to the normal FAB code.

Edit:-Guys what i mean by my question is that I do not want the same size on a 5 inch and 10 inch screen. I want the FAB to automatically change its size depending on the size of the screen.

Thanks.

Answer 1

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.

You have to create Different values folder for different screens. Like:

values-sw720dp          10.1” tablet 1280x800 mdpi

values-sw600dp          7.0”  tablet 1024x600 mdpi

values-sw480dp          5.4”  480x854 mdpi 
values-sw480dp          5.1”  480x800 mdpi 

values-xxhdpi           5.5"  1080x1920 xxhdpi
values-xxhdpi           5.5"  1440x2560 xxhdpi

values-xhdpi            4.7”   1280x720 xhdpi 
values-xhdpi            4.65”  720x1280 xhdpi 

values-hdpi             4.0” 480x800 hdpi
values-hdpi             3.7” 480x854 hdpi

values-mdpi             3.2” 320x480 mdpi

values-ldpi             3.4” 240x432 ldpi
values-ldpi             3.3” 240x400 ldpi
values-ldpi             2.7” 240x320 ldpi

There is also another trick to accomplish this task,
Choose LinearLayout and use android:layout_weight="n" for different views in order to automatically increase their size.

This answer is given by -@Javier Mendonca, @IntelliJ Amiya and Me

Answer 2

From the docs:

Floating action buttons come in two sizes: the default and the mini. The size can be controlled with the fabSize attribute.

This is, of course, not relating to the dimensions of the image assets you provide to the fab ImageView backing itself.

If you use the default Floating Action Button image, its size will appear consistent across multiple screen resolutions, since its assets are managed by the design support library. If you provide a custom image for your floating action button, then be sure to provide necessary asset dimensions.

For more information see: https://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html#attr_android.support.design:fabSize

Answer 3

Try this hope this will help:

         <android.support.design.widget.FloatingActionButton
            android:id="@+id/floating_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_margin="@dimen/fab_margin" //16dp
            android:background="?attr/colorPrimary"
            android:src="@drawable/ic_arrow_forward_white_24dp" />