Android - Rotate image inside the button

Question

I want to rotate the image inside the button on click of the button. I tried with just ImageView and it works but for accessibility purpose I need to use Button instead of ImageView.

Before click :

Here the down arrow is button background.

After Click :

Click of button displays extra data and background arrow is rotated. How can I animate and rotate button background on click?

Layout code for reference :

<RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical" >

            <LinearLayout
                android:id="@+id/cases_actions_row"
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
                android:orientation="horizontal" >

                <Button
                    android:id="@+id/case_action_item_1"
                    style="@style/card_action_button"
                    android:layout_height="wrap_content"
                    android:layout_width="wrap_content" />

                <Button
                    android:id="@+id/case_action_item_2"
                    style="@style/card_action_button"
                    android:layout_height="wrap_content"
                    android:layout_width="wrap_content" />

            </LinearLayout>

            <Button
                    android:id="@+id/cases_expand_button"
                    style="@style/card_action_button"
                    android:layout_height="20dp"
                    android:layout_width="20dp"
                    android:layout_alignParentEnd="true"
                    android:layout_centerVertical="true"
                    android:background="@drawable/ic_arrow" />

        </RelativeLayout>

Answer 1

The simplest method would be to rotate the entire button (and as Frank N. Stein suggested in the comments, an ImageButton is probably best suited, although there's nothing to stop you from using a different widget).

There are several ways to rotate the button, but a ViewPropertyAnimator is again likely the most straightforward:

button.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        float deg = button.getRotation() + 180F;
        button.animate().rotation(deg).setInterpolator(new AccelerateDecelerateInterpolator());
    }
});

Edit: By the way, if you want the arrow to reverse its original animation, you could instead try:

float deg = (button.getRotation() == 180F) ? 0F : 180F;

instead of float deg = button.getRotation() + 180F;

Answer 2

You can set bitmap as background in button.

Matrix matrix = new Matrix();

matrix.postRotate(90);

Bitmap scaledBitmap = Bitmap.createScaledBitmap(bitmapOrg,width,height,true);

Bitmap rotatedBitmap = Bitmap.createBitmap(scaledBitmap , 0, 0, scaledBitmap .getWidth(), scaledBitmap .getHeight(), matrix, true);

First take bitmap from any source and then rotate it and then set it as background in button.

BitmapDrawable bdrawable = new BitmapDrawable(context.getResources(),bitmap);
button.setBackground(bdrawable);