How to implement curved custom buttons horizontally in Android?

Question

I am trying to implement custom buttons that overlap over each other horizontally. The clicked button will be bright and the rest will fade a little and their the overlapped border to the selected button would be hidden behind. Here is an image to clarify what I am talking about.

To do this I made a Linear Layout with horizontal orientation that has child Linear Layouts that wrap each button but that ended up with weird buttons stick out of the parent layout even though I played a little with their width and height. Can someone give me a hint on how to do this?

Answer 1

I have done similar stuff through RadioButton. you may need to change radio button logic to button , so that only one is clicked at a time. Below is my code.
1) Layout inside activity goes here:

<RadioGroup
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/myRadioGroup"
            android:background="#A4A4A4"
            android:orientation="horizontal">

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="One"
            android:id="@+id/One"
            android:layout_alignParentLeft="true"
            android:background="@drawable/selector"
            />
        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:text="Two"
            android:id="@+id/Two"
            android:background="@drawable/selector"
            />
        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Theee"
            android:id="@+id/Three"
            android:layout_alignParentRight="true"
            android:background="@drawable/selector"
            />
        </RadioGroup>

2) Background for disabled:

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <gradient
        android:centerColor="#A4A4A4"
        android:startColor="#A4A4A4"
        android:endColor="#A4A4A4"
        />
</shape>

3) Background for enabled.xml

<gradient
        android:centerColor="@color/colorPrimary"
        />
    <padding android:left="7dp"
        android:top="7dp"
        android:right="7dp"
        android:bottom="7dp" />
    <corners
        android:radius="7dp" />
    <stroke
        android:width="2dip"
        android:color="#FFFFFF" />
    <corners android:radius= "10dp" />

4) Activity code for RadioGroup

radioGroup = (RadioGroup) findViewById(R.id.myRadioGroup);
        one=(RadioButton)findViewById(R.id.One);
        two=(RadioButton)findViewById(R.id.Two);
        three=(RadioButton)findViewById(R.id.Three);
        radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {

                if (checkedId == R.id.One) {
                    one.setBackground(getDrawable(R.drawable.enabled));
                    two.setBackground(getDrawable(R.drawable.disabled));
                    three.setBackground(getDrawable(R.drawable.disabled));
                    Toast.makeText(getApplicationContext(), "choice: One", Toast.LENGTH_SHORT).show();

                } else if (checkedId == R.id.Two) {
                    Toast.makeText(getApplicationContext(), "choice: Two", Toast.LENGTH_SHORT).show();
                    two.setBackground(getDrawable(R.drawable.enabled));
                    one.setBackground(getDrawable(R.drawable.disabled));
                    three.setBackground(getDrawable(R.drawable.disabled));
                }
                else {
                    three.setBackground(getDrawable(R.drawable.enabled));
                    two.setBackground(getDrawable(R.drawable.disabled));
                    one.setBackground(getDrawable(R.drawable.disabled));
                    Toast.makeText(getApplicationContext(), "choice: Three", Toast.LENGTH_SHORT).show();

                }
            }
        });

5) Selector xml:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_enabled="false"
        android:drawable="@drawable/disabled" />
    <item
        android:state_pressed="true"
        android:state_enabled="true"
        android:drawable="@drawable/enabled" />
    <item
        android:state_pressed="false"
        android:state_enabled="true"
        android:drawable="@drawable/disabled" />
    <item
        android:state_focused="true"
        android:state_enabled="true"
        android:drawable="@drawable/enabled" />
    <item
        android:state_enabled="true"
        android:drawable="@drawable/enabled" />
</selector>

Answer 2

This is how Your Layout file should look like:-

<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="wrap_content"
    android:layout_gravity="center"
    android:background="@drawable/round_background"
    android:orientation="horizontal"
    android:weightSum="3"
    tools:context="com.example.curved.MainActivity" >

    <TextView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:layout_marginBottom="1dp"
        android:layout_marginLeft="1dp"
        android:layout_marginRight="5dp"
        android:layout_marginTop="1dp"
        android:layout_weight="1"
        android:background="@drawable/round_background"
        android:gravity="center"
        android:text="Line"
        android:textSize="20sp" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:layout_marginBottom="1dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_marginTop="1dp"
        android:layout_weight="1"
        android:background="@drawable/round_background_white"
        android:gravity="center"
        android:text="Lyft"
        android:textColor="#ff33b5e5"
        android:textSize="20sp" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:layout_marginBottom="1dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="1dp"
        android:layout_marginTop="1dp"
        android:layout_weight="1"
        android:background="@drawable/round_background"
        android:gravity="center"
        android:text="Plus"
        android:textSize="20sp" />

</LinearLayout>

round_background.xml for grey background

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

    <!-- you can use any color you want I used here gray color -->
    <solid android:color="#ABABAB" />

    <corners android:radius="50dp" />

</shape>

round_background_white.xml for white button

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

    <!-- you can use any color you want I used here white color -->
    <solid android:color="#FFF" />

    <corners android:radius="50dp" />

</shape>

Final result

And on click event change backgrounds and text color like this ,I have shown it with xml.

<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="wrap_content"
    android:layout_gravity="center"
    android:background="@drawable/round_background"
    android:orientation="horizontal"
    android:weightSum="3"
    tools:context="com.example.curved.MainActivity" >

    <TextView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:layout_marginBottom="1dp"
        android:layout_marginLeft="1dp"
        android:layout_marginRight="5dp"
        android:layout_marginTop="1dp"
        android:layout_weight="1"
        android:background="@drawable/round_background_white"
        android:gravity="center"
        android:text="Line"
        android:textColor="#ff33b5e5"
        android:textSize="20sp" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:layout_marginBottom="1dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_marginTop="1dp"
        android:layout_weight="1"
        android:background="@drawable/round_background"
        android:gravity="center"
        android:text="Lyft"
        android:textSize="20sp" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:layout_marginBottom="1dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="1dp"
        android:layout_marginTop="1dp"
        android:layout_weight="1"
        android:background="@drawable/round_background"
        android:gravity="center"
        android:text="Plus"
        android:textSize="20sp" />

</LinearLayout>

Answer 3

Take a RelativeLayout aLign three buttons horizontally with center button Overllapping another two. Now Put two buttons above left and right which are overlapping Center button. Make their visibility GONE.

Now On Click of left button Make Left Overlapped button Visible and So On.

Hope it helps!!!