All CategoriesAndroid App Development

Introduction To Show Confirmations In Android Wearable Apps

Introduction:

In Android Wear Applications, the confirmations use the whole screen or a larger portion of it. It displays confirmation animations when the action is completed on the wearable. These Confirmations are used to provide visual feedback to the user.
With the help of Android Wearable UI Library, confirmation animations and timers can be easily shown in Android wear applications.
To use ConfirmationActivity in any application, it is necessary to declare it in the manifest file.This topic would be discussed later with the help of an example.
The Confirmations are available in three variations, i.e., Success, Failure, Open on Phone.
Success: It shows a positive confirmation animation with an optional message.
Failure: It shows a failed message when the expected process fails. “Like phone can’t be reached.”
Open on Phone: This animation shows that the action has been sent to the paired device. For instance, an action is triggered by a wearable device which is opened on the user’s phone.
The ConfirmationActivity comes from android.support.wearable.activity.ConfirmationActivity.

DelayedConfirmationView

DelayedConfirmationView is a subclass of CircledImageView which comes from android.support.wearable.view.DelayedConfirmationView.
Characteristics of DelayedConfirmationView

  • It is a view which provides a circular automatic confirmation timer. This helps the user to cancel the operation or action they just performed.
  • It shows a button to cancel the action with timer animation. This helps the users to cancel the operation until the timer finishes.

We can also set the countdown interval with the help of this method.
Let’s now see how we can do it with the help of simple example on ConfirmationActivity and DelayedConfirmationView.

Example of code

Here, we are going to create an application which shows the screen having four buttons: Success, failure, Open on Phone, and last is Show Delayed Confirmation View.

  • Create an Application for AndroidWearShowConfirmationExampleCreate an Application AndroidWearShowConfirmationExample in Android Studio with the updated version.
  • Choose the Wear and select the Blank Wear Activity in your project.
  • Declare the ConfirmationActivity in AndroidManifest.xml

Requirements

AndroidManifest.xml, MainActivity.java, DelayedConfirmationViewActivity.java, activity_main.xml, activity_delayed_confirmation_view.xml.
Let’s do it one by one.

AndroidManifest.xml

Let’s learn how to declare the ConfirmationActivity in this file.
The code:

<manifest>
   <application>
        <activity
	android:name="android.support.wearable.activity.ConfirmationActivity" />
    </application>
</manifest>

activity_main.xml

This is the main layout file. Here, we add the four buttons as discussed previously.
The code:

<android.support.wearable.view.BoxInsetLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_height="match_parent"
    android:layout_width="match_parent">
    <RelativeLayout
        android:id="@+id/frame_layout"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:background="#434343"
        app:layout_box="left|bottom|right"
        >
        <Button
        android:id="@+id/btn_Success"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:text="@string/success"
        android:layout_marginLeft="30dp"
        android:layout_marginTop="5dp"
        />
        <Button
        android:id="@+id/btn_failure"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:layout_below="@id/btn_Success"
        android:layout_marginLeft="30dp"
        android:text="@string/failure"/>
        <Button
        android:id="@+id/btn_OpenOnPhone"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:layout_below="@id/btn_failure"
        android:text="@string/open_on_phone"
        android:layout_marginLeft="10dp"/>
        <Button
        android:id="@+id/btn_Delay"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/btn_OpenOnPhone"
        android:text="@string/delay_confirmation"/>
    </RelativeLayout>
</android.support.wearable.view.BoxInsetLayout>

MainActivity.java

This is the Wear Activity. Here, we will take the reference to all buttons. Also, with the help of Intent, we can start the ConfirmationActivity.  Animation specification can be done and message with EXTRA_ANIMATION_TYPE and EXTRA_MESSAGE intent extra.

Initialize

private Button btnSuccess, btnFailure, btnOpenOnPhone,btnShowDelayConfirmationView;

Add the code in onCreate(..){..}

btnSuccess = (Button) findViewById(R.id.btn_Success);
btnFailure = (Button) findViewById(R.id.btn_failure);
btnOpenOnPhone = (Button) findViewById(R.id.btn_OpenOnPhone);
btnShowDelayConfirmationView = (Button) findViewById(R.id.btn_Delay);

