In the Constraint layout I have a Button and on top of it is an Image View(id==R.id.imageView) which is aligned center-right area of the Button.The background of the Image View is a white colored right arrow. In design view and in my device the Image View is not displayed. I cleaned and build the project but the problem persists.In the Image below the blue rectangular portion is then area where the Image should be displayed.Please provide a solution for this...
Design Preview:
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">
<TextView
android:id="#+id/head"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/ph_verify_lbl_mrgn"
android:text="#string/verify_your_phone_number"
android:textColor="#bb2b67"
android:textSize="#dimen/ph_verify_head_tsxtsze"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="4dp"
android:text="#string/lorem_ipsum_lorem_ipsum"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/head" />
<EditText
android:id="#+id/editText"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:hint="#string/ph_hint"
android:inputType="number"
android:paddingTop="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView" />
<ImageView
android:id="#+id/imageView"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:background="#drawable/arrow"
app:layout_constraintBottom_toBottomOf="#+id/button"
app:layout_constraintEnd_toEndOf="#+id/button"
app:layout_constraintHorizontal_bias="0.909"
app:layout_constraintStart_toStartOf="#+id/button"
app:layout_constraintTop_toTopOf="#+id/button"
app:layout_constraintVertical_bias="0.571" />
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="89dp"
android:layout_marginTop="16dp"
android:background="#drawable/button_bg"
android:text="#string/next"
android:textColor="#ffffff"
android:textSize="22sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/editText"
app:layout_constraintVertical_bias="0.25" />
</android.support.constraint.ConstraintLayout>
Place the ImageView tag below the Button tag.
Since you have provided match parent to the button and set the constraints to fill horizontally, the ImageView is being overlapped.
You can test it by keeping property of Button clickable="false" and put a click listener on the ImageView
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="89dp"
android:layout_marginTop="16dp"
android:background="#drawable/button_bg"
android:text="#string/next"
android:textColor="#ffffff"
android:textSize="22sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/editText"
app:layout_constraintVertical_bias="0.25" />
<ImageView
android:id="#+id/imageView"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:background="#drawable/arrow"
app:layout_constraintBottom_toBottomOf="#+id/button"
app:layout_constraintEnd_toEndOf="#+id/button"
app:layout_constraintHorizontal_bias="0.909"
app:layout_constraintStart_toStartOf="#+id/button"
app:layout_constraintTop_toTopOf="#+id/button"
app:layout_constraintVertical_bias="0.571" />
UPDATE
Also if this does not work, put an elevation to the ImageView
android:elevation="2dp"
Related
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.
I am having some issues with scroll view. My scrollview contains a parent constraint layout, which further contains two more constraint layouts, and two buttons. The child constraint layout at the bottom contains a listview, that is populated at runtime. In order to take advantage of the scroll view, I did the following:
Set the height of listview to wrap_content.
Set the height of the second child constraint layout (containing the listview) as wrap_content.
Set the height of the parent constraint layout (containing the two child constraint layout) to wrap_content.
Set the height of the root view, that is the scrollview to be wrap_content.
PS: After the two child constraint layouts, there are two buttons in the parent constraint layout.
But the result is, scrolling does not go beyond the third item in the listview (I have total of 5 items in the list view), also the buttons are not visible (they are out of the screen, below).
If someone could help me in identifying the possible issues, that will be great. Googling wasn't much of a help.
Here is my code: (child items are jumbled up)
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView 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:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".view.Vote"
tools:showIn="#layout/activity_vote">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.constraint.ConstraintLayout
android:id="#+id/constraintLayout"
android:layout_width="0dp"
android:layout_height="210dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:background="#android:color/white"
android:elevation="20dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.v7.widget.CardView
android:id="#+id/electionDetailsHeaderCardView"
android:layout_width="0dp"
android:layout_height="75dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
app:cardBackgroundColor="#FDD700"
app:cardElevation="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/electionDetailsTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:padding="8dp"
android:text="Election detail"
android:textColor="#android:color/white"
android:textSize="24dp" />
</android.support.v7.widget.CardView>
<TextView
android:id="#+id/electionDescriptionTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="16dp"
android:text="Description"
android:textSize="18sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/electionDetailsHeaderCardView" />
<TextView
android:id="#+id/textView4"
android:layout_width="180dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:ellipsize="end"
android:maxLines="3"
android:scrollHorizontally="true"
android:text="#string/medium_text"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/electionDescriptionTextView" />
<!--Reference: https://stackoverflow.com/a/10282253/5394180 (divider)-->
<View
android:id="#+id/view"
android:layout_width="1dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:background="#android:color/darker_gray"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#+id/textView4"
app:layout_constraintTop_toBottomOf="#+id/electionDetailsHeaderCardView" />
<TextView
android:id="#+id/importantHeaderTextView"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:text="Important"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="#+id/electionDescriptionTextView"
app:layout_constraintStart_toEndOf="#+id/view"
app:layout_constraintTop_toTopOf="#+id/electionDescriptionTextView" />
<TextView
android:id="#+id/startLabelTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:text="Start:"
android:textSize="12sp"
app:layout_constraintStart_toEndOf="#+id/view"
app:layout_constraintTop_toBottomOf="#+id/importantHeaderTextView" />
<TextView
android:id="#+id/finishLabelTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:text="Finish:"
android:textSize="12sp"
app:layout_constraintStart_toEndOf="#+id/view"
app:layout_constraintTop_toBottomOf="#+id/startLabelTextView" />
<TextView
android:id="#+id/startDateTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:text=" 23/03/2019, 00:00:00"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="#+id/startLabelTextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/startLabelTextView" />
<TextView
android:id="#+id/finishDateTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:text="30/03/2019, 00:00:00"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="#+id/finishLabelTextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/finishLabelTextView" />
<TextView
android:id="#+id/statusLabelTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:text="Status:"
android:textSize="12sp"
app:layout_constraintStart_toEndOf="#+id/view"
app:layout_constraintTop_toBottomOf="#+id/finishLabelTextView" />
<TextView
android:id="#+id/textView9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:text="Finish"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="#+id/statusLabelTextView"
app:layout_constraintStart_toEndOf="#+id/statusLabelTextView"
app:layout_constraintTop_toTopOf="#+id/statusLabelTextView" />
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:layout_width="0dp"
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:background="#android:color/white"
android:elevation="20dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/constraintLayout">
<android.support.v7.widget.CardView
android:id="#+id/electionCandidatesHeaderCardView"
android:layout_width="0dp"
android:layout_height="75dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
app:cardBackgroundColor="#FDD700"
app:cardElevation="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/electionCandidatesHeaderTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:padding="8dp"
android:text="Election candidates"
android:textColor="#android:color/white"
android:textSize="24dp" />
</android.support.v7.widget.CardView>
<ListView
android:id="#+id/candidateListView"
android:layout_width="0dp"
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"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/electionCandidatesHeaderCardView" />
<Button
android:id="#+id/cancelButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="8dp"
android:text="Cancel"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/candidateListView" />
<Button
android:id="#+id/voteButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:text="Vote"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/candidateListView" />
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
</android.support.v4.widget.NestedScrollView>
I tried googling for this thing. I saw some related results, but I wasn't able to solve my issue following them. The results were pretty specific to the asker's code.
I am new to android and working on a simple app. I have a forms page and would like the user to fill out when signing up for the app. My editext for the age and the dollarValue jumps up even though I have constrained it. I will post the xml down below.
provider_signup.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">
<RadioButton
android:id="#+id/radioButton4"
android:layout_width="78dp"
android:layout_height="22dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="36dp"
android:layout_marginTop="8dp"
android:text="Fixed"
android:textAlignment="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/radioButton3"
app:layout_constraintTop_toBottomOf="#+id/my_spinner"
app:layout_constraintVertical_bias="0.076" />
<ImageView
android:id="#+id/faceImage"
android:layout_width="91dp"
android:layout_height="66dp"
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_constraintHorizontal_bias="0.501"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.038"
app:srcCompat="#drawable/common_google_signin_btn_icon_dark" />
<Spinner
android:id="#+id/my_spinner"
android:layout_width="368dp"
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_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.577" />
<TextView
android:id="#+id/insured"
android:layout_width="wrap_content"
android:layout_height="32dp"
android:layout_marginBottom="64dp"
android:layout_marginStart="76dp"
android:text="Insured"
android:textAlignment="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:background="#color/colorAccent"
android:id="#+id/saveButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:text="SAVE"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/ageTextView"
android:layout_width="37dp"
android:layout_height="24dp"
android:layout_marginBottom="116dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="24dp"
android:layout_marginTop="8dp"
android:text="Age"
android:textAlignment="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.047"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.98" />
<TextView
android:id="#+id/dollarTextView"
android:layout_width="wrap_content"
android:layout_height="21dp"
android:layout_marginBottom="124dp"
android:layout_marginEnd="104dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Dollar Value"
android:textAlignment="center"
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/radioButton3"
app:layout_constraintVertical_bias="1.0" />
<TextView
android:id="#+id/textView7"
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="Rate"
android:textAlignment="center"
android:textSize="18sp"
app:layout_constraintBottom_toTopOf="#+id/insured"
app:layout_constraintEnd_toStartOf="#+id/radioButton4"
app:layout_constraintHorizontal_bias="0.621"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/my_spinner"
app:layout_constraintVertical_bias="0.189" />
<RadioButton
android:id="#+id/radioButton3"
android:layout_width="81dp"
android:layout_height="19dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="52dp"
android:layout_marginTop="8dp"
android:text="Hourly"
android:textAlignment="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/my_spinner"
app:layout_constraintVertical_bias="0.07999998" />
<EditText
android:id="#+id/firstName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:ems="10"
android:inputType="textPersonName"
android:text="First Name"
app:layout_constraintBottom_toTopOf="#+id/lastName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/faceImage" />
<EditText
android:id="#+id/lastName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:ems="10"
android:inputType="textPersonName"
android:text="Last Name"
app:layout_constraintBottom_toTopOf="#+id/Address"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.503"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.948" />
<EditText
android:id="#+id/Address"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:ems="10"
android:inputType="textPersonName"
android:text="Address"
app:layout_constraintBottom_toTopOf="#+id/my_spinner"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.503"
app:layout_constraintStart_toStartOf="parent" />
<RadioButton
android:id="#+id/yesRadioButton"
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="YES"
app:layout_constraintBottom_toTopOf="#+id/saveButton"
app:layout_constraintEnd_toStartOf="#+id/noRadioButton"
app:layout_constraintHorizontal_bias="0.513"
app:layout_constraintStart_toEndOf="#+id/insured"
app:layout_constraintTop_toBottomOf="#+id/dollarTextView"
app:layout_constraintVertical_bias="0.894" />
<RadioButton
android:id="#+id/noRadioButton"
android:layout_width="wrap_content"
android:layout_height="29dp"
android:layout_marginBottom="68dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:text="NO"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.516"
app:layout_constraintStart_toEndOf="#+id/insured" />
<EditText
android:id="#+id/ageEditText"
android:layout_width="94dp"
android:layout_height="25dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:ems="10"
android:inputType="textPersonName"
android:text="Name"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/dollarTextView"
app:layout_constraintHorizontal_bias="0.81"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/radioButton4"
app:layout_constraintVertical_bias="0.088" />
<EditText
android:id="#+id/dollarEditText"
android:layout_width="64dp"
android:layout_height="25dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:ems="10"
android:inputType="textPersonName"
android:text="Name"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.666"
app:layout_constraintStart_toEndOf="#+id/dollarTextView"
app:layout_constraintTop_toBottomOf="#+id/radioButton3"
app:layout_constraintVertical_bias="0.088" />
</android.support.constraint.ConstraintLayout>
First of all, you don't need to constraint all 4 constraints on every single view. You can connect views with only 2 constraints.
Onto your problem, constraint your editTexts to the TextViews that they should be right to.
I will paste the fixed code for your #+id/ageEditText and #+id/dollarEditText
<EditText
android:id="#+id/ageEditText"
android:layout_width="94dp"
android:layout_height="25dp"
android:layout_marginStart="8dp"
android:ems="10"
android:inputType="textPersonName"
android:text="Name"
app:layout_constraintStart_toEndOf="#+id/ageTextView"
app:layout_constraintTop_toTopOf="#+id/ageTextView" />
<EditText
android:id="#+id/dollarEditText"
android:layout_width="64dp"
android:layout_height="25dp"
android:layout_marginStart="8dp"
android:ems="10"
android:inputType="textPersonName"
android:text="Name"
app:layout_constraintStart_toEndOf="#+id/dollarTextView"
app:layout_constraintTop_toTopOf="#+id/dollarTextView" />
I copied your layout to android studio just to see what you were getting. You're having this issue because your views aren't aligned to one another yet you try to constrain them as using different references, so they end up moving independently. My advice to you is to organise the views that belong in the same line in layouts of their own and then constraint those layouts instead. You'll end up with the parent constraint layout that includes many embedded child layouts.
For example, add your 4 views for age and dollar value in one constraint layout like so:
<android.support.constraint.ConstraintLayout
android:id="#+id/your_layout_one"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="8dp">
<TextView
android:id="#+id/ageTextView"
android:layout_width="37dp"
android:layout_height="24dp"
android:text="Age"
android:textAlignment="center"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#id/ageEditText"
/>
<TextView
android:id="#+id/dollarTextView"
android:layout_width="wrap_content"
android:layout_height="21dp"
android:text="Dollar Value"
android:textAlignment="center"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#id/ageEditText"
app:layout_constraintEnd_toStartOf="#id/dollarEditText"
/>
<EditText
android:id="#+id/dollarEditText"
android:layout_width="64dp"
android:layout_height="25dp"
android:ems="10"
android:inputType="textPersonName"
android:text="Name"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#id/dollarTextView"
app:layout_constraintEnd_toEndOf="parent"
/>
<EditText
android:id="#+id/ageEditText"
android:layout_width="94dp"
android:layout_height="25dp"
android:ems="10"
android:inputType="textPersonName"
android:text="Name"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#id/ageTextView"
app:layout_constraintEnd_toStartOf="#id/dollarTextView"
/>
</android.support.constraint.ConstraintLayout>
You see how I added the padding to the parent and not the individual views. Since the parent is set to wrap around the children, and the children are set to expand to fit the parent, you end up with a clear layout where 4 views are perfectly aligned horizontally. Now do the same for every line in your screen that includes multiple views and add the constraints between those layouts instead of doing it for every view independently. You'll end up with a file that has the following structure:
<android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout>
<!--layout1 constraint start, end and top to parent-->
<!--constraint bottom to top of layout 2 below-->
<!--views to align horizontally-->
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout>
<!--layout2 constraint start and end to parent-->
<!--constraint top to bottom of layout 1 and bottom to top of layout 3 below-->
<!--views to align horizontally-->
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout>
<!--layout3 constraint start and end to parent-->
<!--constraint top to bottom of layout 2 and bottom to top of layout 4 below-->
<!--views to align horizontally-->
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout>
<!--layout3 constraint start, end and bottom to parent-->
<!--constraint top to bottom of layout 3 above-->
<!--views to align horizontally-->
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
I am using the drag and drop functionality in the layout editor to try and get 4 image buttons aligned in a kite shape. This is the layout I am trying to achieve, currently using ImageButton but I will change to the circular image view to suit the layout later.
Can anyone help me to achieve this. Please find my XML below:
<android.support.constraint.ConstraintLayout
android:id="#+id/ongoing_call_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="#dimen/activity_padding"
android:layout_below="#id/contact_number_tv"
android:layout_above="#id/calculator_layout">
<ImageButton
android:id="#+id/home_imgBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="120dp"
android:src="#android:drawable/btn_star"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageButton
android:id="#+id/not_billable_imgBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="104dp"
android:src="#android:drawable/btn_star"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageButton
android:id="#+id/billable_imgBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#android:drawable/btn_star"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toEndOf="#+id/not_billable_imgBtn"
tools:layout_editor_absoluteY="105dp" />
<ImageButton
android:id="#+id/decide_later_imgBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="120dp"
android:src="#android:drawable/btn_star"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</android.support.constraint.ConstraintLayout>
Try this buddy, and make your own adjustments.
<android.support.constraint.ConstraintLayout
android:id="#+id/ongoing_call_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="#dimen/activity_padding"
android:layout_below="#id/contact_number_tv"
android:layout_above="#id/calculator_layout">
<ImageButton
android:id="#+id/home_imgBtn"
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:src="#android:drawable/btn_star"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.32"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageButton
android:id="#+id/not_billable_imgBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="24dp"
android:src="#android:drawable/btn_star"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageButton
android:id="#+id/billable_imgBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:src="#android:drawable/btn_star"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.66"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageButton
android:id="#+id/decide_later_imgBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="60dp"
android:layout_marginBottom="24dp"
android:src="#android:drawable/btn_star"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/not_billable_imgBtn" />
</android.support.constraint.ConstraintLayout>
See the example image
But perhaps your real problem is that the constrainLayout is not your root element, and you should set a fixed height instead of android:layout_height="wrap_content"
I want the ImageView positioned to the far right
look at the picture the first row have a white color ImageView how to make it stick to the right. Using the Android layout inspector the ImageView show to have empty space on both right and left side. Is there some Gravity left something I can use?
Here´s the XML:
<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"
android:layout_margin="5dp"
android:background="?AppTheme.line_box_background_1">
<android.support.constraint.Guideline
android:id="#+id/guideline32"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.74"/>
<android.support.constraint.ConstraintLayout
android:id="#+id/constraintLayout2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="?AppTheme.list_item_background"
app:layout_constraintBottom_toTopOf="#+id/guideline567"
app:layout_constraintEnd_toStartOf="#+id/guideline32"
app:layout_constraintStart_toStartOf="#+id/guideline67"
app:layout_constraintTop_toTopOf="parent"
tools:layout_constraintLeft_creator="1"
tools:layout_constraintRight_creator="1"
tools:layout_constraintTop_creator="1">
<android.support.constraint.Guideline
android:id="#+id/guideline5654"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5"/>
<ImageView
android:id="#+id/imageView_extra"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="4dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline5654"
app:srcCompat="#drawable/ic_create_port_place"/>
<TextView
android:id="#+id/text_content"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:layout_marginTop="4dp"
android:autoSizeTextType="uniform"
android:textColor="?AppTheme.PrimaryTextColor"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/text_extra"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed"
tools:layout_constraintBottom_creator="1"
tools:layout_constraintLeft_creator="1"
tools:text="some text"/>
<TextView
android:id="#+id/text_extra"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:layout_marginTop="4dp"
android:autoSizeTextType="uniform"
android:gravity="center"
android:textColor="?AppTheme.PrimaryTextColor"
app:layout_constraintBottom_toTopOf="#+id/text_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/text_content"
tools:layout_constraintBottom_creator="1"
tools:layout_constraintLeft_creator="1"
tools:text="some text"/>
<ProgressBar
android:id="#+id/progressBar"
style="?android:attr/progressBarStyle"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:visibility="invisible"
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.212"/>
</android.support.constraint.ConstraintLayout>
<ImageView
android:id="#+id/imageView_street_image"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="4dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="8dp"
android:contentDescription=""
android:scaleType="fitCenter"
app:layout_constraintBottom_toTopOf="#+id/guideline567"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline32"
app:layout_constraintTop_toTopOf="parent"/>
<ImageView
android:id="#+id/imageView_google_place"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:contentDescription=""
app:layout_constraintBottom_toTopOf="#+id/guideline567"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline32"
app:layout_constraintTop_toBottomOf="#+id/imageView_street_image"
app:srcCompat="#drawable/powered_by_google_on_white"/>
<ImageView
android:id="#+id/imageView_flag"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toTopOf="#+id/guideline521"
app:layout_constraintEnd_toStartOf="#+id/guideline67"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_circle"/>
<android.support.constraint.Guideline
android:id="#+id/guideline67"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.17"/>
<android.support.constraint.Guideline
android:id="#+id/guideline567"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.89"/>
<TextView
android:id="#+id/text_country"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:autoSizeTextType="uniform"
android:gravity="center|top"
android:text="country"
app:layout_constraintBottom_toTopOf="#+id/guideline567"
app:layout_constraintEnd_toStartOf="#+id/guideline67"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline521"
app:layout_constraintVertical_bias="0.050000012"/>
<android.support.constraint.Guideline
android:id="#+id/guideline521"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.4"/>
</android.support.constraint.ConstraintLayout>
When using ConstraintLayout I find it better to preview in blueprint mode. If you do so you'll be able to see the circle indicating the constraints in each element:
TO use it just click and drag the arrow to the view you want this element to me constrained to. In you case you'll use the top and right constraints guides to position the image view to the top right in the screen.
Moreover, to have a parfectly squared image view you should set the width and height to be the sabe, if you have wrap content in one and 0dp in other it won't be perfectly squared but rather rectangular because one of the dimensions is allowed to grow freely.