Icon assets customization

Join the Mapbox Developers Discord Communityarrow-right

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 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:

values/styles.xml

<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.

Join the Mapbox Developers Discord Communityarrow-right

Was this page helpful?