Now, set the listeners on and start the confirmation activity.

btnSuccess.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        startConfirmationActivity(ConfirmationActivity.SUCCESS_ANIMATION, getString(R.string.success));
    }
});
btnFailure.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        startConfirmationActivity(ConfirmationActivity.FAILURE_ANIMATION,
getString(R.string.failure));
    }
});
btnOpenOnPhone.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        startConfirmationActivity(ConfirmationActivity.OPEN_ON_PHONE_ANIMATION, getString(R.string.open_on_phone));
    }
});

It calls startConfirmationActivity() method which shows the confirmation according to users action.

private void startConfirmationActivity(int animationType, String message) {
    Intent confirmationActivity = new Intent(this, ConfirmationActivity.class)
            .setFlags(Intent.FLAG_ACTIVITY_NEW_TASK | Intent.FLAG_ACTIVITY_NO_ANIMATION)
            .putExtra(ConfirmationActivity.EXTRA_ANIMATION_TYPE, animationType)
            .putExtra(ConfirmationActivity.EXTRA_MESSAGE, message);
    startActivity(confirmationActivity);
}

After showing the confirmation animations the ConfirmationActivity finishes and our Activity resumes.
When we click on Show Delayed Confirmation View Button it opens another Activity.

btnShowDelayConfirmationView.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Intent intent = new Intent(MainActivity.this,DelayedConfirmationViewActivity.class);
        startActivity(intent);
    }
});

activity_delayed_confirmation_view.xml

Create XML file to show the delayed confirmation view. Here we will add the Text View’s for labels or sample text and a LinearLayout having DelayedConfirmationView with a TextView which shows the Cancel action.

Add the code here

<TextView
    android:id="@+id/tv_label"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="12dp"
    android:layout_marginTop="18dp"
    android:text="@string/label_sample_text"
    android:textColor="@color/grey"
    android:textSize="12sp" />
<TextView
    android:id="@+id/tv_sampleText"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/tv_label"
    android:layout_marginLeft="12dp"
    android:layout_marginRight="12dp"
    android:text="@string/label_sample_text" />
<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:orientation="horizontal">
    <android.support.wearable.view.DelayedConfirmationView xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/timer"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="8dp"
        android:src="@drawable/cross_white"
        app:circle_border_color="@color/circle_border_color"
        app:circle_border_width="8dp"
        app:circle_color="@color/blue"
        app:circle_padding="4dp"
        app:circle_radius="40dp" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="12dp"
        android:text="@string/label_cancel"
        android:textSize="20sp" />
</LinearLayout>

DelayedConfirmationViewActivity.java

Create this Activity in your application. Here we will set the countdown timer and listener with its properties.

Initialize

private DelayedConfirmationView mDelayedConfirmationView;

Add the code in onCreate(..){..}

Here we will take the reference of DelayedConfirmationView and start the confirmation timer.

mDelayedConfirmationView = (DelayedConfirmationView) findViewById(R.id.timer);
startConfirmationTimer();

Add the code in startConfirmationTimer() method.

mDelayedConfirmationView.setTotalTimeMs(4 * 1000);
mDelayedConfirmationView.setListener(
        new android.support.wearable.view.DelayedConfirmationView.DelayedConfirmationListener() {
            @Override
            public void onTimerFinished(View view) {
            }
            @Override
            public void onTimerSelected(View view) {
                finish();
            }
        }
);
mDelayedConfirmationView.start();

As we see the countdown timer is set with the help of setTotalTimeMs() method. The DelayedConfirmationView.DelayedConfirmationListener() has two callback methods. onTimerFinished()is called when the timer is finished and onTimerSelected() is called when the user taps or selects the timer.
Now, run the application and see the output on the  Android Wear Emulator.

Output

 
Home Screen                                         Success Confirmation
   
Failure Confirmation                      Open On Phone Confirmation 

Delayed Confirmation View

Conclusion

This was a brief introduction to Confirmations. i.e., Confirmation Activity and Delayed Confirmation View. We discussed the wearable apps use it to show the confirmations to the user when the action is completed or failed or have to open with the help of user phone. Also, we saw how to cancel the action if the user waits until the timer finishes. These are some of the features which are very popular and important in Android development.

Tags

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Articles

Close