如何在 XML Android Studio 中创建镜像矩形形状？

Question

I want to create a rectangle shape in XML like this:

Characteristics:

• crystal-clear
• shadow bottom
• 2 color areas
  

My solution is to have two shape overlap and rotate the angle for one, but it didn't work.

Does anyone have an idea how to solve this? Thank you!

Answer 1

create a custom ImageButton:

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.widget.ImageButton;
import androidx.annotation.Nullable;

@SuppressLint("AppCompatCustomView")
public class CustomRectangleView extends ImageButton {

    private Paint drawPaint;
    private Paint drawPaint1;

    public CustomRectangleView(Context context) {
        super(context);
        setUpDraw();
    }

    public CustomRectangleView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        setUpDraw();
    }

    private void setUpDraw() {

        drawPaint = new Paint();
        setUpNewPaintObject(drawPaint, getResources().getColor(R.color.blue_light), 5);

        drawPaint1 = new Paint();
        setUpNewPaintObject(drawPaint1, Color.LTGRAY, 8);
    }

    private void setUpNewPaintObject(Paint paintObject, int color, int stroke) {
        paintObject.setColor(color);
        paintObject.setAntiAlias(true);
        paintObject.setStrokeWidth(stroke);
        paintObject.setStyle(Paint.Style.FILL_AND_STROKE);
        paintObject.setStrokeJoin(Paint.Join.ROUND);
        paintObject.setStrokeCap(Paint.Cap.ROUND);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        float RADIUS = 200;
        @SuppressLint("DrawAllocation")
        Path path = new Path();
        path.moveTo(0, 0); // used for first point
        path.lineTo(585, 0);
        path.lineTo(0, 60);

        @SuppressLint("DrawAllocation")
        Path path1 = new Path();
        path1.moveTo(15, 0); // used for first point
        path1.lineTo(585, 0);

        path1.moveTo(15, 150); // used for first point
        path1.lineTo(585, 150);


        canvas.drawPath(path, drawPaint);
        canvas.drawPath(path1, drawPaint1);
    }
}

and add this custom view to XML file:

    <CustomRectangleView
        android:layout_width="200dp"
        android:layout_height="50dp"
        android:src="@drawable/ic_add_black_24dp"
        android:background="#6388C0">
    </CustomRectangleView>

Answer 2

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- "background shadow" -->
<item>


<shape android:shape="rectangle" >
<solid android:color="#000000" />

<corners android:radius="15dp" />
</shape>
</item>
<!-- background color -->
<item
android:bottom="3px"
android:left="3px"
android:right="3px"
android:top="3px">
<shape android:shape="rectangle" >
<solid android:color="#cc2b2b" />


<corners android:radius="8dp" />
</shape>
</item>
<!-- over left shadow -->
<item>
<shape android:shape="rectangle" >
<gradient
android:angle="180"
android:centerColor="#00FF0000"
android:centerX="0.9"
android:endColor="#99000000"
android:startColor="#00FF0000" />

<corners android:radius="8dp" />
</shape>
</item>
<!-- over right shadow -->
<item>
<shape android:shape="rectangle" >
<gradient
android:angle="360"
android:centerColor="#00FF0000"
android:centerX="0.9"
android:endColor="#99000000"
android:startColor="#00FF0000" />

<corners android:radius="8dp" />
</shape>
</item>
<!-- over top shadow -->
<item>
<shape android:shape="rectangle" >
<gradient
android:angle="-90"
android:centerColor="#00FF0000"
android:centerY="0.9"
android:endColor="#00FF0000"
android:startColor="#99000000"
android:type="linear" />

<corners android:radius="8dp" />
</shape>
</item>
<!-- over bottom shadow -->
<item>
<shape android:shape="rectangle" >
<gradient
android:angle="90"
android:centerColor="#00FF0000"
android:centerY="0.9"
android:endColor="#00FF0000"
android:startColor="#99000000"
android:type="linear" />

<corners android:radius="8dp" />
</shape>
</item>
</layer-list>