Making Buttons That Look Like Tabs In Android

I want this kind of look. They don't seem like tabs so I believe they are buttons. I am able to acheive the similar type with toggle button by keeping a selector in drawable. <

Solution 1:

You have to create selector for all button and use RadioGroup with selector background and null button..

Follow @Andru answer for create Selector..

Below is RadioGroup code.

    <RadioGroup
    android:id="@+id/rdogrp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    android:gravity="center"
    android:orientation="horizontal" >

    <RadioButton
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="0dp"
        android:background="@drawable/btn1Selector"
        android:button="@null"
        android:checked="true"
        android:gravity="center" />

    <RadioButton
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="0dp"
        android:background="@drawable/btn2Selector"
        android:button="@null"
        android:gravity="center" />

    <RadioButton
        android:id="@+id/btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="0dp"
        android:background="@drawable/btn3Selector"
        android:button="@null"
        android:gravity="center" />

    <RadioButton
        android:id="@+id/btn4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="0dp"
        android:background="@drawable/btn4Selector"
        android:button="@null"
        android:gravity="center" />
</RadioGroup>

here is sample code for btn1Selector.xml

<?xml version="1.0" encoding="utf-8"?><selectorxmlns:android="http://schemas.android.com/apk/res/android"><itemandroid:drawable="@drawable/btn1_selected"android:state_checked="true"  /><itemandroid:drawable="@drawable/btn1_normal"android:state_checked="false"/></selector>

Solution 2:

you can do something like this, instead of toggle button use normal buttons. if "Data" button clicked do like this

data(View v)
 {
  databtn.setBackgroundResource(R.drawable.image1);
  w_chartbtn.setBackgroundResource(R.drawable.image2);
  H_chartbtn.setBackgroundResource(R.drawable.image2);
 }

if "H-chart" button clicked

H_chart(View v)
 {
  databtn.setBackgroundResource(R.drawable.image2);
  w_chartbtn.setBackgroundResource(R.drawable.image2);
  H_chartbtn.setBackgroundResource(R.drawable.image1);
 }

Solution 3:

Use simple button instead of toogle button. And set background like this:

I am giving example for 1 button:

 android:background="@drawable/data_button_select_state"

And add a xml file in your 'drawable' folder named data_button_select_state:

<?xml version="1.0" encoding="utf-8"?><selectorxmlns:android="http://schemas.android.com/apk/res/android" ><itemandroid:drawable="@drawable/data_image_selected_state"android:state_selected="true" /><itemandroid:drawable="@drawable/data_image_selected_state"android:state_pressed="true" /><itemandroid:drawable="@drawable/data_image_without_selected" /></selector>

Now add code in java file like this:

when data button clicked:

  data_button.setOnClickListener(newView.OnClickListener() {

        @OverridepublicvoidonClick(View v) {
            data_button.setActivated(true);
            H_chart_button.setActivated(false);
                            w_chart_button.setActivated(false);
                            hc_chart_button.setActivated(false);

        }
    });

change other button like this as well. This will might help you...