Most mobile developers write their Mobile Apps on a Mac, which makes it super easy to quickly test them in the iOS Simulator. Naturally, this results in prettier iOS than Android apps, as we see discover flaws on iOS more often. Using an Android Emulator mostly, is not an option, as the Android world is diverse and fragmented.

Show your Android users some love!

Here are some easy tricks to boost the look and feel of our App’s integration into the Android ecosystem and their OEMs peculiarities.

1. Set the on-screen Navigation Bar color

Many Android devices show the Home, Back and Recent Apps buttons on the screen in the Navigation Bar. You can change this color easily to adjust it to your app’s UI by setting it in the styles.xml file.

Some Samsung Devices like the Galaxy S8 have this set to a very light gray by default, which can look strange on your App.

2. Optimize aspect ratio for full-screen mode

By default, most Android Applications serve a 16:9 aspect ratio and are optimized for it. Xamarin.Forms, for example, does that. Nowadays, manufacturers like Samsung and LG also release devices with a different aspect ratio, which results in nasty bars under your apps.

If you trust your apps to also work fine on wider screens, simply allow your app to expand to those inside the <application> tag of your AndroidManifest.xml file.

3. Adaptive Launcher Icons

With Android 8.0, OEMs have been given the free choice in which shape to display your app icon. While pure Android versions like the one on Google Pixel display icons with a round background, LG and Samsung choose squares with round corners. Android’s Adaptive Icons technique lets you design your icon in an adjustable way.

If you don’t update your launcher icon with the necessary layers, the icon doesn’t look consistent with other icons that the system UI displays.

Android Asset Studio, which comes with Android Studio offers a nice and simple way of generating these Adaptive Icons by defining a foreground layer (the icon) and a background layer (the shape color). It also generates legacy icons for older Android versions.

 

This generates you a bunch of XML described icon combinations, that you can import to your project. Make sure, to set the new adaptive icons in your AndroidManifest.xml file.

When using Xamarin, you can simply set the Icon and RoundIcon Properties in the [Activity] tag of your MainActivity.cs file.

If you want to take a look at the full project code, you can find it at the Mobile Cloud Workshop repository. Do you know some additional Android tips and tricks that should be added to this list? Leave a comment and have fun enhancing your Android apps!

 



Robin-Manuel Thiel

At daylight, Robin-Manuel talks about new IT trends and development. But at night he turns into a tinker and developer which sometimes leads to insufficient sleep. He loves cool technologies, cross-platform and everything with a power-plug or IP address.

1 Comment

Dew Drop - May 2, 2018 (#2716) - Morning Dew · May 2, 2018 at 12:18

[…] Easy tricks to boost the native Android integration of your cross-platform apps (Robin-Manuel Thiel) […]

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.