Dialog, setting shadow - android

I'm writing an application for a project. My question is how can I set shadow beetween the first and the second constraint layout?
Should I need to create a xml in drawabale to add to the main one?
I post the xml below and if it is necessary to place the java code also.
<?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:id="#+id/constraintLayout"
android:layout_width="350dp"
android:layout_height="310dp"
android:background="#ff6600">
<android.support.constraint.ConstraintLayout
android:layout_width="290dp"
android:layout_height="266dp"
android:background="#f2f2f2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.266"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.491">
<TextView
android:id="#+id/textView"
android:layout_width="212dp"
android:layout_height="157dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:gravity="center"
android:text="Vuoi registrarti al Torneo?"
android:textAlignment="center"
android:textColor="#000"
android:textSize="20dp"
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.105" />
<Button
android:id="#+id/Btn_yes"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="SI"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/Btn_No"
app:layout_constraintHorizontal_bias="0.508"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView"
app:layout_constraintVertical_bias="0.512" />
<Button
android:id="#+id/Btn_No"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="NO"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.845"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView"
app:layout_constraintVertical_bias="0.512" />
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
Thanks for the answers.


You can use Cardview Like this:
app:cardUseCompactPadding = "true"
Also mention android:hardwareAccelerated="true" in your manifest file
<android.support.v7.widget.CardView
android:id="#+id/card_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginRight="5dp"
app:cardBackgroundColor="#color/colorprimary"
app:cardCornerRadius="5dp"
app:cardUseCompatPadding="true"
app:elevation="0dp">
</android.support.v7.widget.CardView>

Related

Fragments ConstraintLayout is cut of in FrameLayout of activity

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

how to prevent imageView from shrinking beyond the size of its containing items in constraint layout?

I am designing a constraint layout for an android application and I want the layout to look something like this:
The problem is that as soon as I constraint the height of the image views, they shrink until there is nothing left. I want the image views to have at least as much height as the text views they surround, plus a little padding. How can I do that without specifying an absolute height for the image views?
Here is my XML code:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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="#color/colorPrimaryLightBlue">
<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="wrap_content">
<ImageView
android:id="#+id/imageView12"
android:layout_width="0dp"
android:layout_height="125dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView13"
app:srcCompat="#drawable/button_round_bg_off" />
<ImageView
android:id="#+id/imageView14"
android:layout_width="0dp"
android:layout_height="125dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView12"
app:srcCompat="#drawable/button_round_bg_off" />
<ImageView
android:id="#+id/imageView13"
android:layout_width="0dp"
android:layout_height="125dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/button_round_bg_off" />
<TextView
android:id="#+id/textView15"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/imageView14"
app:layout_constraintEnd_toEndOf="#+id/imageView14"
app:layout_constraintStart_toStartOf="#+id/imageView14"
app:layout_constraintTop_toTopOf="#+id/imageView14" />
<TextView
android:id="#+id/textView17"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/imageView12"
app:layout_constraintEnd_toEndOf="#+id/imageView12"
app:layout_constraintStart_toStartOf="#+id/imageView12"
app:layout_constraintTop_toTopOf="#+id/imageView12" />
<TextView
android:id="#+id/textView16"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/imageView13"
app:layout_constraintEnd_toEndOf="#+id/imageView13"
app:layout_constraintStart_toStartOf="#+id/imageView13"
app:layout_constraintTop_toTopOf="#+id/imageView13" />
</android.support.constraint.ConstraintLayout>

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
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="#android:color/holo_blue_bright">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView12"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:contentDescription="Image description."
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView13"
app:layout_constraintBottom_toTopOf="#id/imageView14" />
<ImageView
android:id="#+id/imageView14"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:contentDescription="Image description."
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView12"
app:layout_constraintBottom_toBottomOf="parent"
app:srcCompat="#android:drawable/alert_dark_frame" />
<ImageView
android:id="#+id/imageView13"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:contentDescription="Image description."
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/imageView12"
app:srcCompat="#android:drawable/alert_dark_frame" />
<TextView
android:id="#+id/textView15"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:padding="15dp"
android:text="TextView"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="#+id/imageView14"
app:layout_constraintEnd_toEndOf="#+id/imageView14"
app:layout_constraintStart_toStartOf="#+id/imageView14"
app:layout_constraintTop_toTopOf="#+id/imageView14" />
<TextView
android:id="#+id/textView17"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:padding="15dp"
android:text="TextView"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="#+id/imageView12"
app:layout_constraintEnd_toEndOf="#+id/imageView12"
app:layout_constraintStart_toStartOf="#+id/imageView12"
app:layout_constraintTop_toTopOf="#+id/imageView12" />
<TextView
android:id="#+id/textView16"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:padding="15dp"
android:text="TextView"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="#+id/imageView13"
app:layout_constraintEnd_toEndOf="#+id/imageView13"
app:layout_constraintStart_toStartOf="#+id/imageView13"
app:layout_constraintTop_toTopOf="#+id/imageView13" />
</android.support.constraint.ConstraintLayout>
</ScrollView>
Use the above code and save the "Image description." in the strings.xml file and as you can notice that the imageView12 is not having app:srcCompat attribute in which you are specifying your drawable but still all the three image views are having the same distribution in terms of space occupied by them. Also, I have given padding of "15dp" to all the three text views which you may manage as per your requirement. Hope this helps you.

