Displaying ConstraintLayout in a DialogFragment

Question

I hope you can help me out with a problem. I tried to google it, and looked through the topics here, but was unable to find an answer.

I recently changed my layouts to ConstraintLayouts, and this have been working great so far. My problem however is i had some DialogFragments displaying a LinearLayout, and when i changed it to ConstraintLayout i only shows a faded overlay, but non of the elements in the layout. If i hardcode the width and height to something like 100dp, it will display that area. When i try match_parent or any other combination the same problem applies. I also tried setting the height and width to the device height and width but still with no luck.

In the onCreateView in my CreateWeddingMetadataFragment i have:

createButton.setOnClickListener(new View.OnClickListener() {         @Override         public void onClick(View v) {             Log.d(TAG, "Show message dialog");              FragmentManager fm = getFragmentManager();             CreateWeddingMetadataDialogFragment welcomeMessageDialog = new CreateWeddingMetadataDialogFragment();             welcomeMessageDialog.show(fm, "metadate_fragment_dialog");             welcomeMessageDialog.setOnDismissListener(new DialogInterface.OnDismissListener() {                 @Override                 public void onDismiss(DialogInterface dialog) {                 }             }); 

In my CreateWeddingMetadataFragmentDialog i have:

public class CreateWeddingMetadataDialogFragment extends DialogFragment{  private static final String TAG = CreateWeddingMetadataDialogFragment.class.getSimpleName();  public Button setupNow, setupLater; public TextView mTest; public ConstraintLayout parentLayout;  private DialogInterface.OnDismissListener onDismissListener;    public void setOnDismissListener(DialogInterface.OnDismissListener onDismissListener) {     this.onDismissListener = onDismissListener; }  @Override public void onDismiss(DialogInterface dialog) {     super.onDismiss(dialog);     if (onDismissListener != null) {         onDismissListener.onDismiss(dialog);     } }  @Override public void onCreate(@Nullable Bundle savedInstanceState) {     super.onCreate(savedInstanceState);     Log.d(TAG, "I was called"); }  public CreateWeddingMetadataDialogFragment(){}  @Override public View onCreateView(LayoutInflater inflater, ViewGroup container,                          Bundle savedInstanceState) {     View view = inflater.inflate(R.layout.create_welcome_message_view, container);      setupNow = (Button) view.findViewById(R.id.setupNowButton);     setupLater = (Button) view.findViewById(R.id.setupLaterButton);     mTest = (TextView) view.findViewById(R.id.welcomeMessageTitle);     parentLayout = (ConstraintLayout) view.findViewById(R.id.clWelcomeMessage);      DisplayMetrics displayMetrics = getResources().getDisplayMetrics();     int width = displayMetrics.widthPixels;     int height = displayMetrics.heightPixels;      parentLayout.setMinimumWidth(width);     parentLayout.setMinimumHeight(height);      mTest.setText("Test");     Log.d(TAG, "I was called onCreateView" + mTest);      setupNow.setOnClickListener(new View.OnClickListener() {         @Override         public void onClick(View view) {             //Go to metadate page (Hide this dialog)         }     });      setupLater.setOnClickListener(new View.OnClickListener() {         @Override         public void onClick(View view) {             //Go to signin page and create the wedding         }     });       return view; } 

}

That is with my current try of setting it to the device size.

And here is the create_welcome_message_view:

<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout 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"                                          xmlns:tools="http://schemas.android.com/tools"                                          android:orientation="vertical"                                          android:id="@+id/clWelcomeMessage">    <Button     android:text="DET GØR JEG SENERE"     android:layout_width="0dp"     android:layout_height="0dp"     android:id="@+id/setupLaterButton"     app:layout_constraintTop_toTopOf="@+id/guideline19"     app:layout_constraintBottom_toTopOf="@+id/guideline20"     android:layout_marginEnd="16dp"     app:layout_constraintRight_toRightOf="parent"     android:layout_marginRight="16dp"     android:layout_marginStart="16dp"     app:layout_constraintLeft_toLeftOf="parent"     android:layout_marginLeft="16dp"     android:background="@drawable/border"     android:layout_marginTop="2dp"     android:textColor="@color/colorPrimaryDark"/>  <Button     android:text="JEG VIL OPSÆTTE DEN NU"     android:layout_width="0dp"     android:layout_height="0dp"     android:id="@+id/setupNowButton"     app:layout_constraintTop_toTopOf="@+id/guideline12"     app:layout_constraintBottom_toTopOf="@+id/guideline19"     android:layout_marginEnd="16dp"     app:layout_constraintRight_toRightOf="parent"     android:layout_marginRight="16dp"     android:layout_marginStart="16dp"     app:layout_constraintLeft_toLeftOf="parent"     android:layout_marginLeft="16dp"     android:background="@color/colorPrimaryDark"     android:layout_marginBottom="2dp"     android:textColor="@color/White"/>  <TextView     android:text="EN PERSONLIG VELKOMST"     android:layout_width="0dp"     android:layout_height="0dp"     android:id="@+id/welcomeMessageTitle"     android:layout_marginTop="16dp"     app:layout_constraintTop_toTopOf="parent"     android:layout_marginEnd="32dp"     app:layout_constraintRight_toRightOf="parent"     android:layout_marginRight="32dp"     android:layout_marginStart="32dp"     app:layout_constraintLeft_toLeftOf="parent"     android:layout_marginLeft="32dp"     app:layout_constraintBottom_toTopOf="@+id/textView5"     android:layout_marginBottom="8dp"     android:textAlignment="center"     android:textSize="16sp"/>  <TextView     android:text="Nu skal I definere den velkomst, som jeres gæster får i appen. I kan skrive navnet på brylluppet, en hlsen og har mulighed at vælge et coverbillede"     android:layout_width="0dp"     android:layout_height="0dp"     android:id="@+id/textView5"     app:layout_constraintTop_toTopOf="@+id/guideline14"     android:layout_marginEnd="32dp"     app:layout_constraintRight_toRightOf="parent"     android:layout_marginRight="32dp"     app:layout_constraintBottom_toTopOf="@+id/textView6"     android:layout_marginBottom="8dp"     android:layout_marginStart="32dp"     app:layout_constraintLeft_toLeftOf="parent"     android:layout_marginLeft="32dp"     android:textAlignment="center"/>  <android.support.constraint.Guideline     android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:id="@+id/guideline12"     android:orientation="horizontal"     tools:layout_editor_absoluteY="204dp"     tools:layout_editor_absoluteX="0dp"     app:layout_constraintGuide_percent="0.4"/>  <TextView     android:text="Du vil altid kunne ændre din opsætning af velkomsten i din brugerprofil."     android:layout_width="0dp"     android:layout_height="0dp"     android:id="@+id/textView6"     app:layout_constraintBottom_toTopOf="@+id/guideline12"     android:layout_marginBottom="8dp"     app:layout_constraintTop_toTopOf="@+id/guideline15"     android:layout_marginStart="32dp"     app:layout_constraintLeft_toLeftOf="parent"     android:layout_marginLeft="32dp"     android:layout_marginEnd="32dp"     app:layout_constraintRight_toRightOf="parent"     android:layout_marginRight="32dp"     android:textAlignment="center"     app:layout_constraintHorizontal_bias="0.0"     app:layout_constraintVertical_bias="1.0"/>  <android.support.constraint.Guideline     android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:id="@+id/guideline14"     android:orientation="horizontal"     tools:layout_editor_absoluteY="51dp"     tools:layout_editor_absoluteX="0dp"     app:layout_constraintGuide_percent="0.1"/>  <android.support.constraint.Guideline     android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:id="@+id/guideline15"     android:orientation="horizontal"     tools:layout_editor_absoluteY="153dp"     tools:layout_editor_absoluteX="0dp"     app:layout_constraintGuide_percent="0.3"/>  <android.support.constraint.Guideline     android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:id="@+id/guideline19"     android:orientation="horizontal"     tools:layout_editor_absoluteY="255dp"     tools:layout_editor_absoluteX="0dp"     app:layout_constraintGuide_percent="0.5"/>  <android.support.constraint.Guideline     android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:id="@+id/guideline20"     android:orientation="horizontal"     tools:layout_editor_absoluteY="305dp"     tools:layout_editor_absoluteX="0dp"     app:layout_constraintGuide_percent="0.6"/>  </android.support.constraint.ConstraintLayout> 

If you need any additional information let me know, and thanks in advance.

Answer 1

This works fine - check out

1) Its good practice to arrange items in order where possible in XML too as visualized. Just to easily comprehend later. 2) Its looks every other element is constraining itself to others height and width and mostly resulting in 0 height and width. Watch out for 0dp and wrap_content on LayoutParams. 3) Take support of Vertical Bias too.

<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout android:id="@+id/clWelcomeMessage" 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:layout_height="wrap_content" android:orientation="vertical">  <android.support.constraint.Guideline     android:id="@+id/guideline_ver_16"     android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:orientation="vertical"     app:layout_constraintGuide_begin="@dimen/sixteenDP"/> <android.support.constraint.Guideline     android:id="@+id/guideline_ver_end_16"     android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:orientation="vertical"     app:layout_constraintGuide_end="@dimen/sixteenDP"/>  <TextView   android:id="@+id/welcomeMessageTitle"   android:layout_width="wrap_content"   android:layout_height="wrap_content"   android:layout_marginBottom="8dp"   android:layout_marginEnd="32dp"   android:layout_marginLeft="32dp"   android:layout_marginRight="32dp"   android:layout_marginStart="32dp"   android:layout_marginTop="16dp"   android:text="EN PERSONLIG VELKOMST"   android:textAlignment="center"   android:textSize="16sp"   app:layout_constraintBottom_toTopOf="@+id/textView5"   app:layout_constraintHorizontal_bias="0.5"   app:layout_constraintLeft_toLeftOf="parent"   app:layout_constraintRight_toRightOf="parent"   app:layout_constraintTop_toTopOf="parent"/>  <android.support.constraint.Guideline  android:id="@+id/guideline1"  android:layout_width="wrap_content"  android:layout_height="wrap_content"  android:orientation="horizontal"  app:layout_constraintGuide_percent="0.1"/> <android.support.constraint.Guideline  android:id="@+id/guideline2"  android:layout_width="wrap_content"  android:layout_height="wrap_content"  android:orientation="horizontal"  app:layout_constraintGuide_percent="0.2"/>  <TextView  android:id="@+id/textView5"  android:layout_width="0dp"  android:layout_height="wrap_content"  android:layout_marginBottom="8dp"  android:text="Nu skal I definere den velkomst, som jeres gæster får i   appen.   I kan skrive navnet på brylluppet, en hlsen og har mulighed at vælge et   coverbillede"  android:textAlignment="center"  app:layout_constraintEnd_toEndOf="@+id/guideline_ver_end_16"  app:layout_constraintHorizontal_bias="0.5"  app:layout_constraintStart_toStartOf="@+id/guideline_ver_16"  app:layout_constraintTop_toBottomOf="@+id/guideline2"/>  <TextView  android:id="@+id/textView6"  android:layout_width="0dp"  android:layout_height="wrap_content"  android:layout_marginBottom="8dp"  android:layout_marginEnd="16dp"  android:layout_marginLeft="16dp"  android:layout_marginRight="16dp"  android:layout_marginStart="16dp"  android:layout_marginTop="8dp"  android:text="Du vil altid kunne ændre din opsætning af velkomsten i din   brugerprofil."  android:textAlignment="center"  app:layout_constraintBottom_toTopOf="@+id/setupNowButton"  app:layout_constraintHorizontal_bias="0.0"  app:layout_constraintLeft_toLeftOf="@+id/guideline_ver_16"  app:layout_constraintRight_toRightOf="@+id/guideline_ver_end_16"  app:layout_constraintTop_toBottomOf="@+id/textView5"/>   <Button  android:id="@+id/setupNowButton"  android:layout_width="0dp"  android:layout_height="wrap_content"  android:layout_marginBottom="8dp"  android:layout_marginEnd="16dp"  android:layout_marginLeft="16dp"  android:layout_marginRight="16dp"  android:layout_marginStart="16dp"  android:layout_marginTop="8dp"  android:background="@color/colorPrimaryDark"  android:text="JEG VIL OPSÆTTE DEN NU"  android:textColor="@color/White"  app:layout_constraintBottom_toTopOf="@+id/setupLaterButton"  app:layout_constraintHorizontal_bias="0.0"  app:layout_constraintLeft_toLeftOf="parent"  app:layout_constraintRight_toRightOf="parent"  app:layout_constraintTop_toBottomOf="@+id/textView6"  app:layout_constraintVertical_bias="1.0"/>   <android.support.constraint.Guideline  android:id="@+id/guideline6"  android:layout_width="wrap_content"  android:layout_height="wrap_content"  android:orientation="horizontal"  app:layout_constraintGuide_percent="0.6"/>  <Button     android:id="@+id/setupLaterButton"     android:layout_width="0dp"     android:layout_height="wrap_content"     android:layout_marginBottom="8dp"     android:layout_marginEnd="16dp"     android:layout_marginLeft="16dp"     android:layout_marginRight="16dp"     android:layout_marginStart="16dp"     android:text="DET GØR JEG SENERE"     android:background="@drawable/border"     android:textColor="@color/colorPrimaryDark"     app:layout_constraintBottom_toBottomOf="parent"     app:layout_constraintHorizontal_bias="0.5"     app:layout_constraintLeft_toLeftOf="parent"     app:layout_constraintRight_toRightOf="parent"     app:layout_constraintTop_toTopOf="@+id/guideline6"     app:layout_constraintVertical_bias="1.0"/>   </android.support.constraint.ConstraintLayout> 

Also, app:layout_constraintWidth_default="wrap" (with width set to 0dp). If set, the widget will have the same size as if using wrap_content, but will be limited by constraints (i.e. it won't expand beyond them). Supporting resource