I am trying to achieve this layout :
This is the code i tried :
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/yellow_bg"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp"
android:id="#+id/imageView3" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/crown"
tools:layout_editor_absoluteY="5dp"
tools:layout_editor_absoluteX="10dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/position_no_bg"
android:layout_marginLeft="0dp"
app:layout_constraintLeft_toLeftOf="#+id/imageView3"
app:layout_constraintTop_toTopOf="#+id/imageView3"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="#+id/imageView3"
android:layout_marginBottom="8dp"
android:id="#+id/imageView4" />
</android.support.constraint.ConstraintLayout>
But I am getting this output :
And the problem is that as I decrease the screen size, I get issue of the crown moving from its position. My main issue is that the crown is not able to set in place.
These are the images :
EDIT :
Adding 2 constraints for crown :
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/yellow_bg"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp"
android:id="#+id/imageView3" />
<ImageView
android:layout_width="45dp"
android:layout_height="32dp"
android:src="#drawable/crown"
app:layout_constraintBottom_toBottomOf="#+id/imageView3"
android:layout_marginBottom="42dp"
android:layout_marginLeft="0dp"
app:layout_constraintLeft_toLeftOf="#+id/imageView3" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/position_no_bg"
app:layout_constraintTop_toTopOf="#+id/imageView3"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="#+id/imageView3"
android:layout_marginBottom="8dp"
android:id="#+id/imageView4"
app:layout_constraintVertical_bias="1.0"
android:layout_marginLeft="0dp"
app:layout_constraintLeft_toLeftOf="#+id/imageView3" />
</android.support.constraint.ConstraintLayout>
EDIT 2 :
Tried this code again, and got good response but the design is moving in 7.0" plus devices:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="0.4"
>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="0dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/yellow_without_crown"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
android:id="#+id/imageView4" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/crown"
app:layout_constraintBottom_toBottomOf="#+id/imageView4"
android:layout_marginBottom="8dp"
app:layout_constraintTop_toTopOf="#+id/imageView4"
android:layout_marginTop="0dp"
android:layout_marginLeft="0dp"
app:layout_constraintLeft_toLeftOf="#+id/imageView4"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="#+id/imageView4"
app:layout_constraintHorizontal_bias="0.04"
app:layout_constraintVertical_bias="0.0" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/position_no_bg"
app:layout_constraintBottom_toBottomOf="#+id/imageView4"
android:layout_marginBottom="0dp"
app:layout_constraintTop_toTopOf="#+id/imageView4"
android:layout_marginTop="16dp"
android:layout_marginLeft="16dp"
app:layout_constraintLeft_toLeftOf="#+id/imageView4"
android:id="#+id/imageView5" />
</android.support.constraint.ConstraintLayout>
</LinearLayout>
Try this may solve your problem
EDIT
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="81dp">
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:src="#drawable/yellow"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="#+id/imageView4" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="76dp"
android:src="#drawable/crown"
app:layout_constraintBottom_toBottomOf="#+id/imageView4"
app:layout_constraintStart_toStartOf="parent" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:src="#drawable/circle"
app:layout_constraintBottom_toBottomOf="#+id/imageView3"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/imageView3" />
</android.support.constraint.ConstraintLayout>
Now, this is working on different screen sizes make a try
Here is screenshot
You are applying absolute positions for your crown, this is why the crown stays where it is when you change the screen size.
The crown image is not attached to the other graphics.
i.e. set the crowns bottom constraint to the bottom border of your yellow_bgimage and increase the bottom margin
Edit:
This is how it could fit in your question - you have to remove the white space around your background image!!
set background constraint to bottom and left of parent.
set the
circle to the bottom and left of the background -
after that i set the crown on top of the background.
it floats now above because your
image has a huhe white border. you need to adjust that.
you need to adjust it finally with margins.
<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">
<ImageView
android:id="#+id/bg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginLeft="8dp"
android:src="#drawable/yellow_bg"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent" />
<ImageView
android:id="#+id/crown"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/crown"
app:layout_constraintBottom_toTopOf="#+id/bg"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="#+id/bg" />
<ImageView
android:id="#+id/circle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="12dp"
android:layout_marginLeft="12dp"
android:src="#drawable/position_no_bg"
app:layout_constraintBottom_toBottomOf="#+id/bg"
app:layout_constraintLeft_toLeftOf="#id/bg"/>
</android.support.constraint.ConstraintLayout>
Related
I'm a beginner on Android, but my question require a little bit knowledge in UI and not in programming.
I have an xml code, i have their some views but for this question only two components are relevant.
The component is a ScrollView "father" that has only one "son" that is a TextView.
When setting padding in ScrollView, if the text inside the TextView is long, first line of TextView is a little bit truncated (although i am using padding). But on the other hand, when using margin_layout text is seen fine. I read a lot on the difference between margin and padding and from what i have understand setting padding inside father should give the same affect as setting margin inside son. I emphasize that i'm using only one son.
Code with margin (where text is fine):
<?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:background="#color/colorPrimary"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="76dp"
android:layout_marginEnd="8dp"
android:fontFamily="#font/chewy"
android:text="#string/title"
android:textSize="36sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.v7.widget.CardView
android:id="#+id/cardView"
android:layout_width="300dp"
android:layout_height="80dp"
android:layout_marginStart="8dp"
android:layout_marginTop="68dp"
android:layout_marginEnd="8dp"
app:cardCornerRadius="5dp"
app:cardElevation="7dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<TextView
android:id="#+id/question_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_margin="8dp"
android:text="Hello There this is where we are going to add something..."
android:textSize="18sp" />
</ScrollView>
</android.support.v7.widget.CardView>
<Button
android:id="#+id/true_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="48dp"
android:layout_marginTop="8dp"
android:background="#color/colorAccent"
android:text="#string/true_title"
app:layout_constraintStart_toEndOf="#+id/prev_button"
app:layout_constraintTop_toBottomOf="#+id/cardView" />
<Button
android:id="#+id/false_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:background="#color/colorAccent"
android:text="#string/false_title"
app:layout_constraintEnd_toStartOf="#+id/next_button"
app:layout_constraintStart_toEndOf="#+id/true_button"
app:layout_constraintTop_toBottomOf="#+id/cardView" />
<ImageButton
android:id="#+id/prev_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#color/colorAccent"
android:contentDescription="#string/previous_button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/cardView"
app:srcCompat="#android:drawable/ic_media_previous" />
<ImageButton
android:id="#+id/next_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:background="#color/colorAccent"
android:contentDescription="#string/next_button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/cardView"
app:srcCompat="#android:drawable/ic_media_next" />
<TextView
android:id="#+id/counter_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:fontFamily="#font/chewy"
android:text="#string/counter_questions"
app:layout_constraintBottom_toTopOf="#+id/cardView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView" />
</android.support.constraint.ConstraintLayout>
Code with padding (where first line is truncated)
<?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:background="#color/colorPrimary"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="76dp"
android:layout_marginEnd="8dp"
android:fontFamily="#font/chewy"
android:text="#string/title"
android:textSize="36sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.v7.widget.CardView
android:id="#+id/cardView"
android:layout_width="300dp"
android:layout_height="80dp"
android:layout_marginStart="8dp"
android:layout_marginTop="68dp"
android:layout_marginEnd="8dp"
app:cardCornerRadius="5dp"
app:cardElevation="7dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="8dp"
>
<TextView
android:id="#+id/question_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="Hello There this is where we are going to add something..."
android:textSize="18sp" />
</ScrollView>
</android.support.v7.widget.CardView>
<Button
android:id="#+id/true_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="48dp"
android:layout_marginTop="8dp"
android:background="#color/colorAccent"
android:text="#string/true_title"
app:layout_constraintStart_toEndOf="#+id/prev_button"
app:layout_constraintTop_toBottomOf="#+id/cardView" />
<Button
android:id="#+id/false_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:background="#color/colorAccent"
android:text="#string/false_title"
app:layout_constraintEnd_toStartOf="#+id/next_button"
app:layout_constraintStart_toEndOf="#+id/true_button"
app:layout_constraintTop_toBottomOf="#+id/cardView" />
<ImageButton
android:id="#+id/prev_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#color/colorAccent"
android:contentDescription="#string/previous_button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/cardView"
app:srcCompat="#android:drawable/ic_media_previous" />
<ImageButton
android:id="#+id/next_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:background="#color/colorAccent"
android:contentDescription="#string/next_button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/cardView"
app:srcCompat="#android:drawable/ic_media_next" />
<TextView
android:id="#+id/counter_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:fontFamily="#font/chewy"
android:text="#string/counter_questions"
app:layout_constraintBottom_toTopOf="#+id/cardView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView" />
</android.support.constraint.ConstraintLayout>
In addition, putting padding inside CardLayout make thins to be even bad than when adding padding inside the ScrollView
Can someone explain me the reason?
It seems that the difference related to ScrollView odd behavior. I fixed the issue by setting android:fillViewport="true", and removing padding and margin_layout
here is the image of the pic i want without the space on the rightI have a nested constraint layout.
I am trying to use a drawable as a background for my constraint layout. The only problem is that it does not stretches to the edges of the screen. what I want is to have the drawable on the edge of the screen so that it can be a part of the edge of the screen.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:background="#drawable/img_bg"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ImageButton
android:id="#+id/imageButton"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginEnd="12dp"
android:translationZ="8dp"
app:layout_constraintBottom_toBottomOf="#+id/innter_constraint"
app:layout_constraintEnd_toEndOf="#id/innter_constraint"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/barrier"
app:srcCompat="#drawable/ic_btn_enter" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="of spa booking"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_termsandconditions">
</TextView>
<TextView
android:id="#+id/tv_termsandconditions"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginTop="102dp"
android:gravity="center"
android:text="#string/terms_and_condititons"
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/imageButton"
app:layout_constraintVertical_bias="0.736" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="innter_constraint"
tools:layout_editor_absoluteY="437dp">
</androidx.constraintlayout.widget.Barrier>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/innter_constraint"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:alpha="0.5"
android:background="#drawable/ic_img_bg"
android:orientation="vertical"
android:padding="40dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.51"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintLeft_toRightOf="#+id/guideline_vertical"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline_vertical"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.499">
<EditText
android:id="#+id/editText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="(+91)Enter the mobile number"
android:inputType="phone"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="#+id/imageView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/imageView" />
<ImageView
android:id="#+id/imageView"
android:layout_width="16dp"
android:layout_height="16dp"
android:layout_gravity="center"
android:src="#drawable/ic_icon_phone"
app:layout_constraintEnd_toStartOf="#+id/editText"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/editText" />
<TextView
android:id="#+id/not_verify_short"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="16dp"
android:text="Hello,"
android:textColor="#color/colorViews"
android:textSize="40sp"
app:layout_constraintBottom_toTopOf="#+id/editText"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="20dp"
app:barrierDirection="bottom"
app:constraint_referenced_ids="editText" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline_vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.2" />
</androidx.constraintlayout.widget.ConstraintLayout>
as you can see I really don't want the space that is out there and need to just stick it to the right edge of the screen. How can I make sure that it is scalable in all the phones. I used padding but it goes off the screen and is not a recommended practice. What constraint should I add to fill my space on the right side of the screen with the drawable background.
I am using a constraint layout and card views in it, but on different screen sizes the card views are not in the same place. I thought the idea of constraint is that you only have to arrange the card view for one time and it automatically aligns to the different device sizes. The first picture shows the screen I want to have on every device size and the other picture shows you the result of a different size where the CardViews are obviously not in the right place.
I already tried using guidelines but it doesn't help. Or is it better to use another Layout like RelativeLayout? But what's then the point of a ConstraintLayout?
Design as it should be
Result with different size
Thank you for your help!
Here is my XML:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".spielen_uebersicht">
<TextView
android:id="#+id/spieler_suche"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:text="Spieler suchen:"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.484"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.cardview.widget.CardView
android:id="#+id/cardView3"
android:layout_width="match_parent"
android:layout_height="55dp"
android:layout_margin="8dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:foreground="?android:attr/selectableItemBackground"
app:cardCornerRadius="20dp"
app:cardElevation="7dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/spieler_suche">
<SearchView
android:id="#+id/searchView_spieler_suchen"
android:layout_width="match_parent"
android:layout_height="50dp"
android:clickable="true"
android:focusable="true"
android:gravity="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:queryBackground="#android:color/transparent" />
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/zufälliger_spieler"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_marginStart="36dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:clickable="true"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"
app:cardCornerRadius="20dp"
app:cardElevation="7dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/cardView3"
app:layout_constraintVertical_bias="0.198">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="Zufälliger Spieler"
android:textAlignment="center"
android:textSize="20sp" />
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:layout_marginTop="25dp"
android:src="#mipmap/zufaelliger_spieler" />
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/cardView"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_marginStart="32dp"
android:layout_marginTop="8dp"
android:clickable="true"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"
app:cardCornerRadius="20dp"
app:cardElevation="7dp"
app:layout_constraintBottom_toBottomOf="#+id/zufälliger_spieler"
app:layout_constraintStart_toEndOf="#+id/zufälliger_spieler"
app:layout_constraintTop_toBottomOf="#+id/cardView3"
app:layout_constraintVertical_bias="1.0">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="Freunde einladen"
android:textAlignment="center"
android:textSize="20sp" />
<ImageView
android:id="#+id/imageView"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:layout_marginTop="25dp"
android:src="#mipmap/freunde_einladen" />
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/cardViewFreundesübersicht"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_marginStart="32dp"
android:layout_marginTop="36dp"
android:clickable="true"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"
app:cardCornerRadius="20dp"
app:cardElevation="7dp"
app:layout_constraintStart_toEndOf="#+id/cardView2"
app:layout_constraintTop_toBottomOf="#+id/cardView">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="5dp"
android:text="Freundes-\nübersicht"
android:textAlignment="center"
android:textSize="20sp" />
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:layout_marginTop="25dp"
android:src="#mipmap/freundes_uebersicht" />
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/cardView2"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_marginStart="36dp"
android:layout_marginTop="36dp"
android:clickable="true"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"
app:cardCornerRadius="20dp"
app:cardElevation="7dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/zufälliger_spieler">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="5dp"
android:text="Anfragen"
android:textAlignment="center"
android:textSize="20sp" />
<ImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:layout_marginTop="25dp"
android:src="#mipmap/freundes_anfragen" />
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>```
You don't see your layout the same way on different phones because your cardviews dimensions are a fixed size , why is it bad?
Different phones got different screen size, in your layout you are using fixed size on your view (fixed size is 50dp for example) and the result is that what may look good on one screen (your android studio preview screen) will not look good on another screen (your actual phone).
How to fix it:
You can just use app:layout_constraintWidth_percent and app:layout_constraintHeight_percent on your cardviews to give the size in precents according to the screen.
Something like this:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button7"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="Button"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintWidth_percent=".5"
app:layout_constraintHeight_percent=".5"
app:layout_constraintBottom_toTopOf="#+id/button3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="Button"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintWidth_percent=".5"
app:layout_constraintHeight_percent=".5"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button2" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="Button"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintWidth_percent=".5"
app:layout_constraintHeight_percent=".5"
app:layout_constraintBottom_toTopOf="#+id/button"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="Button"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintWidth_percent=".5"
app:layout_constraintHeight_percent=".5"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toBottomOf="#+id/button7" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="20dp"
app:layout_constraintGuide_percent=".5" />
</androidx.constraintlayout.widget.ConstraintLayout>
In this example, I have 4 buttons that represent your cardViews.
They are all equal in size and will be responsive to all screen sizes.
This layout will look like this (the arrow points to the guideline, to make it more understandable):
For Future Visitors, Chains are the magical word when trying to simulate Linear layout form. using horizontal chains with vertical ones along with using dynamic View sizes as Tamir Abutbul mentioned should be the best practice.
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView24"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:gravity="center"
android:text="Title"
android:textColor="#android:color/black"
android:textSize="?android:attr/actionBarSize"
android:textStyle="bold"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.button.MaterialButton
android:id="#+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableBottom="#android:drawable/ic_media_play"
android:text="text 4"
android:textSize="24sp"
android:padding="50dp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/btn3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/btn3"
app:layout_constraintTop_toTopOf="#+id/btn3" />
<com.google.android.material.button.MaterialButton
android:id="#+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableBottom="#android:drawable/ic_media_play"
android:text="text 2"
android:textStyle="bold"
android:textSize="24sp"
android:padding="50dp"
app:layout_constraintBottom_toBottomOf="#+id/btn4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/btn4"
app:layout_constraintTop_toTopOf="#+id/btn4" />
<com.google.android.material.button.MaterialButton
android:id="#+id/btn3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableBottom="#android:drawable/ic_media_play"
android:text="text 3"
android:textStyle="bold"
android:textSize="24sp"
android:padding="50dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/btn4"
app:layout_constraintEnd_toStartOf="#+id/btn1"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/btn4" />
<com.google.android.material.button.MaterialButton
android:id="#+id/btn4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableBottom="#android:drawable/ic_media_play"
android:text="text 1"
android:textStyle="bold"
android:textSize="24sp"
android:padding="50dp"
app:layout_constraintBottom_toTopOf="#+id/btn3"
app:layout_constraintEnd_toStartOf="#+id/btn2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView24"/></androidx.constraintlayout.widget.ConstraintLayout>
Best of luck ;)
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)
I am trying to create a list view to display two TextViews and an ImageView right of the TextViews. I have tried designing this using Relative Layout only, RelativeLayout with nested LinearLayout and ConstraintLayout. All seem to work, but not responsively enough to fit different screens. For example it displays well on mobile, but not good enough on Android TV emulator.
I am at odds how to modify the following layout to show image on the right and the two TextViews on the left and try to fit the screen, but have the images align to each other.
<?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:paddingLeft="#dimen/padding"
android:paddingRight="#dimen/padding">
<android.support.v7.widget.AppCompatTextView
android:id="#+id/tv_video_title"
android:layout_width="179dp"
android:layout_height="117dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="16dp"
android:paddingEnd="#dimen/padding"
android:paddingLeft="#dimen/padding"
android:paddingRight="#dimen/padding"
android:paddingStart="#dimen/padding"
android:text=""
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.v7.widget.AppCompatTextView
android:id="#+id/tv_video_descr"
android:layout_width="184dp"
android:layout_height="239dp"
android:layout_below="#+id/tv_video_title"
android:layout_marginBottom="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:paddingEnd="#dimen/padding"
android:paddingLeft="#dimen/padding"
android:paddingRight="#dimen/padding"
android:paddingStart="#dimen/padding"
android:text=""
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_video_title"
app:layout_constraintVertical_bias="0.044" />
<android.support.v7.widget.AppCompatImageView
android:id="#+id/iv_video_thumbnail"
android:layout_width="163dp"
android:layout_height="381dp"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:layout_toEndOf="#+id/tv_video_descr"
android:layout_toRightOf="#+id/tv_video_descr"
android:contentDescription="#string/video_thumbnail_image"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:srcCompat="#drawable/video" />
</android.support.constraint.ConstraintLayout>
Try this
According to you it display like 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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.AppCompatTextView
android:id="#+id/tv_video_title"
android:layout_width="179dp"
android:layout_height="117dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="16dp"
android:text=""
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toLeftOf="#+id/iv_video_thumbnail"
android:layout_marginLeft="0dp"
android:layout_marginRight="8dp" />
<android.support.v7.widget.AppCompatTextView
android:id="#+id/tv_video_descr"
android:layout_width="184dp"
android:layout_height="239dp"
android:layout_below="#+id/tv_video_title"
android:layout_marginBottom="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:text=""
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_video_title"
app:layout_constraintVertical_bias="0.044"
app:layout_constraintRight_toLeftOf="#+id/iv_video_thumbnail"
android:layout_marginRight="8dp" />
<android.support.v7.widget.AppCompatImageView
android:id="#+id/iv_video_thumbnail"
android:layout_width="163dp"
android:layout_height="381dp"
app:layout_constraintLeft_toRightOf="#+id/tv_video_descr"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:layout_toEndOf="#+id/tv_video_descr"
android:layout_toRightOf="#+id/tv_video_descr"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginRight="0dp"
app:layout_constraintVertical_bias="0.047" />
</android.support.constraint.ConstraintLayout>
Here is your updated xml file implement this I used a linear layout and assign layout weights so it cover all screen sizes depending on available width
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="#dimen/padding"
android:paddingRight="#dimen/padding">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3">
<android.support.v7.widget.AppCompatTextView
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:id="#+id/tv_video_title"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="16dp"
android:paddingEnd="#dimen/padding"
android:paddingLeft="#dimen/padding"
android:paddingRight="#dimen/padding"
android:paddingStart="#dimen/padding"
android:text=""
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.v7.widget.AppCompatTextView
android:id="#+id/tv_video_descr"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_below="#+id/tv_video_title"
android:layout_marginBottom="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:paddingEnd="#dimen/padding"
android:paddingLeft="#dimen/padding"
android:paddingRight="#dimen/padding"
android:paddingStart="#dimen/padding"
android:text=""
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_video_title"
app:layout_constraintVertical_bias="0.044" />
<android.support.v7.widget.AppCompatImageView
android:id="#+id/iv_video_thumbnail"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:layout_toEndOf="#+id/tv_video_descr"
android:layout_toRightOf="#+id/tv_video_descr"
android:contentDescription="#string/video_thumbnail_image"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:srcCompat="#drawable/video" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>