Android : Tab like toggling button selector instead of spinner

Question

I have an android application where in an activity i need a tab like selector where user can select an option.The 3 options are blue,green,red.User need to select any one of them.I can use a spinner for this.But i like to use a round edged tab like feature which can toggle and the selected item will show as highlighted and the others will be grayed out as below. I just want the user to be able to toggle only one of the buttons.user can select an option by clicking or by toggling and the view should look like a bar with rounded edge.How to implement above view in android? Please help me.

You can use RadioButton with custom background for achiving this — Abhishek Patel, Apr 06 '16 at 10:57
@AbhishekPatel but I don't want the radio circle to be present. I just want the user to be able to toggle only one of the buttons.user can select an option by clicking or by toggling and the view should look like a bar with rounded edge. — KJEjava48, Apr 06 '16 at 11:20
googling for custom radio button there are many links to achive this.. — Abhishek Patel, Apr 06 '16 at 11:23
@AbhishekPatel I have customized the radiobutton using this link http://stackoverflow.com/questions/19163628/adding-custom-radio-buttons-in-android .But no swiping effect is there to select an option.I need both swipe effect and click effect to choose an item — KJEjava48, Apr 06 '16 at 11:57
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/108397/discussion-between-abhishek-patel-and-kjejava48). — Abhishek Patel, Apr 06 '16 at 11:58
you can not implement swipe in custom layout using radiobutton. — Abhishek Patel, Apr 06 '16 at 11:59
@AbhishekPatel then how can i implement above like layout with both click and swipe effect??? — KJEjava48, Apr 06 '16 at 12:03
it's not possible ,if its possible than why people use `ViewPager`? — Abhishek Patel, Apr 06 '16 at 12:05

Abhishek Patel · Accepted Answer · 2017-01-03T10:39:16.280

Try Like This

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:azeoo="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<RadioGroup
    android:id="@+id/rgTask"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/round_border"
    android:orientation="horizontal" >

    <RadioButton
        android:id="@+id/rbBlue"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@drawable/bg_blue"
        android:button="@android:color/transparent"
        android:gravity="center"
        android:paddingBottom="5dp"
        android:paddingTop="5dp"
        android:singleLine="true"
        android:text="Blue"
        android:textSize="22sp" />

    <View
        android:id="@+id/vSep1"
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:background="#0000FF"
        android:visibility="visible" />

    <RadioButton
        android:id="@+id/rbGreen"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@drawable/bg_green"
        android:button="@android:color/transparent"
        android:gravity="center"
        android:paddingBottom="5dp"
        android:paddingTop="5dp"
        android:singleLine="true"
        android:text="Green"
        android:textSize="22sp" />

    <View
        android:id="@+id/vSep2"
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:background="#0000FF"
        android:visibility="visible" />

    <RadioButton
        android:id="@+id/rbRed"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@drawable/bg_red"
        android:button="@android:color/transparent"
        android:gravity="center"
        android:paddingBottom="5dp"
        android:paddingTop="5dp"
        android:singleLine="true"
        android:text="Red"
        android:textSize="22sp" />
</RadioGroup>

put all below file in your drawable folder bg_blue.xml

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

<item android:state_checked="true"><shape android:shape="rectangle">
        <solid android:color="#0000FF" />

        <corners android:bottomLeftRadius="10dp" android:topLeftRadius="10dp" />
    </shape></item>
<item><shape android:shape="rectangle">
        <solid android:color="#00000000" />
    </shape></item>

</selector>

bg_green.xml

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

<item android:state_checked="true"><shape android:shape="rectangle">
        <solid android:color="#00FF00" />
    </shape></item>
<item><shape android:shape="rectangle">
        <solid android:color="#00000000" />
    </shape></item>

</selector>

bg_red.xml

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

<item android:state_checked="true"><shape android:shape="rectangle">
        <solid android:color="#FF0000" />

        <corners android:bottomRightRadius="10dp" android:topRightRadius="10dp" />
    </shape></item>
<item><shape android:shape="rectangle">
        <solid android:color="#00000000" />
    </shape></item>

</selector>

round_border.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >

<!-- view background color -->
<solid android:color="#00000000" >
</solid>

<!-- view border color and width -->
<stroke
    android:width="1dp"
    android:color="#0000FF" >
</stroke>

<!-- If you want to add some padding -->


<!-- Here is the corner radius -->
<corners android:radius="10dp" >
</corners>

</shape>

and output like this

The layout seems ok.But does i select an item by swiping through it like in android tabs. — KJEjava48, Apr 06 '16 at 11:58
it's not possible ,if its possible than why people use `ViewPager`? this just easy and simple — Abhishek Patel, Apr 06 '16 at 12:03
there are many example to implement `viewpager` you can use that ,use google. — Abhishek Patel, Apr 06 '16 at 12:13
Normally i seen viewpager with fragments.But in this case i only needs tab header.How to do that? — KJEjava48, Apr 06 '16 at 12:19
Above code with radiobutton is not working.The tag is showing error in bg_blue.xml,bg_green.xml,bg_red.xml — KJEjava48, Apr 07 '16 at 07:22
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/108482/discussion-between-abhishek-patel-and-kjejava48). — Abhishek Patel, Apr 07 '16 at 07:23
how to show the blue border for the selected item...right now it doesn't have that border when selected — KJEjava48, Apr 07 '16 at 08:50
you can achive using `setOnCheckedChangeListener` programatically — Abhishek Patel, Apr 07 '16 at 09:39
is there any other way to do that in bg_blue.xml,bg_green.xml,bg_red.xml — KJEjava48, Apr 07 '16 at 09:43
yes, you can add `txt_color.xml` in your drawable folder ` ` and used like in your xml `RadioButton` property `android:textColor="@drawable/txt_color"` — Abhishek Patel, Apr 07 '16 at 09:47

Android : Tab like toggling button selector instead of spinner

1 Answers1