Override Button to draw text upside down

Issue

How could I go about overriding the Button class to draw the text upside down? The formatting of other libraries I'm using screw up when the button itself it rotated, but I need the text flipped.

I'm not familiar with the onDraw method, and I'm not sure how I could make a subclass for this.

Any help is appreciated, thanks!

Solution

You can use the rotation attribute in your button something like this:

<Button
    android:id="@+id/test_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="text button"
    android:rotation="180"/>

Or if you prefer using a custom button, you can create it something like this:

public class FlippedTextButton extends Button {
    public FlippedTextButton(Context context) {
        super(context);
    }

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

    public FlippedTextButton(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.save();

        float y = this.getHeight() / 2.0f;
        float x = this.getWidth() / 2.0f;
        canvas.rotate(180, x, y);

        super.onDraw(canvas);
        canvas.restore();
    }
}

Then you can use it with:

<!-- Change to your class package name. -->
<com.example.flippedtext.FlippedTextButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Flipped text"/>

Here is the sample project on github: https://github.com/isnotmenow/FlippedText

Answered By - ישו אוהב אותך