How to rotate a dialog (with animation)?

Question

I'm currently developing a camera app and have locked the main activity to portrait mode and and listening to the orientation changes manually to rotate the icons on the main activity and everything works fine. Now I want to replicate the same thing with the settings dialog of my app. I try rotating the root view of the dialog and it does rotate but then it gets cropped based on the original height of the dialog in portrait.

Portrait mode:

Landscape mode:

XML code of dialog:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/root"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/settings_bg"
    android:paddingHorizontal="@dimen/settings_dialog_padding_horizontal"
    android:paddingVertical="@dimen/settings_dialog_padding_vertical"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <ToggleButton
            android:id="@+id/location_toggle"
            android:layout_width="@dimen/toggle_button_size"
            android:layout_height="@dimen/toggle_button_size"
            android:textOn=""
            android:textOff=""
            android:checked="false"
            android:background="@drawable/location"
            android:layout_marginStart="4dp"
            android:text="@string/toggle_button"/>

        <ToggleButton
            android:id="@+id/aspect_ratio_toggle"
            android:layout_width="@dimen/toggle_button_size"
            android:layout_height="@dimen/toggle_button_size"
            android:textOn=""
            android:textOff=""
            android:checked="false"
            android:scaleType="centerCrop"
            android:background="@drawable/aspect_ratio"
            android:layout_marginStart="@dimen/settings_toggle_button_spacing"
            android:text="@string/aspect_ratio"/>

        <ToggleButton
            android:id="@+id/torch_toggle_option"
            android:layout_width="@dimen/toggle_button_size"
            android:layout_height="@dimen/toggle_button_size"
            android:textOn=""
            android:textOff=""
            android:layout_marginStart="@dimen/settings_toggle_button_spacing"
            android:checked="false"
            android:scaleType="centerCrop"
            android:background="@drawable/torch"
            android:text="@string/aspect_ratio"/>

        <ImageView
            android:id="@+id/flash_toggle_option"
            android:src="@drawable/flash_off_circle"
            android:layout_width="@dimen/toggle_button_size"
            android:layout_height="@dimen/toggle_button_size"
            android:layout_marginStart="@dimen/settings_toggle_button_spacing"
            android:contentDescription="@string/toggle_flash" />

        <ImageView
            android:id="@+id/grid_toggle_option"
            android:src="@drawable/grid_off_circle"
            android:layout_width="@dimen/toggle_button_size"
            android:layout_height="@dimen/toggle_button_size"
            android:layout_marginStart="@dimen/settings_toggle_button_spacing"
            android:contentDescription="@string/grid_toggle" />

    </LinearLayout>

    <View
        android:layout_marginTop="14dp"
        android:layout_marginBottom="4dp"
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:background="@android:color/darker_gray"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingVertical="@dimen/settings_dialog_menu_item_vertical"
            android:paddingHorizontal="@dimen/settings_dialog_menu_item_horizontal"
            android:layout_gravity="end"
            android:orientation="horizontal">

            <TextView
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:layout_gravity="center_vertical"
                android:text="@string/video_quality" />

            <FrameLayout
                android:layout_height="wrap_content"
                android:padding="0dp"
                android:layout_margin="0dp"
                android:layout_width="match_parent">

                <Spinner
                    android:id="@+id/video_quality_spinner"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:checked="true"
                    android:padding="0dp"
                    android:layout_margin="0dp"
                    android:layout_gravity="end"/>

            </FrameLayout>
        </LinearLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingHorizontal="@dimen/settings_dialog_menu_item_horizontal"
            android:paddingVertical="@dimen/settings_dialog_menu_item_vertical"
            android:orientation="horizontal">

            <TextView
                android:layout_alignParentStart="true"
                android:layout_centerVertical="true"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:layout_gravity="center_vertical|start"
                android:text="@string/emphasize_on" />

            <RadioGroup
                android:id="@+id/cm_radio_group"
                android:layout_alignParentEnd="true"
                android:layout_centerVertical="true"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:layout_gravity="center_vertical|end"
                android:orientation="horizontal">

                <RadioButton
                    android:id="@+id/quality_radio"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/quality"
                    android:checked="true" />

                <View
                    android:layout_width="6dp"
                    android:layout_height="0dp"/>

                <RadioButton
                    android:id="@+id/latency_radio"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/latency"
                    android:checked="false" />

            </RadioGroup>

        </RelativeLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingVertical="@dimen/settings_dialog_menu_item_vertical"
            android:paddingHorizontal="@dimen/settings_dialog_menu_item_horizontal"
            android:orientation="horizontal">

            <TextView
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:layout_gravity="center_vertical"
                android:text="@string/include_audio" />

            <androidx.appcompat.widget.SwitchCompat
                android:id="@+id/include_audio_switch"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:checked="true"
                android:layout_gravity="end"/>

        </LinearLayout>
    </LinearLayout>

</LinearLayout>

Code that listens to orientation changes:

    override fun onOrientationChange(orientation: Int) {
        // [...]
        rotateView(
            settingsDialog.findViewById(R.id.root),
            iconRotation
        )
    }

    private fun rotateView(view: View?, angle: Float) {
        if (view!=null) {
            view.animate().cancel()
            view.animate()
                .rotationBy(angle)
                .setDuration(400)
                .setInterpolator(LinearInterpolator())
                .start()
        }
    }

Is there any way I could resolve this issue?

App repo.: https://github.com/GrapheneOS/Camera

If your problem is just the incorrect cropping, have you tried to use layout_weight properties? The center block, which displays the dialog, should occupy as much space as it needs to. Set the layout_weight to 1 and layout_width to 0dp. — Luís Henriques, Oct 21 '21 at 11:09
Yes actually the only problem here is the incorrect cropping — Shyam Singh, Oct 21 '21 at 11:16
I haven't done it myself, but it looks like this library might help with the clipping problem: https://github.com/rongi/rotate-layout If it doesn't work with a Dialog, you could maybe make your dialog full screen with transparent background, with this layout inside it. Or instead of using Dialog, add and remove this layout to your main layout. — Tenfour04, Oct 21 '21 at 12:30
@ShyamSingh In the same element in which you set the layout_weight to 0dp. Your center element which contains the dialog. You can read more here: https://stackoverflow.com/questions/3995825/what-does-androidlayout-weight-mean — Luís Henriques, Oct 21 '21 at 12:34

score 0 · Answer 1 · answered Oct 21 '21 at 12:55

I fixed this issue by,

Using an additional FrameLayout as the main parent.
Setting the theme of the dialog to something that ensured a full screen dialog without a title bar (in my case was the main app theme).
Setting a transparent background below the dialog and dismissing the entire dialog when it's .
(Manually loading the animations and calling them specifically on the dialog view in the layout).

All these things can easily be searched on Google (just in case if you are new to Android development).

Here are the code changes that I had made to my repo. (ignore the changes made to the anim/xxx_xxx.xml files):

https://github.com/GrapheneOS/Camera/commit/13de8a7459754d28385fa0b523fcbf7fc0056ba1

Please do let me know if anyone needs any additional info. regarding this solution — Shyam Singh, Oct 21 '21 at 12:56

How to rotate a dialog (with animation)?

1 Answers1