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.
-
Locate the
resDirectory: In the Project view, expand theapp > src > maindirectory and locate theresfolder. -
Create Drawable Directories (if necessary): Inside the
resfolder, you should have drawable directories for different densities, likedrawable-mdpi,drawable-hdpi,drawable-xhdpi, etc. If these directories do not exist, create them by right-clicking theresfolder, selectingNew > Android resource directory, choosingdrawableas the resource type, and specifying the desired density. -
Add Your Images: Copy your image files into the appropriate
drawabledirectories. 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 name | Icon |
|---|---|
| ic_pixel_coffee.xml | |
| ic_pixel_favorite.xml | |
| ic_pixel_food.xml | |
| ic_pixel_fuel.xml | |
| ic_pixel_home.xml | |
| ic_pixel_parking.xml | |
| ic_pixel_recents.xml | |
| ic_pixel_work.xml |
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>
</style>
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.