Inside hollow shape rectangle drawable / canvas shape

Question

I'm trying to create a drawable shape with stroke for my popup layout background.

and

I tried to play around with radius but didn't get the desired result.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <stroke android:color="?colorSecondary" android:width="1dp"/>
    <solid android:color="?colorSurface"/>
    <corners
        android:topLeftRadius="@dimen/card_corner_radius"
        android:topRightRadius="@dimen/card_corner_radius"
        android:bottomLeftRadius="@dimen/card_corner_radius"
        android:bottomRightRadius="@dimen/card_corner_radius" />

</shape>

I tried with the canvas but cannot achieve second picture

Answer 1

Why can't you simply use the graphics that you posted as a PNG file? Other options follow.

You could decompose your drawing to its components and build a LayerList drawable from the components. For instance, your first image looks like is is composed of two horizontal lines and arcs of ovals at either end. Four drawables, each representing one of these figures and stacked would produce your first image. It would be similar for the second image.

Since you already have the image you want, you could paste it into a vector graphic editing program such as InkScape, export the SVG file and import the SVG file into Android Studio (File->New->Vector Asset and select local SVG file). I did this with your second image and came up with the following:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="145.83989dp"
    android:height="26.347599dp"
    android:viewportWidth="516.7555"
    android:viewportHeight="93.357635">
  <path
      android:pathData="m10,93.107c-8.631,-0.552 -9.5,-0.79 -9.5,-2.607 0,-1.877 0.86,-2.036 14.026,-2.58 15.353,-0.635 17.206,-1.257 21.838,-7.331 6.399,-8.389 7.237,-21.039 2.028,-30.609 -3.638,-6.685 -6.619,-8.98 -11.661,-8.98 -2.2,0 -5.739,-0.521 -7.865,-1.158 -3.309,-0.991 -3.866,-1.567 -3.866,-4 0,-1.859 -0.519,-2.842 -1.5,-2.842 -0.825,0 -1.5,-0.675 -1.5,-1.5 0,-1.876 1.394,-1.935 2.899,-0.122 0.629,0.758 3.497,1.62 6.372,1.917 2.876,0.296 6.235,0.852 7.466,1.235 1.739,0.541 3.006,-0.072 5.691,-2.758 1.9,-1.9 3.755,-4.654 4.123,-6.12 1.726,-6.878 -2.782,-14.742 -9.625,-16.793 -2.649,-0.794 -3.926,-1.753 -3.926,-2.949 0,-1.043 -0.926,-1.951 -2.25,-2.206 -2.005,-0.386 -1.963,-0.448 0.393,-0.57 1.454,-0.075 2.902,-0.811 3.219,-1.636 0.509,-1.327 26.338,-1.5 224.138,-1.5 193.862,0 223.636,0.192 224.116,1.443 0.42,1.093 1.703,1.307 5.302,0.88 10.074,-1.193 22.04,5.074 28.511,14.931 12.842,19.565 10.573,48.147 -5.032,63.388 -2.896,2.828 -7.279,5.911 -9.741,6.851 -2.766,1.056 -4.677,2.481 -5.004,3.73l-0.528,2.02 -229.812,-0.372c-126.396,-0.204 -231.837,-0.098 -234.312,0.235 -2.475,0.334 -8.775,0.334 -14,0zM470,87c-1.098,-0.71 -0.362,-0.973 2.75,-0.985 2.338,-0.008 4.253,-0.353 4.255,-0.765 0,-0.412 2.816,-0.778 6.25,-0.813 7.354,-0.075 11.176,-1.816 17.191,-7.83 13.89,-13.89 15.272,-41.457 2.892,-57.69 -7.683,-10.075 -19.195,-14.271 -28.588,-10.42 -1.202,0.493 -1.75,0.254 -1.75,-0.765 0,-0.86 -1.312,-1.744 -3.125,-2.107 -1.719,-0.344 -100.528,-0.625 -219.577,-0.625L33.847,5l3.219,2.709c8.558,7.201 9.075,19.05 1.198,27.474l-2.508,2.682 3.532,4.318c4.135,5.055 7.713,14.889 7.713,21.197 0,5.993 -3.103,15.578 -6.473,19.997l-2.757,3.615 109.365,0.259c300.91,0.712 324.326,0.694 322.865,-0.25zM453.667,70.333c-0.367,-0.367 -0.667,-1.132 -0.667,-1.7 0,-0.627 0.466,-0.568 1.183,0.15 0.651,0.651 0.951,1.416 0.667,1.7 -0.284,0.284 -0.817,0.217 -1.183,-0.15zM0,80.5c0,-0.825 0.177,-1.5 0.393,-1.5 0.216,0 0.652,0.675 0.969,1.5 0.317,0.825 0.14,1.5 -0.393,1.5 -0.533,0 -0.969,-0.675 -0.969,-1.5z"
      android:fillColor="#000000"/>
</vector>

Which looks like this when displayed in an ImageView:

<androidx.constraintlayout.widget.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/holo_blue_light"
    tools:context=".MainActivity">

    <androidx.appcompat.widget.AppCompatImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:adjustViewBounds="true"
        android:src="@drawable/ic_image"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

The image can be scaled and accurately reflect the original image at any size screen. You can use any graphics editor that can produce an SVG file.