Automatically alter button background and text appearance when pressed (like iOS)?

Question

In iOS, if I set a button's background to an image, when I press the button, the whole content of the button (including the text) will be shadowed. Can I achieve the same effect in Android, or do I have to use different images for different states? Also, even if I use different images for different states, how do I make the text also shadowed? A dirty way is to set a OnClickListener to the button and programatically shadow the text when pressed, but are there any other ways?

Centrosymmetric

Is it a toggle button, where the state can be up or down, or a regular button where it only appears different as it's being clicked on? – Meadowsweet

Answer 1

I´ve been trying to find a solution for this for a while now but couldn´t find anything so I came up with a pretty neat solution which works on all image buttons. Just like iOS.

• Create a Black, 10% transparent image and save it as PNG. I call it button_pressed.png. You can use this image, http://img84.imageshack.us/img84/7924/buttonpressed.png

• Create a drawable called something relevant, I call it "button_pressed_layout.xml"

  <?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_pressed"  />
  </selector>
  

• Now put your button image in the LinearLayout and then the Button inside the LinearLayout. In the Button use button_pressed_layout.xml as background.

      <LinearLayout 
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:background="@drawable/button_image">
          <Button
              android:id="@+id/myButtonId"
              android:text="@string/Continue"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"
              android:background="@drawable/button_pressed_layout"
              android:textColor="#FFF"
              android:textSize="16dp" >                   
          </Button>
      </LinearLayout>
  

That´s it!

Rotund

Answer 2

To get a pressed-state without creating a 2nd button image, I created an OnTouchListener to change the button's alpha. This is not the most beautiful pressed state, but gives an effective automatic behavior.

public class PressedStateOnTouchListener implements OnTouchListener
{
    PressedStateOnTouchListener( float alphaNormal )
    {
        mAlphaNormal    = alphaNormal;
    }

    public boolean onTouch( View theView, MotionEvent motionEvent )
    {
        switch( motionEvent.getAction() ) {
            case MotionEvent.ACTION_DOWN:
                theView.setAlpha( mAlphaNormal / 2.0f );
                break;

            case MotionEvent.ACTION_UP:
                theView.setAlpha( mAlphaNormal );
                break;
        }

        // return false because I still want this to bubble off into an onClick
        return false;
    }

    private float   mAlphaNormal;
}

In your Activity, apply this listener to each button:

Button theButton =  (Button)findViewById( R.id.my_button_id );
theButton.setOnTouchListener( new PressedStateOnTouchListener( theButton.getAlpha() ));

Jesseniajessey

This gives the "opposite" of a pressed state. You should darken the image to show pressed, not lighten it. and on a white background this lightens it. – Kape

Answer 3

In order to give the button itself different effects, I believe you need to use custom images, as seen here and, in less detail here As for the text, this post looks like it would do the trick for the shadow

Meadowsweet