The Android component realizes left sliding to reveal the right operation button

1. The final effect

Say it up front:

This example does not contain any third-party libraries, does not integrate any wheels, and uses all the UI components and standard events that come with Android.

The sliding direction can be modified arbitrarily, and the sliding effect can be placed on any View component.

Let’s look at the final effect first. The blue on the left side of the picture below is the view after sliding to the left, and the three buttons on the right are the operation buttons displayed after sliding:

Two, ideas

1. Using the layout order effect of FrameLayout, the elements of the subsequent layout will block the elements of the previous layout

2. Use a CardView container, put the FrameLayout, the occlusion layer in it, the operation buttons below, etc. in this CardView container to form an overall component

3. Use the basic events of View:

- OnLongClickListener

- OnTouchListener

It should be noted that if you only implement OnTouchListener but not OnLongClickListener, the sliding effect cannot be triggered.

3. UI layout

Let's take a look at the hierarchy of the entire UI layout:

Just ignore those warnings...

In the outermost layer, we use a CardView as a container inside the CardView, put a FrameLayout layout, and make the width and height of the FrameLayout fill the CardView.

In the next layer of FrameLayout, there are two LinearLayout layouts. Here will be the first point that needs attention. Due to the characteristics of FrameLayout, the LinearLayout added later will block the one added first.

Therefore, in the LinearLayout that was added first, a TextView was placed to occupy the position, and then three buttons were placed. These three buttons are the operation buttons exposed by sliding left.

In the LinearLayout that was added later, since this example does not involve any business, it is only set to a bright blue color for easy observation.

<androidx.cardview.widget.CardView
    android:id="@+id/CARD_VIEW_EFFECT"
    android:layout_width="0dp"
    android:layout_height="64dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="16dp"
    android:layout_marginEnd="8dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/TEXT_VIEW_TITLE" >

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

        <LinearLayout
            android:id="@+id/LINEAR_LAYOUT_DASHBOARD"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/textView5"
                android:layout_width="