Custom Dialog with listview on orientation change (landscape mode)

Question

I wanted my custom dialog to work in both portrait and landscape mode. for that, I found a solution to create the XML in the layout-land folder as well. so, I copied the layout and pasted the same in the layout-land folder and made a modification(added a scroll view). Still, it is not working as I expected. in spite of adding scrollview the dialog does not scroll completely.

The dialog also contains a list view.

my layout-land/dialog.xml is as follows.

<android.support.constraint.ConstraintLayout 
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/main_layout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@color/transparent"
    tools:context="customviews.VeriDocDialog">

    <android.support.constraint.ConstraintLayout
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:background="@color/transparent"
        app:layout_constraintBottom_toBottomOf="@id/center_fab_view"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent">

    </android.support.constraint.ConstraintLayout>

    <android.support.constraint.ConstraintLayout
        android:id="@+id/top_fab_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:elevation="1dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:id="@+id/top_fab"
            android:layout_width="56dp"
            android:layout_height="56dp"
            android:background="@drawable/round_bg"
            android:scaleType="center"
            android:src="@drawable/share_24" />

    </android.support.constraint.ConstraintLayout>

    <View
        android:id="@+id/center_fab_view"
        android:layout_width="wrap_content"
        android:layout_height="1dp"
        app:layout_constraintCircle="@id/top_fab_layout" />

    <android.support.constraint.ConstraintLayout
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/white"
        app:layout_constraintBottom_toBottomOf="@id/top_fab_layout"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@id/center_fab_view">

    </android.support.constraint.ConstraintLayout>

    <ImageView
        android:id="@+id/img_close"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:elevation="5dp"
        android:src="@drawable/cross_30"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/center_fab_view" />

    <ScrollView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/top_fab_layout">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/white"
            >

            <TextView
                android:id="@+id/dialog_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:layout_centerHorizontal="true"
                android:layout_margin="10dp"
                android:textColor="@color/primary_text"
                android:textSize="@dimen/textsize_xlarge"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                tools:text="TITLE" />

            <ImageView
                android:id="@+id/img"
                android:layout_width="45dp"
                android:layout_height="wrap_content"
                android:layout_below="@id/dialog_title"
                android:layout_centerHorizontal="true"
                android:src="@drawable/hr"
                app:layout_constraintBottom_toTopOf="@id/tv_instruction"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@id/dialog_title" />

            <TextView
                android:id="@+id/tv_instruction"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/img"
                android:layout_centerHorizontal="true"
                android:layout_margin="5dp"
                android:gravity="center"
                android:lines="2"
                android:text="invited friends \n to win more scrathches"
                android:textColor="@color/primary_text"
                android:textSize="@dimen/textsize_medium"
                app:layout_constraintBottom_toTopOf="@id/center_text"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@id/img" />

            <RelativeLayout
                android:id="@+id/center_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/tv_instruction"
                android:layout_centerHorizontal="true"
                android:layout_margin="5dp"
                app:layout_constraintBottom_toTopOf="@id/listview"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@id/tv_instruction">

                <TextView
                    android:id="@+id/tv_equation"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:gravity="center"
                    android:lines="2"
                    android:text="invite 1 = 2 Scratches"
                    android:textColor="@color/primary_text"
                    android:textSize="@dimen/textsize_medium" />

                <TextView
                    android:id="@+id/tv_highlighted_text"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:gravity="center"
                    android:padding="5dp"
                    android:text="Facebook"
                    android:textColor="@color/blue_A200"
                    android:textSize="@dimen/textsize_regular"
                    android:visibility="gone" />

            </RelativeLayout>

            <View
                android:id="@+id/view_above_listView"
                android:layout_width="wrap_content"
                android:layout_height="3dp"
                android:layout_above="@+id/listview"
                android:background="@drawable/primary_gradient_horizontal"
                app:layout_constraintBottom_toTopOf="@id/listview" />

            <ListView
                android:id="@+id/listview"
                android:layout_width="match_parent"
                android:layout_height="160dp"
                android:layout_below="@id/center_text"
                android:divider="@color/selected_gray"
                android:dividerHeight="1dp"
                app:layout_constraintBottom_toTopOf="@id/view_above_button"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@id/center_text" />

            <TextView
                android:id="@+id/tv_loading"
                android:layout_width="match_parent"
                android:layout_height="160dp"
                android:layout_below="@id/center_text"
                android:gravity="center"
                android:text=""
                android:textColor="@color/primary"
                android:textSize="16sp"
                android:visibility="gone"
                app:layout_constraintBottom_toTopOf="@id/view_above_button"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@id/center_text" />

            <View
                android:id="@+id/view_above_button"
                android:layout_width="wrap_content"
                android:layout_height="3dp"
                android:layout_above="@+id/btn_bottom"
                android:background="@drawable/primary_gradient_horizontal"
                app:layout_constraintBottom_toTopOf="@id/btn_bottom" />

            <Button
                android:id="@+id/btn_bottom"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/listview"
                android:background="@color/selected_gray"
                android:text="invite"
                android:textColor="@color/primary_text"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@id/listview" />

        </RelativeLayout>

    </ScrollView>

