The messenger app is an essential element of modern communication. In this course, we will specifically explore how to create an intro screen that can be used in Android apps.
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);