Android studio | Sun and clouds splash screen with animations

 
Hi there and welcome to our first tutorial. Today we gonna see how to create a beautiful splash screen with clouds and sun.

Source code :

• activity_main.xml:

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/bg"
        android:scaleType="centerCrop"/>

    <ImageView
        android:id="@+id/sun"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:src="@drawable/sun"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.05" />

    <ImageView
        android:id="@+id/cloud1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/cloud2"
        app:tint="@color/white"
        app:layout_constraintStart_toEndOf="@id/sun"
        app:layout_constraintBottom_toBottomOf="@id/sun"
        app:layout_constraintEnd_toEndOf="@id/sun"/>

    <ImageView
        android:id="@+id/cloud2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/cloud1"
        app:tint="@color/white"
        app:layout_constraintEnd_toStartOf="@id/cloud1"
        app:layout_constraintStart_toStartOf="@id/cloud1"
        app:layout_constraintBottom_toBottomOf="@id/sun"/>

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/white"
        android:text="@string/app_name"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="100dp"
        android:textSize="35sp"
        android:textStyle="bold"
        android:fontFamily="@font/dosis"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>



</androidx.constraintlayout.widget.ConstraintLayout>

• cloud1.xml (animation file):

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1500">

    <translate
        android:fromXDelta="-100%"
        android:toXDelta="0%"/>

</set>

• cloud2.xml (animation file):

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1500">

    <translate
        android:fromXDelta="100%"
        android:toXDelta="0%"/>

</set>

• sun_anim.xml (animation file): 

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000">

    <rotate
        android:fromDegrees="0"
        android:toDegrees="360"
        android:pivotX="50%"
        android:pivotY="50%"/>

</set>

• title_anim.xml (animation file):

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500">

    <alpha
        android:fromAlpha="0"
        android:toAlpha="1"/>

</set>

• MainActivity.java : 

package m.ify.eatherplus;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    Animation sunAnim,cloud1Anim,cloud2Anim,titleAnim;
    ImageView sun,cloud1,cloud2;
    TextView title;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        sunAnim = AnimationUtils.loadAnimation(this,R.anim.sun_anim);
        cloud1Anim = AnimationUtils.loadAnimation(this,R.anim.cloud1);
        cloud2Anim = AnimationUtils.loadAnimation(this,R.anim.cloud2);
        titleAnim = AnimationUtils.loadAnimation(this,R.anim.title_anim);
        sun = findViewById(R.id.sun);
        cloud1 = findViewById(R.id.cloud1);
        cloud2 = findViewById(R.id.cloud2);
        title = findViewById(R.id.title);
        title.startAnimation(titleAnim);
        cloud1.startAnimation(cloud2Anim);
        cloud2.startAnimation(cloud1Anim);
        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                sun.startAnimation(sunAnim);

                new Handler().postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        startActivity(new Intent(MainActivity.this,MainActivity2.class));
                        finish();
                    }
                },1000);
            }
        },1500);


    }
}

Watch on youtube :

Download Images and fonts:

Click here