How to set Floating Action Button image to fill the button?

后端 未结 7 1471
情歌与酒
情歌与酒 2021-01-11 17:27

Usually icons are set for floating action buttons, but I need to set an image, so I can make a circular image.

I added it to the project (using Android Studio-> New

相关标签:
7条回答
  • 2021-01-11 17:36

    Set the following property for the FAB

    android:scaleType="center"

    if that does not work try using property

    app:fabSize="mini"

    0 讨论(0)
  • 2021-01-11 17:36
    1. Override image size dimension for nested image in FAB by adding below line in dimens.xml

    <dimen tools:override="true" name="design_fab_image_size">56dp</dimen>

         (I used 56dp cause fab size in guidelines is 56dp)
    
    1. add app:tint="@null" and android:scaleType="fitCenter" in FAB.
    0 讨论(0)
  • 2021-01-11 17:37

    If you are setting a rounded png image, work around for this is to extend the floatingActionButton class then override the on onMeasure method and set the padding to 0, and scaleType To centerCrop

    public class FloatingImageButton extends FloatingActionButton {
    
    
    public FloatingImageButton(Context context) {
        super(context);
    }
    
    public FloatingImageButton(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        setPadding(0, 0, 0, 0);
        setScaleType(ScaleType.CENTER_CROP);
    
    
    }
    }
    

    xml sample

        <com.tabz.app.FloatingImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/camera_circle"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"/>
    

    output

    0 讨论(0)
  • 2021-01-11 17:41

    The solution is app:maxImageSize = "56dp" property set to your FAB size.

    1. Have an image or vector asset, preferably in perfect circle shape and perfectly fit to canvass (no empty margins).
    2. Know the actual size of Floating Action Bar (FAB) - Default (56 x 56dp) or Mini (40 x 40dp).
    3. XML Code thusly:
    <com.google.android.material.floatingactionbutton.FloatingActionButton
       android:src="@drawable/perfect_fit_circle_image"
       app:maxImageSize="56dp"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />
    
    0 讨论(0)
  • 2021-01-11 17:52

    Use below code

    android:scaleType="fitXY"
    
    0 讨论(0)
  • 2021-01-11 17:54

    With the Material Components library, according to the doc, you can use the attribute app:maxImageSize.

    You can use a custom dimension, but you can also refer to these defined dimensions.

    <dimen name="design_fab_size_mini">40dp</dimen>
    <dimen name="design_fab_size_normal">56dp</dimen>
    

    Just use:

     <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab"
            app:srcCompat="@drawable/ic_add_24px"
            app:maxImageSize="@dimen/design_fab_size_normal"
            ../>
    

    Here the result with the standard dimension (<dimen name="design_fab_image_size">24dp</dimen>) and the design_fab_size_normal.

    0 讨论(0)
提交回复
热议问题