I'm trying to show a RecyclerView ("mapRecyclerView") below another ConstraintLayout ("clientData) inside a ConstraintLayout but it presents a strange behavior: RecyclerView ("mapRecyclerView") has a Top Constraint to the bottom of another ConstraintLayout ("clientData"), if this ConstraintLayout has width as specific dp the recyclerview shows fine but if the ConstraintLayout has a width of "match_constraint" the RecyclerView is not visible anymore and the "afterMeasured" event of the RecyclerView is never called, here is the XML of the layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="0dp"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
android:background="#android:color/white"
android:elevation="4dp" app:layout_constraintStart_toStartOf="parent"
android:fontFamily="#font/gotham_rounded_book"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" android:theme="#style/custom_toolbar"/>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
android:layout_height="wrap_content" app:layout_constraintTop_toBottomOf="#+id/toolbar"
app:layout_constraintStart_toStartOf="parent"
android:id="#+id/clientData" android:background="#color/white"
app:layout_constraintEnd_toEndOf="parent">
<TextView
android:text="1"
android:layout_width="35dp"
android:layout_height="35dp"
android:id="#+id/activeServiceNumber"
android:background="#drawable/button_yellow_round_border" android:textAlignment="center"
android:textSize="18sp"
app:layout_constraintTop_toTopOf="#+id/name" android:layout_marginStart="8dp"
app:layout_constraintStart_toStartOf="parent"
android:fontFamily="#font/gotham_rounded_medium"
android:paddingTop="6dp" android:textColor="#color/white" android:layout_marginTop="8dp"/>
<TextView
android:text="TextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/name"
app:layout_constraintStart_toEndOf="#+id/activeServiceNumber" android:layout_marginStart="8dp"
android:fontFamily="#font/gotham_rounded_medium" android:textColor="#color/colorPrimaryText"
android:textSize="16sp" android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp" app:layout_constraintBottom_toTopOf="#+id/client"
app:layout_constraintTop_toTopOf="parent" android:layout_marginTop="8dp"
app:layout_constraintEnd_toStartOf="#+id/directionsBtn"/>
<TextView
android:text="TextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/client"
app:layout_constraintStart_toEndOf="#+id/activeServiceNumber" android:layout_marginStart="8dp"
android:fontFamily="#font/gotham_rounded_light" android:textSize="15sp" android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/address"
app:layout_constraintEnd_toStartOf="#+id/directionsBtn"/>
<TextView
android:text="TextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/address"
app:layout_constraintStart_toEndOf="#+id/activeServiceNumber" android:layout_marginStart="8dp"
android:fontFamily="#font/gotham_rounded_light" android:textSize="13sp" android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/phone"
app:layout_constraintEnd_toStartOf="#+id/directionsBtn"/>
<TextView
android:text="TextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/phone"
app:layout_constraintStart_toEndOf="#+id/activeServiceNumber" android:layout_marginStart="8dp"
android:textSize="13sp" android:fontFamily="#font/gotham_rounded_light" android:layout_marginEnd="8dp"
app:layout_constraintBottom_toBottomOf="parent" android:layout_marginBottom="16dp"
app:layout_constraintEnd_toStartOf="#+id/directionsBtn"/>
<Button
android:layout_width="wrap_content"
android:layout_height="0dp"
android:id="#+id/directionsBtn"
app:layout_constraintEnd_toEndOf="parent"
android:text="Mostrar \nRuta"
android:drawableTop="#drawable/ic_go_to_route" android:textAllCaps="false"
android:background="#color/white"
android:padding="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/ongoingServiceMap"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
android:clickable="true"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
tools:context="com.cargamos.cargamosdriver.views.service.OngoingServiceActivity"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintBottom_toBottomOf="parent" android:focusable="true"
app:layout_constraintTop_toBottomOf="#+id/clientData"/>
<androidx.recyclerview.widget.RecyclerView
android:layout_width="wrap_content"
android:layout_marginTop="32dp"
android:layout_marginBottom="32dp"
app:layout_constraintStart_toStartOf="#+id/ongoingServiceMap"
android:layout_marginStart="8dp"
android:id="#+id/mapRecyclerView"
android:background="#color/white"
app:layout_constraintBottom_toTopOf="#+id/confirmArrivalSlider"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="#+id/clientData"/>
<com.ncorti.slidetoact.SlideToActView
android:id="#+id/confirmArrivalSlider"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:text="Confirmar llegada"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:slider_height="60dp"
app:area_margin="4dp"
app:outer_color="#color/colorPrimary" app:text_style="bold" app:text_size="18dp"
android:layout_marginStart="32dp" android:layout_marginBottom="24dp" android:layout_marginEnd="32dp"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Depending on what items you have in your RecyclerView, you probably want to set the width of the RecyclerView to match_parent.
By the way, I can't reproduce the problem you describe in the preview
Related
I have views hierarchy like this:
and here is my xml:
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools" xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/constraintLayout_profile">
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent" android:id="#+id/swipeRefreshLayout_userControl">
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#android:color/white"
android:id="#+id/scrollView_user_control"
app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/imageView_profile_image_user_information"
android:layout_width="80dp"
android:layout_height="80dp"
android:src="#drawable/user"
app:civ_border_width="0.5dp"
app:civ_border_color="#FF000000" android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginStart="8dp" app:layout_constraintStart_toStartOf="parent"
android:layout_marginTop="16dp" app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:text="User Fullname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView_user_fullname_user_information" android:layout_marginTop="16dp"
app:layout_constraintTop_toBottomOf="#+id/imageView_profile_image_user_information"
app:layout_constraintEnd_toEndOf="parent" android:layout_marginEnd="8dp"
app:layout_constraintStart_toStartOf="parent" android:layout_marginStart="8dp"
android:textSize="18sp"/>
<TextView
android:text="user#email.com"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView_user_email_user_information" app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="8dp"
app:layout_constraintStart_toStartOf="parent" android:layout_marginStart="8dp"
app:layout_constraintTop_toBottomOf="#+id/textView_user_fullname_user_information"
android:layout_marginTop="8dp"/>
<TextView
android:text="AKAN DIHADIRI"
android:layout_width="0dp"
android:layout_height="35dp"
android:id="#+id/textView_will_come_user_information" app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent" android:layout_marginTop="16dp"
app:layout_constraintTop_toBottomOf="#+id/textView_user_email_user_information"
android:gravity="center|left"
android:paddingStart="16dp" android:background="#D2D1D6"/>
<ImageView
android:src="#drawable/ic_settings"
android:layout_width="30dp"
android:layout_height="30dp"
android:id="#+id/imageView_gear_setting_user_information"
app:layout_constraintTop_toTopOf="#+id/imageView_profile_image_user_information"
app:layout_constraintEnd_toEndOf="parent" android:layout_marginEnd="24dp"/>
<androidx.recyclerview.widget.RecyclerView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:scrollbars="vertical"
app:layout_constraintTop_toBottomOf="#+id/textView_will_come_user_information"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:listitem="#layout/item_general_event"
android:id="#+id/recyclerView_attended_event_user_control"
app:layout_constraintHorizontal_bias="1.0"
android:nestedScrollingEnabled="false">
</androidx.recyclerview.widget.RecyclerView>
<ImageView
android:id="#+id/imageView_verified_icon"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginTop="4dp"
android:layout_marginEnd="4dp"
app:layout_constraintEnd_toEndOf="#+id/imageView_profile_image_user_information"
app:layout_constraintTop_toTopOf="#+id/imageView_profile_image_user_information"
app:srcCompat="#drawable/verifiedicon" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
<ProgressBar
android:id="#+id/progressBar_user_control"
style="?android:attr/progressBarStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible" />
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
as you can see, there is recycler view inside my scroll view, and also there is a swipe refresh layout wrap it all.
I want my progress bar will always be in the center of the screen. I have tried to read from here: How to make a ProgressBar stay in the center of screen despite scrolling . it is said that
You need the ScrollView to be at same level as ProgressDialog in your
Layout
I have tried to implement that, like the image above, but I don't know why my progress bar will not appear in the screen.
if I put the progress bar inside the scroll view like this:
the progress bar will appear, but not in the center of the screen. it depends of the number of items inside my recycler view. so how to solve this ?
Place your ProgressBar at the bottom of outer ConstraintLayout. Check below:
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools" xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/constraintLayout_profile">
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent" android:id="#+id/swipeRefreshLayout_userControl">
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#android:color/white"
android:id="#+id/scrollView_user_control"
app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/imageView_profile_image_user_information"
android:layout_width="80dp"
android:layout_height="80dp"
android:src="#drawable/user"
app:civ_border_width="0.5dp"
app:civ_border_color="#FF000000" android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginStart="8dp" app:layout_constraintStart_toStartOf="parent"
android:layout_marginTop="16dp" app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:text="User Fullname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView_user_fullname_user_information" android:layout_marginTop="16dp"
app:layout_constraintTop_toBottomOf="#+id/imageView_profile_image_user_information"
app:layout_constraintEnd_toEndOf="parent" android:layout_marginEnd="8dp"
app:layout_constraintStart_toStartOf="parent" android:layout_marginStart="8dp"
android:textSize="18sp"/>
<TextView
android:text="user#email.com"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView_user_email_user_information" app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="8dp"
app:layout_constraintStart_toStartOf="parent" android:layout_marginStart="8dp"
app:layout_constraintTop_toBottomOf="#+id/textView_user_fullname_user_information"
android:layout_marginTop="8dp"/>
<TextView
android:text="AKAN DIHADIRI"
android:layout_width="0dp"
android:layout_height="35dp"
android:id="#+id/textView_will_come_user_information" app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent" android:layout_marginTop="16dp"
app:layout_constraintTop_toBottomOf="#+id/textView_user_email_user_information"
android:gravity="center|left"
android:paddingStart="16dp" android:background="#D2D1D6"/>
<ImageView
android:src="#drawable/ic_settings"
android:layout_width="30dp"
android:layout_height="30dp"
android:id="#+id/imageView_gear_setting_user_information"
app:layout_constraintTop_toTopOf="#+id/imageView_profile_image_user_information"
app:layout_constraintEnd_toEndOf="parent" android:layout_marginEnd="24dp"/>
<androidx.recyclerview.widget.RecyclerView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:scrollbars="vertical"
app:layout_constraintTop_toBottomOf="#+id/textView_will_come_user_information"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:listitem="#layout/item_general_event"
android:id="#+id/recyclerView_attended_event_user_control"
app:layout_constraintHorizontal_bias="1.0"
android:nestedScrollingEnabled="false">
</androidx.recyclerview.widget.RecyclerView>
<ImageView
android:id="#+id/imageView_verified_icon"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginTop="4dp"
android:layout_marginEnd="4dp"
app:layout_constraintEnd_toEndOf="#+id/imageView_profile_image_user_information"
app:layout_constraintTop_toTopOf="#+id/imageView_profile_image_user_information"
app:srcCompat="#drawable/verifiedicon" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
<ProgressBar
android:id="#+id/progressBar_user_control"
style="?android:attr/progressBarStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:visibility="visible" />
</androidx.constraintlayout.widget.ConstraintLayout>
I want to show a dialog with a title (header), body (content) and accept button (footer). I want header and footer to be visible even if content is longer than the screen height. If this is the case, I want body to be scrollable so that it can shrink. Here is what I tried, scrollView gets all the dialog space, no header and no footer is shown:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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="wrap_content"
android:fillViewport="true"
android:minWidth="300dp">
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#android:color/darker_gray"
android:text="Title"
app:layout_constraintBottom_toTopOf="#+id/bodyContainer"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ScrollView
android:id="#+id/bodyContainer"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="#+id/buttonContainer"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/title">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/text"
android:layout_width="match_parent"
android:layout_height="1500dp"
android:text="Long text" />
</LinearLayout>
</ScrollView>
<LinearLayout
android:id="#+id/buttonContainer"
android:layout_width="0dp"
android:layout_height="30dp"
android:background="#android:color/darker_gray"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/bodyContainer" />
</androidx.constraintlayout.widget.ConstraintLayout>
When your ScrollView's height is set to wrap_content the constraints will not limit the dimension if it gets too big to satisfy them. To fix this and enforce the top and bottom constraints, set app:layout_constrainedHeight="true" for your ScrollView.
Here is exactly what you just want. Use NestedScrollView instead of ScrollView:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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"
android:minWidth="300dp">
<TextView
android:id="#+id/title"
android:layout_width="411dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:background="#android:color/darker_gray"
android:text="Title"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<androidx.core.widget.NestedScrollView
android:id="#+id/bodyContainer"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/title"
app:layout_constraintBottom_toTopOf="#+id/button">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/text"
android:layout_width="match_parent"
android:layout_height="1500dp"
android:text="Long text" />
</LinearLayout>
</androidx.core.widget.NestedScrollView>
<Button
android:id="#+id/button"
android:layout_width="411dp"
android:layout_height="30dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:background="#android:color/darker_gray"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0" />
</androidx.constraintlayout.widget.ConstraintLayout>
I have an activity LoginActivity and a fragment SignupSocialFragment.
The fragment is loaded inside of the FrameLayout inside the activity.
The problem is, that the LinearLayout (social_login_footer) in fragment which is constrained to the bottom of its parent is cut of when the fragment is displayed in the activity.
When I add padding/margin to the social_login_footerI can shift it into view but this does not work reliable.
Can anyone help with why the bottom part is cut of?
Shouldnt the ConstraintLayout match the height of its parent FrameLayout.
Code
activity_login.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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/login_constraint"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorBlack"
tools:context=".ui.login.LoginActivity">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/login_constraint_2"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.airbnb.lottie.LottieAnimationView
android:id="#+id/login_lottie_animation"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:lottie_autoPlay="true"
app:lottie_fileName="background_rotation.json"
app:lottie_loop="true" />
</androidx.constraintlayout.widget.ConstraintLayout>
<ImageView
android:id="#+id/login_logo"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:adjustViewBounds="true"
android:contentDescription="#string/app_name"
android:scaleType="centerInside"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.050000012"
app:srcCompat="#drawable/logo_white" />
<TextView
android:id="#+id/login_logo_subtitle"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:text="#string/slogan"
android:textColor="#color/colorWhite"
android:textSize="16sp"
android:translationY="-10dp"
app:layout_constraintEnd_toEndOf="#+id/login_logo"
app:layout_constraintStart_toStartOf="#+id/login_logo"
app:layout_constraintTop_toBottomOf="#id/login_logo" />
<FrameLayout
android:id="#+id/login_content"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="16dp"
app:layout_constraintTop_toBottomOf="#+id/login_logo_subtitle"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
fragment_login_social.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#300000CC "
android:paddingStart="32dp"
android:paddingEnd="32dp"
tools:context=".ui.login.SignupSocialFragment">
<TextView
android:id="#+id/login_social_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="32dp"
android:fontFamily="#font/montserrat_light"
android:text="#string/login_subtitle"
android:textAlignment="center"
android:textSize="16sp"
app:layout_constraintBottom_toTopOf="#+id/social_login_email"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/social_login_email"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:text="#string/email_signup_btn"
app:layout_constraintBottom_toTopOf="#+id/social_login_facebook"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/login_social_text" />
<Button
android:id="#+id/social_login_facebook"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_marginBottom="8dp"
app:icon="#drawable/facebook_logo"
app:iconGravity="textStart"
app:layout_constraintBottom_toTopOf="#+id/social_login_google"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/social_login_email" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/social_login_google"
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_marginTop="16dp"
android:background="#color/colorWhite"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/social_login_facebook">
<TextView
android:id="#+id/social_login_google_txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="#string/google_signup_btn"
android:textColor="#android:color/black"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/social_login_google_logo"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_marginEnd="8dp"
android:src="#drawable/googleg_standard_color_18"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/social_login_google_txt"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<TextView
android:id="#+id/social_login_member"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:padding="4dp"
android:text="#string/already_member"
android:textSize="16sp"
android:clickable="true"
android:focusable="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/social_login_google" />
<LinearLayout
android:id="#+id/social_login_footer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent">
<TextView
android:id="#+id/login_version"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/app_version"
android:layout_marginEnd="4dp"
android:textSize="12sp" />
<TextView
android:id="#+id/login_policy"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:text="#string/privacy_link"
android:textSize="12sp" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Layout blueprints
Rendered on Nexus 5X API 28
After wasting some hours of my precious lifetime I have finally found it.
The problem is caused by the ImageViews android:adjustViewBounds="true" attribute.
After removing it everything works as expected.
Try adding android:fitsSystemWindows="true" to fragment_login_social.xml first child view
I'm seeing a ConstraintLayout occasionally fail to draw correctly, but only when I switch between fragments, and I'm not seeing why.
It looks like this initially:
But, after switching tabs, it looks like this:
fragment_overview.xml (The Fragment layout)
<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"
android:background="#color/palette_grey_light"
android:clipToPadding="false"
android:paddingTop="16dp">
<uk.lobsterdoodle.edinburghwolves.view.FixtureView
android:id="#+id/overview_fixture_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
... a few other views ...
</android.support.constraint.ConstraintLayout>
fixture_view.xml (The custom view layout, FixtureView)
<?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="wrap_content">
<View
android:id="#+id/fixture_away_color"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#color/palette_red"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/fixture_home_color"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<View
android:id="#+id/fixture_home_color"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#color/palette_grey"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toEndOf="#+id/fixture_away_color"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/fixture_away_team_score"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="27"
android:textColor="#color/palette_white"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="#+id/fixture_away_team_name"
app:layout_constraintStart_toStartOf="#+id/fixture_away_team_name"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/fixture_away_team_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="32dp"
android:text="WOLVES"
android:textColor="#color/palette_white"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/fixture_home_color"
app:layout_constraintTop_toBottomOf="#+id/fixture_away_team_score"
app:layout_constraintVertical_bias="0.0"
android:layout_marginTop="0dp"/>
<TextView
android:id="#+id/fixture_home_team_score"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="21"
android:textColor="#color/palette_white"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="#+id/fixture_home_team_name"
app:layout_constraintStart_toStartOf="#+id/fixture_home_team_name"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/fixture_home_team_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginStart="32dp"
android:text="PIRATES"
android:textColor="#color/palette_white"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#+id/fixture_home_color"
android:layout_marginTop="0dp"
app:layout_constraintTop_toBottomOf="#+id/fixture_home_team_score"/>
<TextView
android:id="#+id/fixture_state"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:text="FINAL"
android:textColor="#color/palette_white"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="#+id/fixture_away_team_score"
android:layout_marginBottom="0dp"
/>
</android.support.constraint.ConstraintLayout>
While your fixture_view.xml file constrains views in the ConstraintLayout properly, a view in the ConstraintLayout in fragment_overview.xml isn't constrained, so they won't display properly at runtime. Add some some constraints to your FixtureView in fragment_overview.xml like so:
<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"
android:background="#color/palette_grey_light"
android:clipToPadding="false"
android:paddingTop="16dp">
<!-- You were missing constraints here -->
<uk.lobsterdoodle.edinburghwolves.view.FixtureView
android:id="#+id/overview_fixture_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
app:cardBackgroundColor="#color/palette_white"
app:cardElevation="2dp"
app:contentPadding="16dp"
app:layout_constraintTop_toBottomOf="#id/overview_fixture_view"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="standings"
android:textColor="#color/palette_grey"/>
</android.support.v7.widget.CardView>
</android.support.constraint.ConstraintLayout>
Fixed, by making the score TextView's height wrap_content instead of matching constraint of 0dp
<TextView
android:id="#+id/fixture_away_team_score"
android:layout_width="wrap_content"
android:layout_height="wrap_content" <-- wrap, not 0dp
...
/>
CardView in ConstraintLayout Not Wrapping Height.
Facing the similar issue with stable CL library:
compile 'com.android.support.constraint:constraint-layout:1.0.2'
Android Studio: 2.3.2
Observations:
Setting hardcoded cardview-height fixes the issue.
Changing CardView with RelativeLayout fixes.
Is there still an issue with Cardview that it is finding hard to cope up with ConstraintLayout.
XML:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="25dp">
<android.support.v7.widget.CardView
android:id="#+id/cardView"
android:layout_width="0dp"
android:layout_height="122dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
app:cardBackgroundColor="#color/io15_blue_grey_100"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHeight_default="wrap"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_default="spread">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/mobLeftIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="#+id/mobInputLayout"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/mobInputLayout"
app:layout_constraintTop_toTopOf="#+id/mobInputLayout"
app:srcCompat="#drawable/ic_up" />
<android.support.design.widget.TextInputLayout
android:id="#+id/mobInputLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
app:layout_constraintLeft_toRightOf="#+id/mobLeftIcon"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<EditText
android:id="#+id/editText4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Mobile Number"
android:text="123123123" />
</android.support.design.widget.TextInputLayout>
<ImageView
android:id="#+id/phoneLeftIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="#+id/phoneInputLayout"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/phoneInputLayout"
app:layout_constraintTop_toTopOf="#+id/phoneInputLayout"
app:srcCompat="#drawable/ic_up" />
<android.support.design.widget.TextInputLayout
android:id="#+id/phoneInputLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
app:layout_constraintLeft_toRightOf="#+id/phoneLeftIcon"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/mobInputLayout">
<EditText
android:id="#+id/editText5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Telphone Number"
android:text="123123123" />
</android.support.design.widget.TextInputLayout>
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
</android.support.constraint.ConstraintLayout>
Screenshot:
To make CardView wrap content represented by ConstraintLayout, you have to add 3 chains to views inside ConstraintLayout:
Horizontal spread chain between mobLeftIcon and mobInputLayout
Horizontal spread chain between phoneLeftIcon and phoneInputLayout
Vertical spread chain between mobInputLayout and phoneInputLayout
See this screenshot of Layout Editor:
Here's the final source code for your layout:
<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">
<android.support.v7.widget.CardView
android:id="#+id/cardView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/mobLeftIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginStart="16dp"
android:layout_marginBottom="8dp"
app:srcCompat="#drawable/ic_up"
app:layout_constraintTop_toTopOf="#+id/mobInputLayout"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="#+id/mobInputLayout"
app:layout_constraintEnd_toStartOf="#+id/mobInputLayout"
app:layout_constraintHorizontal_chainStyle="spread" />
<android.support.design.widget.TextInputLayout
android:id="#+id/mobInputLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginStart="16dp"
android:layout_marginEnd="8dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="#+id/mobLeftIcon"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toTopOf="#+id/phoneInputLayout"
app:layout_constraintVertical_chainStyle="spread">
<EditText
android:id="#+id/editText4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Mobile Number"
android:text="123123123" />
</android.support.design.widget.TextInputLayout>
<ImageView
android:id="#+id/phoneLeftIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginStart="16dp"
android:layout_marginBottom="8dp"
app:srcCompat="#drawable/ic_up"
app:layout_constraintTop_toTopOf="#+id/phoneInputLayout"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="#+id/phoneInputLayout"
app:layout_constraintEnd_toStartOf="#+id/phoneInputLayout"
app:layout_constraintHorizontal_chainStyle="spread" />
<android.support.design.widget.TextInputLayout
android:id="#+id/phoneInputLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginStart="16dp"
android:layout_marginEnd="8dp"
app:layout_constraintTop_toBottomOf="#+id/mobInputLayout"
app:layout_constraintStart_toEndOf="#+id/phoneLeftIcon"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
<EditText
android:id="#+id/editText5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Telphone Number"
android:text="123123123" />
</android.support.design.widget.TextInputLayout>
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
</android.support.constraint.ConstraintLayout>
As a result, you get something like:
<android.support.v7.widget.CardView
android:id="#+id/cardView"
android:layout_width="0dp"
android:layout_height="122dp"
You can use the height as 0dp and use the line
app:layout_constraintHeight_default="wrap"