How to have a FAB with option of no padding, yet still have it elevation?

Question

background

I have a small circular contact photo view that I need to show the user. If the photo is available, I should show it, while the image gets rounded to a circle, and has an elevation.

If the photo isn't available, I show an icon inside with a background, while still it's rounded and has elevation.

The problem

I've managed to make the photo showing work only on Android 5 and above:

But, it has a bad color around the edges as it tries to show the background of the FAB, and on Android 4.x and below it it showing as a simple rectangular content, with nothing that's related to FAB, probably because padding is what's protecting it for the shadow to be shown.

I also need to be able to add a stroke (a thin line of specific color around the rounded image), but I'm not sure how to add it.

What I've tried

This is in the layout file:

<android.support.design.widget.FloatingActionButton
    android:id="@+id/image"
    android:layout_width="@dimen/test"
    android:layout_height="@dimen/test"/>

"test" is 80dp.

And this is in the code:

    FloatingActionButton floatingActionButton = (FloatingActionButton) view.findViewById(R.id.image);
    floatingActionButton.setPadding(0, 0, 0, 0);
    final Bitmap bitmap = ...
    RoundedCornersDrawable roundedCornersDrawable = new RoundedCornersDrawable(getResources(), bitmap, bitmap.getWidth() / 2);
    floatingActionButton.setImageDrawable(roundedCornersDrawable);

code of RoundedCornersDrawable:

public class RoundedCornersDrawable extends BitmapDrawable {

    private final BitmapShader bitmapShader;
    private final Paint p;
    private final RectF rect;
    private final float borderRadius;

    public RoundedCornersDrawable(final Resources resources, final Bitmap bitmap, final float borderRadius) {
        super(resources, bitmap);
        bitmapShader = new BitmapShader(getBitmap(), Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
        final Bitmap b = getBitmap();
        p = getPaint();
        p.setAntiAlias(true);
        p.setShader(bitmapShader);
        final int w = b.getWidth(), h = b.getHeight();
        rect = new RectF(0, 0, w, h);
        this.borderRadius = borderRadius < 0 ? 0.15f * Math.min(w, h) : borderRadius;
    }

    @Override
    public void draw(final Canvas canvas) {
        canvas.drawRoundRect(rect, borderRadius, borderRadius, p);
    }
}

The question

How do I get the FAB to work this way? How can I disable the padding at will, for all Android versions, and yet still have a rounded image with shadow ?

How do I also add a stroke to the rounded FAB ?

Every question you ask, I bookmark it. You ask really good questions, SO user. Cheers. +1 on both the Q and A. — An SO User, Dec 16 '15 at 09:11
@LittleChild Thank you. I didn't know it's possible to check other user's threads here. How do I do this? — android developer, Dec 16 '15 at 10:46
You can just head over to their profile and look at the questions they've asked and answers they've written. — An SO User, Dec 16 '15 at 17:22

score 1 · Answer 1 · edited May 23 '17 at 10:32

I think I was too fast in writing this post, while it seems there is already one about it here:

How to add a shadow and a border on circular imageView android?

I will have a look at it and see if it matches the requirements of what I need.

EDIT: it doesn't look as well as FAB (especially the shadow), plus I don't see the ability to put the small content in the center, like in FAB. It always puts the content in center-crop way.

Of course, I could just put a smaller sized image in it....

EDIT: I think I've found the right library this time: https://github.com/lopspower/CircularImageView

It allows a shadow, customize the shadow size and color, and also a border, and also how to scale the image.

It's not quite a FAB, and it doesn't have the ability to put the image at the center without cropping, but it's enough for me.

How to have a FAB with option of no padding, yet still have it elevation?

background

The problem

What I've tried

The question

1 Answers1