Question

I have an ImageButton and want to scale the button in different sizes which means an image is not the right choice. So I was thinking of an ImageButton with a custom Shape as source.

I want the button to look like this:

I started with this, but got stuck with the rotate stuff:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    
    <stroke
        android:width="2dp"
        android:color="@color/red" />
    <rotate
        android:fromDegrees="90"
        android:toDegrees="135" >
        <shape android:shape="line" >
            <stroke
                android:width="2dp"
                android:color="@color/red" >
            </stroke>
        </shape>
    </rotate>

    <padding
        android:bottom="7dp"
        android:left="7dp"
        android:right="7dp"
        android:top="7dp" />

</shape>

This however does not rotate as I expect it to. Maybe I am completely wrong and need a push in the right direction. 🙂 Thanks.

Answer 1

I got around that problem with a custom Button implementation and overwrite the onDraw() method which looks like this:

@Override
public void onDraw(Canvas canvas)
{
    width = getMeasuredWidth();
    height = getMeasuredHeight();

    // diagonal top left | bottom right
    canvas.drawLine(0, 0, width, height, mPaint);

    // diagonal top right | bottom left
    canvas.drawLine(width, 0, 0, height, mPaint);

    // horizontal top
    canvas.drawLine(0, 0, width, 0, mPaint);

    // horizontal bottom
    canvas.drawLine(0, height, width, height, mPaint);

    // vertical left
    canvas.drawLine(0, 0, 0, height, mPaint);

    //vertical right
    canvas.drawLine(width, 0, width, height, mPaint);
}

You have to set mPaint yourself according to the color and size etc. you want your stroke.