0

Hi I have UI Requirement like this-

There are the four buttons: Popular, A-z, NearBy, Category

Any one of them can be pressed at a time. Suppose if Popular button is pressed, then the rest of the buttons will seem like not pressed.

Now I want it to stay like this until I press one of the remaining three buttons. Once any one of the three is pressed that particular button should be highlighted and rest of the buttons should be normal.

Sahil Mittal
  • 20,697
  • 12
  • 65
  • 90
sandeep_jagtap
  • 1,484
  • 2
  • 17
  • 24

2 Answers2

2

For that you should use Radio Buttons and you need to have a selector to define different drawables for different states. Here is how you can have selector. name it as button_selector and put it to the drawable folder. And you need to have two different drawables for your buttons as normal and pressed states. Name it as button and button_selected.

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

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

    <item android:state_checked="true" android:drawable="@drawable/button_selected"></item>
    <item android:drawable="@drawable/button"></item>
</selector>

As for the Radio Button ;

<RadioGroup
    android:id="@+id/radio_group_card_selector"
    android:layout_width="wrap_content"
    android:layout_height="28dp"
    android:layout_gravity="center_horizontal|center_vertical"
    android:gravity="center_horizontal"
    android:orientation="horizontal" >

    <RadioButton
        android:id="@+id/radio_group_highlights"
        android:layout_width="69dp"
        android:layout_height="28dp"
        android:layout_gravity="left"
        android:background="@drawable/button_selector"
        android:button="@null"
        android:gravity="center_vertical|center_horizontal"
        android:text="@string/Highlights"
        android:textColor="#21596c"
        android:textSize="10sp"
        android:textStyle="normal" >
    </RadioButton>

    <RadioButton
        android:id="@+id/radio_group_products"
        android:layout_width="69dp"
        android:layout_height="28dp"
        android:layout_gravity="left"
        android:background="@drawable/button_selector"
        android:button="@null"
        android:gravity="center_vertical|center_horizontal"
        android:text="@string/All"
        android:textColor="#21596c"
        android:textSize="10sp"
        android:textStyle="normal" >
    </RadioButton>

    <RadioButton
        android:id="@+id/radio_group_mycards"
        android:layout_width="69dp"
        android:layout_height="28dp"
        android:background="@drawable/button_selector"
        android:button="@null"
        android:checked="true"
        android:gravity="center_vertical|center_horizontal"
        android:text="@string/My_Cards"
        android:textColor="#21596c"
        android:textSize="10sp"
        android:textStyle="normal" >
    </RadioButton>
</RadioGroup>

So in that way you don't need to deal with the code at RunTime.

EDIT : If you want to use only colors instead of drawables, then you can use the code below for better understanding how it works.

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

<item android:state_pressed="true"> <!-- pressed -->
    <shape>
        <gradient
            android:startColor="#058CF5"
            android:centerColor="#0273ED"
            android:centerY="0.75"
            android:endColor="#015DE6"
            android:angle="270" />
    </shape>    
</item>

<item android:state_checked="true"> <!-- focused -->
    <shape>
        <gradient
            android:startColor="#058CF5"
            android:centerColor="#0273ED"
            android:centerY="0.75"
            android:endColor="#015DE6"
            android:angle="270" />
    </shape>    
</item>

<item>      <!-- default -->
    <shape>
        <solid android:color="#E6E6E6" />
    </shape>
</item>

osayilgan
  • 5,873
  • 7
  • 47
  • 68
  • for I am getting error.Do I have to create xml with Name button in drawable folder.Can Inherit the default button of the android – sandeep_jagtap Jan 30 '13 at 11:14
  • also in @drawable/button_selected . button_selected is image rite..? – sandeep_jagtap Jan 30 '13 at 11:18
  • button is just the name of the image. you can rename it and put it your drawble folder (mdpi, ldpi, hdpi). Then change the name of the button in the selector xml file. – osayilgan Jan 30 '13 at 11:19
  • It worked only thing I want to know is that insted of image can i just set colour for button. I do not want image I just want the colour change – sandeep_jagtap Jan 30 '13 at 12:33
0
private TextView[] viewsArray;
public void onCreate(Bundle bundle){
      super.onCreate(bundle);
      setContentView(R.layout.mylayout);
      TextView[] array // all your buttons
      for (TextView view : array) {
        view.setOnClickListener(mListener);
      }

     viewsArray = array;
}
private OnClickListener mListener = new OnClickListener(){
     public void onClick(View view){
                    resetViews();
                    view.setBackgroundResource(R.drawable.selected);
    }
};
private void resetViews(){
 for(TextView view : viewsArray){
         view.setBackgroundResource(R.drawable.notselected);
  }
}
Mr.Me
  • 9,192
  • 5
  • 39
  • 51