This is an simple example how you can show and hide a custom layout view using slide animation effect.
We are going to use one button for toggling a ConstraintLayout as a custom view for the animation effect (you can use whatever container view you prefer).
The preferred programming language for this example is Kotlin.
First we declare boolean variable set to false:
|
1 |
private var isSidePanelShown: Boolean = false |
Inside onCreate we call setOnClickListener to our toggle button:
|
1 2 3 4 5 6 7 |
override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) toggleButton.setOnClickListener { toggle(isSidePanelShown) } } |
And the toggle effect for the view showing and hiding with animation effect:
|
1 2 3 4 5 6 7 8 9 10 |
private fun toggle(show: Boolean) { val transition: Transition = Slide(Gravity.END) transition.duration = 600 transition.addTarget(R.id.sideInfoPanel) TransitionManager.beginDelayedTransition(rootContainer, transition) sideInfoPanel.visibility = if (!show) View.VISIBLE else View.GONE sideInfoPanel.bringToFront() isSidePanelShown = !isSidePanelShown } |
Transition object holds information about animations that will be run on its targets during a scene change.
TransitionManager class manages the set of transitions that fire when there is a change of Scene. And delaying the showing/hiding the view using sliding animation with duration of 600 milliseconds, and to gravity END on screen (right side of the screen)
At the end we toggle the boolean value of isSidePanelShown so we can show/hide the view.
The layout:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout 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:id="@+id/rootContainer" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" /> <Button android:id="@+id/toggleButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="16dp" android:layout_marginTop="16dp" android:text="animate" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <androidx.constraintlayout.widget.ConstraintLayout android:id="@+id/sideInfoPanel" android:layout_width="300dp" android:layout_height="match_parent" android:background="@color/colorPrimaryDark" android:visibility="gone" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent"> <TextView android:id="@+id/title" android:layout_width="0dip" android:layout_height="wrap_content" android:layout_marginTop="40dp" android:gravity="center" android:paddingStart="8dp" android:paddingEnd="8dp" android:text="Title" android:textColor="@color/white" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <TextView android:id="@+id/description" android:layout_width="0dip" android:layout_height="wrap_content" android:layout_marginTop="20dp" android:gravity="center" android:paddingStart="8dp" android:paddingEnd="8dp" android:text="Description" android:textColor="@color/white" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@id/title" /> </androidx.constraintlayout.widget.ConstraintLayout> </androidx.constraintlayout.widget.ConstraintLayout> |
The result: