CODEWITHSUNDEEP
androidiosxamarin.formsxamarin.androidxamarin.ios
ralphralph
ralphralph

Reputation: 41

Xamarin forms custom splash screen

On my Splash screen, I want to put the App version for both Android and iOS at the bottomenter image description here

Upvotes: 0

Views: 4040

Answers (3)

gjhdigital
gjhdigital

Reputation: 31

This is how I add a Splash Screen in my Xamarin Forms apps

  1. Create a new ContentPage ie Splash.xaml
  2. Set the MainPage in your App.xaml.cs file to MainPage = new Splash();
  3. On the Splash.xaml I add an image (logo) and set the ContentPage backgroundcolor to my desired color for the app.
  4. Add a Label on the Splash.xaml below the Image
  5. On the Splash.xaml.cs OnAppearing() function set the Label's Text = to app's current version. You could use the Xamarin.Essentials plugin to get the version. Optionally, I then run a Task to animate the logo or fade it in/out. Once the animation is done in the Splash.xaml.cs OnAppearing function I then set the MainPage to a new page ie. a Login page or Main.xaml
  6. In the Android project, I leave the MainActivity "MainLauncher = true" as is.
  7. In the iOS Project, I remove the Xamarin logo from the StoryBoard and set the background color to my desired color for the app.

Here is some sample code on my website.

Upvotes: 1

Wendy Zang - MSFT
Wendy Zang - MSFT

Reputation: 10978

Normally, we use drawable resource to create the splash screen. It could not input the text, you could generate static images with the text you are interested in.

The way we used to create the splash screen.

Resource> Drawable> Create splash_background.xml

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

Resources> values> add style in styles.xml 

<style name="MyTheme.Splash" parent="Theme.AppCompat.Light.NoActionBar">
  <item name="android:windowBackground">@drawable/splash_background</item>
</style>

Change Theme in MainActivity. 

[Activity(Label = "SplashScreenDemo", Icon = "@mipmap/icon", Theme = "@style/MyTheme.Splash", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]

enter image description here

For more about IOS, you could check the link. https://medium.com/@thesultanster/xamarin-splash-screens-the-right-way-3d206120726d

Upvotes: 0

I Am The Blu
I Am The Blu

Reputation: 863

To make a custom Splash Screen, try this out

Create SplashScreen.axml in your resource directory in Droid project

`<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
       android:layout_height="match_parent">
         <ImageView
          .
          .PLACE YOUR IMAGE CODE HERE
          .
         />
    <TextView
        android:id="@+id/AppVersion"
        android:text="App-Version - "
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginLeft="40dp"
        android:layout_marginBottom="40dp"
        android:textColor="#FFFFFF"
        android:textSize="12"
        android:background="@android:color/transparent" />
</RelativeLayout>`

Then create cs file for your splash screen in Droid project

    namespace Blue.Test {
    [Activity(Theme = "@android:style/Theme.NoTitleBar", MainLauncher = true, NoHistory = true, ScreenOrientation = ScreenOrientation.Portrait)]    
    public class SplashScreenActivity : Activity {
        protected override void OnCreate(Bundle savedInstanceState) {
            base.OnCreate(savedInstanceState);
            SetContentView(Resource.Layout.SplashScreen);            
            FindViewById<TextView>(Resource.Id.AppVersion).Text = $"Version {PackageManager.GetPackageInfo(PackageName, 0).VersionName}";            
        }
    }
}

Remember to set MainLauncher = true & NoHistory = true in your assemble

Upvotes: 0

Related Questions