Put circle behind icon and choose color

Question

I have a number of icons I have to display in my app, and everytime they show up they do within a colored circle; Now I only get the icon itself so I have to create the circle myself. I would like to create a custom view that does this but I really have no clue on how to implement it!

you can create circle shape using xml https://android--code.blogspot.in/2016/03/android-circle-shape-in-xml-drawable.html — darwin, May 03 '18 at 12:54
you can use image view then set circle image as background and icon as src — darwin, May 03 '18 at 12:57
you can change shape color programaticaly, check this https://stackoverflow.com/questions/7164630/how-to-change-shape-color-dynamically?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa — darwin, May 03 '18 at 12:58

score 1 · Answer 1 · answered May 03 '18 at 13:04

1

This will be helpful https://github.com/hdodenhof/CircleImageView

To set background color use this line-

app:civ_circle_background_color="@color/colorPrimary"

answered May 03 '18 at 13:04

Ana

174
2
8

score 0 · Answer 2 · answered May 03 '18 at 13:02

User vector drawable : https://developer.android.com/reference/android/graphics/drawable/VectorDrawable

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="200dp"
    android:height="200dp"
    android:viewportHeight="64"
    android:viewportWidth="64">

    <path
        android:fillColor="#ff00ff"
        android:pathData="M22,32
        A10,10 0 1,1 42,32
        A10,10 0 1,1 22,32 Z" />
</vector>

score 0 · Answer 3 · answered May 03 '18 at 13:03

    public class ShapeView extends View {


    int shape;
    int color;
    Paint paint;

    public static final int CIRCLE = 0;
    public static final int SQUARE = 1;

    public ShapeView(Context context, AttributeSet attrs) {
        super(context, attrs);

        TypedArray a = context.getTheme().obtainStyledAttributes(
                attrs,
                R.styleable.ShapeView,
                0, 0
        );

        try {
            shape = a.getInteger(R.styleable.ShapeView_shape, 0);
            color = a.getColor(R.styleable.ShapeView_color, ContextCompat.getColor(context, R.color.white));
        } finally {
            a.recycle();
        }

        paint = new Paint();
        paint.setColor(color);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        switch (shape) {
            case CIRCLE:
                drawCircle(canvas);
                break;
            case SQUARE:
                drawSquare(canvas);
                break;

        }
    }

    private void drawCircle(Canvas canvas) {
        int x = getWidth() / 2;
        int y = getHeight() / 2;
        canvas.drawCircle(x, y, x, paint);
    }

    private void drawSquare(Canvas canvas) {
        int x = getWidth() / 2;
        int y = getHeight() / 2;
        int right = 2 * x;
        int bottom = 2 * y;
        canvas.drawRect(0, 0, right, bottom, paint);
    }

    public void changeShape(int shape) {
        this.shape = shape;
        invalidate();
        requestLayout();
    }

    public void changeColor(int color) {
        this.color = color;
        invalidate();
    }
}

create an attr.xml file in resource folder

<declare-styleable name="ShapeView">
    <attr name="shape" format="enum">
        <enum name="circle" value="0" />
        <enum name="square" value="1" />
    </attr>
    <attr name="color" format="color" />
</declare-styleable>

The use it in xml as below

<com.app.custom.ShapeView
                android:id="@+id/v_recording_state"
                android:layout_width="@dimen/_15sdp"
                android:layout_height="@dimen/_15sdp"
                android:layout_gravity="center"
                app:color="@color/white"
                app:shape="circle" />

Put circle behind icon and choose color

3 Answers3