Forum Xamarin.Android

Splash screen image fit

ganesh96ganesh96 Member ✭✭✭

Hey!

I have a Xamarin.Forms app, but this question is only concerning Android.

I have a splash screen with an logo and a background color which I want to update. I want to use an image for a background now, so what I did was to create this background image with the logo on top, save that as one image and use that as the splash screen. This is causing some problems.

The image displays too small on the screen and I want this image to fit the screen (thus fullscreen with a locked aspect ratio), but I cannot get it to work nicely. The only option I could find was 'fill', which causes the image to deform. I could get it perfect on my screen, but a screen with a different ratio might see the deformed image then. The image I have is a square to make sure that when using fit, the entire screen is filled. Now I'm simply looking for an method to make the image fit the screen, rather than fill the screen.

I tried to visualize my question here:

My XML looks likes this:

How can I fit this image instead of filling it?

Hope someone can help.

Tagged:

Answers

  • ColeXColeX Member, Xamarin Team Xamurai

    If you want to make the image fit the screen , don't use the Drawable for Splash Screen , in this way the Drawable is used as background , it fills the screen by default .

    You can create a new Splash Activity , and reference a custom layout in OnCreate method , inside the layout you can set a flexible image .


    Xamarin forums are migrating to a new home on Microsoft Q&A!
    We invite you to post new questions in the Xamarin forums’ new home on Microsoft Q&A!
    For more information, please refer to this sticky post.

  • ganesh96ganesh96 Member ✭✭✭

    Hi @ColeX , this is very new to me, do you have a code sample I can refer to?

  • ColeXColeX Member, Xamarin Team Xamurai
    1. Create a layout named MyView , place it in Resource/layout folder .
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        xmlns:num="http://schemas.android.comas/apk/res-auto"
       >
    
        <ImageView
            android:contentDescription="image"
            android:src="@drawable/dog2"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_marginTop="100dp"
            android:layout_marginLeft="100dp"/>
    
    </LinearLayout>
    
    1. Create a new Activity named SplashActivity,set it as main launcher , set MyView as ContentView .
     [Activity(Label = "SplashActivity",MainLauncher =true, Theme = "@style/MainTheme")]
        public class SplashActivity : Activity
        {
            protected override void OnCreate(Bundle savedInstanceState)
            {
                base.OnCreate(savedInstanceState);
    
                // Create your application here
    
                View v1 = this.LayoutInflater.Inflate(Resource.Layout.MyView, null);
    
                SetContentView(v1);
            }
    
            protected override void OnResume()
            {
                base.OnResume();
                Task startupWork = new Task(() => { SimulateStartup(); });
                startupWork.Start();
            }
    
            async void SimulateStartup()
            {
                await Task.Delay(8000); // Simulate a bit of startup work.
                StartActivity(new Intent(Application.Context, typeof(MainActivity)));
            }
        }
    

    Then you can adjust the image(position, size , margin) in MyView.xml.

  • ganesh96ganesh96 Member ✭✭✭
    edited February 11

    Thanks for this example @ColeX . Since I already had a splash screen in xml, I simply used your code example for the XML. My splash_screen.xml is now located in layout and I used your code example to update my SplashActivity. The problem now is that the splash screen is empty (full white). You can find my code below.

    Theme (styles.xml):

    SplashActivity:

    splash_screen.xml:

    Do you know what is wrong here?

  • ColeXColeX Member, Xamarin Team Xamurai

    Try to place a TextView to see if problem persists.

    I guess something goes wrong with the image , try to place it into Resources/drawable folder and make sure that its Build Action is AndroidResource .

  • ganesh96ganesh96 Member ✭✭✭

    Hi @ColeX ,

    This is what I have now in the code:

    I've put the image in drawable and you can see the code recognizes it. I just placed it somewhere on the screen to see if this would work. I've recorded the result on the phone itself, which you can find in the zip file in the attachment (note that I stop the debugger before it goes to the main screen, so the white screen that you see is the splash screen).

  • ColeXColeX Member, Xamarin Team Xamurai

    Check my update .

Sign In or Register to comment.