Insert loading ring in the splash screen

user_12828450 0
Viewed 495

I followed Microsoft tutorial on how to make a splash screen in xamarin.android, and it works properly. Now I would like to insert a progress ring under the bitmap. I've tried different approaches but i can't seem to find the right way to do it

This is the splash screen code:

splash_screen.xml

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

  </item>

  <item android:left="20dp">
    <bitmap
        android:src="@mipmap/coronamap_bianco"
        android:tileMode="disabled"
        android:gravity="center"/>
  </item>

</layer-list>

splash style in resources > values > styles.xml

<style name="MyTheme.Splash" parent ="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowBackground">@drawable/splash_screen</item>
    <item name="android:windowNoTitle">true</item>  
    <item name="android:windowFullscreen">false</item>  
    <item name="android:windowContentOverlay">@null</item>  
    <item name="android:windowActionBar">true</item>
    <item name="android:statusBarColor">#304057</item>
  </style>

SplashActivity.cs

[Activity(Theme = "@style/MyTheme.Splash", MainLauncher = true, NoHistory = true)]
    public class SplashActivity : AppCompatActivity
    {
        public override void OnCreate(Bundle savedInstanceState, PersistableBundle persistentState)
        {
            base.OnCreate(savedInstanceState, persistentState);

        }

        // Launches the startup task
        protected override void OnResume()
        {
            base.OnResume();
            StartActivity(new Intent(Application.Context, typeof(MainActivity)));
            Finish();
        }

    }

EDIT

Since the constraint layer didn't work, I tried to simplify it using a linear layout. As output I get a white screen.

SplashActivity.cs

[Activity(Theme = "@style/MyTheme.Splash", MainLauncher = true, NoHistory = true)]
    public class SplashActivity : AppCompatActivity
    {
        public override void OnCreate(Bundle savedInstanceState, PersistableBundle persistentState)
        {
            base.OnCreate(savedInstanceState, persistentState);
            SetContentView(Resource.Layout.SplashLayout);

        }

        // Launches the startup task
        protected override void OnResume()
        {
            base.OnResume();
            StartActivity(new Intent(Application.Context, typeof(MainActivity)));
            Finish();
        }   
    }

SplashLayout.xml

<?xml version="1.0" encoding="utf-8" ?>
<LinearLayout 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:orientation="vertical">

    <ImageView
        android:id="@+id/iv_splash_screeen"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/coronamap_bianco" />

    <ProgressBar
        android:id="@+id/progress_bar"
        style="?android:attr/progressBarStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp" />

</LinearLayout>

Output: splash screen

xamarin splash-screen loading android
2 Answers

You can create a layout for the splash screen , in that layout create an image and a loading circle

splash_screen.xml activity code 

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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">

    <ImageView
        android:id="@+id/iv_splash_screeen"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.45"
        app:srcCompat="@drawable/my_logo" />

    <ProgressBar
        android:id="@+id/progress_bar"
        style="?android:attr/progressBarStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/iv_splash_screeen" />

</androidx.constraintlayout.widget.ConstraintLayout>

In your activity, OnCreate set that layout SplashActivity.cs

[Activity(Theme = "@style/MyTheme.Splash", MainLauncher = true, NoHistory = true)]
    public class SplashActivity : AppCompatActivity
    {
        public override void OnCreate(Bundle savedInstanceState, PersistableBundle persistentState)
        {
            base.OnCreate(savedInstanceState, persistentState);

      // Set our view from the "main" layout resource
            SetContentView(Resource.Layout.splash_screen);
        }

     .....
      ...

    }

Output:

enter image description here

user_105164630

Based on the official sample , we can create a .xaml layout for SplashActivity. Then can achieve that .

Splashlayout.xaml :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:gravity="center"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:layout_gravity="center"
        android:background="@drawable/splash_logo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <ProgressBar
        android:id="@+id/progressBar1"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</LinearLayout>

Used in SplashActivity :

//public override void OnCreate(Bundle savedInstanceState, PersistableBundle persistentState)
//{
//    base.OnCreate(savedInstanceState, persistentState);
//    Log.Debug(TAG, "SplashActivity.OnCreate");
//}

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

Here not forgettingn to modify in style.xml :

  <style name="MyTheme.Splash" parent ="Theme.AppCompat.Light.NoActionBar">
    <!--<item name="android:windowBackground">@drawable/splash_screen</item>-->
    <item name="android:windowNoTitle">true</item>  
    <item name="android:windowFullscreen">true</item>  
    <item name="android:windowContentOverlay">@null</item>  
    <item name="android:windowActionBar">true</item>  
  </style>

Then effect as follow :

enter image description here

Here is the modified sample link for reference .

user_105047960
Related