Unit Mode List Item Widget

Unit Mode List Item Widget is a RADIO_BUTTON type of widget which displays the Unit System used. The currently enabled unit type will be highlighted. The widget provides functionality to change the unit type by tapping on any option. Changing the unit type will change the unit system used in all the widgets. For example, Max Altitude List Item Widget, Max Flight Distance List Item Widget.

Following are examples of the widget states:

Disconnected

Imperial

Metric

A dialog is shown to the user when they switch to Imperial mode. This dialog informs the user that the imperial values displayed in all widgets are approximate conversions of metric value. This is because the aircraft employs metric system.

Usage

<dji.ux.beta.core.panel.listitem.unittype.UnitModeListItemWidget
     android:id="@+id/unit_type_list_item"
     android:layout_width="match_parent"
     android:layout_height="wrap_content" />

Customizations

The UI elements can be customized to match the style of the user's application. The customizations can be done using attributes in XML or programmatically using the APIs. The widget supports all the customizations that its parent RADIO_BUTTON widget supports.

XML Example

<dji.ux.beta.core.panel.listitem.unittype.UnitModeListItemWidget
     android:id="@+id/unit_type_list_item"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:background="@color/white"
     app:uxsdk_center_option_background_selector="@drawable/selector_radio_button"
     app:uxsdk_first_option_background_selector="@drawable/selector_radio_button"
     app:uxsdk_last_option_background_selector="@drawable/selector_radio_button"
     app:uxsdk_list_item_icon_color="@color/black"
     app:uxsdk_list_item_title_text_color="@color/black"
     app:uxsdk_list_item_title="Unit Type"
     app:uxsdk_option_color_state_list="@color/radio_button_colors" />

Example of selectors

Single Background Selector

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" >
        <shape android:shape="rectangle">
            <stroke android:width="0.5dp" android:color="@color/gray_45" />
        </shape>
    </item>
    <item android:state_checked="true">
        <shape android:shape="rectangle">
            <solid android:color="@color/blue" />
            <stroke android:width="1dp" android:color="@color/blue" />
        </shape>
    </item>
    <item android:state_checked="false">
        <shape android:shape="rectangle">
            <stroke android:width="1dp" android:color="@color/blue" />
        </shape>
    </item>
</selector>

Text color selectors

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/gray_45" android:state_enabled="false" />
    <item android:color="@color/uxsdk_black" android:state_checked="true" />
    <item android:color="@color/uxsdk_black" android:state_checked="false" />
</selector>

The dialog can be customized by using a combination of the dialog theme and checkbox attributes. Example of the theme is

<style name="UXSDKDialogCustomTheme" parent="Theme.AppCompat.Dialog.Alert">
    <item name="colorAccent">@color/uxsdk_red</item>
    <item name="android:background">@color/uxsdk_white</item>
    <item name="android:textColorPrimary">@color/uxsdk_black</item>
    <item name="android:textColor">@color/uxsdk_black</item>
    <item name="android:textColorSecondary">@color/uxsdk_black</item>
</style>

Attributes

List of the customizable XML attributes

uxsdk_list_item_dialog_theme - The style resource for theming the dialog.
uxsdk_checkBoxTextSize - The text size of the checkbox.
uxsdk_checkBoxTextColor - The color of the checkbox text.
uxsdk_checkBoxTextBackground - The background of the checkbox.
uxsdk_checkBoxTextAppearance - The text appearance for the checkbox.

Java Example

UnitTypeListItemWidget unitTypeListItemWidget = findViewById(R.id.unit_type_list_item);
unitTypeListItemWidget.setCenterOptionBackgroundSelector(getResources().getDrawable(R.drawable.selector_radio_button));
unitTypeListItemWidget.setFirstOptionBackgroundSelector(getResources().getDrawable(R.drawable.selector_radio_button));
unitTypeListItemWidget.setLastOptionBackgroundSelector(getResources().getDrawable(R.drawable.selector_radio_button));
unitTypeListItemWidget.setOptionColorStateList(getResources().getColorStateList((R.color.radio_button_colors)));
unitTypeListItemWidget.setBackgroundColor(getResources().getColor(R.color.white));
unitTypeListItemWidget.setDialogTheme(R.style.CustomDialogTheme);
unitTypeListItemWidget.setListItemTitle("Unit Type");
unitTypeListItemWidget.setListItemTitleIconColor(getResources().getColor(R.color.black));
unitTypeListItemWidget.setListItemTitleTextColor(getResources().getColor(R.color.black));
unitTypeListItemWidget.setCheckBoxTextColor(getResources().getColor(R.color.black));

Kotlin Example

val unitTypeListItemWidget = findViewById<UnitTypeListItemWidget>(R.id.unit_type_list_item)
unitTypeListItemWidget.centerOptionBackgroundSelector = resources.getDrawable(R.drawable.selector_radio_button)
unitTypeListItemWidget.firstOptionBackgroundSelector = resources.getDrawable(R.drawable.selector_radio_button)
unitTypeListItemWidget.lastOptionBackgroundSelector = resources.getDrawable(R.drawable.selector_radio_button)
unitTypeListItemWidget.optionColorStateList = resources.getColorStateList(R.color.radio_button_colors)
unitTypeListItemWidget.setBackgroundColor(resources.getColor(R.color.white))
unitTypeListItemWidget.listItemTitleIconColor = resources.getColor(R.color.black)
unitTypeListItemWidget.listItemTitleTextColor = resources.getColor(R.color.black)
unitTypeListItemWidget.dialogTheme = R.style.CustomDialogTheme
unitTypeListItemWidget.setCheckBoxTextColor(getResources().getColor(R.color.black))
unitTypeListItemWidget.listItemTitle = "Unit Type"

List of the customization APIs

@StyleRes var dialogTheme: Int - The style resource for all the format dialogs.
var checkBoxTextAppearance = 0 - The text appearance style for the checkbox.
var checkBoxTextBackground: Drawable? - The background of the checkbox.
var checkBoxTextColor: ColorStateList? - The color state list of the checkbox text.
var checkBoxTextSize: Float - The text size for the checkbox.
fun setCheckBoxTextColor(@ColorInt color: Int) - The color of the checkbox text.
fun setCheckBoxBackground(@DrawableRes resourceId: Int) - The background of the checkbox.

Hooks

The widget provides hooks for the users to add functionality based on the state changes in the widget. The UnitTypeListItemWidget provides the following hooks:

ModelState - Provides hooks in events received by the widget from the widget model.
- data class ProductConnected(val isConnected: Boolean) : ModelState() - Event when the product is connected or disconnected.
- object SetUnitTypeSucceeded : ModelState() - Event when the unit type is set successfully.
- data class SetUnitTypeFailed(val error: UXSDKError) : ModelState() - Event when setting the unit type fails.
- data class UnitTypeUpdated(val unitTypeState: UnitTypeState) : ModelState() - Event when the unit type is updated.

The user can subscribe to this using public override fun getWidgetStateUpdate(): Flowable<ModelState>.

UIState - Provides hooks in events related to user interaction with the widget.
- data class OptionSelected(val optionIndex: Int, val optionLabel: String) : UIState() - Event when an option is clicked.
- data class DialogDisplayed(val info: Any?) - Event when a dialog is displayed.
- data class DialogDismissed(val info: Any?) : UIState() - Event when a dialog is dismissed.
- data class NeverShowAgainCheckChanged(val isChecked: Boolean) : UIState() - Event when the checkbox state is changed in the dialog.