</android.support.constraint.ConstraintLayout>

How Dialog looks in Portrait mode see here Vs. How Dialog looks in landscape mode see here

my VeriDocDialog.java code is as follows

public class VeriDocDialog extends Dialog {
     private View dialogView;

    public VeriDocDialog(@NonNull Context context, String dialogType, int iconDrawableId, String instructions,String bottomText, List<Contact> contactList, String buttonText) {

        super(context);
        this.context = context;
        this.dialogType = dialogType;
        this.iconDrawableId = iconDrawableId;
        this.instruction = instructions;
        this.buttonText = buttonText;
        this.contactList = contactList;
        this.bottomText = bottomText;

        setupVeriDocDialog();
    }

    public VeriDocDialog(@NonNull Context context, String dialogType, int iconDrawableId, String instructions, String bottomText, List<ResolveInfo> shareList, String buttonText, Intent shareIntent) {

        super(context);
        this.context = context;
        this.dialogType = dialogType;
        this.iconDrawableId = iconDrawableId;
        this.instruction = instructions;
        this.buttonText = buttonText;
        this.shareList = shareList;
        this.bottomText = bottomText;
        this.shareIntent = shareIntent;

        setupVeriDocDialog();
    }

    private void setupVeriDocDialog() {

        if (getWindow() != null) {
            getWindow().setBackgroundDrawableResource (R.color.transparent);
            getWindow().setGravity(Gravity.CENTER);
            getWindow().getAttributes().windowAnimations = R.style.dialogAnimation;
            requestWindowFeature(Window.FEATURE_NO_TITLE);
        }
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);

         dialogView = getLayoutInflater().inflate(R.layout.dialog_veri_doc, null);
         setContentView(dialogView);

         bindView();
         initialise(dialogType);
     }

     //.... and other methods .....
}

How I call this dialog from my activity :

private void displayInviteDialog() {
    contactList = new ArrayList<>();

    inviteDialog = new VeriDocDialog(ScratchAndWinActivity.this,
            VeriDocDialog.TYPE_INVITE,
            R.drawable.invite_32,
            getString(R.string.str_invite_instruction),
            getString(R.string.str_equation_invite),
            contactList, VeriDocDialog.TYPE_INVITE);


    inviteDialog.show();
}

Problem is, layout is not proper. I have mentioned the xml layout in land folder too.and also put the views inside scrollview but still the scrollview does not scroll the dialog to its bottom.

is it because of listview? if yes then please provide me some solution. and if not what can be the cause and How to overcome this situation? any help would be appreciated.

and when I try to open the dialog when the orientation is landscape, the xml from the land folder is inflated. but, when I open the dialog in portrait and after that, I change the orientation, the xml is same(same in regular layout not from the land folder).

Please help me with this problem.

