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
<!-- 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
<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
When using Xamarin, you can simply set the
RoundIcon Properties in the
[Activity] tag of your
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!