Android Splash Screen Center Image

Question

I have an app with a splash screen view that looks like this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@android:color/black">
    <ImageView android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:src="@drawable/splash2"
        android:scaleType="centerInside"
        android:adjustViewBounds="true"
        />
    <TextView
        android:id="@+id/txtVersion"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@android:color/white"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginRight="10dp"
        android:textSize="20dip"
        android:visibility="invisible"
        android:text="Version "/>
    <LinearLayout
        android:id="@+id/lvSplashInfo"
        android:layout_width="fill_parent"
        android:layout_height="120dp"
        android:layout_marginRight="40dp"
        android:layout_marginLeft="40dp"
        android:layout_alignParentBottom="true"
        android:orientation="vertical"
        android:visibility="invisible"
        android:background="@android:color/black">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="bleh"
            android:layout_margin="5dp"
            android:layout_gravity="center_horizontal"
            android:textColor="@android:color/white"/>
        <TextView
            android:id="@+id/txtPercent"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="0% of the total"
            android:layout_margin="5dp"
            android:textSize="18sp"
            android:gravity="center_horizontal"
            android:textColor="#9DBA32"/>
        <TextView
            android:id="@+id/txtFilename"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="File name: xxxxx"
            android:layout_margin="5dp"
            android:textSize="18sp"
            android:visibility="invisible"
            android:gravity="center_horizontal"
            android:textColor="@android:color/white"/>
    </LinearLayout>
</RelativeLayout>

It renders an image scaled and centered into the screen. Unfortunately, this isn't working well for us. It causes a slight flash of white before it loads the view. My solution was to use an activity style. That works great, except I can't seem to center AND scale the image. I can center it easily, but it is wider than the screen. Here is my xml drawable:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@android:color/black"/>

    <item>
        <bitmap
            android:gravity="center|bottom|clip_vertical"
            android:src="@drawable/splash2"
            />
    </item>

</layer-list>

How do I scale and center that splash2 image?

Answer 1

You can make the image in Photoshop, put it in the xml then center the whole thing, but I would recommend having a Splash screen while loading the app, because if you have it with a timer it wastes user's time... So that's what I did to have a splash screen like this one:

First, you have to add a new Java class, let's call it SplashActivity.java

You don't have to add much to it:

package YOUR-PACKAGE-NAME;

import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;

public class SplashActivity extends AppCompatActivity {

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

    Intent i = new Intent(SplashActivity.this, MainActivity.class);
    startActivity(i);
        finish();
    }
}

After that, you have to have a drawable for the splash screen, because if you have a layout it will appear when the app is already loaded, so there won't be any sense in the Splash... Go to the drawable folder and create a file named background_splash.xml. There you add

<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android"
android:gravity="center">
<item>
<bitmap
        android:src="@drawable/ic_splash"
        />
</item>
</layer-list>

where ic_splash is the image I created with Photoshop with resolution 1280x720 and then created a 9-patch image... (You have to have the 9-patch image, not to have normal, small and cropped image on different devices..) So go here and generate yours... Create it, download it and copy all the folders (mdpi, hdpi etc) to your res folder... Now, go to your values/styles.xml and add the NoActionBar style

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

THEN open your Manifest.xml and edit the activity with intent-filter.

Yours should be

<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:icon="@drawable/ic_launcher"
android:theme="@style/AppTheme"
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>

so replace the .MainActivity with .SplashActivity and the .MainActivity as another activity, so in the end you should have at least two activities declared at the Manifest.xml:

<activity
android:name=".SplashActivity"
android:theme="@style/SplashTheme"
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name=".MainActivity"
        android:label="@string/app_name"
        android:icon="@drawable/ic_launcher" or "@mipmap/ic_launcher"
        android:theme="@style/AppTheme">

    </activity>

Good luck! :) If there are any troubles, ask :)