ConstraintLayout messes up after I change the src of an ImageView - android

This is the first screenshot, where everything is working fine with a placeholder background.
This is the second screenshot, where the two ImageButtons don't display anymore.
For reference, here's my test 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:context="com.bruisedbanana.squareshift.MainActivity">
<ImageView
android:scaleType="centerCrop"
android:src="#drawable/squareshiftbackground"
android:id="#+id/imageView2"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:adjustViewBounds="true"
/>
<ImageButton
android:id="#+id/buttonPlay"
android:background="#drawable/buttonPlay"
android:layout_width="95dp"
android:layout_height="45dp"
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_constraintHorizontal_bias="0.502"
android:layout_marginBottom="8dp"
app:layout_constraintVertical_bias="0.952"
app:layout_constraintBottom_toTopOf="#+id/buttonExit" />
<ImageButton
android:id="#+id/buttonExit"
android:background="#drawable/buttonExit"
android:layout_width="95dp"
android:layout_height="45dp"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="#+id/imageView2"
android:layout_marginTop="8dp"
app:layout_constraintHorizontal_bias="0.502"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp"
app:layout_constraintVertical_bias="0.891" />
</android.support.constraint.ConstraintLayout>
All I'm doing is changing the src from #drawable/squareshiftbackground to #drawable/realbackground. Can anyone help?

You can try YourImageButton.bringToFront() to the image butons after changing the ImageView source.

Related

Why ImageView not Displaying in Activity Android Studio

I'm using constraintlayout and I have an activity that is a user profile. and it includes a picture of user. when I code xml layout. I can see the picture in preview window inside android studio the image is a png image. I have tried changing the image to one of the android studio avatar. still doesn't work. however, when I run the app the picture is not displaying. does anyone know why this happen?
<?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"
android:background="#color/profileBackground">
<android.support.constraint.ConstraintLayout
android:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginBottom="8dp"
android:background="#drawable/bacround_gradient"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.001">
<TextView
android:id="#+id/name_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="72dp"
android:layout_marginEnd="8dp"
android:fontFamily="sans-serif-condensed-medium"
android:text="Amanda Bozquet"
android:textAlignment="center"
android:textColor="#color/headerTextColor"
android:textSize="25sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.497"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
<ImageView
android:id="#+id/user_imageview"
android:layout_width="126dp"
android:layout_height="109dp"
android:layout_marginStart="8dp"
android:layout_marginTop="144dp"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:src="#drawable/prifile_pic" />
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:paddingBottom="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/user_imageview"
app:layout_constraintVertical_bias="0.275">
<TextView
android:id="#+id/occupation_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="Marine Biologist"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/workplace_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="Key Biscaine National Park"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.497"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/occupation_textview" />
<TextView
android:id="#+id/state_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="FL, USA"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.497"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/workplace_textview" />
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="8dp"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/state_textview">
<ImageView
android:id="#+id/email_imageview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="40dp"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.126"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/state_textview"
app:srcCompat="#drawable/ic_mail_black_24dp" />
<TextView
android:id="#+id/email_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="40dp"
android:layout_marginEnd="8dp"
android:text="abozquet#biscainepark.org"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.031"
app:layout_constraintStart_toEndOf="#+id/email_imageview"
app:layout_constraintTop_toBottomOf="#+id/state_textview" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/linearLayout">
<ImageView
android:id="#+id/phone_imageview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.126"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/email_imageview"
app:srcCompat="#drawable/ic_local_phone_black_24dp" />
<TextView
android:id="#+id/phone_textview"
android:layout_width="239dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="184dp"
android:text="1 (786) 352-2254"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.031"
app:layout_constraintStart_toEndOf="#+id/phone_imageview"
app:layout_constraintTop_toBottomOf="#+id/email_textview" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/linearLayout2">
<ImageView
android:id="#+id/video_imageview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.126"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/phone_imageview"
app:srcCompat="#drawable/ic_videocam_white_24dp" />
<TextView
android:id="#+id/video_textview"
android:layout_width="242dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="184dp"
android:text="1 (786) 352-2254"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.031"
app:layout_constraintStart_toEndOf="#+id/video_imageview"
app:layout_constraintTop_toBottomOf="#+id/phone_textview" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/linearLayout3">
<ImageView
android:id="#+id/facebook_imageview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.126"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/video_textview"
app:srcCompat="#drawable/ic_icon_facebook" />
<TextView
android:id="#+id/facebook_textview"
android:layout_width="336dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="184dp"
android:text="http://facebook.com/amandab"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.031"
app:layout_constraintStart_toEndOf="#+id/facebook_imageview"
app:layout_constraintTop_toBottomOf="#+id/video_textview" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/linearLayout4">
<ImageView
android:id="#+id/twitter_imageview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.126"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/facebook_textview"
app:srcCompat="#drawable/ic_twitter_white" />
<TextView
android:id="#+id/twitter_textview"
android:layout_width="336dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="184dp"
android:text="\#mandabuz48"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.031"
app:layout_constraintStart_toEndOf="#+id/twitter_imageview"
app:layout_constraintTop_toBottomOf="#+id/facebook_textview" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
From: https://developer.android.com/studio/write/tool-attributes
Android Studio supports a variety of XML attributes in the tools
namespace that enable design-time features (such as which layout to
show in a fragment) or compile-time behaviors (such as which shrinking
mode to apply to your XML resources). When you build your app, the
build tools remove these attributes so there is no effect on your APK
size or runtime behavior.
So the attribute:
tools:src="#drawable/prifile_pic"
is valid only for design-time.
It is not compiled in the APK and you will not see the image when you run the app.
Change it to:
app:srcCompat="#drawable/prifile_pic"
Do any of your ImageViews display the intended images? Your profile pic ImageView is using tools:src while others are using app:srcCompat
I just noticed a potential typo too -
tools:src="#drawable/prifile_pic" <<--- supposed to be profile_pic?
Are you getting any exception in your android studio log-cat, like image not found? As Stitches wrote in above comment --> typo error for prifile_pic, please check you drawable name is same in your xml layout and image name in drawable folder.

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

