RC Stick Mode List Item Widget

RC Stick Mode List Item Widget is a RADIO_BUTTON type of widget which displays the RC Stick Modes also known as Aircraft Mapping Styles. The currently enabled mode will be highlighted. The widget provides functionality to change the mode by tapping on any option.

Following are examples of the widget states:

Disconnected

Mode 1

Mode 3

Usage

<dji.ux.beta.core.panel.listitem.rcstickmode.RCStickModeListItemWidget
     android:id="@+id/rc_stick_mode_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.rcstickmode.RCStickModeListItemWidget
    android:id="@+id/rc_stick_mode_list_item"
    app:uxsdk_center_option_background_selector="@drawable/uxsdk_selector_radio_button_middle_custom"
    app:uxsdk_first_option_background_selector="@drawable/uxsdk_selector_radio_button_first_custom"
    app:uxsdk_last_option_background_selector="@drawable/uxsdk_selector_radio_button_last_custom"
    app:uxsdk_option_color_state_list="@color/text_color_list"
    app:uxsdk_list_item_title_text_color="@color/black"
    android:background="@color/uxsdk_gray_58"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

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/uxsdk_white_60_percent" />
        </shape>
    </item>
    <item android:state_checked="true">
        <shape android:shape="rectangle">
            <solid android:color="@color/uxsdk_red" />
            <stroke android:width="1dp" android:color="@color/uxsdk_red" />
        </shape>
    </item>
    <item android:state_checked="false">
        <shape android:shape="rectangle">
            <solid android:color="@color/white" />
            <stroke android:width="1dp" android:color="@color/black" />
        </shape>
    </item>
</selector>

Multiple Background Selector

First

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false">
        <shape android:shape="rectangle">
            <corners android:bottomLeftRadius="5dp" android:topLeftRadius="5dp" />
            <stroke android:width="0.5dp" android:color="@color/uxsdk_white_60_percent" />
        </shape>
    </item>
    <item android:color="@color/uxsdk_white" android:state_checked="true">
        <shape android:shape="rectangle">
            <solid android:color="@color/blue" />
            <corners android:topLeftRadius="5dp" android:bottomLeftRadius="5dp"/>
            <stroke android:width="1dp" android:color="@color/blue" />
        </shape>
    </item>
    <item android:color="@color/uxsdk_white" android:state_checked="false">
        <shape android:shape="rectangle">
            <solid android:color="@color/white" />
            <corners android:topLeftRadius="5dp" android:bottomLeftRadius="5dp"/>
            <stroke android:width="1dp" android:color="@color/black" />
        </shape>
    </item>
</selector>

Middle

<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/uxsdk_white_60_percent" />
        </shape>
    </item>
    <item android:color="@color/uxsdk_white" 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:color="@color/uxsdk_white" android:state_checked="false">
        <shape android:shape="rectangle">
            <solid android:color="@color/white" />
            <stroke android:width="1dp" android:color="@color/black" />
        </shape>
    </item>

</selector>

Last

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false">
        <shape android:shape="rectangle">
            <corners android:bottomRightRadius="5dp" android:topRightRadius="5dp" />
            <stroke android:width="0.5dp" android:color="@color/uxsdk_white_60_percent" />
        </shape>
    </item>
    <item android:color="@color/uxsdk_white" android:state_checked="true">
        <shape android:shape="rectangle">
            <solid android:color="@color/blue" />
            <corners android:bottomRightRadius="5dp" android:topRightRadius="5dp" />
            <stroke android:width="1dp" android:color="@color/blue" />
        </shape>
    </item>
    <item android:color="@color/uxsdk_white" android:state_checked="false">
        <shape android:shape="rectangle">
            <solid android:color="@color/white" />
            <corners android:bottomRightRadius="5dp" android:topRightRadius="5dp" />
            <stroke android:width="1dp" android:color="@color/black" />
        </shape>
    </item>
</selector>

Text color selectors

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

Java Example

RCStickModeListItemWidget rcStickModeListItemWidget = findViewById(R.id.rc_stick_mode_list_item)
rcStickModeListItemWidget.setBackgroundColor(getResources().getColor(R.color.uxsdk_gray_58));
rcStickModeListItemWidget.setCenterOptionBackgroundSelector(getResources().getDrawable(R.drawable.uxsdk_selector_radio_button_middle));
rcStickModeListItemWidget.setFirstOptionBackgroundSelector(getResources().getDrawable(R.drawable.uxsdk_selector_radio_button_first));
rcStickModeListItemWidget.setLastOptionBackgroundSelector(getResources().getDrawable(R.drawable.uxsdk_selector_radio_button_last));
rcStickModeListItemWidget.setOptionColorStateList(getResources().getColorStateList(R.color.text_color_list));
rcStickModeListItemWidget.setListItemTitleTextColor(getResources().getColor(R.color.black));

Kotlin Example

val rcStickModeListItemWidget = RCStickModeListItemWidget(context)
rcStickModeListItemWidget.setBackgroundColor(resources.getColor(R.color.uxsdk_gray_58))
rcStickModeListItemWidget.centerOptionBackgroundSelector = resources.getDrawable(R.drawable.uxsdk_selector_radio_button_middle)
rcStickModeListItemWidget.firstOptionBackgroundSelector = resources.getDrawable(R.drawable.uxsdk_selector_radio_button_first)
rcStickModeListItemWidget.lastOptionBackgroundSelector = resources.getDrawable(R.drawable.uxsdk_selector_radio_button_last)
rcStickModeListItemWidget.optionColorStateList = resources.getColorStateList(R.color.text_color_list)
rcStickModeListItemWidget.listItemTitleTextColor = resources.getColor(R.color.black)

Hooks

The widget provides hooks for the users to add functionality based on the state changes in the widget. The RCStickModeListItemStateWidget 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 SetRCStickModeSucceeded : RCStickModeListItemState() : ModelState() - Event when the RC stick mode is set successfully.
- data class SetRCStickModeFailed(val error: UXSDKError) : ModelState() - Event when setting the RC stick mode fails.
- data class RCStickModeUpdated(val rcStickModeState: RCStickModeState) : ModelState() - Event when the RC stick mode 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.

The user can subscribe to this using fun getUIStateUpdates(): Flowable<UIState>.

DJI UX SDK Version 5 Beta 5