SD Card Status List Item Widget

SD Card Status List Item Widget is a LABEL_BUTTON type of widget which will display the remaining capacity of the SD card and SDCardOperationState.

Following are examples of the widget states:

Disconnected

CurrentSDCardState: Normal

CurrentSDCardState: Slow

CurrentSDCardState: Not Inserted

It also provides an option to format the SD card. Tapping on the format button will show the format confirmation dialogs.

Format confirmation dialog

Format success dialog

Format error dialog

Usage

<dji.ux.beta.core.panel.listitem.sdcardstatus.SDCardStatusListItemWidget
   android:id="@+id/sd_card_status_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 LABEL_BUTTON supports.

XML Example

<dji.ux.beta.core.panel.listitem.sdcardstatus.SDCardStatusListItemWidget
   android:id="@+id/sd_card_status_list_item"
   android:layout_width="match_parent"
   android:background="@color/uxsdk_gray_58"
   app:uxsdk_list_item_button_text_color="@color/uxsdk_red"
   app:uxsdk_list_item_warning_color="@color/uxsdk_yellow"
   app:uxsdk_list_item_normal_color="@color/uxsdk_green_material_800"
   app:uxsdk_list_item_title_text_color="@color/black"
   android:layout_height="wrap_content"/>

The dialogs can be customized by using a custom theme.

<style name="UXSDKDialogCustomTheme" parent="Theme.AppCompat.Dialog.Alert">
   <item name="colorAccent">@color/uxsdk_red</item>
   <item name="android:background">@color/uxsdk_gray_58</item>
</style>

Attributes

List of the customizable XML attributes

uxsdk_list_item_dialog_theme - The style resource for theming the dialogs.
uxsdk_format_confirmation_dialog_icon - The drawable used for the format confirmation dialog.
uxsdk_format_success_dialog_icon - The drawable used for the format success dialog.
uxsdk_format_error_dialog_icon - The drawable used for the format error dialog.

Java Example

SDCardStatusListItemWidget sdCardItem = findViewById(R.id.widget_sd_card_status_list_item);
sdCardItem.setBackgroundColor(getResources().getColor(R.color.uxsdk_gray_58));
sdCardItem.setListItemTitleTextColor(getResources().getColor(R.color.uxsdk_black));
sdCardItem.setListItemButtonTextColor(getResources().getColor(R.color.uxsdk_red));
sdCardItem.setWarningValueColor(getResources().getColor(R.color.uxsdk_yellow));
sdCardItem.setNormalValueColor(getResources().getColor(R.color.uxsdk_green_material_800));

Kotlin Example

val sdCardItem: SDCardStatusListItemWidget = SDCardStatusListItemWidget(context)
sdCardItem.setBackgroundColor(resources.getColor(R.color.uxsdk_gray_58))
sdCardItem.listItemTitleTextColor = resources.getColor(R.color.uxsdk_black)
sdCardItem.listItemButtonTextColor = resources.getColor(R.color.uxsdk_red)
sdCardItem.warningValueColor = resources.getColor(R.color.uxsdk_yellow)
sdCardItem.normalValueColor = resources.getColor(R.color.uxsdk_green_material_800)

APIs

List of the customization APIs

@StyleRes var dialogTheme: Int - The style resource for all the format dialogs.
var formatConfirmationDialogIcon: Drawable? - The drawable used for the format confirmation dialog.
var formatSuccessDialogIcon: Drawable? - The drawable used for the format success dialog.
var formatErrorDialogIcon: Drawable? - The drawable used for the format error dialog.

Hooks

The widget provides hooks for the users to add functionality based on the state changes in the widget. The SDCardStatusListItemWidget 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.
- data class SDCardStateUpdated(val sdCardState: SDCardStatusListItemWidgetModel.SDCardState) : ModelState() - Event when the SD card state is updated. The SD card state provides the current SDCardOperationState and the remaining SD card capacity.

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.
- object ButtonClicked : UIState() - Event when the button is clicked.
- data class DialogDisplayed(val info: Any?) : UIState() - Event when a dialog is displayed.
- data class DialogActionConfirmed(val info: Any?) : UIState() - Event when the positive button on the dialog is clicked.
- data class DialogActionCanceled(val info: Any?) : UIState() - Event when the negative button on the dialog is clicked.
- data class DialogDismissed(val info: Any?) UIState() - Event when a dialog is dismissed.