メインコンテンツまでスキップ

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 NameDescription
mapboxSearchSdkPrimaryTextColorPrimary text color
mapboxSearchSdkPrimaryTextInactiveColorColor for inactive texts, such as inactive tab text or search address text in search results list
mapboxSearchSdkPrimaryAccentColorPrimary accent color. Used as buttons primary color, search highlight color and primary tint color
mapboxSearchSdkOnPrimaryAccentColorColor of text/icon which drawn on top of the primary color
mapboxSearchSdkDistanceColorColor of distance text, shown next to search result
mapboxSearchSdkIconTintColorDefault icon tint color
mapboxSearchSdkBackgroundColorDefault background color
mapboxSearchSdkBackgroundSecondaryColorAnother version of background color. Used as EditTexts background, category buttons background and divider color
mapboxSearchSdkPopulateArrowColorColor of the small arrow indicator placed in right top corner of each search result
mapboxSearchSdkProgressColorColor of ProgressBar indicators. If not specified, indicators fallback to "mapboxSearchSdkPrimaryAccentColor" color
mapboxSearchSdkErrorIconColorColor 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"
/>
この{Type}は役に立ちましたか?