Easy tricks to boost the native Android integration of your cross-platform apps
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 yourAndroid 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.xmlfile.
<!-- Set on-screen Navigation Bar color -->
<item name="android:navigationBarColor">#000000</item>
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. Optimizeaspect 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,manufacturerslike 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.
<application android:label="Field Service">
<!-- Optimize Aspect Ratio for Samsung, LG etc. full-screen mode -->
<meta-data android:name="android.max_aspect" android:value="2.1" />
<!-- ... -->
</application>
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 inyour 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!