UI customisations
The UI components attributes can be re-colored by modifying the color attributes in your theme.
To change styles of the UI components, you will need to modify the mapboxSearchSdkTheme attribute which should reference a theme with overridden attributes. The attributes are:
| Attribute Name | Description |
|---|---|
mapboxSearchSdkPrimaryTextColor | Primary text color |
mapboxSearchSdkPrimaryTextInactiveColor | Color for inactive texts, such as inactive tab text or search address text in search results list |
mapboxSearchSdkPrimaryAccentColor | Primary accent color. Used as buttons primary color, search highlight color and primary tint color |
mapboxSearchSdkOnPrimaryAccentColor | Color of text/icon which drawn on top of the primary color |
mapboxSearchSdkDistanceColor | Color of distance text, shown next to search result |
mapboxSearchSdkIconTintColor | Default icon tint color |
mapboxSearchSdkBackgroundColor | Default background color |
mapboxSearchSdkBackgroundSecondaryColor | Another version of background color. Used as EditTexts background, category buttons background and divider color |
mapboxSearchSdkPopulateArrowColor | Color of the small arrow indicator placed in right top corner of each search result |
mapboxSearchSdkProgressColor | Color of ProgressBar indicators. If not specified, indicators fallback to "mapboxSearchSdkPrimaryAccentColor" color |
mapboxSearchSdkErrorIconColor | Color of the error icon |
For example:
<style name="CustomTheme" parent="AppTheme">
...
<item name="mapboxSearchSdkTheme">@style/CustomSearchSdkTheme</item>
...
</style>
<style name="CustomSearchSdkTheme" parent="">
<item name="mapboxSearchSdkPrimaryTextColor">#4F6530</item>
<item name="mapboxSearchSdkPrimaryTextInactiveColor">#5A713A</item>
<item name="mapboxSearchSdkPrimaryAccentColor">#34431F</item>
<item name="mapboxSearchSdkOnPrimaryAccentColor">#D3C9A6</item>
<item name="mapboxSearchSdkDistanceColor">#A1AE7E</item>
<item name="mapboxSearchSdkIconTintColor">#4F6530</item>
<item name="mapboxSearchSdkBackgroundColor">#F5F4EC</item>
<item name="mapboxSearchSdkBackgroundSecondaryColor">#AFC3AD</item>
<item name="mapboxSearchSdkPopulateArrowColor">#D3C9A6</item>
<item name="mapboxSearchSdkProgressColor">#4F6530</item>
<item name="mapboxSearchSdkErrorIconColor">#4F6530</item>
</style>
Once you have the customized theme, you can apply it to the view the way you would customize any other UI element, for example by applying it to the view container.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="@style/CustomTheme"
>
{/* ... */}
<com.mapbox.search.ui.view.SearchResultsView
android:id="@+id/search_results_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
{/* ... */}
</FrameLayout>
Or by applying the theme directly to the UI component:
<com.mapbox.search.ui.view.place.SearchPlaceBottomSheetView
android:id="@+id/search_place_card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/CustomTheme"
/>
Was this page helpful?