search

beeware / briefcase-android-gradle-template

A template for generating Android Gradle projects with Briefcase
MIT License
21 stars 22 forks source link

Add splash screen #8

Closed paulproteus closed 4 years ago

paulproteus commented 4 years ago

This adds a splash screen, which looks like this:

image

When the app finishes loading, it looks like this.

image

This, I believe, conforms to our conversation over the past few days. Happy to take feedback and revise as needed.

More details

The template now exposes these properties:

$ cat '{{ cookiecutter.formal_name }}/briefcase.toml' | grep -i splash
splash.160dp_mdpi = "app/src/main/res/drawable/launch.png"
splash.240dp_mdpi = "app/src/main/res/drawable-sw480dp-mdpi/launch.png"
splash.300dp_mdpi = "app/src/main/res/drawable-sw600dp-mdpi/launch.png"
splash.360dp_mdpi = "app/src/main/res/drawable-sw720dp-mdpi/launch.png"
splash.160dp_hdpi = "app/src/main/res/drawable-hdpi/launch.png"
splash.240dp_hdpi = "app/src/main/res/drawable-sw480dp-hdpi/launch.png"
splash.300dp_hdpi = "app/src/main/res/drawable-sw600dp-hdpi/launch.png"
splash.360dp_hdpi = "app/src/main/res/drawable-sw720dp-hdpi/launch.png"
splash.160dp_xhdpi = "app/src/main/res/drawable-xhdpi/launch.png"
splash.240dp_xhdpi = "app/src/main/res/drawable-sw480dp-xdpi/launch.png"
splash.300dp_xhdpi = "app/src/main/res/drawable-sw600dp-xdpi/launch.png"
splash.360dp_xhdpi = "app/src/main/res/drawable-sw720dp-xdpi/launch.png"
splash.160dp_xxxhdpi = "app/src/main/res/drawable-xxxhdpi/launch.png"
splash.240dp_xxxhdpi = "app/src/main/res/drawable-sw480dp-xxxdpi/launch.png"
splash.300dp_xxxhdpi = "app/src/main/res/drawable-sw600dp-xxxdpi/launch.png"
splash.360dp_xxxhdpi = "app/src/main/res/drawable-sw720dp-xxxdpi/launch.png"

The 160dp etc. are the image visual sizes the user will see. This is controlled by the splash_image_box layout. You'll see there are four copies of splash_image_box.xml, each targeting a different range of screen sizes. The first one, the default, drawable/splash_image_box.xml, has a comment that aims to explain this logic in more detail.

The mdpi, hdpi, xhdpi, and xxxhdpi are hopefully self-explanatory, along with this page: https://developer.android.com/training/multiscreen/screendensities#TaskProvideAltBmp

If we like this, I intend to write docs for briefcase explaining how users should think about this.

Testing performed

My emulator is xhdpi (420 DPI specifically, for some reason). Its screen is 1080x1794, which scales down to 411dp (>>> 1080/(420/160) 411.42857142857144 ). It therefore uses the default splash_image_box.xml, and what I see on the screen is that splash screen looks decently high-res (not ugly & scaled), and it takes about 1/3 of the screen, centered. That's consistent with not using the default PNG.

I further tested by modifying android/Hello World so that app/src/main/res/drawable/launch.png was a different image. I did briefcase build android && briefcase run android and I found it's still using the launcher image, i.e., it's successfully not using the default PNG, i.e., it's preferring the hdpi PNG.

Happy to do other testing as desired.

I haven't tested with editing pyproject.toml yet. Maybe I can get you to try that, if you will be so kind?

Images

I've done my best job to create sample images here, but you probably will want to replace them, and that is fine with me!!!

Size info (all images are squre)

paulproteus commented 4 years ago

All sounds good, except I'm unsure I agree with you about the default splash screen being the "Made with BeeWare" image. I'd rather it just be the app icon on a white/some-color background. IMHO it's suboptimal for users of apps made with BeeWare to ever see the words BeeWare. Maybe we can discuss the aesthetics tonight on our call. :)

paulproteus commented 4 years ago

@freakboy3742 I need you to generate new images. I also spent a while writing a comment in briefcase.toml which, if you like the text there, I'll copy that text to the briefcase docs.

Cheerio.