Segment buttons in Android

Introduction:

Mostly Segment buttons are used in ios only now I am going to explain how to enable segment buttons in android

Android-Segmented is a custom view for Android which is based on RadioGroup and RadioButton widget.

demo

Using this code

activity_main.xml:

initialize segmented button in xml code using java class

<RelativeLayout 
  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:background="#BDBDBD">

<com.example.segmentbutton.SegmentedRadioGroup

  android:layout_width="wrap_content"

  android:layout_height="wrap_content"

  android:layout_margin="5dip"

  android:orientation="horizontal"

  android:layout_alignParentTop="true"

  android:layout_centerInParent="true"

  android:id="@+id/segment_text"

  android:checkedButton="@+id/button_one">

<RadioButton 
  android:id="@id/button_one"

  android:minWidth="40dip"

  android:minHeight="33dip"

  android:text="Kalidoss"

  android:textAppearance="?android:attr/textAppearanceSmall"

  android:button="@null"

  android:gravity="center"

  android:textColor="#01A9DB" />

<RadioButton 
  android:id="@+id/button_two"

  android:minWidth="40dip"

  android:minHeight="33dip"

  android:text="Rajendran"

  android:button="@null"

  android:gravity="center"

  android:textAppearance="?android:attr/textAppearanceSmall"

  android:textColor="#01A9DB" />

</com.example.segmentbutton.SegmentedRadioGroup>

</RelativeLayout>

Under Drawable folder

segment_radio_left.xml

Segmented button in left onclick functions

<?xml version="1.0" encoding="utf-8"?>

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

<item 
  android:state_focused="true" 
  android:state_checked="true" 
  android:state_pressed="false" 
  android:drawable="@drawable/segment_radio_grey_left_focus" />

<item 
  android:state_focused="true" 
  android:state_checked="false" 
  android:state_pressed="false" 
  android:drawable="@drawable/segment_radio_white_left_focus" />

<item 
  android:state_pressed="true"
  android:drawable="@drawable/segment_radio_grey_left_press" />

<item 
  android:state_checked="false" 
  android:drawable="@drawable/segment_radio_white_left" />

<item 
  android:drawable="@drawable/segment_radio_grey_left" /> <!-default->

</selector>

segment_radio_right.xml

Segmented button in right onclick functions

<?xml 
  version="1.0" encoding="utf-8"?>

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

<item 
  android:state_focused="true" 
  android:state_checked="true" 
  android:state_pressed="false" 
  android:drawable="@drawable/segment_radio_grey_right_focus" />

<item 
  android:state_focused="true" 
  android:state_checked="false" 
  android:state_pressed="false" 
  android:drawable="@drawable/segment_radio_white_right_focus" />

<item 
  android:state_pressed="true"
  android:drawable="@drawable/segment_radio_grey_right_press" />

<item 
  android:state_checked="false" 
  android:drawable="@drawable/segment_radio_white_right" />

<item 
  android:drawable="@drawable/segment_radio_grey_right" /> <!-- default -->

</selector>

Use this 9-patch images

Paste those 9-patch images under drawable folder

segment_radio_grey_left.9.png

segment_radio_grey_left_focus.9.png

segment_radio_grey_left_press.9.png

segment_radio_grey_right.9.png

segment_radio_grey_right_focus.9.png

segment_radio_grey_right_press.9.png

segment_radio_white_left.9.png

segment_radio_white_left_focus.9.png

segment_radio_white_left_press.9.png

segment_radio_white_right.9.png

segment_radio_white_right_focus.9.png

segment_radio_white_right_press.9.png

segment_white_focus.9.png

MainActivity.java

package com.example.segmentbutton;

import android.support.v7.app.ActionBarActivity;

import android.annotation.SuppressLint;

import android.os.Bundle;

import android.widget.RadioGroup;

import android.widget.RadioGroup.OnCheckedChangeListener;

import android.widget.Toast;

public class MainActivity extends ActionBarActivity implements 
OnCheckedChangeListener 
{

SegmentedRadioGroup segmentText;

Toast mToast;

@SuppressLint("ShowToast") @Override

protected void onCreate(Bundle savedInstanceState)
{

 super.onCreate(savedInstanceState);

 setContentView(R.layout.activity_main);

 segmentText = (SegmentedRadioGroup) findViewById(R.id.segment_text);

 segmentText.setOnCheckedChangeListener(this);

 mToast = Toast.makeText(this, "", Toast.LENGTH_SHORT);

}

public void onCheckedChanged(RadioGroup group, int checkedId) 
{

  if (group == segmentText) 
  {

  if (checkedId == R.id.button_one) 
  {

   mToast.setText("Kalidoss");

   mToast.show();

  } 
  else if (checkedId == R.id.button_two) 
  {

   mToast.setText("Rajendran");

   mToast.show();

  }

 }

}

}

SegmentedRadioGroup.java

package com.example.segmentbutton;

import android.content.Context;

import android.util.AttributeSet;

import android.widget.RadioGroup;

public class SegmentedRadioGroup extends RadioGroup {

public SegmentedRadioGroup(Context context) {

super(context);

}

public SegmentedRadioGroup(Context context, AttributeSet attrs) {

super(context, attrs);

}

@Override

protected void onFinishInflate() {

super.onFinishInflate();

changeButtonsImages();

}

private void changeButtonsImages(){

int count = super.getChildCount();

if(count > 1)

{

super.getChildAt(0).setBackgroundResource
(com.example.segmentbutton.R.drawable.segment_radio_left);

super.getChildAt(count1).setBackgroundResource
(com.example.segmentbutton.R.drawable.segment_radio_right);

}

}

}

Download full source code