androidandroid-drawablelayer-listandroid-shapeandroid-shapedrawable

Layerlist drawable doesn't stretch nicely


I'm starting to learn android layer list and working with drawables. I'm trying to create a simple line with a circle at each end: enter image description here

I came up with a layerlist as shown below. It works good but the problem is when I run it on various screen sizes the circles either separate from the line or the get pushed in and fall in on the line.

I want the shape to resize as is and not get deformed on different screen sizes. I'm not sure what I'm missing.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:left="300dp" android:gravity="center_horizontal|left">
        <shape android:shape="ring"
        android:innerRadiusRatio="700"
        android:thickness="5dp"
        android:useLevel="false">

            <solid android:color="#fff" />

        </shape>
    </item>

    <item 
        android:bottom="13dp"
        android:right="53dp"
        android:left="53dp"
        android:top="13dp">
        <shape android:shape="line">
        <solid android:color="#fff" />

        <stroke
            android:width="2dp"
            android:color="#fff" />
        </shape>
    </item>
    <item
         android:right="300dp" android:gravity="center_horizontal|right">
        <shape 
            android:shape="ring"
            android:innerRadiusRatio="700"
            android:thickness="5dp"
            android:useLevel="false">

            <solid android:color="#fff" />

        </shape>

    </item>
</layer-list>

Solution

  • Try this

    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    
        <item
            android:gravity="center"
            android:left="5dp">
            <shape android:shape="line">
                <solid android:color="#ec0b0b" />
    
                <stroke
                    android:width="2dp"
                    android:color="#054b89" />
            </shape>
        </item>
    
        <item
            android:drawable="@drawable/ic_online"
            android:gravity="left"
            android:right="50dp" />
    
        <item
            android:drawable="@drawable/ic_online"
            android:gravity="right" />
    
    </layer-list>
    

    android:drawable="@drawable/ic_online"

    <vector xmlns:android="http://schemas.android.com/apk/res/android"
            android:width="10dp"
            android:height="10dp"
            android:viewportWidth="24.0"
            android:viewportHeight="24.0">
        <path
            android:fillColor="#05b714"
            android:pathData="M12,12m-10,0a10,10 0,1 1,20 0a10,10 0,1 1,-20 0"/>
    </vector>
    

    OUTPUT

    enter image description here