Search code examples
androidlayer-list

layer-list: move shape line at the bottom with padding


I'm defining a selector background for an edit text and I would like to have a bottom line when the edit text is focused.

This is what I would like to achieve:

enter image description here

So far I have this:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle">
        <stroke
            android:width="1dp"
            android:color="@android:color/black" />
        <corners android:radius="3dp" />
    </shape>
</item>
<item>
    <shape android:shape="line">
        <stroke android:color="@android:color/black" android:width="1dp"/>
    </shape>
</item>
</layer-list>

which shows the line exactly in the middle, and I would like to have it at the bottom, with also a left and right padding.

Is there a way to achieve that using layer-list, or maybe is there a better approach?


Solution

  • <?xml version="1.0" encoding="utf-8" ?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
      <item>
           <shape android:shape="rectangle" android:padding="10dp">
      <solid android:color="#ffffff"/>
      <stroke android:width="2dp" android:color="#ffffff" />
      <corners
          android:bottomRightRadius="5dp"
          android:bottomLeftRadius="5dp"
          android:topLeftRadius="5dp"
          android:topRightRadius="5dp"/>
    </shape>
        </item>
    <item android:top="20dp" android:right="5dp" android:left="5dp" >
            <shape android:shape="line">
                <solid android:color="@android:color/transparent" />
                <stroke
                    android:width="2dp"
                    android:color="#ababb2" />
            </shape>
        </item>
      </layer-list>