显示 Android Wear 风格的 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();
}

Answer 3

I created a similar fragment with custom layout like this:

Kotlin code:

/**
 * Created by nmbinh87@gmail.com on 4/12/21.
 */
class ConfirmationDialog private constructor() : DialogFragment(R.layout.confirmation_dialog) {
    var listener: Listener? = null
    var longMessage: String = ""
    var shortMessage = ""
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        tv_longtext.text = longMessage
        tv_question.text = shortMessage
        tv_longtext.visibility = if (longMessage.isEmpty()) View.GONE else View.VISIBLE
        tv_question.visibility = if (shortMessage.isEmpty()) View.GONE else View.VISIBLE
        btn_cancel.setSafeOnClickListener {
            dismiss()
            listener?.onCancel()
        }
        btn_ok.setSafeOnClickListener {
            dismiss()
            listener?.onConfirm()
        }
    }

    override fun onStart() {
        super.onStart()
        val params = dialog?.window?.attributes
        params?.width = WindowManager.LayoutParams.MATCH_PARENT
        params?.height = WindowManager.LayoutParams.MATCH_PARENT
        dialog?.window?.attributes = params as WindowManager.LayoutParams
        dialog?.window?.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT));
    }

    open class Listener {
        fun onCancel() {
        }

        open fun onConfirm() {
        }
    }

    companion object {
        fun show(
            fm: FragmentManager,
            longMessage: String = "",
            shortMessage: String = "",
            listener: Listener
        ) {
            val fragment = ConfirmationDialog()
            fragment.longMessage = longMessage
            fragment.shortMessage = shortMessage
            fragment.listener = listener
            fragment.show(fm, fm::class.simpleName)
        }
    }
}

Layout:

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:background="@color/colorPrimaryDark"
    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="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:fontFamily="sans-serif-condensed"
            android:gravity="center"
            android:padding="5sp"
            android:textColor="@color/white"
            android:textSize="16sp"
            tools:text="Ambient screen reduces battery life." />

        <TextView
            android:id="@+id/tv_question"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fontFamily="sans-serif-condensed"
            android:layout_weight="1"
            android:gravity="center"
            android:paddingTop="5sp"
            android:paddingBottom="15sp"
            android:textColor="@color/white"
            android:textSize="18sp"
            tools:text="Turn on?" />

        <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_cc_clear"
                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_cc_checkmark"
                app:circle_color="#0EB695"
                app:circle_radius="25dp"
                app:circle_radius_pressed="20dp" />
        </FrameLayout>
    </LinearLayout>
</android.support.wearable.view.BoxInsetLayout>

Usage:

   ConfirmationDialog.show(
        childFragmentManager,
        "",
        "Turn alarm off?",
        object : ConfirmationDialog.Listener() {
            override fun onConfirm() {
                super.onConfirm()
                turnAlarm(false)
            }
        })