Home > Software design >  Custom Android CardView Dialog Preview different
Custom Android CardView Dialog Preview different

Time:06-23

I want to display a custom dialog using a cardView to display some information. The preview looks exactly like it should and is previewed in Android Studio the following: enter image description here

The quick_preview.xml xml for this is

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView 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:id="@ id/SensorOverView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:minWidth="300dp"
    android:minHeight="300dp"
    android:visibility="visible"
    app:cardCornerRadius="20dp"
    app:cardElevation="10dp">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@ id/parentLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:minWidth="160dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@ id/scrollView2">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@ id/subTitleLayout"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            app:layout_constraintBottom_toTopOf="@ id/titleLayout"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <Button
                android:id="@ id/btnClose"
                android:layout_width="72dp"
                android:layout_height="24dp"
                android:layout_weight="1"
                android:background="@color/background_light_elevation_1"
                android:text="Button"
                android:textColor="#78909C"
                app:icon="@drawable/ic_baseline_close_24"
                app:iconTint="@color/app_background"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                android:id="@ id/txtSubtitle"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="16dp"
                android:layout_weight="1"
                android:text="Lorem Ipsum"
                android:textSize="16dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toStartOf="@ id/btnClose"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />
        </androidx.constraintlayout.widget.ConstraintLayout>

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@ id/titleLayout"
            android:layout_width="0dp"
            android:layout_height="45dp"
            app:layout_constraintBottom_toTopOf="@ id/viewContent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@ id/subTitleLayout">

            <TextView
                android:id="@ id/txtTitle"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="16dp"
                android:layout_weight="1"
                android:text="Lorem ipsum"
                android:textSize="24sp"
                android:textStyle="bold"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />
        </androidx.constraintlayout.widget.ConstraintLayout>

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@ id/rejectOrAddLayout"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@ id/viewContent">

            <Button
                android:id="@ id/btnReject"
                android:layout_width="72dp"
                android:layout_height="56dp"
                android:background="#FF5454"
                android:text="Button"
                app:icon="@drawable/ic_baseline_close_24"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toStartOf="@ id/btnAdd"
                app:layout_constraintStart_toEndOf="@ id/txtInfo"
                app:layout_constraintTop_toTopOf="parent" />

            <Button
                android:id="@ id/btnAdd"
                android:layout_width="72dp"
                android:layout_height="56dp"
                android:layout_weight="1"
                android:background="#00D7A0"
                android:text="Button"
                app:icon="@drawable/ic_baseline_check_24"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@ id/btnReject"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                android:id="@ id/txtInfo"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="16dp"
                android:layout_weight="1"
                android:maxHeight="56dp"
                android:text="Select to delete/add"
                android:textSize="16sp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toStartOf="@ id/btnReject"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />
        </androidx.constraintlayout.widget.ConstraintLayout>

        <androidx.recyclerview.widget.RecyclerView
            android:id="@ id/viewContent"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginStart="8dp"
            android:layout_marginEnd="8dp"
            app:layout_constraintBottom_toTopOf="@ id/rejectOrAddLayout"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@ id/titleLayout"
            tools:listitem="@layout/sensor_content_item" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>

The dialog uses a custom class QuickPreviewDialog.kt


class QuickPreviewDialog(context: Context) : Dialog(context) {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        this.requestWindowFeature(Window.FEATURE_NO_TITLE)
        this.setCancelable(false);
        this.setContentView(R.layout.sensor_quick_preview);
        this.getWindow()?.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))
    }
}

and is invoked by:

val dialog = QuickPreviewDialog(this)
dialog.show()

But the result is the following and I don't know what's wrong:

enter image description here

CodePudding user response:

Android dialogs tend to have their own ideas about how large they should be. We will address the dialog size, but first you will need to change how the minimum height and width is specified in the CardView.

Change

android:minWidth="300dp"
android:minHeight="300dp"

to

app:minWidth="300dp"
app:minHeight="300dp"

If you just make this change, you should see your entire layout crammed into the small dialog window. This is the correct way to specify minimum sizes for CardViews.

You will have to programmatically adjust the dialog window's size by doing something like the following to override the defaults:

val padding = 160
val dialog = QuickPreviewDialog(this)
dialog.show()
// Set the window's size only after dialog.show()
val widthHeight = getScreenSize()
dialog.window?.setLayout(widthHeight.first - padding, widthHeight.second - padding)

private fun getScreenSize() =
    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.R) {
        val displayMetrics = DisplayMetrics()
        windowManager.defaultDisplay.getMetrics(displayMetrics)
        Pair(
            displayMetrics.widthPixels,
            displayMetrics.heightPixels
        )
    } else {
        val bounds = windowManager.currentWindowMetrics.bounds
        Pair(bounds.width(), bounds.height())
    }

CodePudding user response:

To achieve what you want without changing too much code,a simple solution i would suggest you to use is putting a LinearLayout as your cardView's parent

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="wrap_content">

    <androidx.cardview.widget.CardView
        android:id="@ id/SensorOverView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        android:minWidth="300dp"
        android:minHeight="300dp"
        android:visibility="visible"
        app:cardCornerRadius="20dp"
        app:cardElevation="10dp">

            //Rest of your view

    </androidx.cardview.widget.CardView>
</LinearLayout>

And just like that you see your dialog's size as same as you want it to be

  • Related