Followed Splash Screen Guide But Image is Stretched Not Centered

pmhart83pmhart83 USMember ✭✭✭

Hello

I followed this guide to create a splash screen in my Xamarin Android app:
http://docs.xamarin.com/guides/android/user_interface/creating_a_splash_screen

However my image scales to fit the full screen and distorts the image. In the example above the loading image is centered on a black background. I went through all the steps:

  1. Add Image to Resources
  2. Create style (just copied the one provided)
  3. Create Splash Activity (again copied the source provide)
  4. Launch

Something is missing ... I did some research on 9-patch images but this is not what I am looking for. A 9-patch image scales based on your rules. I want the content of the image in the center to remain unscaled with the black borders filling in the empty area.

I also did some research on layer-list and bitmap drawables. I couldn't figure out how to get the bitmap to not scale and stay a fixed size.

There is something missing in the link above, what am I missing?

Posts

  • pmhart83pmhart83 USMember ✭✭✭

    A follow up, I think that using layer-list with a bitmap for each screen size is my solution. The image I had been using in the layer-list was larger than the screen resolution. I was trying to scale it to a specific size. Setting left and right dp values worked OK but I can't count on that.

  • CybrosysCybrosys USMember ✭✭

    I have a square splash screen, is it possible to make it fit without changing the scale, aspect fit? The splash is higher resolution that the device so it needs to be shrunk so it fits vertically and then clipped horizontaly.

  • rudyrykrudyryk RUMember ✭✭✭

    Mikael, you can set android:gravity="fill_vertical" instead of android:gravity="center" for bitmap.

  • IsraelAshaIsraelAsha USMember ✭✭

    what about for centered scrren splash. i.e, the full image height and width should be centered at the middle of the screen. none of the above is working

  • batmacibatmaci DEMember ✭✭✭✭✭
    edited October 2016

    @Bradley said:
    Create a new bitmap drawable in Resources\Drawable folder named splash_centered.xml and copy the following xml in the file.

    <bitmap xmlns:android="http://schemas.android.com/apk/res/android"
        android:src="@drawable/splash"
        android:gravity="center"/>
    

    Then modify the theme to use the new resource as the background.

    <resources>
      
    
    > @drawable/splash_centered > true >
    </resources>
    

    When I use your solution android:gravity="center" makes not only splash screen but entire app centered. I am not sure if it is because I am using Theme.AppCompat.Light.DarkActionBar? any idea?

    **UPDATE: **

    For the newbies like me; why i was getting problem I mentioned above? I had set up same Theme for my mainactivity and SplashActivity. They should have separate Activity.

    splashactivity should look this

    [Activity(Theme = "@style/Theme.Splash", 
                 MainLauncher = true, 
                 NoHistory = true)] 
        public class SplashActivity : Activity
    

    and mainactivity

     [Activity(Label = "myApp",
            Icon = "@drawable/icon",
            Theme = "@style/MyTheme",         
            ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
        public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
    

    finally in the styles.xml 2 theme definition for each

    <style name="MyTheme" parent="MyTheme.Base">
      </style>
      <!-- Base theme applied no matter what API -->
      <style name="MyTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
    ...
      </style>
     <style name="Theme.Splash" parent="android:Theme">
        <item name="android:windowBackground">@drawable/splash_centered</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:colorBackground">@android:color/white</item>
      </style>
    
  • TylerJolliffTylerJolliff USUniversity ✭✭

    @HiranPeiris.2920 suggestion did that trick for me, thanks!

    android:gravity="fill_horizontal|fill_vertical"
    
  • JoakimMnssonJoakimMnsson SEMember ✭✭

    @Hiran_Peiris Thanks!

  • MarlonRibeiroMarlonRibeiro USMember ✭✭✭

    @TylerJolliff What dimensions have you used for the image? I've tried your solution but it's distorted...

Sign In or Register to comment.