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
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.