Wojtek @suda Siudzinski


Python/Node/Golang/Rust developer, DIY hacker, rookie designer, 3D print junkie. CEO @ Gaia Charge


Improving UI of a Chinese car head unit

Last couple of years I had the pleasure (and sometimes lack thereof) to drive a variety of different cars mostly due to not owning a car and having to rent one when needed. Some of them were cute, some were my childhood dreams and then there was Tesla Model S. One of the things I loved about this car (the list is long) was the centre console:

The fact that you can control everything from it (including AC, trunks, seats), the integrated GPS (so integrated it actually is showing your route on the main console next to the speedometer), ability to have the backing camera on while looking on a map just blew me away. It definitely felt like a good UI/UX made to be used in a car. It became my benchmark.

Some infotainments were just that (but with touch control), some tried mimicking Tesla (I'm talking to you Renault Megane) but they either felt extremely dated or like they were designed by car engineers.

Fast forward to this February, when I decided to get a car (went with 2006 Peugeot 206CC because I won't spend my whole salary on a car I'm going to use on weekends) as it came with a standard issue Clarion radio, I thought it's a chance to prototype a tailor suited car experience for me.

I decided to go with Android 7.1 based head unit. Everything worked as advertised except the UI was irritating my non diagnosed OCD:

Fortunately this runs Android with means I can customise it to my will! Lets start with...

The status bar

Both Home and Back buttons are present on the device so there's no need to have them around. As for the task switcher and options, I can live without it. This is not an easily customisable part of Android. Any app that does that basically intercepts any input and draws itself on top of the system one. Problem with this trick is that the system notification pulldown goes around it and hides the hacked status bar. I found that this can be solved using both:

Status

Material Notification Shade

Note: In my version of Android, for some reason "Accessibility" option is hidden (which is needed to enable the services) but you can find it using search in settings.

The home screen

I wanted to have a bit cleaner and more unified view of the home screen and after a bit of trial and error I went with:

Nova Launcher

Forest Live Wallpaper

Other

Other apps I found useful:

Gboard

Has a very nice dark there, perfect for in car use.

Automate

A very nice Android Auto like app (it can also run as a launcher).

Finished product



There's still a bit work to be done there but in general I'm quite happy with the result 😊

Sources

If you want to replicate this setup, I collected all app settings in a GitHub repo. You just need to copy and restore them on your device.

comments powered by Disqus