There is one magical attribute in ConstraintLayout.
app:layout_constraintHeight_min="wrap"
And I think you have constraint reversed. ImageView should constraintTo the TextView.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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="#2222">
<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">
<TextView
android:id="#+id/textView16"
android:layout_width="0dp"
android:layout_height="60dp"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/imageView13"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView13"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:padding="2dp"
app:layout_constraintBottom_toBottomOf="#+id/textView16"
app:layout_constraintEnd_toStartOf="#+id/textView16"
app:layout_constraintHeight_min="wrap"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/textView16"
app:srcCompat="#drawable/ic_message_check" />
</android.support.constraint.ConstraintLayout>
</ScrollView>
This will not allow ImageView's height to go below "wrap_content" value. But if you chose this you will have to make sure height of the TextView will be at least that of "wrap" of the ImageView.
But this should be the only caveat. ImageView will automatically resize based on height of the TextView(and wrap of the width)

RecyclerView in ConstraintLayout overlapping other elements

I'm doing a simple list activity with the following components: an EditText, a RecyclerView, a ProgressBar and a Textview. Everything works really well, except for the RecyclerView which overlaps the EditText and goes "beyond" the screen bottom so the last item is partially cut out (see the screenshots).
What an I doing wrong?
MainActivity:
<?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:context="jacopo.com.flickrgallery.GalleryActivity">
<EditText
android:id="#+id/search_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:hint="search by tag..."
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ProgressBar
android:id="#+id/gallery_progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/search_text" />
<android.support.v7.widget.RecyclerView
android:id="#+id/gallery_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/search_text" />
<TextView
android:id="#+id/gallery_error"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/search_text"
tools:text="error" />
</android.support.constraint.ConstraintLayout>

You are using android:layout_height="wrap_content" for RecyclerView
but it's looks like you need to limit height. Try it with android:layout_height="0dp". In this case it is equals to app:layout_constraintTop_toBottomOf="#+id/search_text" and app:layout_constraintBottom_toBottomOf="parent"

I had the exact same problem, and adding
app:layout_constrainedHeight="true"
to the RecyclerView solved it.

try following, you have to set topConstraint of recyclerview to edittext
<?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" >
<EditText
android:id="#+id/search_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:hint="search by tag..."
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ProgressBar
android:id="#+id/gallery_progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/search_text" />
<android.support.v7.widget.RecyclerView
android:id="#+id/gallery_list"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/search_text" />
<TextView
android:id="#+id/gallery_error"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/search_text"
tools:text="error" />
</android.support.constraint.ConstraintLayout>
Output :

