How to make Custom Alert Dialog Included Emoji with animation

Question

here is my layout of xml :

<LinearLayout
    android:gravity="center"
    android:layout_width="match_parent"
    android:layout_height="90dp"
    android:orientation="horizontal">

    <LinearLayout
        android:id="@+id/lyt_like"
        android:gravity="center"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <ImageView
            android:src="@drawable/save"

            android:layout_width="30dp"
            android:layout_height="30dp" />

        <TextView
            android:text="Like"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </LinearLayout>

    <View
        android:background="@color/bg_screen2"
        android:layout_width="1dp"
        android:layout_height="match_parent">


    </View>




    <LinearLayout
        android:id="@+id/lyt_love"
        android:gravity="center"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="vertical" >



        <ImageView
            android:src="@drawable/save"
            android:layout_width="30dp"
            android:layout_height="30dp" />

        <TextView
            android:text="Love"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </LinearLayout>
    <View
        android:background="@color/bg_screen2"
        android:layout_width="1dp"
        android:layout_height="match_parent">


    </View>

    <LinearLayout
        android:gravity="center"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="vertical" >


        <ImageView
            android:src="@drawable/save"

            android:layout_width="30dp"
            android:layout_height="30dp" />

        <TextView
            android:text="Sad"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </LinearLayout>
    <View
        android:background="@color/bg_screen2"
        android:layout_width="1dp"
        android:layout_height="match_parent">


    </View>

</LinearLayout>

<View
    android:background="@color/bg_screen2"
    android:layout_width="match_parent"
    android:layout_height="1dp">

</View>

<LinearLayout

    android:gravity="center"
    android:layout_width="match_parent"
    android:layout_height="90dp"
    android:orientation="horizontal">

    <LinearLayout
        android:gravity="center"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <ImageView
            android:src="@drawable/save"

            android:layout_width="30dp"
            android:layout_height="30dp" />

        <TextView
            android:text="laugh"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </LinearLayout>

    <View
        android:background="@color/bg_screen2"
        android:layout_width="1dp"
        android:layout_height="match_parent">


    </View>




    <LinearLayout
        android:gravity="center"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="vertical" >



        <ImageView
            android:src="@drawable/save"
            android:layout_width="30dp"
            android:layout_height="30dp" />

        <TextView
            android:text="Angry"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </LinearLayout>
    <View
        android:background="@color/bg_screen2"
        android:layout_width="1dp"
        android:layout_height="match_parent">


    </View>

    <LinearLayout
        android:gravity="center"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="vertical" >


        <ImageView
            android:src="@drawable/save"

            android:layout_width="30dp"
            android:layout_height="30dp" />

        <TextView
            android:text="Wow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </LinearLayout>
    <View
        android:background="@color/bg_screen2"
        android:layout_width="1dp"
        android:layout_height="match_parent">


    </View>

</LinearLayout>

<View
    android:background="@color/bg_screen2"
    android:layout_width="match_parent"
    android:layout_height="1dp">

</View>

<LinearLayout
    android:gravity="center"

    android:layout_width="match_parent"
    android:layout_height="90dp"
    android:orientation="horizontal">

    <LinearLayout
        android:gravity="center"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <ImageView
            android:src="@drawable/save"

            android:layout_width="30dp"
            android:layout_height="30dp" />

        <TextView
            android:text="Me Too"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </LinearLayout>

    <View
        android:background="@color/bg_screen2"
        android:layout_width="1dp"
        android:layout_height="match_parent">


    </View>




    <LinearLayout
        android:gravity="center"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="vertical" >



        <ImageView
            android:src="@drawable/save"
            android:layout_width="30dp"
            android:layout_height="30dp" />

        <TextView
            android:text="Don't Worry"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </LinearLayout>
    <View
        android:background="@color/bg_screen2"
        android:layout_width="1dp"
        android:layout_height="match_parent">


    </View>

    <LinearLayout

        android:gravity="center"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="vertical" >


        <ImageView
            android:src="@drawable/save"

            android:layout_width="30dp"
            android:layout_height="30dp" />

        <TextView
            android:text="Consult Doctor"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </LinearLayout>
    <View
        android:background="@color/bg_screen2"
        android:layout_width="1dp"
        android:layout_height="match_parent">


    </View>

</LinearLayout>

but it is not similar as I wanted so please help me and emoji are in running animation.

Answer 1

1. You can see the tutorial to create a Custom Dialog in Android below.

   Create a custom Dialog Box.

2. After learning how to create a Custom Dialog Box, you can use library like Lottie from https://github.com/airbnb/lottie-android.

3. You can find animations for Lottie on their website https://lottiefiles.com/

Answer 2

First Method

Hi you can use the library for that Live emojis

Second Method

You can also use Glide library for load gif

Glide.with(this).load(R.raw.sample_gif).into(imageViewTarget);