Search code examples
androidxmlsvgvectorandroid-vectordrawable

Circle vector inside another one


I need to put inside a circle shape another one, but i can't do it. I created the first shape (a circle with 2 lines. One on top, the other on bottom) and i need to put a simple circle shape inside of it. Maybe with a bit of padding between the shapes. That's the code that i have done so far :

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path
        android:fillColor="#62a35d"
        android:pathData="M17,12C17,14.42 15.28,16.44 13,16.9V21H11V16.9C8.72,16.44 7,14.42 7,12C7,9.58 8.72,7.56 11,7.1V3H13V7.1C15.28,7.56 17,9.58 17,12M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z" />
    <path
        android:fillColor="#62a35d"
        android:pathData="M22,32
        A10,10 0 1,1 42,32
        A10,10 0 1,1 22,32 Z" />
</vector>

The second shape is currently not visible. It become visible if i change the android:viewportWidth and android:viewportHeight from 24 to 64. But it's not what i have to do.


Solution

  • as per your requirement here is a vector drawable

    <?xml version="1.0" encoding="utf-8"?>
    <vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="640dp"
        android:height="640dp"
        android:viewportWidth="640"
        android:viewportHeight="640">
    
        <path
            android:fillColor="#582370"
            android:strokeWidth="1"
            android:pathData="M465.28 323.25C465.28 403.15 400.18 468.02 320 468.02C239.82 468.02 174.72 403.15 174.72 323.25C174.72 243.35 239.82 178.49 320 178.49C400.18 178.49 465.28 243.35 465.28 323.25Z" />
        <path
            android:fillColor="#e1db5f"
            android:strokeWidth="1"
            android:pathData="M428.57 322.19C429.14 380.15 380.95 427.68 321.02 428.27C261.1 428.85 211.99 382.27 211.43 324.31C210.86 266.35 259.05 218.83 318.98 218.24C378.9 217.66 428.01 264.24 428.57 322.19Z" />
        <path
            android:fillColor="#582370"
            android:strokeWidth="1"
            android:pathData="M300.12 20.46L339.88 20.46L339.88 189.7L300.12 189.7L300.12 20.46Z" />
        <path
            android:fillColor="#582370"
            android:strokeWidth="1"
            android:pathData="M300.12 450.3L339.88 450.3L339.88 619.54L300.12 619.54L300.12 450.3Z" />
    </vector>
    

    and if you need circle into a circle

        <?xml version="1.0" encoding="utf-8"?>
    <vector xmlns:android="http://schemas.android.com/apk/res/android"
    
        android:width="640dp"
        android:height="640dp"
        android:viewportWidth="640"
        android:viewportHeight="640">
    
        <path
            android:fillColor="#582370"
            android:strokeWidth="1"
            android:pathData="M483.63 266.48C483.63 346.38 418.53 411.24 338.35 411.24C258.17 411.24 193.07 346.38 193.07 266.48C193.07 186.58 258.17 121.71 338.35 121.71C418.53 121.71 483.63 186.58 483.63 266.48Z" />
        <path
            android:fillColor="#e1db5f"
            android:strokeWidth="1"
            android:pathData="M449.02 265.42C449.58 323.38 401.39 370.9 341.47 371.49C281.55 372.07 232.44 325.49 231.87 267.54C231.31 209.58 279.5 162.05 339.42 161.46C399.34 160.88 448.45 207.46 449.02 265.42Z" />
    </vector>
    

    UPDATED: add padding or add the third circle into vector image (padding is not possible so I add another circle into the image so you can change color as you need)

        <?xml version="1.0" encoding="utf-8"?>
    <vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
    
    <path
        android:fillColor="#5ba1fd"
        android:strokeWidth="1"
        android:pathData="M19.5 12.07C19.5 16.23 16.14 19.61 12 19.61C7.86 19.61 4.5 16.23 4.5 12.07C4.5 7.9 7.86 4.53 12 4.53C16.14 4.53 19.5 7.9 19.5 12.07Z" />
    <path
        android:fillColor="#ffffff"
        android:strokeWidth="1"
        android:pathData="M18.11 12.07C18.11 15.4 15.42 18.1 12.11 18.1C8.79 18.1 6.11 15.4 6.11 12.07C6.11 8.74 8.79 6.03 12.11 6.03C15.42 6.03 18.11 8.74 18.11 12.07Z" />
    <path
        android:fillColor="#832727"
        android:strokeWidth="1"
        android:pathData="M17.61 11.93C17.66 14.98 15.23 17.52 12.2 17.6C9.16 17.67 6.66 15.26 6.62 12.21C6.57 9.15 9 6.61 12.03 6.54C15.07 6.46 17.57 8.88 17.61 11.93Z" />
    <path
        android:fillColor="#5ba1fd"
        android:strokeWidth="1"
        android:pathData="M10.5 0L13.5 0L13.5 4.7L10.5 4.7L10.5 0Z" />
    <path
        android:fillColor="#5ba1fd"
        android:strokeWidth="1"
        android:pathData="M10.5 19.3L13.5 19.3L13.5 24L10.5 24L10.5 19.3Z" /></vector>