CODEWITHSUNDEEP
androidandroid-drawable
j2emanue
j2emanue

Reputation: 62549

Android - how to make inner rounded corner like a paper tag?

enter image description here

i would like to draw the following image but im confused on how to do the beginning area that i put in orange. i want that to be circular but its a inner circle if you see what i mean from the photo. i tried using a negative radius like this:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle">
  <solid android:color="@color/my_green" />
  <corners android:radius="-24dp" />
</shape>

but that does not do anything. how is this accomplished ?

p.s it does not have to be in orange can be all the same color i just wanted to emphasis the issue.

Upvotes: 0

Views: 1259

Answers (2)

j2emanue
j2emanue

Reputation: 62549

i used a layer list with two drawables. make a white drawable with circular shape. just shift that drawables over a bit and ensure its a solid white color. it will give the effect as above.

Upvotes: 0

Ole Pannier
Ole Pannier

Reputation: 3673

You can achieve that with using <vector in a custom drawable file, here invert_shape.xml:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="200dp"
    android:height="100dp"
    android:viewportWidth="359.5"
    android:viewportHeight="196.0">
    <path
        android:pathData="M-0.000,0.000 C108.667,0.000 217.333,0.000 326.000,0.000 C326.000,32.000 326.000,64.000 326.000,96.000 C217.333,96.000 108.667,96.000 -0.000,96.000 C46.617,64.186 37.267,32.149 -0.000,0.000 Z"
        android:fillColor="#2962FF"/>
</vector>

After that you need to set this drawable as android:background of your LinearLayout in your activity_main.xml like this:

 <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/linear_layout"
        android:background="@drawable/invert_shape"
        android:layout_centerInParent="true"
        android:orientation="horizontal" />

The result:

inverted shape

You may asked yourself how to achieve the android:path in your <vector, I used a simple solution for that. You can use programs like Photoshop or Illustrator and create your shape there in a layer. If you have done that, right click on your layer and select "Copy SVG". Now you copied the shape, paste it in your drawable (here invert_shape.xml) in Android Studio and you will get parameters like android:path and android:stroke of your photoshop shape. Now, there's no end for your creativity. Cheers! :)

Upvotes: 1

Related Questions