Skip to main content

Icon assets customization

Icons are a crucial visual component of any application. They play a significant role in enhancing user experience by providing intuitive navigation and interaction cues. In this documentation, we'll guide you through the process of replacing icons within your app using the Navigation UX SDK. As an example, let's assume we're implementing a new style where the icons are designed as pixel art images.

Adding Icon Resources to Your Android Project

Before adding the images to your project, make sure they are in the correct format and resolution. It's crucial to provide images in different resolutions to accommodate various device screen sizes and densities.

  1. Locate the res Directory: In the Project view, expand the app > src > main directory and locate the res folder.

  2. Create Drawable Directories (if necessary): Inside the res folder, you should have drawable directories for different densities, like drawable-mdpi, drawable-hdpi, drawable-xhdpi, etc. If these directories do not exist, create them by right-clicking the res folder, selecting New > Android resource directory, choosing drawable as the resource type, and specifying the desired density.

  3. Add Your Images: Copy your image files into the appropriate drawable directories. You can drag and drop the files directly into the folders within Android Studio or use your system's file explorer to copy the files.

In our case we will use vector drawables, here's a table illustrating the icons we'll be incorporating

File nameIcon

Updating the Style Attributes

Next, integrate these icons into your application by referencing them in your style definitions. Here's how you can define the icons in your style for both day and night themes:

<style name="MyStyle" parent="DashTheme.Day">
<!-- Other attributes -->
<item name="ic_navux_main_coffee">@drawable/ic_pixel_coffee</item>
<item name="ic_navux_main_favorite">@drawable/ic_pixel_favorite</item>
<item name="ic_navux_main_food">@drawable/ic_pixel_food</item>
<item name="ic_navux_main_fuel">@drawable/ic_pixel_fuel</item>
<item name="ic_navux_main_home">@drawable/ic_pixel_home</item>
<item name="ic_navux_main_parking">@drawable/ic_pixel_parking</item>
<item name="ic_navux_main_recent_outline">@drawable/ic_pixel_recents</item>
<item name="ic_navux_main_work">@drawable/ic_pixel_work</item>

By following these steps, you can effectively update the icons in your application to align with your desired aesthetic, ensuring a cohesive and engaging user interface.

Was this page helpful?