Creating right arrow inside circle

Issue

I would like to draw an image as below using android drawable something as below:

I could do the arrow but when I add circle, the image gets distorted.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
    <shape>
        <solid android:color="@android:color/transparent"/>
        <size android:width="2dp" android:height="50dp"/>
    </shape>
</item>

<item android:bottom="20dp">
    <rotate
        android:fromDegrees="45"
        android:toDegrees="45">
        <shape android:shape="rectangle">
            <solid android:color="#F0AD4E"/>
            <corners
                android:radius="0dp"
                android:bottomRightRadius="0dp"
                android:bottomLeftRadius="0dp"/>
        </shape>
    </rotate>
</item>

<item android:top="20dp">
    <rotate
        android:fromDegrees="-45"
        android:toDegrees="45">
        <shape android:shape="rectangle">
            <solid android:color="#F0AD4E"/>
            <corners
                android:radius="0dp"
                android:topRightRadius="0dp"
                android:topLeftRadius="0dp"/>
        </shape>
    </rotate>
</item>

Can anyone help me to complete the picture.

Thanks.

Solution

Don't use drawables for this, use a custom view and canvas.

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by Bojan on 17.5.2015.
 */

public class CircleRightArrow extends View {

    private int circleColor = 0xFF505070;
    private int arrowColor = 0xFF505070;
    private int measuredSize;
    private int strokeWidth;

    private Paint mCirclePiant, mArrowPaint;

    public CircleRightArrow(Context context) {
        super(context);
        init(context, null, 0);
    }

    public CircleRightArrow(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs, 0);
    }

    public CircleRightArrow(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs, defStyleAttr);
    }

    private void init(Context context, AttributeSet attributeSet, int defStyle) {
        mCirclePiant = new Paint(Paint.ANTI_ALIAS_FLAG);
        mCirclePiant.setColor(circleColor);
        mCirclePiant.setStyle(Paint.Style.STROKE);

        mArrowPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mArrowPaint.setColor(arrowColor);
        mArrowPaint.setStyle(Paint.Style.STROKE);
        mArrowPaint.setStrokeCap(Paint.Cap.ROUND);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int measuredHeight = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);
        int measuredWidth = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);

        measuredSize = Math.min(measuredHeight, measuredWidth);
        strokeWidth = Math.round(measuredSize * 0.05f);
        mCirclePiant.setStrokeWidth(strokeWidth);
        mArrowPaint.setStrokeWidth(strokeWidth);
        // Make a square
        setMeasuredDimension(measuredSize + strokeWidth, measuredSize + strokeWidth);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (measuredSize <= 0) {
            // Not much we can draw, can we
            return;
        }

        float center = (measuredSize + strokeWidth) * 0.5f;
        canvas.drawCircle(center, center, measuredSize * 0.5f, mCirclePiant);

        canvas.drawLine(center + 0.2f * measuredSize, center, center - 0.1f * measuredSize, center + 0.2f * measuredSize, mArrowPaint);
        canvas.drawLine(center + 0.2f * measuredSize, center, center - 0.1f * measuredSize, center - 0.2f * measuredSize, mArrowPaint);
    }
}

Result of 50x50dp at 1920x1080p

Answered By - Bojan Kseneman