如何在android中创建形状并在该形状上添加文本和图像？

Question

I am trying to create the green shape and add text and an image on top of the green shape. Like this example:

I created the this example in photoshop and I tried to use it as an <ImageView> but the image always look blurry and so, I decided to re-create it using .xml

I know how to create a circle, something like this:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="0dp"
android:shape="ring"
android:thicknessRatio="1.9"
android:useLevel="false" >
<solid android:color="@android:color/transparent" />

<stroke
    android:width="10dp"
    android:color="@android:color/white" />
</shape>

Thanks,

Answer 1

You have several options but if I understand you correctly you would like to have one View which will fill the whole screen, show some text in addition to the picture and last not least have this curved background.

To achieve this, one can create a custom View which extends from ImageView (or as Android Studio recommends it, from android.support.v7.widget.AppCompatImageView ). Extending from ImageView means we'll have to take care of the background and the text, handling the picture will be no problem.

IMO it's better to give the custom View a set of parameters and have it draw the background using a Path than to use a ShapeDrawable because this way one can first evaluate the View 's bounds and then determine where exactly the curve should be drawn.

First, let's introduce some dimension values in res/values/dimens.xml

<dimen name="clipped_circle_deviation">100dp</dimen>
<dimen name="clipped_circle_padding_top">60dp</dimen>

Then, the Activity layout:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
    <com.example.customviews.views.ClippedCircleView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/test"
        android:paddingTop="@dimen/clipped_circle_padding_top"
        android:scaleType="center"/>
</RelativeLayout>

The picture I used for testing:

And what it looks like (I'm sure the text needs some fine tuning but that's another question)

ClippedCircleView.java

public class ClippedCircleView extends android.support.v7.widget.AppCompatImageView {

    public static final String TAG = "ClippedCircle";
    private static final int INNER_EDGE_WEIGHT = 2;
    private static final int OUTER_EDGE_WEIGHT = 3;

    private int measuredWidth;
    private int measuredHeight;
    private Paint innerPaint;
    private Paint outerPaint,;
    private Paint textPaint;
    private Path path;

    public ClippedCircleView(Context context) {
        super(context);
        init();
    }

    public ClippedCircleView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public ClippedCircleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init(){
        setWillNotDraw(false);

        path = new Path();

        innerPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        innerPaint.setColor(Color.GREEN);
        innerPaint.setStyle(Paint.Style.FILL);
        outerPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        outerPaint.setColor(Color.WHITE);
        outerPaint.setStyle(Paint.Style.FILL);
        textPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        textPaint.setColor(Color.WHITE);
        textPaint.setStyle(Paint.Style.FILL);
        textPaint.setTextSize(getResources().getDimensionPixelSize(R.dimen.clipped_circle_textsize));

    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        measuredWidth = right - left;
        measuredHeight = bottom - top;
        float innerEdgeLength = INNER_EDGE_WEIGHT/ (OUTER_EDGE_WEIGHT * 1.0f) * measuredHeight;
        path.moveTo(0,0);
        path.lineTo(0, innerEdgeLength);
        float deviation = getResources().getDimensionPixelSize(R.dimen.clipped_circle_deviation);
        path.quadTo(measuredWidth*0.5f, innerEdgeLength + deviation, measuredWidth, innerEdgeLength);
        path.lineTo(measuredWidth, 0);
        path.lineTo(0,0);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawRect(0, 0, measuredWidth, measuredHeight, outerPaint);
        canvas.drawPath(path, innerPaint);
        canvas.drawText("Hello!", 32, 80, textPaint);
        canvas.drawText("Welcome to", 32, 160, textPaint);
        canvas.drawText("My App", 32, 240, textPaint);
        super.onDraw(canvas);
    }
}

Answer 2

There is no way to directly write text in shape drawable except converting it to bitmap then write the text. If you really want to create it with Drawable , you should do it using Adobe Illustrator and export it as svg . Then it is possible to import svg as Android Vector Drawable (File -> New -> Vector Asset -> Local file -> ...).