Specific Button Layout

Question

I would like to have this specific design:

The texts "A", "B" and "C" are centered.

I offer 200 points if you will propose the solution in xml. It must be made out of 3 buttons. I DON'T need the logic in java. This I can make myself, but I NEED the xml drawables and layout.

EDIT

Take into account backward compatibility and android 5 please.

Answer 1

At first, I misread your question. To me, it seemed like you needed a layout as shown in the picture you posted. But, after looking at the android-segmented-control library, its clear that you're looking for a control that allows switching between A, B, C... etc. The library is using RadioGroup which is indeed the best option.

I noticed that the library makes use of negative margins which I've read causes problems on some devices. Support for API 21 is also missing.

How xml approach will work: RadioGroup is built upon LinearLayout. A little known feature (probably because its not suitable most of the time) of LinearLayout is its divider attribute. If android:showDividers="..." is used, a LinearLayout will show dividers along with its children. Where these dividers are shown depends on the value given to showDivider="..". Three values are possible: middle, beginning & end. We'll use middle to show dividers between A & B, and B & C.

For the wired frame, we don't need several drawables (at least, not right now). We can do with the following:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <stroke android:color="@color/stroke_color" android:width="@dimen/stroke_width"/>
    <corners android:radius="@dimen/corner_radius"/>
</shape>

The drawable above will be set as RadioGroup's background. And showDividers will take care of the vertical divisions between A, B & C. So, our layout looks the same as your posted picture now. Well, with showDividers, we also need to provide a divider drawable:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <solid android:color="@color/stroke_color"/>
    <size android:width="@dimen/stroke_width"/>
</shape>

Now, we need to take care of active states for the RadioButtons. Given the rounded corners, we'll need to code 3 different drawables: one for the first child, one for the middle, one for the last. This approach is scalable - first and last drawable remain the same while every child between first & last gets the middle drawable. I've created several gists that you can add to your project:

API < 21 - place these in res/drawable:

RadioGroup background

RadioGroup divider

RadioButton background for first child

RadioButton background for middle child

RadioButton background for last child

API >= 21 - place these in res/drawable-v21:

RadioButton background for first child

RadioButton background for middle child

RadioButton background for last child

Resources - contains defined colors, dimensions, and styles - you can either place this file in res/values or copy-paste each resource type to its respective file:

Resources

Finally, here's a sample xml layout that shows how the defined styles make this happen:

Sample

In action on API level < 21:

pre_lollipop.mp4

In action on API 21:

lollipop.mp4

Answer 2

You need to create three xml drawables

shape_left.xml:

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

    <corners
        android:bottomLeftRadius="5dp"
        android:topLeftRadius="5dp"/>

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

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

</shape>

shape_middle.xml:

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

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

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

</shape>

shape_right.xml:

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

    <corners
        android:bottomRightRadius="5dp"
        android:topRightRadius="5dp"/>

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

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

</shape>

In layout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:paddingLeft="@dimen/activity_horizontal_margin"
                android:paddingRight="@dimen/activity_horizontal_margin"
                android:paddingTop="@dimen/activity_vertical_margin"
                android:paddingBottom="@dimen/activity_vertical_margin"
                android:orientation="horizontal"
                tools:context=".MainActivity">

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@drawable/drawable_left"/>

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@drawable/shape_middle"/>

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@drawable/shape_right"/>

</LinearLayout>

Be careful though for buttons in Android 5.0, it may give some issues. But you can put this as background for any view.

I tested it on Android 5.0 and it works. Added transparent color (can be any color) to support older versions. For versions below Android 4.0 you need to create a folder drawable-v14 and put these shapes in there. In the normal drawable folder you should put the same shapes but instead of bottomLeftRadius you should do bottomRightRadius. The same goes for shape_right. This is because of a bug which turns the bottom corners the wrong way.

Answer 3

you need two different shapes, one we rounded corner on the left

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
 <solid android:color="@color/your_color"/>
    <corners
     android:topLeftRadius="0dp"
     android:bottomLeftRadius="0dp"
  android:topLeftRadius="15dp"
  android:topRightRadius="15dp"/>
</shape>

and one with rounded corner on the right

 <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
 <solid android:color="@color/your_color"/>
    <corners
     android:topRightRadius="0dp"
    android:bottomRightRadius
  android:topLeftRadius="15dp"
  android:topRightRadius="15dp"/>
</shape>

as background for the buttons. You can arrange the three buttons on an horizontal LinearLayout. To give the three the same width, put layout_width="0dp" and layout_weight="1".