I would like to create a custom drawable background for an EditText
component in my Android layout. This should include a lower border spanning the entire length of the EditText
, and 2 connected vertical lines at either end which take up 25% of the height, as per below:
The text itself will then use android:gravity="left|center"
with a small amount of margin on the left/top/bottom.
I've been able to create a custom border on other input text elements where it was desirable to include all borders using a shape such as below:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="@android:color/transparent"/>
<corners
android:bottomRightRadius="4dp"
android:bottomLeftRadius="4dp"
android:topLeftRadius="4dp"
android:topRightRadius="4dp"/>
<stroke
android:color="@color/lightgrey"
android:width="1dp"/>
</shape>
However, now I don't want a full rectangle, only 1 full side + 2 partial sides.
Two steps to achieve that:
android:left|right|top
.<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Bottom border -->
<item
android:left="-50dp"
android:right="-50dp"
android:top="-50dp">
<shape android:shape="rectangle">
<stroke
android:width="1dp"
android:color="@color/lightgrey" />
</shape>
</item>
<!-- Left border -->
<item
android:height="8dp"
android:gravity="left|bottom">
<shape android:shape="rectangle">
<solid android:color="@color/lightgrey" />
<size android:width="1dp" />
</shape>
</item>
<!-- Right border -->
<item
android:height="8dp"
android:gravity="right|bottom">
<shape android:shape="rectangle">
<solid android:color="@color/lightgrey" />
<size android:width="1dp" />
</shape>
</item>
</layer-list>
Here is the result