iphone switch like button for android

I have created a toggle button in android and I have used a selector to change the background that switches between the on and off backgrounds.

My problem is how to make the background remain in the state it will be clicked, for example, if I press on "on", the background should remain in "on" background state, but in my case as soon as I stop pressing the button, it reverts to the original background.

Does anyone has any idea how to implement it?

Here is my selector file:

&l开发者_高级运维t;selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/off" /> <!-- default -->
    <item android:state_pressed="true" android:drawable="@drawable/on" /> <!-- on state -->   
    <item android:state_focused="false" android:drawable="@drawable/off" /> <!-- off state -->
</selector>

There is CompoundButton which is probably what you want. Then there are a couple of subclasses specializing it too.

I think it's easier to extend the View class and do the drawing yourself. The thing is, you do need to make the animations yourself (i'm guessing the switch slides from left to right and visa versa, not really an iphone user so i don't exactly know how it behaves).

Another not so nice way of doing it is just extend the View class and place 2 Buttons next to each other and just toggle them in code.

Starting with Android 4.0 there is a Switch Button that allows dragging the button to another state similar to the iOS toggle button.

Here is an answer supported by Android 2.2 and up:

The embodiment is a Male/Female gender toggle resembling an iOS-like switch

xml

<RadioGroup
    android:id="@+id/settings_gender_radio"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:orientation="horizontal" >

    <RadioButton
        android:id="@+id/female"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="0.5"
        android:background="@drawable/unselected_left_background"
        android:button="@null"
        android:gravity="center"
        android:onClick="onRadioButtonClicked"
        android:paddingBottom="5dp"
        android:paddingTop="5dp"
        android:text="@string/female"
        android:textColor="@color/Purple" />

    <RadioButton
        android:id="@+id/male"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="0.5"
        android:background="@drawable/unselected_right_background"
        android:button="@null"
        android:gravity="center"
        android:onClick="onRadioButtonClicked"
        android:paddingBottom="5dp"
        android:paddingTop="5dp"
        android:text="@string/male"
        android:textColor="@color/glooPurple" />

    <!-- Dummy element to avoid initial state sexism -->
    <RadioButton
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_gravity="center"
        android:checked="true" />
</RadioGroup>

Java

int MALE = 0x0;
int FEMALE = 0x1;
int mGender;

public void onRadioButtonClicked(View view) {
  RadioButton femaleButton = (RadioButton) getActivity().findViewById(
      R.id.female);
  RadioButton maleButton = (RadioButton) getActivity()
      .findViewById(R.id.male);
  boolean checked = ((RadioButton) view).isChecked();

  switch (view.getId()) {
  case R.id.male:
    if (checked) {
      // Check api version
      if (android.os.Build.VERSION.SDK_INT < 16) {
        femaleButton.setBackgroundDrawable(getResources().getDrawable(
            R.drawable.unselected_left_background));
        maleButton.setBackgroundDrawable(getResources().getDrawable(
            R.drawable.selected_right_background));
      } else {
        femaleButton.setBackground(getResources().getDrawable(
            R.drawable.unselected_left_background));
        maleButton.setBackground(getResources().getDrawable(
            R.drawable.selected_right_background));
      }
      femaleButton.setTextColor(getResources().getColor(R.color.Purple));
      maleButton.setTextColor(getResources().getColor(R.color.Gray));
      mGender = MALE;
    }
    break;
  case R.id.female:
    if (checked) {
      if (android.os.Build.VERSION.SDK_INT < 16) {
        femaleButton.setBackgroundDrawable(getResources().getDrawable(
            R.drawable.selected_left_background));
        maleButton.setBackgroundDrawable(getResources().getDrawable(
            R.drawable.unselected_right_background));
      } else {
        femaleButton.setBackground(getResources().getDrawable(
            R.drawable.selected_left_background));
        maleButton.setBackground(getResources().getDrawable(
            R.drawable.unselected_right_background));
      }
      femaleButton.setTextColor(getResources().getColor(R.color.Gray));
      maleButton.setTextColor(getResources().getColor(R.color.Purple));
      mGender = FEMALE;
    }
    break;
  }
}

Drawables

selected_left_background.xml

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

    <corners
        android:bottomLeftRadius="4dp"
        android:bottomRightRadius="0dp"
        android:radius="1dp"
        android:topLeftRadius="4dp"
        android:topRightRadius="0dp" />

    <gradient
        android:angle="270"
        android:endColor="@color/primaryColor"
        android:startColor="@color/primaryColor"
        android:type="linear" />

</shape>

selected_right_background.xml

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

    <corners
        android:bottomLeftRadius="0dp"
        android:bottomRightRadius="4dp"
        android:radius="1dp"
        android:topLeftRadius="0dp"
        android:topRightRadius="4dp" />

    <gradient
        android:angle="270"
        android:endColor="@color/primaryColor"
        android:startColor="@color/primaryColor"
        android:type="linear" />

</shape>

unselected_left_background.xml

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

    <corners
        android:bottomLeftRadius="4dp"
        android:bottomRightRadius="0dp"
        android:radius="1dp"
        android:topLeftRadius="4dp"
        android:topRightRadius="0dp" />

    <solid android:color="@color/ltGray" />

    <stroke
        android:width="1px"
        android:color="@color/gloopurple" />

</shape>

unselected_right_background.xml

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

    <corners
        android:bottomLeftRadius="0dp"
        android:bottomRightRadius="4dp"
        android:radius="1dp"
        android:topLeftRadius="0dp"
        android:topRightRadius="4dp" />

    <solid android:color="@color/ltGray" />

    <stroke
        android:width="1px"
        android:color="@color/gloopurple" />

</shape>

Please let me know if you have any troubles implementing this solution, I would love to help. Also any suggestions/advice for how I could have done this better are more than welcome