Hello Guys, In this example we are going to learn how to display custom dialog in
android with Lottie animations.
Step 1: Create a project with Android Studio.
Step 2: Configure app with Lottie dependencies.
add below dependency in app level build.gradle file
implementation "com.airbnb.android:lottie:2.8.0"
|
Download required Json files and add in raw folder inside res-> values folder
I have downloaded success and failure json files from the below links
https://lottiefiles.com/433-checked-done#
https://lottiefiles.com/4970-unapproved-cross
Step 3: Update required resources
Open colors.xml file and add below lines of codes, here you can put whatever themes you want for the application
<color name="colorPrimary">#566573</color>
<color name="colorPrimaryDark">#42505E</color>
<color name="colorAccent">#4CAF50</color>
<color name="success">#1ec659</color>
<color name="failure">#d30915</color>
<color name="white">#FFFFFF</color>
<color name="grey">#D6D6D6</color>
|
Step 4: Create UI for show the Buttons in home screen.
Open activity_main.xml file and add below code
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="https://schemas.android.com/apk/res/android"
xmlns:tools="https://schemas.android.com/tools"
xmlns:app="https://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:gravity="center"
android:background="@color/colorPrimary"
android:layout_height="match_parent"
tools:context=".MainActivity">
<Button
android:id="@+id/btn_success"
android:layout_width="wrap_content"
android:minEms="10"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:background="@color/success"
android:text="Success Dialog"
android:textAllCaps="false"
android:textColor="@color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/btn_failure"
android:layout_width="wrap_content"
android:minEms="10"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:text="Failure Dialog"
android:background="@color/failure"
android:textAllCaps="false"
android:textColor="@color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</LinearLayout>
|
Now just run the app and the screen will display like below
Step 5: Now lets create layouts for success and failure dialogs.
dialog_success_layout.xml file
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
xmlns:app="https://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:gravity="center"
android:layout_gravity="center"
android:background="@color/white"
android:padding="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/video_loading"
android:layout_width="150dp"
android:layout_height="150dp"
android:scaleType="centerCrop"
android:layout_centerInParent="true"
app:lottie_rawRes="@raw/lottie_success"
app:lottie_loop="true"
app:lottie_autoPlay="true" />
<TextView
android:id="@+id/txt_msg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Success!"
android:layout_margin="10dp"
android:textColor="@color/success"
android:textSize="26sp"
android:textStyle="bold"
/>
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Received Success Resposne"
android:textColor="@color/success"
android:textSize="22sp"
android:textStyle="bold"
/>
<Button
android:id="@+id/btnDialog"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:background="@drawable/background_corners"
android:text="Continue"
android:textColor="@color/success"
android:textSize="18sp"
/>
</LinearLayout>
|
dialog_failure_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
xmlns:app="https://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:gravity="center"
android:layout_gravity="center"
android:background="@color/white"
android:padding="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/loading"
android:layout_width="150dp"
android:layout_height="150dp"
android:scaleType="centerCrop"
android:layout_centerInParent="true"
app:lottie_rawRes="@raw/lottie_error"
app:lottie_loop="true"
app:lottie_autoPlay="true" />
<TextView
android:id="@+id/txt_msg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Error!"
android:layout_margin="10dp"
android:textColor="@color/failure"
android:textSize="26sp"
android:textStyle="bold"
/>
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Received Error Resposne"
android:textColor="@color/failure"
android:textSize="22sp"
android:textStyle="bold"
/>
<Button
android:id="@+id/btnDialog"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:background="@drawable/background_corners"
android:text="Cancel"
android:textColor="@color/failure"
android:textSize="18sp"
/>
</LinearLayout>
|
background_corners.xml for button bcakground drawable file create under drawable folder
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="https://schemas.android.com/apk/res/android">
<solid android:color="@color/grey" />
<corners android:radius="30dp" />
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
</shape>
|
Step 6:
Write the loginc to show the success and failure dialogs in mainActivity.kt file
class MainActivity : AppCompatActivity(),View.OnClickListener {
lateinit var btn_success: Button;
lateinit var btn_failure: Button;
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
btn_success=findViewById(R.id.btn_success);
btn_failure=findViewById(R.id.btn_failure);
btn_success.setOnClickListener(this)
btn_failure.setOnClickListener(this)
}
override fun onClick(v: View?) {
when(v?.id)
{
R.id.btn_success->{
var dialogBuilder = AlertDialog.Builder(this@MainActivity)
var layoutView = layoutInflater.inflate
(R.layout.dialog_success_layout, null)
var dialogButton = layoutView.findViewById
(R.id.btnDialog) as Button
dialogBuilder.setView(layoutView)
var alertDialog = dialogBuilder.create()
alertDialog.show()
dialogButton.setOnClickListener
(View.OnClickListener { alertDialog.dismiss() })
}
R.id.btn_failure->{
var dialogBuilder = AlertDialog.Builder(this@MainActivity)
var layoutView = layoutInflater.inflate
(R.layout.dialog_failure_layout, null)
var dialogButton = layoutView.findViewById
(R.id.btnDialog) as Button
dialogBuilder.setView(layoutView)
var alertDialog = dialogBuilder.create()
alertDialog.show()
dialogButton.setOnClickListener
(View.OnClickListener { alertDialog.dismiss() })
}
}
}
}
|
Now run the application and check the success and failure dialogs on each button event
