D. Math D. Math - 5 months ago 8
Android Question

Align 3 buttons in a signe line, each button has different borders

Good afternoon,

I am doing an app who needs 3 buttons aligned under the TabLayout, like in the picture below :

enter image description here

I do not know what is the best way to do them, because each one has different borders.

Anyone can help me ?
Thank you !




I finally did it :

buttons.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:layout_marginLeft="18sp"
android:layout_marginRight="18sp">

<Button
style="?android:textAppearanceSmall"
android:layout_width="wrap_content"
android:layout_height="31sp"
android:id="@+id/one"
android:text="ONE"
android:textColor="@color/red"
android:layout_weight="1"
android:background="@drawable/button_shape_one" />

<Button
style="?android:textAppearanceSmall"
android:layout_width="wrap_content"
android:layout_height="31sp"
android:id="@+id/two"
android:text="TWO"
android:textColor="@color/red"
android:layout_weight="1"
android:background="@drawable/button_shape_two"/>

<Button
style="?android:textAppearanceSmall"
android:layout_width="wrap_content"
android:layout_height="31sp"
android:id="@+id/three"
android:text="THREE"
android:textColor="@color/red"
android:layout_weight="1"
android:background="@drawable/button_shape_three"/>

</LinearLayout>


button_shape_one.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

<solid android:color="@color/transparent"/>

<stroke android:width="1dp"
android:color="@color/red"
/>

<corners android:bottomRightRadius="0dp"
android:bottomLeftRadius="5dp"
android:topLeftRadius="5dp"
android:topRightRadius="0dp"/>
</shape>


button_shape_two.xml

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

<solid android:color="@color/transparent" />

<padding android:left="10dp"
android:right="10dp"
android:top="5dp"
android:bottom="5dp" />
</shape>
</item>

</layer-list>


button_shape_three.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

<solid android:color="@color/transparent"/>

<stroke android:width="1dp"
android:color="@color/red"
/>

<corners android:bottomRightRadius="5dp"
android:bottomLeftRadius="0dp"
android:topLeftRadius="0dp"
android:topRightRadius="5dp"/>
</shape>


Result :

enter image description here

Thank you all!

Answer

You need to create a Shape drawable for all of your buttons. For eg the center button can use below drawable as background.

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#606060"/>
    <stroke android:color="#303030" android:width="2dp" />
</shape>

For the other two you need rounded edges only on left and right.For that you may follow This post on SO.

*Note: change the colors according to your needs and you will also require a selector to be applied on each button to highlight the selection. The left and right borders can also be removed using shape drawable.For more details please see This post

The more easier approach will be to use This Library.

Comments