9 Patch Splash Screen: Initial window does not fill screen

You must Login before you can answer or comment on any questions.

I've set up a 9-patch image for my android app using the instructions here. When I launch the app the splash screen appears correctly. However, the initial application window does not fill the screen. It did fill the screen when using the default.png splash screen(s) provided by the Alloy project.

I've tried explicitly setting the window's height and width to 100% and Ti.UI.FILL in my markup, but this has no effect. The window always appears to be only about 2/3 the size of the screen. Subsequent windows do fill the screen when opened with modal:true option.

Can anyone explain why that first screen isn't filling properly?

Environment:

Titanium Studio 3.0.2.201302191606 Android 2.2, API level 8 Appcelerator Mobile SDK 3.0.0.GA

Thanks in advance.

— asked 1 year ago by David Park
3 Comments
  • Missing from you question are several pieces of information that will help you obtain a speedy and accurate answer, please provide the following details;

    • Target platform
      • Android only?
    • A code snippet that can be used to determine what you have achieved so far
    • Screenshot?
    • Changed the tiapp.xml for screen densities and/or default units?

    — commented 1 year ago by Malcolm Hollingsworth

  • Additional details in the answer below.

    — commented 1 year ago by David Park

  • I am seeing identical behavior as David reported. 9-patch splash screen is fine, and first application window then occupies just a portion of the screen. Anyone has 9-patch splash screen working?

    — commented 1 year ago by Mark M

2 Answers

Accepted Answer

I think I figured it out. The method above to create a 9 patch splash image modifies the Titanium Theme, and this affects the entire app. For some reason, lightweight windows are distorted as seen by David's screenshot, heavyweight windows appear fine. So to actually get it to work what needs to be done is set the custom theme with the splash image ONLY for the initial activity (see your android manifest), and then make sure to start a new activity by opening a heavyweight window from which the rest of the app flows. Using Alloy this is very easy - e.g. the window in index.xml in my case just has navBarHidden = true and the app starts from index.js and all is good. I think . ;-)

— answered 1 year ago by Mark M
answer permalink
3 Comments
  • Mark, thanks for all your work on this! Can you give me a little more detail about what to do in my manifest file to set the splash image for just the initial activity? And do I still need the theme.xml file? Much obliged.

    — commented 1 year ago by David Park

  • Never mind, it seems that simply making the initial window heavyweight did the job. Looking at my android manifest it seems that Titanium was in fact only applying the splash image to the initial activity. Thanks again!

    — commented 1 year ago by David Park

  • I think making the initial window heavyweight will solve the problem only if the custom style is not applied to additional activities which own any lightweight windows. So just make sure by going through all your app windows, just in case :)

    — commented 1 year ago by Mark M

Thanks, Malcolm.

The project targets both iOS and Android. No changes to Tiapp.xml.

Screenshot here. The blue is my 9-patch; white background is the window in question.

theme.xml code:

<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Theme.Titanium" parent="android:Theme">
    <item name="android:windowBackground">@drawable/splash</item>
    <item name="android:windowNoTitle">true</item>
</style>
</resources>
Alloy Markup:
<Alloy>
<Window id="index" class="container">
    <NavigationGroup id="nav" platform="ios">
    <Window class="container" id="home" layout="vertical" title="CAA Mobile">
        <Label id="welcome" top="10">Welcome, Anonymous User!</Label>
        <Button id="getprofile" top="10" title="Refresh Login" onClick="refreshLogin"/>
        <Button id="newsBtn" top="10" title="News" onClick="getNews"/>
        <Button id="eventsBtn" top="10" title="Events" onClick="getEvents"/>
        <Button id="localBtn" top="10" title="Go Local!" onClick="getLocal"/>
        <Button id="careerBtn" top="10" title="Career" onClick="getCareer"/>
    </Window>
    </NavigationGroup>
    <View id="home" layout="vertical" title="CAA Mobile" borderColor="#090" borderWidth="1" platform="android" width="100%" height="100%">
        <Label id="welcome" top="10">Welcome, Anonymous User!</Label>
        <Button id="getprofile" top="10" title="Refresh Login" onClick="refreshLogin"/>
        <Button id="newsBtn" top="10" title="News" onClick="getNews"/>
        <Button id="eventsBtn" top="10" title="Events" onClick="getEvents"/>
        <Button id="localBtn" top="10" title="Go Local!" onClick="getLocal"/>
        <Button id="careerBtn" top="10" title="Career" onClick="getCareer"/>
    </View>
</Window>
</Alloy>
Window opens in index.js controller with this line: $.index.open();

— answered 1 year ago by David Park
answer permalink
1 Comment
  • So after more playing with this I can successfully use "splash.png" as specified in theme.xml, but splash.9.png shows the problem described by David Park.

    — commented 1 year ago by Mark M

Your Answer

Think you can help? Login to answer this question!