How can i slide these views from right to left on button clicked?

Question

I want to slide some views when and want it on tabbing this left arrow button.
[1]: https://i.sstatic.net/RbuMX.png

And after pressing this button I want to show views slides from the end of the screen to the left direction.
[2]: https://i.sstatic.net/pBGoa.png

I found the SliderDrawer but that was deprecated years ago... So any idea how can I achieve this. For reference, you can look MxPlayer sliding menu that's what I actually want.

Answer 1

I thought to use the navigation drawer layout but as of a little bit of performance enhancement, I was also thinking it will put some load if we looked at it from a device memory usage point of view. I have achieved the same effect using a translationX property in XML and animate() function. A combination of these gave the same result which I was looking for.

In XML:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="@dimen/_8sdp"
    android:translationX="@dimen/_138sdp"
    tools:translationX="0dp">

   <ImageView
       android:id="@+id/btn_action_menu"
       android:layout_width="@dimen/_28sdp"
       android:layout_height="@dimen/_28sdp"
       android:layout_gravity="center_vertical"
       android:background="@drawable/shape_action_menu_bg"
       android:contentDescription="@null"
       android:src="@drawable/arrow_left" />
    ........
</LinearLayout>

On Jave/Kotlin side

var rotation = 180f // For Arrow rotation effect from < to >
val translationX = binding.root.translationX

and for drawer-like effect, I've set click listener on the left arrow button and executed code like this.

binding.btnActionMenu.setOnClickListener {
    // This animation is for rotating arrow from < to > upon clicked
    it.animate().rotation(rotation).start()

    // This will drag or you can say open a menu from right to left with
    // 500ms delay effect.
    binding.actionMenuLayout.animate().also {
           .translationX(if(rotation != 0f) 0f else translationX)
           .duration = 500L
         }
         .animate.start()

    rotation = if(rotation == 0f) 180f else 0f
}

That's it. Saves me from using the navigation drawer layout and a little bit of memory saving as well.

Menu Hides initially by setting translationX in xml:- https://i.sstatic.net/RbuMX.png
Menu Shown upon arrow click from dragging it right to left with 500ms delay:- https://i.sstatic.net/pBGoa.png