Search code examples
androidandroid-drawablexml-drawable

Specific Button Layout

I would like to have this specific design:

enter image description here

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.

Solution

  • 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