Android unusual Image Buttons

I am trying to create a similar main menu design in my android app as you can see in my attachment.

The problem is, the menu buttons are not horizontal, but are oblique and partially overlapping each other.

I tried something like this with ImageButton in RelativeLayout:

<ImageButton
    android:id="@+id/simpleImageButton1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/menu1"/>

<ImageButton
    android:id="@+id/simpleImageButton2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/simpleImageButton1"
    android:src="@drawable/menu2"/>

But as the images are not horizontal, I need to store each image as a horizontal with a transparent bottom and upper part, however, that causes, that those parts will be clickable as well, and as they are overlapping, two clickable parts will have collision.

Is any good solution to make this work?

As this menu will be fixed, so no more items will be added, I also thought to make it as one background image and maybe somehow make invisible buttons just for a part of each button, or map somehow each clickable area.

But still, I'd rather go with the ImageButtons way or something easier.

You can try using FrameLayout with multiple buttons positioned at the desired angle and overlapping each other. Use the attributes android:rotation and android:layout_margin to control the angle and overlap between buttons.

Here is an example:

Sample app: https://github.com/bgizdov/android-overlapped-rotated-image-buttons

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
<ImageButton
    android:id="@+id/simpleImageButton1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/menu1"
    android:layout_marginTop="50dp"
    android:layout_marginLeft="50dp"
    android:background="@null"
    android:foreground="?android:attr/selectableItemBackground"
    android:rotation="15" />

<ImageButton
    android:id="@+id/simpleImageButton2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/menu2"
    android:layout_marginTop="150dp"
    android:layout_marginLeft="50dp"
    android:background="@null"
    android:foreground="?android:attr/selectableItemBackground"
    android:rotation="-10" />

  <ImageButton
      android:id="@+id/simpleImageButton3"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@drawable/menu3"
      android:layout_marginTop="300dp"
      android:layout_marginLeft="50dp"
      android:background="@null"
      android:foreground="?android:attr/selectableItemBackground"
      android:rotation="15" />
</FrameLayout>