Share via

Splash screen with background image and app version text

  • Article

Question

Friday, June 19, 2020 12:03 PM

I'm developing an app with splash screen. At the beginning the splash screen only had a background image. I added a style in Resources/values/styles.xml file:

<style name="Theme.Splash" parent="android:Theme">
  <item name="android:windowBackground">@drawable/splash_screen_image</item>
  <item name="android:windowNoTitle">true</item>
  <item name="android:windowFullscreen">true</item>
  <item name="colorPrimaryDark">#313131</item>
</style>

And I used it as SplashActivity's theme, (and I set the activity as main launcher):

[Activity(Label = "MY APP", Theme = "@style/Theme.Splash", MainLauncher = true, NoHistory = true,
    Icon = "@mipmap/ic_launcher", RoundIcon = "@mipmap/ic_round_launcher", ScreenOrientation = ScreenOrientation.Portrait)]
public class SplashActivity : Activity
{
    protected override void OnCreate(Bundle savedInstanceState)
    {
        base.OnCreate(savedInstanceState);
        this.StartActivity(typeof(MainActivity));
    }
}

It worked fine, it showed the image at startup. Now I want to add the app version to the splash screen. I created SplashScreen.axml layout file with an image and a label with "hardcoded" version number on the bottom left corner:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="#000000"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:src="@drawable/splash_screen_image"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:scaleType="centerCrop"
        android:padding="0dp"
        android:adjustViewBounds="true" />
    <TextView
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="V0.6"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:textColor="#FFFFFF"
        android:id="@+id/version_text_view"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_marginLeft="5dp"
        android:layout_marginBottom="5dp"/>

</RelativeLayout>

And added this content view in SplashActivity:

[Activity(Label = "MY APP", Theme = "@style/Theme.Splash", MainLauncher = true, NoHistory = true,
    Icon = "@mipmap/ic_launcher", RoundIcon = "@mipmap/ic_round_launcher", ScreenOrientation = ScreenOrientation.Portrait)]
public class SplashActivity : Activity
{
    protected override void OnCreate(Bundle savedInstanceState)
    {
        base.OnCreate(savedInstanceState);
        SetContentView(Resource.Layout.SplashScreen);
        this.StartActivity(typeof(MainActivity));
    }
}

In this case nothing happens, the Theme.Splash is displayed. Then I changed OnCreate method to start MainActivity using a timer:

[Activity(Label = "Cocina Tiflotécnica", Theme = "@style/Theme.Splash", MainLauncher = true, NoHistory = true,
    Icon = "@mipmap/ic_launcher", RoundIcon = "@mipmap/ic_round_launcher", ScreenOrientation = ScreenOrientation.Portrait)]
public class SplashActivity : Activity
{
    protected override void OnCreate(Bundle savedInstanceState)
    {
        base.OnCreate(savedInstanceState);
        SetContentView(Resource.Layout.SplashScreen);

        Timer timer = new Timer();
        timer.Interval = 10; // 10 millis.
        timer.AutoReset = false; // Do not reset the timer after it's elapsed
        timer.Elapsed += (object sender, ElapsedEventArgs e) =>
        {
            this.StartActivity(typeof(MainActivity));
        };
        timer.Start();
    }
}

In this case Theme.Splash is displayed first (a few seconds) and then Resource.Layout.SplashScreen layout with version number (a few seconds too). The background image is fit in different way in the theme and the layout, so the background changing is very noticeable.

Is there an elegant way to show a background with a text in the splash screen?

All replies (7)

Monday, June 22, 2020 9:43 AM ✅Answered

@JonAlza Please add <item name="android:windowIsTranslucent">true</item> in your <style name="Theme.Splash" parent="android:Theme"> style.

Friday, June 19, 2020 1:20 PM

Do you want to achieve the result like following GIF?

If so, First of all, If you use xamarin android splash demo, please update all of your nuget packages to the latest.

Then, delete the attribute Theme = "@style/Theme.Splash" above your SplashActivity

Here is my code about SplashActivity.cs

``` namespace com.xamarin.sample.splashscreen { [Activity( MainLauncher = true, NoHistory = true)] public class SplashActivity :Activity { static readonly string TAG = "X:" + typeof (SplashActivity).Name;

    protected override void OnCreate(Bundle savedInstanceState)
    {
        base.OnCreate(savedInstanceState);
        SetContentView(Resource.Layout.SplashScreen);

    }

    protected override void OnResume()
    {
        base.OnResume();
        Task startupWork = new Task(() => { SimulateStartup(); });
        startupWork.Start();
    }

    // Prevent the back button from canceling the startup process
    public override void OnBackPressed() { }

    // Simulates background work that happens behind the splash screen
    async void SimulateStartup ()
    {
        Log.Debug(TAG, "Performing some startup work that takes a bit of time.");
        await Task.Delay(8000); // Simulate a bit of startup work.
        Log.Debug(TAG, "Startup work is finished - starting MainActivity.");
        StartActivity(new Intent(Application.Context, typeof (MainActivity)));
    }
}

} Please change your `SplashScreen.xml` code like following code, I used a picture called splash_logo.png in `ImageView`, and set the `android:layout_width` and `android:layout_height` to `wrap_content` in `ImageView`. ?xml version="1.0" encoding="utf-8"?>

<ImageView
    android:src="@drawable/splash_logo"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
android:layout_centerInParent="true"
    android:scaleType="centerCrop"
    android:padding="0dp"
    android:adjustViewBounds="true" />
<TextView
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:text="V0.6"
    android:textAppearance="?android:attr/textAppearanceSmall"
    android:textColor="#FFFFFF"
    android:id="@+id/version_text_view"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:layout_marginLeft="5dp"
    android:layout_marginBottom="5dp"/>

```

Here is my demo, you can download it.

Monday, June 22, 2020 7:34 AM

@JonAlza Are there any update for this issue? If this above answer is helpful, please accept it, it will help others who have similar issue.

Monday, June 22, 2020 9:17 AM

@LeonLu said: Do you want to achieve the result like following GIF? Not exactly. You can see that the screen is white for a few seconds before showing the splash screen with version number. Using Theme = "@style/Theme.Splash" attribute in the SplashActivity, I can set an image to replace the white screen. I'm using an image picture/photografy to cover the entire screen surface. The problem is that the image is fit/stretch in a different way in the "Theme" and "Content" periods of time. I would like to know if it is possible to set how to fit the image in the theme.

Tuesday, June 23, 2020 7:10 AM

@JonAlza Do you add above attribute in your theme's style? Is that worked?

Tuesday, June 23, 2020 2:55 PM

@LeonLu said: @JonAlza Do you add above attribute in your theme's style? Is that worked?

Yes! I just added the attribute to the theme and I see the splash screen with the version number from the first moment! I have to use the Theme attribute in SplashActivity too. Thank you!

Wednesday, June 24, 2020 7:54 AM

@LeonLu , what is this android:windowIsTranslucent attribute for?

I have noticed that the application takes a few seconds to boot. It seems that the few seconds of the white screen of the gif, now are a few seconds of transparent screen.