Selectable Circular Imageview Like Google+

How can I create a selectable circular ImageView like in the current Google+ app used for the profile pictures? This is what I refer to: The image above is unselected and the belo

Solution 1:

Really simple solution, thanks to @CommonsWare for the tips.

Size of Bitmap: imageSizePx - 3DP Size of ImageView: imageSizePx

mImageView.setBackground(createStateListDrawable(imageSizePx));
mImageView.setImageBitmap(loadedImage);

private StateListDrawable createStateListDrawable(int size) {
    StateListDrawable stateListDrawable = new StateListDrawable();

    OvalShape ovalShape = new OvalShape();
    ovalShape.resize(size, size);
    ShapeDrawable shapeDrawable = new ShapeDrawable(ovalShape);
    shapeDrawable.getPaint().setColor(getResources().getColor(R.color.somecolor));

    stateListDrawable.addState(newint[]{android.R.attr.state_pressed}, shapeDrawable);
    stateListDrawable.addState(newint[]{android.R.attr.state_focused}, shapeDrawable);
    stateListDrawable.addState(newint[]{}, null);

    return stateListDrawable;
}

Solution 2:

Assuming that by "selectable" you mean "checkable, like a CheckBox", then that could be some CompoundButton that is using a StateListDrawable with regular and checked states for the background behind the "SkillOverflow" foreground image.

You can use uiautomatorviewer to see what the actual widget is that Google+ uses.

Solution 3:

You can make a custom View that extends ImageView. Override onDraw to clip the canvas with a circular region and draw the image on the canvas. Something like this as a starting point:

publicclassCircularImageViewextendsImageView {
    /* constructors omitted for brevity ... */protectedvoidonDraw(Canvas canvas) {
        intsaveCount= canvas.save();

        // clip in a circle// draw imageDrawabled= getDrawable();
        if (d != null) {
            d.draw(canvas);
        }

        // do extra drawing on canvas if pressed

        canvas.restoreToCount(saveCount);
    }
}

Take some time to get familiar with the Canvas and other 2D drawing APIs in Android.

Solution 4:

I was able to achieve this effect through a custom ImageView by overriding onDraw and painting some sort of "border" whenever it detects a touch event. As a bonus, there is a selector overlay. Hopefully you may find this view helpful...

https://github.com/Pkmmte/CircularImageView

Solution 5:

https://github.com/hdodenhof/CircleImageView

Best library so far, super easy to integrate. It will give you border width and color option, you can change the color onClick to match your query.