How to create layout with buttons like on this picture? ( BUTTON THAT HAVE ACTUALLY SHAPE OF TRIANGLE, NOT MASK )

Question

This is wanted layout: Layout

I'm stuck with this for a long time. Trying to rotate somekind buttons to mask other one and other ways like with:

            <rotate
            android:fromDegrees="45"
            android:toDegrees="45"
            android:pivotX="-40%"
            android:pivotY="87%" />

How to write code for this layout, buttons need to be custom shaped, not to be able with clicking around them, to achieve clicking same?

EDIT I tried Making a triangle shape using xml definitions? , Creating a triangular shaped button for android application

but this what i got: https://i.stack.imgur.com/X88P0.png

Answer 1

You can define two Button with link you provide and then put both of them in same FrameLayout with something like following code :

 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="300dp"
    android:layout_height="300dp" >

    <Button
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:background="@drawable/rectangle_1" />

    <Button
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:background="@drawable/rectangle_2" />
/>

Create rectangle_1 and rectangle_2 with links in comment.

Answer 2

Here is the code of TriangleButton which draw triangle and react on clickEvent() only if your finger position in triangle zone. Here you can set colors(normal and pressed):

Class:

public class TriangleButton extends Button {

    private final float RADIUS = 50.0f;

    private boolean mIsPressed;

    private Region mPathRegion;
    private final Path mPath = new Path();

    private final Paint mNormalPaint = new Paint(Paint.ANTI_ALIAS_FLAG) {
        {
            setDither(true);
            setStyle(Style.FILL);
            setPathEffect(new CornerPathEffect(RADIUS));
        }
    };

    private final Paint mPressedPaint = new Paint(Paint.ANTI_ALIAS_FLAG) {
        {
            setDither(true);
            setStyle(Style.FILL);
            setPathEffect(new CornerPathEffect(RADIUS));
        }
    };

    public TriangleButton(final Context context) {
        this(context, null);
    }

    public TriangleButton(final Context context, final AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public TriangleButton(final Context context, final AttributeSet attrs, final int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        setWillNotDraw(false);
        setBackgroundColor(Color.TRANSPARENT);
        setColors(Color.RED, Color.GRAY);
    }

    public void setColors(final int color, final int pressed) {
        mNormalPaint.setColor(color);
        mPressedPaint.setColor(pressed);
    }

    @Override
    protected void onSizeChanged(final int w, final int h, final int oldw, final int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);

        // Set triangle
        mPath.reset();
        mPath.moveTo(0.0f, h);
        mPath.lineTo(w / 2.0f, 0.0f);
        mPath.lineTo(w, h);
        mPath.close();

        // Create region for touch detecting
        final RectF rectF = new RectF();
        mPath.computeBounds(rectF, true);
        mPathRegion = new Region();
        mPathRegion.setPath(
                mPath,
                new Region(
                        (int) rectF.left,
                        (int) rectF.top,
                        (int) rectF.right,
                        (int) rectF.bottom)
        );
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (mPathRegion.contains((int) event.getX(), (int) event.getY())) {
            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    mIsPressed = true;
                    break;
                case MotionEvent.ACTION_UP:
                    mIsPressed = false;
                    performClick();
                    break;
                case MotionEvent.ACTION_CANCEL:
                    mIsPressed = false;
                    break;
            }
            postInvalidate();
        } else {
            mIsPressed = false;
            postInvalidate();
            return false;
        }

        postInvalidate();
        return true;
    }

    @Override
    protected void onDraw(final Canvas canvas) {
        canvas.drawPath(mPath, mIsPressed ? mPressedPaint : mNormalPaint);
        super.onDraw(canvas);
    }
}

XML:

<FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.example.user.timezonetest.TriangleButton
            android:id="@+id/btn_bottom"
            android:layout_width="300dp"
            android:layout_height="250dp"
            android:text="Second Button"
            android:textColor="#000"
            android:layout_gravity="center_horizontal"
            android:gravity="bottom|center_horizontal"
            android:padding="30dp"/>

        <com.example.user.timezonetest.TriangleButton
            android:id="@+id/btn_top"
            android:layout_width="180dp"
            android:layout_height="160dp"
            android:text="First Button"
            android:textColor="#000"
            android:layout_gravity="center_horizontal"
            android:gravity="bottom|center_horizontal"
            android:layout_margin="30dp"
            android:padding="30dp"/>

 </FrameLayout>

Code:

final TriangleButton bottomButton = (TriangleButton) findViewById(R.id.btn_bottom);
final TriangleButton topButton = (TriangleButton) findViewById(R.id.btn_top);

bottomButton.setColors(Color.RED, Color.GRAY);
topButton.setColors(Color.YELLOW, Color.GRAY);