How to change button padding using style and a selector?

Question

I'm trying to adjust the padding in a Button so when the user presses the button the text shifts downward to help visually indicate a press was made.

styles.xml

<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="Img_Button">
    <item name="android:layout_width">@dimen/img_button_width</item>
    <item name="android:layout_height">@dimen/img_button_height</item>
    <item name="android:layout_marginTop">@dimen/img_button_marginTop</item>
    <item name="android:layout_marginBottom">@dimen/img_button_marginTop</item>
    <item name="android:paddingTop">@drawable/button_padtop_states</item>
    <item name="android:paddingBottom">@drawable/button_padbottom_states</item>
    <item name="android:background">@drawable/button_img_states</item>
    <item name="android:gravity">center</item>
    <item name="android:textColor">@drawable/button_txt_states</item>
    <item name="android:textSize">@dimen/img_button_text_size</item>
    <item name="android:textStyle">bold</item>
</style>

For the text color I'm able to change color using a selector indicated in the style.xml file

button_txt_states.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:color="@color/green_med" />
    <item android:state_pressed="true" android:color="@color/white" />
    <item android:state_focused="true" android:color="@color/white" />
    <item android:color="@color/white" />
</selector>

So those change the text color in the button depending upon the button's state. So what I'd like to accomplish is assigning different padding values that would make the text shift downward just a bit when the user presses the button to visually indicate a button press. I've created a selector file for the paddingTop and paddingBottom values in the style.xml file.

button_padtop_states.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:value="2dp" />
    <item android:state_pressed="true" android:value="3dp" />
    <item android:state_focused="true" android:value="2dp" />
    <item android:value="2dp" />
</selector>

So everything compiles and I can start the app on a device, but crashes with

E/AndroidRuntime(19515): Caused by: java.lang.UnsupportedOperationException:
Can't convert to dimension: type=0x3

I understand it's crashing because there's no way to convert a "value" into a dimension. So now I'm wondering if there a way to adjust the button's padding using a selector and style, like color and drawables on a button?

Thanks.

Answer 1

Try to wrap the selector inside layer-list, you can take a look at the code here.

Answer 2

TRY THIS

Here am using AppCompatRadioButton you can change according to your view.

Add this value in your style

<item name="android:background">@drawable/radiobtn_background_state</item> 

radiobtn_background_state.xml

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

<item android:drawable="@drawable/radiobtn_checked" android:state_checked="true" />
<item android:drawable="@drawable/radiobtn_normal" />

</selector>

radiobtn_normal.xml

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

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

</shape>

radiobtn_checked.xml

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

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

<padding android:top="10dp" android:left="0dp" android:right="0dp" android:bottom="0dp" />  /* Add your padding here */

</shape>

Added: Remove your padding from styles while applying this padding in background

Answer 3

OK, so I couldn't find a method to set different padding values for the different button states using Android's XML files. I was able to achieve what I wanted by creating a child class of android.widget.Button class.

public class PushButton extends Button {
    private int dropPixels;

    public PushButton( Context context ) {
        super( context );
        init();
    }

    public PushButton( Context context, AttributeSet attrs ) {
        super( context, attrs );
        init();
    }

    public PushButton( Context context, AttributeSet attrs, int defStyleAttr ) {
        super( context, attrs, defStyleAttr );
        init();
    }

    public PushButton( Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes ) {
        super( context, attrs, defStyleAttr, defStyleRes );
        init();
    }

    private void init() {
        dropPixels = getContext().getResources().getDimensionPixelSize( R.dimen.pushbutton_drop_padding );
    }

    @Override
    public boolean onTouchEvent( MotionEvent event ) {
        super.onTouchEvent( event );

        switch ( event.getAction() ) {
        case MotionEvent.ACTION_DOWN:
            setPadding( getPaddingLeft(), dropPixels, getPaddingRight(), 0 );
            break;
        case MotionEvent.ACTION_UP:
            setPadding( getPaddingLeft(), 0, getPaddingRight(), 0 );
            break;
        }

        invalidate();
        return true;
    }
}

Within my XML file, I would use the PushButton Button to override the behavior of the standard button behavior, allowing for the text to "push" downward upon the button push and raise back up upon the button release.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:orientation="horizontal" >
    <com.testapp.PushButton
        android:id="@+id/start"
        style="@style/Push_Button"
        android:enabled="true"
        android:text="@string/start_button_text" />
    <com.testapp.PushButton
        android:id="@+id/next"
        style="@style/Push_Button"
        android:enabled="true"
        android:text="@string/next_button_text" />
</LinearLayout>