Showing Android Wear style AlertDialog

Question

I'm looking for a way to recreate the alert dialog in the Setting application of Android Wear:

Which is swipe to dismissable.

But instead, what I got is this:

Just a barebone Android dialog. How can I show the AlertDialog in the Settings.apk style? (Which I think must be default for Android Wear application)

Answer 1

I found no default way to do this, also setting a custom view to an AlertDialog did not look good. You can still try though, maybe a different Theme works.

What I did was create a new Activity and create my own layout which looks like this:

<?xml version="1.0" encoding="utf-8"?>
<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_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical"
        android:padding="10dp"
        app:layout_box="all">

        <TextView
            android:id="@+id/tv_longtext"
            android:layout_width="match_parent"
            android:layout_height="0sp"
            android:layout_weight="1"
            android:fontFamily="sans-serif-condensed"
            android:gravity="bottom"
            android:padding="5sp"
            android:text="Ambient screen reduces battery life."
            android:textSize="16sp" />

        <TextView
            android:id="@+id/tv_question"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fontFamily="sans-serif-condensed"
            android:gravity="center_horizontal|top"
            android:paddingBottom="15sp"
            android:paddingTop="5sp"
            android:text="Turn on?"
            android:textSize="18sp" />

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="5sp">

            <android.support.wearable.view.CircledImageView
                android:id="@+id/btn_cancel"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="left|bottom"
                android:src="@drawable/ic_cross"
                app:circle_color="#AFAFAF"
                app:circle_radius="25dp"
                app:circle_radius_pressed="20dp" />

            <android.support.wearable.view.CircledImageView
                android:id="@+id/btn_ok"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="right|bottom"
                android:src="@drawable/ic_tick"
                app:circle_color="#0EB695"
                app:circle_radius="25dp"
                app:circle_radius_pressed="20dp" />
        </FrameLayout>
    </LinearLayout>
</android.support.wearable.view.BoxInsetLayout>

It looks just like the confirmation screen from the settings. Maybe it still needs some tweaks, but I think this is the way to go.

Answer 2

I had a similar problem and indeed I didn't find a default way to do this. I tried to use AlertDialogs for WearOs and they don't look well, because even if you pass them a custom view, the AlertDialog class crops the layout in some unexpected ways. How I ended up solving the problem is using the Dialog class (AlertDialog's parent class) and passing it a custom view. The Dialog class doesn't alter the layout and you can attach the dialog to an activity's lifespan (which is the idea of dialogs, creating a custom activity doesn't fit with this requirement).

So you could create a function like this inside your activity:

private void showDialog() {
  Dialog dialog = new Dialog(this);
  View myLayout = getLayoutInflater().inflate(R.layout.my_layout_id, null);
  Button positiveButton = myLayout.findViewById(R.id.positive_button);
  positiveButton.setOnClickListener(
    v -> {
      /* Your action on positive button clicked. */
    }
  );

  Button negativeButton = myLayout.findViewById(R.id.negative_button);
  negativeButton.setOnClickListener(
    v -> {
      /* Your action on negative button clicked. */
    }
  );

  dialog.setContentView(myLayout);
  dialog.show();
}