• Overview
    • Introduction
    • User Interface Description
    • Installing Umajin
    • Shortcuts
    • Asset Management
    • Responsive Content
    • Project Icon
    • Text Styles
    • Guidewires
    • Presets
    • Glossary
    • Multi-user
  • Components
    • Intro
    • Page
    • Basic
      • Arrow
      • Button
      • Circle
      • HTML Article
      • Image
      • Image Zoomer
      • Nine Slice
      • Rectangle
      • Text
      • Tiler
      • Toggle Button
      • Web View
    • Navigation
      • Carousel
      • Dropdown Menu
      • Glass Shelf
      • Hamburger Menu
      • Tool Bar
    • Data Driven
      • Animated Feed
      • Dynamic Article
      • Feed Item View
      • Feed List
    • Forms
      • Form
      • Text Entry
    • Layout
      • Gallery
      • Group
      • Layout Group
      • Scroll Panel
    • Media
      • 3D Model
      • Spine Animation
      • Lottie Animation
      • Avatar
      • Canvas
      • Particle
      • Render Kit
      • Speech Player
      • Video
    • Maps
      • Google Maps
      • Offline Map
      • Offline Map Route Editor
      • Map creation guide
      • Beacon installation for indoor mapping
    • Internet of Things (IoT)
      • Bluetooth BLE
    • Masters
    • Custom Components
  • Actions
    • Add and Configure Actions
    • Basic Actions
    • Navigation Actions
    • Layout Actions
    • Appearance Actions
    • Animation Actions
    • Media Actions
    • Avatar Actions
    • Gallery Actions
    • Form Actions
    • Data Driven Actions
    • Maps Actions
    • IOT (Internet of Things) Actions
    • Advanced Actions
    • Custom Actions
  • Tutorials
  • Cloud Services
    • Overview of Cloud Services
    • Google Analytics
    • Umajin Analytics
  • Publishing
    • Introduction
    • Umajin Editor Lite
    • iOS – Apple App Store
    • Android – Google Play Store
    • Mac
    • Windows
Menu
  • Overview
    • Introduction
    • User Interface Description
    • Installing Umajin
    • Shortcuts
    • Asset Management
    • Responsive Content
    • Project Icon
    • Text Styles
    • Guidewires
    • Presets
    • Glossary
    • Multi-user
  • Components
    • Intro
    • Page
    • Basic
      • Arrow
      • Button
      • Circle
      • HTML Article
      • Image
      • Image Zoomer
      • Nine Slice
      • Rectangle
      • Text
      • Tiler
      • Toggle Button
      • Web View
    • Navigation
      • Carousel
      • Dropdown Menu
      • Glass Shelf
      • Hamburger Menu
      • Tool Bar
    • Data Driven
      • Animated Feed
      • Dynamic Article
      • Feed Item View
      • Feed List
    • Forms
      • Form
      • Text Entry
    • Layout
      • Gallery
      • Group
      • Layout Group
      • Scroll Panel
    • Media
      • 3D Model
      • Spine Animation
      • Lottie Animation
      • Avatar
      • Canvas
      • Particle
      • Render Kit
      • Speech Player
      • Video
    • Maps
      • Google Maps
      • Offline Map
      • Offline Map Route Editor
      • Map creation guide
      • Beacon installation for indoor mapping
    • Internet of Things (IoT)
      • Bluetooth BLE
    • Masters
    • Custom Components
  • Actions
    • Add and Configure Actions
    • Basic Actions
    • Navigation Actions
    • Layout Actions
    • Appearance Actions
    • Animation Actions
    • Media Actions
    • Avatar Actions
    • Gallery Actions
    • Form Actions
    • Data Driven Actions
    • Maps Actions
    • IOT (Internet of Things) Actions
    • Advanced Actions
    • Custom Actions
  • Tutorials
  • Cloud Services
    • Overview of Cloud Services
    • Google Analytics
    • Umajin Analytics
  • Publishing
    • Introduction
    • Umajin Editor Lite
    • iOS – Apple App Store
    • Android – Google Play Store
    • Mac
    • Windows
Uncategorized > Adaptive Icons for Android
Adaptive Icons for Android
Uncategorized
  
February 13, 2020
  
Aaron Lawrence

Since Android 8, Google requires that new apps (or new icons for existing apps) are supplied with an adaptive icon

This is a new format of icon that uses two parts, a foreground and a background. The foreground can be a PNG image, or a special vector graphics.

  • Vector based images allow scaling to different sizes and DPI without taking up space for extra copies of the icon.
  • Two part foreground and background, enables Android devices to display the icons with different outlines and effects.
  • Restrictions on the visual layout of the icon to provide flexibility to Android device manufacturers.

Visual Design

For more information on how to design the icon visually, see Designing Adaptive Icons.

Of course, the usual guidelines for designing icons apply, such as:

  • using simple stylized shapes and colors
  • avoid detailed or photo realistic images.
  • avoid text
  • not the same as a logo

Using Adaptive Icons in Umajin

PNG (pixel based) icons

You can produce a PNG-based adaptive icon using tools like EasyAppIcon.

Place the result into your project folder:

/manifest/android/icons/

Vector (scalable) icons

If you want to use vector graphics, the adaptive icons are delivered to Android as a special format called “VectorDrawable”. This is not the same as SVG. However, you can convert SVG to VectorDrawable using Google’s Android Studio application.

  1. Using your preferred vector design tool, such as Adobe Illustrator, make a background SVG and a foreground SVG file each at 108 x 108 dp.
    • The foreground should have your icon inside a circle of the central 72×72 dp. The rest should be transparent.
    • This circle should be considered to be your canvas, so the space outside this circle is not space that will show up on your icon.
    • If you want space between your image and the edge of the icon you need to put this space inside the central circle. The space outside this circle is only used for special effects like parallax by the OS.
  2. Use Android Studio.
    • Make a new application or open an existing unimportant test application.
    • Right click on the “res” folder and go to “New -> Vector Asset” and add your 2 SVG files.
  3. In the android studio folder for this project your files will have been converted to xml files. Copy these into your project:
    \manifest\android\icons\drawable\ic_launcher_background.xml
    \manifest\android\icons\drawable\ic_launcher_foreground.xml
  4. Save your project to sync these files to the cloud.
  5. Publish the app, and have Umajin build the app, it will use adaptive icons.
  • Umajin
  • Developers
  • Support Home
Menu
  • Umajin
  • Developers
  • Support Home