Skip to content

Instantly share code, notes, and snippets.

@PaulCreusy
Last active July 30, 2024 13:04
Show Gist options
  • Save PaulCreusy/e603a5fc8ce9a42d5e1275c0d375b8f7 to your computer and use it in GitHub Desktop.
Save PaulCreusy/e603a5fc8ce9a42d5e1275c0d375b8f7 to your computer and use it in GitHub Desktop.
How to create adaptive icons for Android application with Buildozer and Kivy

How to create adaptive icons for Android application with Buildozer and Kivy

This document aims to explain how to create adaptive icons for Android applications developed with Kivy and compiled with Buildozer.

Context 📖

The configuration file buildozer.spec allows you to specify an icon to use for your application by editing the following portion of the file :

# (str) Icon of the application
icon.filename = ./resources/images/logo.png

However these icons are not adaptive and might not be rendered correctly on some devices. This document will show you how to solve this issue.

Normal icon:

image

Adaptive icon:

image

Prerequisites 📦

To compile an application with an adaptive icon, you just need a working Buildozer installation and an image edition software.

Preparation of the image 🖼️

You will need to prepare two images for your icon:

  • the foreground : an image for which only a squared portion at the center is used, the rest being transparent. This portion of the image will never be cropped, whatever the device will be used to render the icon.
  • the background : a normal image which will be placed behind the foreground and might be cropped during the render, especially at the corners.

The portion of the foreground that can be used is a square of 66x66 located at the center of an image of size 108x108.

⚠️ Warning
Please note that the given sizes are just an arbitrary scale, they are not given in pixels. For an icon of definition 512x512 pixels (which I recommend), this would give a square of 312x312 pixels.

More infos can be found in the android documentation at this link.

Here is an illustration, with blue for the foreground and red for the background:

image

And here is an example with a real icon:

Foreground:

adaptive_logo_front

Background:

adaptive_logo_back

Combined:

combined

Buildozer parameters 🚧

Once you have created your two images, change the following lines in your buildozer.spec file:

# (str) Adaptive icon of the application (used if Android API level is 26+ at runtime)
icon.adaptive_foreground.filename = ./resources/images/adaptive_logo_front.png
icon.adaptive_background.filename = ./resources/images/adaptive_logo_back.png

You can then compile your application as usual and you will obtain a nice adaptive icon.

drawing
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment