Localize splash/launch image for android and iOS

AzucenaFAzucenaF MXMember ✭✭

How could you localize the launch image on iOS and android? I know you can edit an image properties on Xcode, but how do you this on Xamarin? (see image below)

For android I'm using the tutorial on developer's site but it does not have instructions for multiple languages. http://developer.xamarin.com/guides/android/user_interface/creating_a_splash_screen/

Posts

  • CraigDunnCraigDunn USXamarin Team Xamurai

    See the working with localization doc and in particular the part about localizing platform-specific elements (which includes the Default.png screen).

    For iOS, you place each localized copy of the image in an appropriately-named .lproj directory.

    Android does not support a splash-screen concept.

  • AndrewMobileAndrewMobile USMember ✭✭✭✭

    since you're using Xamarin Forms, another idea would be to have a cross platform splash page, like this

  • AzucenaFAzucenaF MXMember ✭✭

    Thanks @CraigDunn I have tried that solution but even on the sample project (UsingResxLocalization project) it does not work with the launch image: If I copy a localized launch image to language.lproj it does not use that localize image but the generic image.

  • CraigDunnCraigDunn USXamarin Team Xamurai

    @AzucenaF please provide more information about your test - I have just run the UsingResxLocalization project and it works fine (see attached screenshots).

    • did you set the image Build Action: BundleResource?
    • did you name the language folder correctly (eg. es, fr, de, etc)?
    • is the language folder in the correct location (either in the app root, or in the Resources directory)?
    • did you choose the correct language in Settings app?
    • are you using a simulator or device that matches the image/s you used (eg iPhone 5/s needs the [email protected] image)? note that iPhone 6/Plus need a storyboard, XIB or differently named images.

    Finally, these tests are best run on a real device; but if you use the Simulator keep in mind that sometimes it can behave erratically. Use the Reset Content and Settings... option if you want clear everything and start over.

    es.png 52.8K
    fr.png 47.4K
  • AzucenaFAzucenaF MXMember ✭✭
    edited June 2015

    @CraigDunn I was using a simulator I guess that's why it wasn't working but it works on a real device. However I have not been able to replicate this behavior on my app. I've added a en.lproj folder under Resources (my default language is spanish) with the following images which are localized (default ones located on Resources folder)

    Do I need to do something else?

  • CraigDunnCraigDunn USXamarin Team Xamurai

    You don't say which device you're testing on. Note that using Default-xxx.png images for iPhone6/Plus is not Apple's recommended approach, they recommend using a XIB or Storyboard.

    However, if you still want to use PNGs, the final image name should include @3x - [email protected] not [email protected].

    Have you created the Localizations key in the Info.plist, and also set your CFBundleDevelopmentRegion to es? The sample I linked has the following values (you'll need to remove es from the list and set the development region):

        <key>CFBundleLocalizations</key>
        <array>
            <string>de</string>
            <string>es</string>
            <string>fr</string>
            <string>ja</string>
            <string>pt</string>
            <string>pt-BR</string>
            <string>ru</string>
            <string>zh-Hans</string>
            <string>zh-Hant</string>
        </array>
        <key>CFBundleDevelopmentRegion</key>
        <string>en</string>
    
  • AzucenaFAzucenaF MXMember ✭✭

    I'm testing on iPhone 6 (iOS 8) & iphone 4s (iOS 7). Yep, I have created the localization list on info.plist and set the Localization native development region to 'es'.

  • AzucenaFAzucenaF MXMember ✭✭
    edited June 2015

    Found the solution for android!

    1. Follow the tutorial to create a splash screen http://developer.xamarin.com/guides/android/user_interface/creating_a_splash_screen/
    2. Copy the localized splash image to your drawable folder(s)
    3. Add a folder under Resources with the name "value-XX", where XX is the localization language code like 'es' for spanish
    4. Copy the Styles.xml file to the added folder (from your "original" values folder)
    5. On your new Styles.xml file change the name of the drawable (image) used as a splash/launch screen. You should write the name of the image which is already localized an put it as a value of key android:windowBackground

      @drawable/localizedSplash

    And that's it.

    By the way @CraigDunn I've added a storyboard for iPhone 6 but localization did not work, then I've added a .png image with @3x and worked. Thank you so much for your help!

  • RobertJanHofmanRobertJanHofman NLMember
    edited September 2015

    This does no longer work for iOS 9. The splash screen will remain black. iOS9 requires a LaunchScreen.storyboard for launch screens in order to support the new multitasking feature on iPad.

    Edit:
    After reading up on Storyboards, I found this on the iOS tutorials for launch screens: "Note: For a storyboard to be used as a launch screen it must include only simple, built-in UI elements and cannot do any calculations or be based off of a custom class."

    I can not find a solution to my problem at all:

    I need to display a different splash screen, depending on the device language.
    I previously did this the same way as described in this thread, but that does no longer work for iOS 9.

  • AzucenaFAzucenaF MXMember ✭✭

    @RobertJanHofman did you find a solution?

  • No

  • @AzucenaF , how it is possible to have a screen without borders? In IOS and Android the screen always have borders, I would like to have full complete screen.

Sign In or Register to comment.