How to create Android splash screen with images and percent position

Question

I am trying to create an Android splash screen that has two images: one in the center of the screen and one that is about 20% away from the bottom of the screen. Is there any way to do this?

The approach I tried thus far is to have a SplashActivity as the first activity and the manifest file sets the theme as SplashTheme:

In AndroidManifest.xml:

<activity
        android:name=".SplashActivity"
        android:label="@string/app_name"
        android:theme="@style/SplashTheme">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
</activity>

Then in styles.xml I define this theme:

    <style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowBackground">@drawable/background_splash</item>
    </style>

Next I create the drawable file background_splash.xml and this is where I have questions:

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

<item>
    <shape android:shape="rectangle">
        <solid android:color="@color/dark_gray" />
        <padding
            android:left="0dip"
            android:top="0dip"
            android:right="0dip"
            android:bottom="0dip" />
    </shape>
</item>

<item>
    <bitmap
        android:gravity="center"
        android:src="@mipmap/mainlogo"/>

</item>

<item android:bottom="@dimen/splash_bottom">
    <bitmap android:src="@mipmap/bottom_logo"
        android:gravity="bottom" />
</item>

</layer-list>

This actually sort-of works, the mainlogo is indeed in the center and the bottom_logo is some distance above the bottom. The problem is that I need to specify values in dp for splash_bottom in dimens.xml. Doing this accurately for ldpi, mdpi, hdpi xhdpi etc is really hard to get right.

Isn't there a way inside the drawable file background_splash.xml to place the bottom_logo 20% from the bottom of the screen?

The desired splash screen looks something like this (not the actual screen - I borrowed this from another SO post - see Android: how to align 2 images on a splash screen):

Answer 1

"layer-list & item" have no percentage properties to set their position.

To implement your idea, you should use layout XML file.

In AndroidManifest.xml

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

In SplashActivity.java

public class SplashActivity extends Activity {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // SET no title , full-screen mode
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);

        // SET activity_splash.xml as layout
        final View viewSplash = View.inflate(this, R.layout.activity_splash, null);
        setContentView(viewSplash);

        // Gradient Animation
        AlphaAnimation anim = new AlphaAnimation(0.5f, 1.0f); // change alpha from 0.5 to 1.0
        anim.setDuration(5000); // animate in 5000ms
        viewSplash.setAnimation(anim);
        anim.setAnimationListener(
                new Animation.AnimationListener(){
                                    @Override
                                    public void onAnimationStart(Animation animation) {

                                    }

                                    @Override
                                    public void onAnimationRepeat(Animation animation) {

                                    }

                                    @Override
                                    public void onAnimationEnd(Animation animation) {
                                        // redirect to the other screen, such as MainActivity
                                        Intent intent = new Intent(SplashActivity.this, MainActivity.class);
                                        startActivity(intent);

                                        // close SplashActivity
                                        finish();
                                    }
                                });
    }
}

activity_splash.xml might be one of followings;

1. layout_weight of LinearLayout

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@color/dark_gray">

<ImageView android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:src="@mipmap/mainlogo"/>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <View android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="0.4"/>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:layout_weight="0.6"
        android:src="@mipmap/bottom_logo"/>
</LinearLayout>

Screenshot.1

2. layout_constraintGuide_percent of Guidline

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/dark_gray">

    <ImageView android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/mainlogo"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

    <android.support.constraint.Guideline
        android:id="@+id/bottom_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintGuide_percent=".8"
        android:orientation="horizontal" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/bottom_logo"
        app:layout_constraintBottom_toBottomOf="@+id/bottom_guideline"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>
</android.support.constraint.ConstraintLayout>

Screenshot.2

3. layout_marginLeftPercent of PercentRelativeLayout

But this class was deprecated in API level 26.1.0. so i did not upload the xml about that.

Answer 2

You should change the @dimen/splash_bottom in background_splash.xml file.

Now, the position of bottom image is changed according to dimension value. To fix the issue, you should do as following methods. I believe anything in the res/ folder can use "Configuration Qualifiers". So for example, you can have a values-xxhdpi, values-sw600dp-mdpi-land/, values-w400dp folder, and so on.

Other words, you have to create different values folder for different screens.

values-sw720dp          10.1” tablet 1280x800 mdpi

values-sw600dp          7.0”  tablet 1024x600 mdpi

values-sw480dp          5.4”  480x854 mdpi 
values-sw480dp          5.1”  480x800 mdpi 

values-xxhdpi           5.5"  1080x1920 xxhdpi
values-xxxhdpi           5.5" 1440x2560 xxxhdpi

values-xhdpi            4.7”   1280x720 xhdpi 
values-xhdpi            4.65”  720x1280 xhdpi 

values-hdpi             4.0” 480x800 hdpi
values-hdpi             3.7” 480x854 hdpi

values-mdpi             3.2” 320x480 mdpi

values-ldpi             3.4” 240x432 ldpi
values-ldpi             3.3” 240x400 ldpi
values-ldpi             2.7” 240x320 ldpi

Thanks.