0

I try to create a splash screen. For that I use two lottie animations. One is a grafic animation, the second is an animated title. this is the code for layout:

<RelativeLayout 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/activity_splash"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/primary_color"
tools:context=".activities.ActivitySplash.ActivitySplash">

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/title"
    android:layout_width="match_parent"
    android:layout_height="336dp"
    android:layout_alignParentStart="true"
    android:layout_alignParentEnd="true"
    android:layout_alignParentBottom="true"
    android:layout_marginStart="0dp"
    android:layout_marginEnd="0dp"
    android:layout_marginBottom="84dp"
    app:lottie_autoPlay="false"
    app:lottie_loop="false"
    app:lottie_rawRes="@raw/title_app"
    app:lottie_url="" />

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/title_animation"
    android:layout_width="match_parent"
    android:layout_height="460dp"
    android:layout_alignParentStart="false"
    android:layout_centerInParent="true"
    android:cropToPadding="false"
    android:scaleType="centerCrop"
    app:lottie_autoPlay="false"
    app:lottie_loop="true"
    app:lottie_rawRes="@raw/title_anim"
    app:lottie_url="" />

</RelativeLayout>

The problem is that splash is messed depending of device screen dimensions. Using my code the first lottie is displayed on center of parent. But the animation graphic is not on the lottie middle so is not displayed on screen center. I need to move it up with 30dp for example.

Same problem with the second lootie. I need to put it under first lottie but not exactly under it. Need to be on 2/3 of first lootie.

Any suggestion?

2 Answers 2

0

First, I would recommend you to replace the RelativeLayout with a constrainLayout. Once you use constrainlayout, you can define the lottie like this:

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/title"
    android:layout_width="match_parent"
    android:layout_height="336dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:lottie_autoPlay="false"
    app:lottie_loop="false"
    app:lottie_rawRes="@raw/title_app"
    app:lottie_url="" />
       
2
  • How will help me this?
    – Nick
    Feb 7, 2023 at 12:59
  • in this way , you define the view in center of parent Feb 8, 2023 at 6:43
0

If you want to move the first LottieAnimationView up by 30dp, you can use android:layout_marginTop="30dp":

<com.airbnb.lottie.LottieAnimationView

   android:id="@+id/title_animation"
  android:layout_width="match_parent"
android:layout_height="460dp"
android:layout_alignParentStart="false"
android:layout_centerInParent="true"
android:layout_marginTop="30dp"
android:cropToPadding="false"
android:scaleType="centerCrop"
app:lottie_autoPlay="false"
app:lottie_loop="true"
app:lottie_rawRes="@raw/title_anim"
app:lottie_url="" /> 

To place the second LottieAnimationView under the first one and 2/3 of the height, you can use the android:layout_below attribute:

<com.airbnb.lottie.LottieAnimationView

android:id="@+id/title"
android:layout_width="match_parent"
android:layout_height="336dp"
android:layout_below="@id/title_animation"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
android:layout_marginTop="460dp * 2/3"
android:layout_marginStart="0dp"
android:layout_marginEnd="0dp"
app:lottie_autoPlay="false"
app:lottie_loop="false"
app:lottie_rawRes="@raw/title_app"
app:lottie_url="" />
1
  • I don't need to set the first lottie to top at 30dp but instead to set to the center of screen - 30dp. To move the lottie up with 30 dp from center of the secreen.
    – Nick
    Feb 7, 2023 at 13:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.