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

Question

Good afternoon,

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

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 :

Thank you all!

https://github.com/Kaopiz/android-segmented-control – Daniel Nugent Jun 29 '16 at 16:47 — Daniel Nugent, Jun 29 '16 at 16:47

score 1 · Answer 1 · answered Jun 29 '16 at 16:20

1

Set width to "0dp" and weight to "1" for all your buttons and wrap them inside a horizontal LinearLayout

answered Jun 29 '16 at 16:20

Simon Tenbeitel

835
1
8
20

score 1 · Answer 2 · answered Jun 29 '16 at 16:24

roundedbuttons.xml in drawable

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

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

<stroke android:width="3dp"
    android:color="#ff000000"
    />

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

Edit the shape according to your preference

In your xml layout

LinearLayout(Horizontal)
 - Buttons with background(roundedbuttons.xml) and weight="1"

score 1 · Accepted Answer · edited May 23 '17 at 12:23

1

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.

edited May 23 '17 at 12:23

Community

1
1

answered Jun 29 '16 at 16:26

Anirudh Sharma

7,968
13
40
42

Thank you ! But what about the right border of the first button and the left border of the right button ? If I do nothing it'll have double borders – D. Math Jun 29 '16 at 16:36
You can also also remove the borders using the shape drawable.Check the edit. – Anirudh Sharma Jun 29 '16 at 16:38

score 1 · Answer 4 · answered Jun 29 '16 at 16:45

1

Why don't you use one linear layout with blue border as parent of 3 textViews with background. No need to make it complicated.

answered Jun 29 '16 at 16:45

Laurence Pardz

292
3
8

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

4 Answers4