Search code examples
androidandroid-drawableandroid-shape

Android custom vector scaling

I am attempting to create a custom shape to use as the background for my menu drawer. The issue i'm experiencing is that i can't get the shape i want. At the moment i am creating the shape as an svg in Adobe Illustrator and then converting that into an XML drawable but it isn't having the desired effect. How can i get the vector drawable to scale depending on its parent (match_parent) and content (wrap_content)?

menu_shape.xml
An issue i've picked up on this is that this shape isn't exactly responsive as it is essentially being squeezed to fit the viewport and thus behaves extremely different depending on the screen size.

<vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:aapt="http://schemas.android.com/aapt"
    android:viewportWidth="597.28"
    android:viewportHeight="542.16"
    android:width="597.28dp"
    android:height="542.16dp">
    <path
        android:pathData="M0.5 303.39V0.5H596.78V370.39S310.5 797.13 0.5 303.39Z"
        android:fillColor="#A92324"
        android:strokeColor="#231F20"
        android:strokeWidth="1"
        android:strokeMiterLimit="10" />
</vector>

Current result:

Desired result:
The desired result is essentially a massive circle that is offset to the right slightly

Solution

  • Try this

    <vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:aapt="http://schemas.android.com/aapt"
        android:viewportWidth="597.28"
        android:viewportHeight="542.16"
        android:width="597.28dp"
        android:height="542.16dp">
  <path
          android:pathData="M0.5 302.39V0.5H596.7V374.39S310.5 501.13 0.5 303.39Z"
          android:fillColor="#A92324"
          android:strokeColor="#231F20"
          android:strokeWidth="1"
          android:strokeMiterLimit="10" />
</vector>