For some reason adding proper constraints and setting height as 0dp did not work for me(Even though it should work for most of the cases)
So I added a frame layout as the parent of the recycler view and set the height and width of recycler view as match_parent added the constraints to the frame layout.
This stopped the overlapping issue

In RecyclerView add this:
app:layout_constraintStart_toEndOf="#+id/search_text"

You pass the same id to each view, modify your code with this.
<?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">
<EditText
android:id="#+id/search_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:hint="search by tag..."
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<ProgressBar
android:id="#+id/gallery_progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/search_text"
tools:layout_editor_absoluteX="376dp" />
<android.support.v7.widget.RecyclerView
android:id="#+id/gallery_list"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/search_text"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<TextView
android:id="#+id/gallery_error"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/search_text"
tools:text="error"
tools:layout_editor_absoluteX="385dp" />
</android.support.constraint.ConstraintLayout>
Happy coding!!

Just use
app:layout_constraintVertical_bias="0.0"
in recyclerView tag.
hope this helps.

Change your XML file to below code.
<?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">
<EditText
android:id="#+id/search_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:hint="search by tag..."
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ProgressBar
android:id="#+id/gallery_progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/search_text" />
<android.support.v7.widget.RecyclerView
android:id="#+id/gallery_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintStart_toEndOf="#+id/search_text" />
<TextView
android:id="#+id/gallery_error"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/search_text"
tools:text="error" />
</android.support.constraint.ConstraintLayout>
Try this and let me know if this worked for you.

I face this problem when I am building a music player app I solve my problem to give the height of recyclerview 0dp IDK how it's work but my problem was solved

Strange rendering of my listItems in a recyclerview

I can't figure out why my listItem's are rendering in a strange way. I have checked the constraints and everything seems fine. Here is a picture of what I'm getting at display time vs run time:
Here is my XML for the layout:
<?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:id="#+id/list_item_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:layout_editor_absoluteY="81dp"
tools:layout_editor_absoluteX="0dp">
<ImageView
android:id="#+id/customer_picture"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
app:srcCompat="#mipmap/ic_launcher"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="8dp"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp"/>
<TextView
android:id="#+id/customer_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="0dp"
android:layout_marginRight="8dp"
android:layout_marginTop="8dp"
app:layout_constraintLeft_toRightOf="#+id/customer_picture"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="First Name: Last Name:"/>
<TextView
android:id="#+id/customer_address"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
tools:text="1543 W Kendall Blvd"
app:layout_constraintLeft_toRightOf="#+id/customer_picture"
android:layout_marginLeft="16dp"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.425"
android:layout_marginBottom="8dp"/>
</android.support.constraint.ConstraintLayout>
Here is the container 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">
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp"
android:layout_marginStart="8dp"/>
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/customer_recycler_view"
android:layout_width="0dp"
android:layout_height="380dp"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="65dp"/>
</android.support.constraint.ConstraintLayout>
I'm also placing the container view (a Fragment) into a containing Activity. I don't know if it helps but here is that Activity:
<?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:context="com.bignerdranch.android.personaltrainer.ListActivity">
<LinearLayout
android:layout_width="304dp"
android:layout_height="wrap_content"
android:id="#+id/logged_in_fragment_container"
android:orientation="horizontal"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="8dp"
tools:layout_height="18dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/list_fragment_container">
</LinearLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/list_fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="34dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
I can post my Adapter and ViewHolder classes for the RecyclerView but it's probably not necessary

Something that stands out to me is that the RecyclerView has a fixed height and no width.
<android.support.v7.widget.RecyclerView
android:id="#+id/customer_recycler_view"
android:layout_width="0dp"
android:layout_height="380dp"
Based on this, it seems your views are being expanded within the list
Alternatively, you can set this in the root element of the row item layout
android:height="?android:attr/listPreferredItemHeight"

CardView in ConstraintLayout Not Wrapping Height

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"

Categories

Resources