Override layout but can still difference space and area

Question

For short I wanted to try some new designs in my mind, and one of them was a button that was diagonally divided into two parts. Of course, each side will have a different mission.

And I succeeded in separating the button click the way I thought it was with a little bit of vector and pathData. But the problem also comes from here, in order for the two buttons to feel like they are tied together, I had to use FrameLayout, also because of that, it was inserted layout of each other, resulting in only 1 task is performed when pressed.

So I would like to ask everyone, what should I do in this case, and please point me in the direction of how to solve this problem.

P/s this button will be used in a viewholder of the recyclerView so using a fixed position of the user pointer won't be very feasible.

here my code in xml

    <FrameLayout
                android:layout_width="100dp"
                android:layout_height="match_parent"
                android:layout_gravity="end">

                <ImageView
                    android:id="@+id/admin_del"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    app:backgroundTint="@null"
                    android:src="@drawable/baseline_delete_forever_24"
                    android:paddingStart="55dp"
                    android:paddingTop="35dp"
                    android:background="@drawable/right_triangle"/>

                <ImageView
                    android:id="@+id/admin_edit"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    app:backgroundTint="@null"
                    android:src="@drawable/baseline_edit_calendar_24"
                    android:paddingEnd="55dp"
                    android:paddingBottom="35dp"
                    android:background="@drawable/left_triangle"/>

            </FrameLayout>

and here are two drawable xml triangle i use as image background

right_triangle

    <?xml version="1.0" encoding="utf-8"?>
    <vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="100dp"
    android:width="100dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path android:fillColor="#673AB7" android:pathData="M0,24H24L24,0" />
    </vector>

left_triangle

    <?xml version="1.0" encoding="utf-8"?>
    <vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="100dp"
    android:width="100dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path android:fillColor="#3F51B5" android:pathData="M0,0H24L0,24" />
    </vector>

Answer 1

Views are rectangular - even if you only draw a triangle inside one, the touch region is the full area of the View itself. You can adjust the actual touch target, but it will still be a rectangular shape.

You'd probably be better off creating your own custom view that allows you to display two icons/colours, and calculates which side should be considered "clicked" when a single click event happens at (x, y) inside the View.

More info here and here