Android app icon clipping issue and fix; Checking signature in APK file and Android app

This post is a continuation of the Timestamp Tracker React Native and Expo app work covered in earlier posts.

Gem was very helpful in me understanding and fixing my Android App icon issue. I have captured key parts of the exchange below as a reference for me in future.

Me: To keep things simple in a React Native and expo project of mine, I am having only one 256x256 icon for splash icon, adaptive icon and expo icon. I have uploaded the icon file.

Only issue is that on the Android APK installed app, the icon is clipped with letters T and P of TIMESTAMP being cut. I am now exploring using another icon which I will upload after this message and I seek your help in ensuring that the new icon I use gets shown properly as Android app icon on phone. [The old icon was generated by ChatGPT. The new icon was a timestamp.icon from https://www.veryicon.com/icons/business/work-circle/timestamp.html .]

Gem: Analysis of the New Icon (timestamp.png)

  • No Text: This is the biggest advantage. By removing text from the primary icon, you've eliminated the primary reason for clipping issues. Text is very sensitive to the various adaptive icon shapes and safe zones.
  • Centralized Subject: The main elements (stopwatch and stamp) are nicely centered within the circular boundary. This gives a good buffer around them.
  • Visual Appeal: It's clean, modern, and visually appealing.

Understanding Android Adaptive Icons and "Safe Zones"

Android adaptive icons are designed to adapt to various shapes and forms depending on the device manufacturer and launcher. This is why a single icon file can appear as a circle, a rounded square (squircle), a teardrop, or a cylinder on different phones.

To achieve this adaptability without content being cut off, Android uses a concept called "safe zones":

  • Primary Content Zone (66%): The most critical elements of your icon (like the stopwatch and stamp in your new icon) should be contained within a circular area that is 66% of the icon's full canvas. Anything outside this 66% circle can be clipped by the system.
  • Full Canvas (100%): This is the entire 256x256 (or whatever size you provide) image. It includes both the foreground and background. The outer 33% (from the 66% primary content zone to the edge) is primarily for visual effects, slight background elements, or dynamic masking.

Good News for timestamp.png

Your timestamp.png icon already adheres very well to these principles. The core visual elements are well within that implied 66% safe zone, and the circular border and background fading are exactly the kind of elements that can be gracefully masked by adaptive icon shapes without losing critical information.

...

Me: ... I think some of the sparkles may get clipped. Is there a way for me to check what from the timestamp.png icon fits in the 66% and what doesn't? Then I can edit the image to remove the parts like sparkles that get clipped as clipping may lead to the image looking a little odd.

...

Me: Tried the tool : https://romannurik.github.io/AndroidAssetStudio/icons-adaptive.html with both icons. It scales the icons and so shows all of content including TIMESTAMP letters fully. Also, there is a notice on the site that it is no longer maintained.

I use Windows 11. Can you guide me on how to use Windows 11 Paint to check the 66% area?

Gem: Let's use Windows 11 Paint to get a precise measurement of the 66% safe zone for your 256x256 timestamp.png icon. Paint isn't the most advanced image editor, but it's perfect for this simple task of drawing guides.

Here's a step-by-step guide:

Goal: Draw a pixel circle (representing the 66% safe zone) perfectly centered on your image.

Steps:

  1. Open timestamp.png in Paint:

    • Right-click on your timestamp.png file.
    • Select "Open with" > "Paint".

  2. Ensure Canvas Size (Verify Image Dimensions):

    • In Paint, go to "File" > "Properties" (or press Ctrl + E).
    • A small window will pop up showing the image properties. Confirm that the "Width" and "Height" are both 256 pixels. Click "OK".

  3. Calculate Margins for the 66% Circle:

    • Your icon size: 256 pixels
    • 66% safe zone size: 169 pixels
    • Space left over on each side:

    Since Paint works with whole pixels, we'll aim for 43 or 44 pixels. This slight approximation (half a pixel) won't significantly impact your visual check.

  4. Draw the 66% Safe Zone Circle:

    • Select the "Circle" shape: In the "Shapes" group on the Home tab, click on the circle icon.
    • Set Outline and Fill:
      • For "Outline," choose a distinct color that stands out against your icon (e.g., bright green or red).
      • For "Fill," select "No fill." This is crucial so you can see your icon underneath.
    • Draw the Circle Precisely: This is the trickiest part in Paint, as it doesn't have numerical input for drawing shapes.
      1. Zoom In: Zoom in significantly (Ctrl + mouse wheel up or use the slider at the bottom right) to make it easier to see and place the circle.
      2. Position the Cursor: Move your mouse cursor to the top-left corner where the circle should start. Based on our calculation, this is approximately (43, 43) pixels from the top-left corner of the image.
      3. Click and Drag: Click and hold the left mouse button at this approximate (43, 43) position.
      4. Drag Diagonally: Drag your mouse diagonally downwards and to the right. As you drag, look at the bottom-left corner of the Paint window. It displays the dimensions of the shape you are currently drawing in pixels (e.g., 100 x 100px).
      5. Adjust to 169x169: Continue dragging until the dimensions shown in the status bar are as close as possible to 169 x 169px.
      6. Release Mouse: Once you're satisfied with the dimensions, release the mouse button.

  5. Refine Position (if needed):

    • After drawing, the circle will still be selected (with dashed lines around it). You can click and drag the entire circle to slightly adjust its position to be as centered as possible.
    • If you make a mistake, simply press Ctrl + Z to undo and try again.

  6. Analyze Your Icon:

    • With the 169x169 pixel circle drawn, you can now clearly see what parts of your timestamp.png icon fall inside and outside this critical 66% safe zone.
    • Pay close attention to your sparkles and the outermost part of the white circular border. Anything outside this inner circle is at risk of being clipped by Android's adaptive icon masks.

Important Considerations:

  • Don't Save Over Original: After doing your check, do NOT save the file if you drew on it! If you want to keep the drawing for reference, save it as a new file (e.g., timestamp_safe_zone_check.png). Your timestamp.png should remain clean for Expo.
  • Visual Approximation: Paint is not as precise as professional design software. The goal here is a good visual estimate. If a sparkle is just touching the line, it will likely be clipped. If it's clearly inside, it's safe.

By doing this, you'll have a much clearer understanding of how your timestamp.png will behave on Android devices, allowing you to make any necessary adjustments to those sparkles or the outer ring for a perfectly clean icon!

Me: I tried the Windows Paint approach you suggested. I think it is working well in giving me a clear idea of the 66% area of the icon that Android will NOT clip. I have uploaded the timestamp icon with the red circle showing the 66% area border.

I also used it with the older icon (TIMESTAMP one) and saw that it does clip the T and S letters though on close observation I found that my Samsung phone icons are rounded rectangles rather than circles and so the clipping is a little lesser on Samsung phone of the T and S letters. But the lop-sided aspect of the image is captured well in Paint and that is how it looks on Samsung phone. I have uploaded that icon with its 66 pc red circle too.

Gem: This is fantastic feedback and a great demonstration of how helpful the 66% safe zone visualization is!

Analysis of timestamp-66pcCircle-Paint.png (New Icon)

You've captured the essence perfectly!

  • Sparkles: As you can see, the outer sparkles (top-right and bottom-left) clearly extend beyond the red 66% circle. This means they are in the "motion safe zone" and will be clipped by circular, teardrop, or even some squircle masks. The inner sparkles (bottom-left) are largely safe.
  • Outer White Ring: The entire white circular border is outside the 66% safe zone, meaning it will be the primary element that gets masked and shaped by the adaptive icon system.
  • Core Content (Stopwatch & Stamp): Crucially, the stopwatch and the stamp icon are beautifully contained within the red 66% circle. This is the most important part! The meaning and primary visual of your app icon will remain intact regardless of the mask.

Conclusion for timestamp.png: The clipping of the outer sparkles and the white ring is expected and is how adaptive icons work. It will not make your icon look "odd" or "broken" because those elements are designed to be secondary and can be gracefully removed by the mask without affecting the icon's core identity. This icon is well-suited for adaptive icons.

Analysis of CGPTicon-66pcCircle-Paint.png (Old Icon)

Your observation here is spot on and perfectly illustrates the problem with text in adaptive icons:

  • "TIMESTAMP" text: The "T" and "P" are significantly outside the red 66% circle. As predicted, these letters were being clipped.
  • Samsung's Rounded Rectangles: Your observation about Samsung using rounded rectangles (often called "squircle" or "rounded square" masks) is absolutely correct! This is why the clipping might be slightly less severe than a pure circle would cause, but the text is still pushed to the edge, leading to the "lop-sided" or awkward appearance you noted.

This comparison perfectly validates why the timestamp.png (new icon) is a superior choice. By moving away from text that is vulnerable to adaptive icon masking, you've ensured your app's icon will look clean and professional on a wide variety of Android devices and launchers. ...

...

Me: The release app icon after install on Android emulator. The icon is at the right bottom of the two rows of app icons towards bottom part of screen.

Gem: I can clearly see your new timestamp.png icon (the stopwatch with the purple stamp) at the bottom right of the two rows of app icons.

Based on the screenshot:

  • No Obvious Clipping of Core Elements: The stopwatch and the blue stamp appear fully visible and unclipped. This confirms that your primary content is within the safe zone, which is the most important aspect.
  • Adaptive Icon Shape: The emulator is showing a "squircle" (rounded square) mask, which is very common on Android.
  • Sparkles and Outer Ring: As we discussed, some of the outer sparkles and the outermost part of the white ring of your icon are indeed being clipped by the squircle mask. However, because these are not critical to the icon's identity and were anticipated to be in the "motion safe zone," the icon still looks clean and professional. The clipping of these elements is graceful and doesn't make the icon look broken or odd.

This is a success! The icon is being displayed as an adaptive icon, and your core visual identity is perfectly intact. The clipping of the secondary elements (sparkles, outer ring) is exactly how adaptive icons are designed to work, allowing for dynamic shapes while preserving the main subject.

....

I created a release build with above fixed icon but I had forgotten to sign the release app.

Me: I had forgotten to add my keystore file and modifications to android/gradle.properties and android/app/build.gradle .
 Now I see that the android\app folder has debug.keystore
I want to create a new release with my keystore and above files changes (including my keystore password).
 Can I make the changes to android folder, delete debug.keystore and then run .\gradlew.bat assembleRelease again?
BTW who would have created debug.keystore and placed it in android\app folder?

Gem: Yes, you are on the right track!

Here's the breakdown of what you're seeing and what to do:

  1. Can you make the changes and run .\gradlew.bat assembleRelease again? Absolutely, yes! This is the correct procedure for creating a release build with your own custom keystore in a bare React Native/Expo workflow.

    • You will modify android/gradle.properties to store your keystore path, alias, and passwords (it's common practice to keep passwords in gradle.properties or environment variables and not directly in build.gradle for security).
    • You will then modify android/app/build.gradle to reference these properties and configure the signingConfigs for your release build.
    • You can delete android/app/debug.keystore if you wish, as it's not used for release builds that are explicitly configured with your custom keystore. It won't hurt the release build if you leave it, but removing it keeps your project cleaner.

  2. Who would have created debug.keystore and placed it in android\app folder? The debug.keystore file is automatically created by the Android build tools (specifically, the Java Development Kit's keytool utility invoked by Gradle) when it performs a debug build and doesn't find any existing signing configuration.

    • When you run npx expo prebuild (or when expo or react-native tooling initializes an Android project), it sets up the android directory. If a debug.keystore isn't present in the expected location for debug builds, the build process will generate one for convenience.
    • It's a generic, insecure keystore with a default alias (androiddebugkey) and password (android), specifically designed for development and testing builds. It's never meant for signing production APKs.

So, proceed with making those changes to your Gradle files and including your own keystore. That's precisely what's needed for a proper release build.

Me: Did it ... BUILD SUCCESSFUL in 54s

Now I would like to check the created APK file and confirm it is signed with the proper release keystore and not the debug keystore. I believe Android Studio has a feature to check the APK. Is there some easy way to do it in VSCode or Windows 11 in general?

Gem response led to me running:
C:\Users\{Username}\AppData\Local\Android\Sdk\build-tools\35.0.1\apksigner.bat verify --print-certs .\app-release.apk

I shared output of above command with Gem ...

Me: Signer #1 certificate DN: CN=Ravi Iyer, OU=Individual, O=Individual, L=Puttaparthi, ST=Andhra Pradesh, C=IN
 Signer #1 certificate SHA-256 digest: 358208b0e280f4d1a048cb5ffcc45e5a7be9c0c0a548a78e2f134fc7360fdbc2
Signer #1 certificate SHA-1 digest: 670bb318f85d4226e849ef6b3fa2d64fb2f52223
Signer #1 certificate MD5 digest: 574df2d37fc9dd4891d2b13e16121a19
As I see my name and location info. in the certificate DN, I think that confirms it is not a debug-keystore related release. Am I right?

Gem: Yes, you are absolutely right!

The output from apksigner clearly confirms that your APK is signed with your release keystore and not the debug keystore.

The key indicators are:

  • Signer #1 certificate DN: CN=Ravi Iyer, OU=Individual, O=Individual, L=Puttaparthi, ST=Andhra Pradesh, C=IN This Distinguished Name (DN) contains your specific name and location information, which directly corresponds to the details you would have provided when creating your personal release keystore. A debug keystore would have generic information like "CN=Android Debug, O=Android, C=US".

This verification confirms that your release APK is correctly signed and ready for distribution platforms like the Google Play Store.

Me: On my android phone, I now have the earlier debug version app installed. How can I get the DN info. about the app on Android?

Gem gave a complicated adb related answer.

Me: Oh! I mean, shouldn't any user be able to easily see the DN associated with any app they have on their Android device? I mean, App info. should show it. Isn't it?

Gem said it is a technical detail but said, 'dedicated third-party "APK Analyzer" apps (which themselves use system APIs to extract this information)' will provide it.

Me: Oh! So if there is some free and reliable and trusted APK Analyzer Android app then I can download it on my phone and get the DN info. about any app on my phone through it.

Gem mentioned some Apk analyzer apps but warned that it should be downloaded from Google Play Store ...

Me: But will these third party tools need an APK file? I mean, can they work directly on an installed app and get the DN info.

Gem: ... Third-party "APK Analyzer" apps designed to be installed on your Android phone do not require you to provide an APK file. ...

Me: I installed 'Apk Analyzer' author Martin Styk from Google Play Store. It clearly showed that for the Timestamp Tracker app currently installed on my phone, The Certificate Issuer name is "Android Debug", the Issure organization is Unknown and Issuer cournty is US.

Great! This is an easy way for me to check if the app installed on my phone has my keystore signature. I will now install the release version with my keystore built a little while back and see what the Apk Analyzer shows me. Thanks a ton.

...

Me: ... Once the release APK properly signed with my keystore was installed on my phone (I uninstalled earlier app), then Apk Analyzer shows Certificate Issuer name as my name (Ravi Iyer). It's really good to be able to get this info. about my app on my phone, and also other apps on my phone. I think this is a basic security feature I would like to always have on my phone.


Comments

Post a Comment