Todo Android app using Node JS and REST API | Part 1: Splash Screen with loading bar in android
In this series of tutorials, we’re going to create a TODO app using the Node JS server to create REST API and MongoDB as a database.
Today in the first part, we are going to create a Splash screen with a circular loading bar in android.
Overview
Part 1: design splash screen
Go to the splash activity XML file and design the splash screen with a circular bar
<?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”
android:background=”@drawable/fontpage_copy”
tools:context=”.SplashActivity”><ImageView
android:id=”@+id/imageView”
android:layout_width=”match_parent”
android:layout_height=”150dp”
android:layout_marginTop=”144dp”
android:src=”@drawable/todo”
app:layout_constraintEnd_toEndOf=”parent”
app:layout_constraintHorizontal_bias=”0.5"
app:layout_constraintStart_toStartOf=”parent”
app:layout_constraintTop_toTopOf=”parent” /><TextView
android:id=”@+id/version”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_marginTop=”300dp”
android:fontFamily=”@font/oswald”
android:includeFontPadding=”false”
android:text=”version”
android:textColor=”@color/colorAccent”
android:textSize=”16sp”
app:layout_constraintEnd_toEndOf=”parent”
app:layout_constraintStart_toStartOf=”parent”
app:layout_constraintTop_toBottomOf=”@+id/imageView” /><ProgressBar
android:id=”@+id/progress_bar”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
app:layout_constraintBottom_toBottomOf=”parent”
app:layout_constraintEnd_toEndOf=”parent”
app:layout_constraintHorizontal_bias=”0.5"
app:layout_constraintStart_toStartOf=”parent”
app:layout_constraintTop_toBottomOf=”@+id/version”
app:layout_constraintVertical_bias=”0.1" />
</androidx.constraintlayout.widget.ConstraintLayout>
Part 2: define variables in the java class
public class SplashActivity extends AppCompatActivity {
private TextView versionTv;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_splash);versionTv = findViewById(R.id.version);
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
getWindow().setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS,
WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS
);
}try {
versionTv.setText("Version: "+getPackageManager().getPackageInfo(getPackageName(), 0).versionName);
} catch (PackageManager.NameNotFoundException e) {
e.printStackTrace();
}new Handler().postDelayed(new Runnable() {
@Override
public void run() {
startActivity(new Intent(SplashActivity.this, LoginActivity.class));
finish();
}
}, 3500);
}}
- here, we also import the app version inside a textView, also WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS is used to make the screen full screen.
- And Handler().postDelayed(new Runnable) causes the Runnable to be run after the specified amount of time elapses. After the Splash screen user is directly going to the Onboarding screen.
You can get the drawable files from here. CLICK HERE
In the next part, we will design our Onboarding screens with shared preferences.
