FAB with user's profile inside without any padding in Android

Question

I am trying to have user's profile picture in one of my FABs. I tried a cheeky way by giving the fab a negative padding but it doesn't work. There is still padding. How do i remove that padding and have a filled FAB?

this is my fab :

<android.support.design.widget.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|start"
            android:src="@drawable/testpropic"
            android:padding="-50dp"
            android:elevation="0dp"
            android:id="@+id/profileFAB"
            android:stateListAnimator="@null"
            app:pressedTranslationZ="12dp"
            android:visibility="gone"
            />

This is what I am getting :

score 2 · Accepted Answer · edited May 23 '17 at 12:25

There are two ways to achieve your desired effect:

Simply just override the original dimensions of the Android support library by adding:
```
<dimen name="design_fab_image_size" tools:override="true">48dp</dimen>
```
to your dimens.xml, this will automatically override the design_fab_image_size set by the library (may not work with third party libraries) as noted in How to remove auto padding of FAB button in android?

Note: 48dp in this case is the width of the floating action button.

Use an ImageView with a Circle Transformation using the Picasso Library instead of a FloatingActionButton. You'll lose the simple Fab functionality and animations but you'll have more flexibility with setting the image correctly. As you're animating the FAB on button press (i.e. displaying all four floating action buttons, replacing it with an ImageView of the same dimensions and attributes, would be easy to change to in your XML)

An example of the class would be:

public class CircleTransform implements Transformation {
    @Override
    public Bitmap transform(Bitmap source) {
        int size = Math.min(source.getWidth(), source.getHeight());

        int x = (source.getWidth() - size) / 2;
        int y = (source.getHeight() - size) / 2;

        Bitmap squaredBitmap = Bitmap.createBitmap(source, x, y, size, size);
        if (squaredBitmap != source) {
            source.recycle();
        }

        Bitmap bitmap = Bitmap.createBitmap(size, size, source.getConfig());

        Canvas canvas = new Canvas(bitmap);
        Paint paint = new Paint();
        BitmapShader shader = new BitmapShader(squaredBitmap,
                BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP);
        paint.setShader(shader);
        paint.setAntiAlias(true);

        float r = size / 2f;
        canvas.drawCircle(r, r, r, paint);

        squaredBitmap.recycle();
        return bitmap;
    }

    @Override
    public String key() {
        return "Circle";
    }
}

and an example of using such technique with Picasso would be:

Picasso.with(context).load(imageUri).transform(new CircleTransform()).into(imageView);

Note: .load() can take a String URL or Resource ID

Update: If you want a circle image inside a circle FloatingActionButton, use both techniques but use your FloatingActionButton instead. Transform the image and then set it to your FloatingActionButton using Picasso.

Thank you for you elaborated answer ! Tried the 1st method and the situation of course improved . But as my picture is square , the corners on the picture gets out of the FAB. How do I solve this ?? — Shakil Mahmud Shanto, Feb 28 '17 at 16:45
You will have to do a combination of both answers, but instead of ImageView where it says .into() for picasso, use your floating action button. So you should transform the image before you set it to the floating action button to make it circle — Bradley Wilson, Feb 28 '17 at 16:48
thanx for coming back man. I used a circular imageview instead of a FAB to get what I want. works fine for me :) — Shakil Mahmud Shanto, Mar 01 '17 at 20:08
If it's the library, there are pros and cons, I'd always recommend using a transformation with Picasso but good job bud — Bradley Wilson, Mar 01 '17 at 21:05
Yes I am using an external library. I am using the imageView to dynamically change it's image source according to user's profile, and to start a new activity. Going to a new activity works fine. Hopefully it wont be a problem changing the pic. — Shakil Mahmud Shanto, Mar 01 '17 at 21:30

FAB with user's profile inside without any padding in Android

1 Answers1