Java Android App Development Course, Creating an Intro Screen for a Messenger App

1. Importance of the Intro Screen

The intro screen is the first screen that users encounter when starting the app. It serves to briefly introduce the brand image, usage instructions, features, etc. It can leave a strong first impression on users and greatly help in building trust in the app. Additionally, the intro screen is a useful way to utilize the waiting time while the app is loading.

2. Preparing the Project

Create a new project using Android Studio. The following settings can be applied:

• Project Name: MessengerApp
• Package Name: com.example.messengerapp
• Language: Java
• Minimum API Level: API 21 (Lollipop)

When you create a new Android project with the above settings, the MainActivity.java and activity_main.xml files are generated by default.

3. Designing the Intro Screen

The design of the intro screen can enhance user experience. We will design the intro screen using a simple background image and logo.

3.1 Creating the Layout File

Create an intro_activity.xml file in the res/layout folder and write the following:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/logo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:src="@drawable/logo" />

</RelativeLayout>

The above XML code will place the logo in the center of the screen. The logo image should be added to the res/drawable folder.

4. Creating the Intro Screen Activity

Now we will create the Activity that displays the intro screen. Create a new Java file named IntroActivity.java and write the following:

package com.example.messengerapp;

import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
import androidx.appcompat.app.AppCompatActivity;

public class IntroActivity extends AppCompatActivity {
    private static final int SPLASH_TIME_OUT = 3000; // 3 seconds

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

        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                Intent mainIntent = new Intent(IntroActivity.this, MainActivity.class);
                startActivity(mainIntent);
                finish(); // Exit the intro screen
            }
        }, SPLASH_TIME_OUT);
    }
}

The above code implements the functionality of transitioning to MainActivity after a 3-second wait on the intro screen.

5. Modifying AndroidManifest.xml

Open the AndroidManifest.xml file and register IntroActivity. Modify it as follows:

<application
        ... >

        <activity android:name=".IntroActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

        <activity android:name=".MainActivity"></activity>

        </application>

Here, IntroActivity should be set as the starting screen for the app, so we set the MAIN and LAUNCHER actions.

6. Running and Testing the App

Now everything is set up. When you run the app, you can see that the intro screen appears for 3 seconds before transitioning to MainActivity. Make sure the app is functioning correctly.

If any issues arise, you can check the error messages in Logcat in Android Studio to resolve the problem.

7. Implementing Additional Features

If you want to implement additional features on the intro screen, you can consider ideas such as:

• Adding animation effects
• Applying various transition effects to the app logo
• Adding a simple slogan below the logo

For example, if you want to add an animation effect to the logo, you can use the Animation class to provide a simple fade-in effect.

ImageView logo = findViewById(R.id.logo);
Animation fadeIn = AnimationUtils.loadAnimation(this, R.anim.fade_in);
logo.startAnimation(fadeIn);