CLICK2CODE

first you learn then you earn

In this article, you can create a modern splash screen that means if you want to design splash screen UI. You must follow the below steps.

STEP: 01

First, you can add a dependency to your project. So, you can open Gradle Scripts and paste the below code under the dependency section.

// Circular ImageView Dependency
implementation 'de.hdodenhof:circleimageview:3.1.0'
// Design your Dependency
implementation 'com.google.android.material:material:1.1.0'
STEP: 02

Now, you can manage colour depending of your project means if you want different colors then choices yours.

<color name="colorPrimary">#222E55</color>
<color name="colorPrimaryDark">#222E55</color>
<color name="colorAccent">#03DAC5</color>
STEP: 03

Now, you can replace DarkActionBar to NoActionBar in your styles folder means you must replace these things. So, the code is given below.

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
STEP: 04

Now, you already made an icon for this project. So, simply you can insert in this project.

STEP: 05

Now, you can create an “Android Resources Directory” for splash screen animation purposes. If you do not know how to create then you can CLICK HERE. After created that folder then you can create an “Animation Resources Layout” under¬† “anim” folder named mysplashscreen. And paste the below codes.

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:fromAlpha="0.0"
android:toAlpha="1.0"
android:duration="2000">

</alpha>
STEP: 06

Now, you can copy and paste below code in your “activity_splash_screen.xml” file.

<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorPrimary"
tools:context=".SplashScreen">

<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/logo"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerInParent="true"
android:src="@drawable/icon"
app:civ_border_color="@android:color/white"
app:civ_border_width="2dp" />

<TextView
android:id="@+id/appName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/logo"
android:layout_centerHorizontal="true"
android:fontFamily="@font/aldrich"
android:text="QUOTES APP"
android:textAppearance="@style/TextAppearance.AppCompat.Medium"
android:textColor="@android:color/white" />

<TextView
android:id="@+id/poweredBy"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="8dp"
android:text="powered By: CLICK2CODE"
android:textColor="@android:color/white" />

</RelativeLayout>
STEP: 07

Now, you can paste complete JAVA code in “SplashScreen.java”¬†that codes are given below.

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

ImageView logo = findViewById(R.id.logo);
TextView appName = findViewById(R.id.appName);
TextView poweredBy = findViewById(R.id.poweredBy);

int splashTimeOut = 3000;

new Handler().postDelayed(new Runnable() {
@Override
public void run() {
Intent intent = new Intent(SplashScreen.this,HomeActivity.class);
startActivity(intent);
finish();

}
},splashTimeOut);

Animation animation = AnimationUtils.loadAnimation(this,R.anim.splashscreenanimation);
logo.startAnimation(animation);
appName.startAnimation(animation);
poweredBy.startAnimation(animation);

View decorview = getWindow().getDecorView();
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT){
decorview.setSystemUiVisibility(
View.SYSTEM_UI_FLAG_LAYOUT_STABLE
| View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
| View.SYSTEM_UI_FLAG_FULLSCREEN
| View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
| View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY
);
}
}

Finally, all steps are completed then you can run this project in your real device.

Thank you!

Leave a Reply

Your email address will not be published. Required fields are marked *