ImageView overlaps with TextView in ConstraintLayout

I am using a RecyclerView and this is the code for activity_main:
<?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.example.romin.apodbrowser.MainActivity">
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="8dp"
android:scrollbars="vertical"
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>
And for the RecyclerView items this is 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"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<org.sufficientlysecure.htmltextview.HtmlTextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:text="TextView"
android:textSize="24sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
tools:layout_editor_absoluteY="16dp" />
<TextView
android:id="#+id/pubDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="TextView"
android:textAppearance="#style/TextAppearance.AppCompat"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/link" />
<ImageView
android:id="#+id/image"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:adjustViewBounds="true"
android:scaleType="fitStart"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/pubDate"
app:srcCompat="#drawable/default_image" />
<org.sufficientlysecure.htmltextview.HtmlTextView
android:id="#+id/description"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_below="#id/image"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="TextView"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/image"
tools:text="Description" />
<TextView
android:id="#+id/link"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="TextView"
android:textSize="16sp"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/title"
tools:text="LINK" />
</android.support.constraint.ConstraintLayout>
Basically, there is the Title at the top, the link, and the pubDate. Then there is the image, and then the description. Besides the image (ImageView), all the others are TextViews.
The problem is that when I load an image from an RSS feed to the ImageView, and the thumbnail is gone, the ImageView overlaps with the description TextView. I have searched everywhere but I can't seem to find any solution. I understand that the bitmap changes its size and not the ImageView, and most likely that's what's causing the overlap, but I can't find a way to fix it.
Thank you so much in advance.
Screenshot:
[https://i.stack.imgur.com/e2eMA.jpg][1]
Remove the following line from description:
app:layout_constraintBottom_toBottomOf="parent"
This will effectively move the description view below the image. I have just tested it out and it is working.
I hope this helps.

How to start SearchActivity when clicked on edit text

I followed this link for creating search interface.
But there was no proper explanation about how to start search activity when clicked on edit text but there is an explanation for only menu items.
My interface is in NoActionBarStyle as shown in below code and image
<?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="perspective.secretbrowser.MainActivity">
<android.support.constraint.ConstraintLayout
android:layout_width="0dp"
android:layout_height="56dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:background="#color/colorPrimary"
tools:layout_constraintRight_creator="1"
tools:layout_constraintLeft_creator="1"
android:id="#+id/constraintLayout">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="#drawable/menu_small"
android:background="?attr/selectableItemBackgroundBorderless"
android:clickable="true"
android:id="#+id/options"
android:visibility="visible"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp" />
<ImageView
android:id="#+id/tabs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/tabs_small"
android:visibility="visible"
android:scaleType="fitXY"
android:background="?attr/selectableItemBackgroundBorderless"
android:clickable="true"
app:layout_constraintRight_toLeftOf="#+id/options"
android:layout_marginRight="8dp"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp" />
<EditText
android:id="#+id/url_txt"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/url_bg"
android:hint="#string/search_hint"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/tabs"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.333"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp" />
</android.support.constraint.ConstraintLayout>
<com.gc.materialdesign.views.ProgressBarDeterminate
android:id="#+id/progressBar"
android:layout_width="0dp"
android:layout_height="3dp"
android:visibility="visible"
app:layout_constraintBottom_toTopOf="#+id/webView"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/constraintLayout" />
<WebView
android:id="#+id/webView"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/progressBar" />
</android.support.constraint.ConstraintLayout>
MainActivity.xml
Suggest me code that will trigger searchactivity when clicked on edittext
Finally found answer
set onclicklistner on edittext and trigger search activity using the search(null,false,null,false)
Look here for detailed explaination

Categories

Resources