Connection Widget

The connection widget will display the connection status of the app with the product. The connection widget has two states

Connected
Disconnected

Usage

<dji.ux.beta.core.widget.connection.ConnectionWidget
   android:id="@+id/widget_connection"
   android:layout_width="50dp"
   android:layout_height="50dp" />

The ideal dimension ratio for this widget is 1:1.

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.

XML Example

<dji.ux.beta.core.widget.connection.ConnectionWidget
        android:id="@+id/widget_connection"
        android:layout_width="50dp"
        android:layout_height="50dp"
        app:uxsdk_disconnectedIcon="@drawable/ic_disconnected_custom"
        app:uxsdk_connectedIcon="@drawable/ic_connected_custom"/>

Attributes

List of the customizable XML attributes

uxsdk_iconBackground - The drawable used for the background of the widget icon
uxsdk_connectedIcon - The icon used when in connected state
uxsdk_disconnectedIcon - The icon used when in disconnected state

Java Example

ConnectionWidget connectionWidget = findViewById(R.id.widget_connection);
connectionWidget.setDiconnectedIcon(getResources().getDrawable(R.drawable.ic_disconnected_custom));
connectionWidget.setConnectedIcon(getResources().getDrawable(R.drawable.ic_connected_custom));

Kotlin Example

val connectionWidget: ConnectionWidget = findViewById(R.id.widget_connection)
connectionWidget.disconnectedIcon = resources.getDrawable(R.drawable.ic_disconnected_custom)
connectionWidget.connectedIcon = resources.getDrawable(R.drawable.ic_connected_custom)

APIs

List of the customization APIs

var disconnectedIcon: Drawable - Icon for disconnected state.
fun setDisconnectedIcon(@DrawableRes resourceId: Int) - Set the icon resource for product disconnected state.
var connectedIcon: Drawable - Icon for connected state.
fun setConnectedIcon(@DrawableRes resourceId: Int) - Set the icon resource for product connected state.
var connectivityIconBackground: Drawable - Background of the connection state icon.
fun setConnectivityIconBackground(@DrawableRes resourceId: Int) - Set the background of the connection state icon.

Hooks

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

ModelState - Provides hooks in events received by the widget from the widget model.
- data class ProductConnected(val isConnected: Boolean) : ModelState() - Event when product is connected or disconnected.

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

DJI UX SDK Version 5 Beta 5