Button, progress circle and infinitive loading circle in same widget?

Question

I'm looking for away to implement three different functions in one widget. The widgets is going to be placed in the center of the display, I'm going to try to explain how it should work.

When the user opens the app, it will display this activity:

When the user taps on the text/inside the circle, it creates a background AsyncTask that connects, authenticate and get state from the device. While it's connecting, authenticting and requiring state of the device, the ProgressBar circle should run in infinitiv loop, like a loading circle.

If the app successfully connects to the device, the color of the circle and text changes:

Here the user needs to press and hold the button for 3 seconds to enable. While the user is holding the button, the ProgressBar is loading from 0% to 100% (33.3% per second). After that, the ProgressBar goes back into infinity loading loop while the app is communicating with the device.

The last stage of the app is to disable the device, it should work same way as the enable stage.

The app disconnects with the device when MainActivity().onPause() is call.

Do I need to create 3 static drawables and 5 animated drawables? Or is it a better way to do it? And how should I create the widget? Should I create a widgets that extends the Button, with ProgressBar inside the widget. Or should I create a widget that extends the ProgressBar and implements a OnClickListener?

It have been long time since I last developed something for Android. And I have never worked in a widget that needs multiple functions. So I need som advice here.

https://stackoverflow.com/questions/27213381/how-to-create-circular-progressbar-in-android — Murat Karagöz, Jan 26 '18 at 15:41

Brayan Armando Yaquian Gonzale · Answer 1 · 2018-01-26T15:49:12.513

You can use indeterminate progress bar with the same height and width, for example:

<ProgressBar
    android:id="@+id/progressBar"
    android:layout_width="your_width"
    android:layout_height="your_height"
    android:indeterminate="true" />

Contains the progress bar into a relative layout for positioning above your circle.

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent">


    <YourView
        android:layout_width = "match_parent"
        android:layout_height = "match_parent">

    </YourView>


    <ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:indeterminate="true" />
</RelativeLayout>

Button, progress circle and infinitive loading circle in same widget?

1 Answers1