梯形形状重叠，未点击下面图片的某些部分

Question

我想在应用程序的一部分中并排使用两个梯形形状。在添加第一个梯形形状之后，第二个形状将在另一个形状之上升高，并且无法单击下面图像的右侧。

如图所示，两个几何形状实际上是梯形，但 由于它们的高度和宽度值，它们的行为就像矩形并相互覆盖。

（https://i.hizliresim.com/jgbyMG.png）

简而言之： 例如，当我想单击右边的图像时，可以，但是当我想单击左侧的图片时，我只能单击它的特定部分。因为在我无法单击的部分中，右边的图片开始了。

我尝试了大多数对角线图像库，但无法解决这个问题。

这是我的xml文件：

    <LinearLayout

            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:weightSum="1"
            android:orientation="horizontal">

            //(blue one at the picture)

            <com.santalu.widget.DiagonalImageView
                android:id="@+id/firstTrapezoid"
                android:layout_width="0dp"
                android:layout_height="200dp"
                android:layout_weight="0.5"
                android:layout_marginEnd="-63dp"
                app:di_direction="top"
                app:di_overlap="130dp"
                app:di_position="right" />

            //(black one at the picture)

            <com.santalu.widget.DiagonalImageView
                android:id="@+id/secondTrapezoid"
                android:layout_width="0dp"
                android:layout_height="200dp"
                android:layout_marginStart="-63dp"
                android:layout_weight="0.5"
                app:di_direction="right"
                app:di_overlap="130dp"
                app:di_position="left" />


    </LinearLayout>

我愿意采用任何能够保护该设计并正确正确点击的解决方案。

感谢您抽出宝贵的时间。