@RahulKhurana I've already posted. Please read the question. I've mentioned the links. "How Dialog looks in Portrait mode see here Vs. How Dialog looks in landscape mode see here" in this line. please check. — Riddhi Shah, Sep 05 '18 at 13:01
One more question: Had you implemented the **onConfigurationChanged** method? and try to reopen the dialog — Rahul Khurana, Sep 06 '18 at 07:26
@RahulKhurana yes yes. I implemented that. and that is working perfectly. But the problem is dialog is getting cut off. the button at the bottom is not displayed and even if you try to scroll you are able to scroll only up to listview. and I also replaced `scrollview` with `nestedscrollview` but nothing happens — Riddhi Shah, Sep 06 '18 at 07:33
Ok. Do one thing just add one extra view or change same view background color temporarily to see which layout it loads when you change the orientation. — Rahul Khurana, Sep 06 '18 at 07:41
@RahulKhurana I have added scrollview in only landscape view not in portrait layout so in that way i am able to identify that change — Riddhi Shah, Sep 06 '18 at 08:24
@RahulKhurana when layout is portrait, the normal xml file is getting loaded. and when the layout is landscpae, the the file from land folder is being loaded. and that is all as i expected. It is working fine. that was never isssue. — Riddhi Shah, Sep 06 '18 at 08:34
@RahulKhurana my issue is dialog is getting cut off in landscape mode and due to that my button is not displayed. — Riddhi Shah, Sep 06 '18 at 08:36
You can put the whole view inside **Scrollview** and use **fillViewport** to true — Rahul Khurana, Sep 06 '18 at 09:49
@RahulKhurana I can not put the whole view inside the scrollview. as per the requirement i should not move the top fab. — Riddhi Shah, Sep 06 '18 at 11:35
@RahulKhurana rest of the views. I only wanted to scroll a particular layout (here relative layout) which i've already put it in the scrollview — Riddhi Shah, Sep 06 '18 at 11:40
@RahulKhurana the problem is the dialog window is getting cut off. — Riddhi Shah, Sep 06 '18 at 11:49
Yes i know, then how do you want it display? My suggestion you can decrease the textsize and space between views so that it could fit — Rahul Khurana, Sep 06 '18 at 11:51
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/179609/discussion-between-riddhi-and-rahul-khurana). — Riddhi Shah, Sep 07 '18 at 05:21

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

This is because your Dialog does not recreate after screen orientation change. And it is having old resource layout.

For solution, you can detect orientation change and recreate dialog if already opened. You can use onConfigurationChanged in your Activity for detecting orientation change.

@Override
public void onConfigurationChanged(Configuration newConfig) {
    super.onConfigurationChanged(newConfig);

    if (newConfig.orientation == Configuration.ORIENTATION_LANDSCAPE) {
        Toast.makeText(this, "landscape", Toast.LENGTH_SHORT).show();
    } else if (newConfig.orientation == Configuration.ORIENTATION_PORTRAIT){
        Toast.makeText(this, "portrait", Toast.LENGTH_SHORT).show();
    }

    if (inviteDialog !=null && inviteDialog.isShowing()){
        inviteDialog .dismiss(); 
        displayInviteDialog();
    }
}

private void displayInviteDialog() {
    contactList = new ArrayList<>();

    inviteDialog = new VeriDocDialog(ScratchAndWinActivity.this,
            VeriDocDialog.TYPE_INVITE,
            R.drawable.invite_32,
            getString(R.string.str_invite_instruction),
            getString(R.string.str_equation_invite),
            contactList, VeriDocDialog.TYPE_INVITE);


    inviteDialog.show();
}

And edit your manifest activity registration a bit.

<activity android:name=".YourActivity"
      android:configChanges="orientation">

Suggestion:

1> You should use match_parent for the parent layout element of Dialog.

android:layout_width="match_parent"
android:layout_height="match_parent"

2> Set Dialog height & width match_parent programatically also. See this answer

Update

Use NestedScrollView instead of ScrollView because ListView itself has scrolling property, that will cause conflicts.

Update

I created a sample, that is working fine in both the mode, you will be amazed to know I did not set any special property to dialog to make that work. Here is the sample.

import android.app.Dialog;
import android.content.Context;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.view.Window;
import android.view.WindowManager;
import android.widget.ArrayAdapter;
import android.widget.ListView;

import com.innovanathinklabs.sample.R;

/**
 * Created by KHEMRAJ on 8/29/2018.
 */
public class ListActivity extends AppCompatActivity {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        MyDialog dialog = new MyDialog(this);
        dialog.show();
        Window window = dialog.getWindow();
        window.setLayout(WindowManager.LayoutParams.MATCH_PARENT, WindowManager.LayoutParams.MATCH_PARENT);
    }

    public static class MyDialog extends Dialog {
        String[] mobileArray = {
                "Android", "IPhone", "WindowsMobile", "Blackberry",
                "WebOS", "Ubuntu", "Windows7", "Max OS X", "Android", "IPhone", "WindowsMobile", "Blackberry",
                "WebOS", "Ubuntu", "Windows7", "Max OS X", "Android", "IPhone", "WindowsMobile", "Blackberry",
                "WebOS", "Ubuntu", "Windows7", "Max OS X",
        };

        public MyDialog(@NonNull Context context) {
            super(context);
        }

        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.dialog_sample);
            ArrayAdapter adapter = new ArrayAdapter<>(getContext(),
                    R.layout.row_list, mobileArray);
            ListView listView = findViewById(R.id.listView);
            listView.setAdapter(adapter);
        }
    }
}

