vxh.viet
5/10/2018 - 4:03 AM

Multiple View border trick

Multiple TextView border trick

SOURCE

When we have multiple View next to each other the consecutive borders can be very ugly, like this:

 ------------
 | EditText1 |
 |           |
 ------------- 
 -------------  <-- this is ugly
 | EditText2 |
 |           |
 ------------- 

instead we create a bottomless border to use with these view:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:bottom="-2dp"> // bottomless
    <!--<item android:top="-2dp" android:left="-2dp" android:right="-2dp">--> //bottom only
        <shape android:shape="rectangle">
            <stroke android:width="1dp" android:color="@color/red" />
            <solid android:color="#00000000" />
        </shape>
    </item>
</layer-list>

and use it as the background in the view:

<EditText
        android:id="@+id/view1"
        ....
        android:background="@drawable/bg_bottomless_line_border"/>
        
<EditText
        android:id="@+id/view2"
        ....
        android:background="@drawable/bg_bottomless_line_border"/>
        
<!--Simulate the bottom border-->
<View
    android:layout_width="0dp"
    android:layout_height="1dp"
    app:layout_constraintStart_toStartOf="@id/view2"
    app:layout_constraintEnd_toEndOf="@id/view2"
    app:layout_constraintBottom_toBottomOf="@id/view2"
    android:background="@color/red"/>