and dialog_sample.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">

    <!--in this view, horizontal and vertical both dialog has scrollable List and other view looks static-->

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="5">

        <!--place your all top content here-->
    </LinearLayout>

    <!--weight 1 is giving List view the available space. -->

    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="5"/>

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/app_name"/>

</LinearLayout>

Here is output

Please note that.

I did not to handle orientation, its working as expected.
I set weight to child views. So it is getting fit automatically in both orientation.
Issue in your xml layout was that you did not use weights/percentage, so content goes outside screen.

Finally after lots of efforts of days. my issue is solved. The problem was scrollview. In my XML, I did not apply XML to the whole view. After applying scrollview to the whole XML, and the problem solved. — Riddhi Shah, Sep 07 '18 at 10:31
That can be an way, but if you want that only List scroll, then you can use weights. By the way, I thought you have tried scrollView for the whole. — Khemraj Sharma, Sep 07 '18 at 10:50
Also remove code for handling orientation config change, that is useless. — Khemraj Sharma, Sep 07 '18 at 10:51
No No, I use that code. That was useful. as I have 2 files. 1 for portrait and one for landscape. — Riddhi Shah, Sep 07 '18 at 11:23
You can do that by only portrait xml. As I showed in my example. Or you can use your ScrollView in portrait mode. It will work also in Landscape mode. — Khemraj Sharma, Sep 07 '18 at 11:24
You are right. But When I tried in that way, It was not working. So, I took inspiration from your code and created my own version. That was working. I experimented that layout with scrollview only in landscape layout. — Riddhi Shah, Sep 07 '18 at 11:35

Jeel Vankhede · Answer 2 · 2018-09-04T07:07:30.060

0

In your VeriDocDialog class, go to method

private void setupVeriDocDialog() {
    if (getWindow() != null) {
        getWindow().setBackgroundDrawableResource (R.color.transparent);
        getWindow().setGravity(Gravity.CENTER);
        getWindow().getAttributes().windowAnimations = R.style.dialogAnimation;
        getWindow().setLayout(WindowManager.LayoutParams.MATCH_PARENT, WindowManager.LayoutParams.MATCH_PARENT); // Add this line and change your height & width acc.
        //Moreover you can add margin to dialog from all directions.
        requestWindowFeature(Window.FEATURE_NO_TITLE);
    }
}

This will help you display your dialog in landscape mode without any clipping.

For changing margins to dialog,

//Add this before showing dialog.
WindowManager.LayoutParams layoutParams = getWindow().getAttributes();
layoutParams.x = 10;// offset margin x in pixels, change value to whatever you want
layoutParams.y = 10;// offset margin y in pixels, change value to whatever you want
getWindow().setAttributes(layoutParams);

for reference WindowManager.LayoutParams

edited Sep 04 '18 at 07:07

answered Sep 04 '18 at 06:05

Jeel Vankhede

11,592
2
28
58

How do I set margins? – Riddhi Shah Sep 04 '18 at 06:38
Try using all hard coded values once for all params i.e. height, width etc. & check the result, i had issue when using constraint layout as root for dialog view. – Jeel Vankhede Sep 04 '18 at 08:47
Static values like this `layoutParams.x = 10;` , here 10 is static value which can be anything you want @Riddhi – Jeel Vankhede Sep 04 '18 at 09:34
same as the previous, nothing changes no results! :( – Riddhi Shah Sep 04 '18 at 09:55

score 0 · Answer 3 · answered Sep 06 '18 at 13:23

In my layout\activity_main.xml using

<ScrollView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:id="@+id/scrollView"
        android:visibility="visible">
....
</ScrollView>

In land\activity_main.xml

<HorizontalScrollView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:id="@+id/scrollView"
        android:visibility="visible">
....
</HorizontalScrollView>

I hope this will help you..!

Custom Dialog with listview on orientation change (landscape mode)

3 Answers3

Please note that.