Develop Reference

Align textviews in left and right side of a linear layout?

I currently doing one of the project from "Google Android Dev". I am facing a problem in my layout design. Kindly help me how to align one textview in left side and right side of a linear layout.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="194dp"
android:layout_marginBottom="8dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toTopOf="#+id/textAppearanceHeadline6"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:srcCompat="#drawable/faye" />
<TextView
android:id="#+id/textAppearanceHeadline6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Faye"
android:textColor="#android:color/black"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="#+id/imageView"
app:layout_constraintTop_toBottomOf="#+id/imageView" />
<LinearLayout
android:id="#+id/textAppearanceBody1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/textAppearanceHeadline6"
app:layout_constraintTop_toBottomOf="#+id/textAppearanceHeadline6">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginBottom="8dp"
android:text="Age : 7"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start|right"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="Hobbies: Sunbathing"
android:textColor="#5A5656" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
I am new to android so you are most welcome for code review.

Try to change your layout like this:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="194dp"
android:layout_marginBottom="8dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toTopOf="#+id/textAppearanceHeadline6"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:srcCompat="#drawable/faye" />
<TextView
android:id="#+id/textAppearanceHeadline6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:text="Faye"
android:textColor="#android:color/black"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="#+id/imageView"
app:layout_constraintTop_toBottomOf="#+id/imageView" />
<LinearLayout
android:id="#+id/textAppearanceBody1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/textAppearanceHeadline6"
app:layout_constraintTop_toBottomOf="#+id/textAppearanceHeadline6">
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center|start"
android:text="Age : 7"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hobbies: Sunbathing"
android:gravity="center"
android:textColor="#5A5656" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Use it like this
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_gravity="center_vertical"
android:weight="1"
android:layout_height="wrap_content"
android:text="Age : 7"/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="Hobbies: Sunbathing"
android:textColor="#5A5656" />
weight here will allow the first textview to take all the space and will leave the required space for the hobby textview.
Use it as per your requirement.

Constraint layout in Custom Dialog problem

I have such XML file for custom Dialog:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:paddingHorizontal="15dp"
android:paddingVertical="10dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/cl_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
android:paddingBottom="15dp">
<TextView
style="#style/tv_big"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#id/cl_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:text="Filter"/>
<com.google.android.material.button.MaterialButton
android:id="#+id/bt_reset"
android:textColor="#color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="#id/cl_header"
android:text="RESET FILTERS"/>
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/cl_distance"
app:layout_constraintTop_toBottomOf="#id/cl_header"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/tv_distance_title"
style="#style/tv_medium"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Distance range"/>
<TextView
android:id="#+id/tv_distance_result"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:textAlignment="center"
app:layout_constraintBottom_toBottomOf="#id/tv_distance_title"
app:layout_constraintLeft_toRightOf="#id/tv_distance_title"
app:layout_constraintRight_toRightOf="parent"
android:background="#ddd"
android:padding="3dp"
android:textColor="#333"
android:text="0 km - 500km"/>
<com.google.android.material.slider.RangeSlider
android:id="#+id/slider_distance"
app:layout_constraintTop_toBottomOf="#id/tv_distance_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:labelBehavior="gone"
android:stepSize="1.0" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/cl_location"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/cl_distance"
app:layout_constraintStart_toStartOf="parent">
<TextView
android:id="#+id/tv_location_title"
style="#style/tv_medium"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Location"/>
<EditText
android:id="#+id/et_location"
android:layout_height="wrap_content"
android:layout_width="match_parent"
app:layout_constraintTop_toBottomOf="#id/tv_location_title"
android:hint="#string/filter_location_et_hint" />
</androidx.constraintlayout.widget.ConstraintLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/cl_location"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginTop="10dp"
android:orientation="horizontal">
<Button
android:id="#+id/bt_cancel"
android:backgroundTint="#ccc"
android:textColor="#color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:text="CANCEL"/>
<Button
android:id="#+id/bt_save"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="save"
android:layout_marginHorizontal="20dp"/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Android Studio renders it in this way:
And this is what I want to have in my Dialog.
BUT:
On physical device and on emulator it looks different than in Android Studio:
My question is: how to place "Filter" title on the left, and make the location EditText matching the parent (in the working app)?

What everybody else said is correct, keeping your layout flat is good for both performance and for these situations where you want to quickly figure out why isn't the layout being laid out the way you wanted it ;)
Try this :
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingHorizontal="15dp"
android:paddingVertical="10dp">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="start"
android:text="Filter"
app:layout_constraintBottom_toBottomOf="#id/bt_reset"
app:layout_constraintEnd_toStartOf="#id/bt_reset"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/bt_reset" />
<com.google.android.material.button.MaterialButton
android:id="#+id/bt_reset"
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="RESET FILTERS"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tv_distance_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Distance range"
app:layout_constraintBottom_toBottomOf="#id/tv_distance_result"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/tv_distance_result" />
<TextView
android:id="#+id/tv_distance_result"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:background="#ddd"
android:gravity="center"
android:paddingHorizontal="18dp"
android:paddingVertical="3dp"
android:text="0 km - 500km"
android:textColor="#333"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/bt_reset" />
<com.google.android.material.slider.RangeSlider
android:id="#+id/slider_distance"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stepSize="1.0"
app:labelBehavior="gone"
app:layout_constraintTop_toBottomOf="#id/tv_distance_result" />
<TextView
android:id="#+id/tv_location_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Location"
app:layout_constraintTop_toBottomOf="#id/slider_distance" />
<EditText
android:id="#+id/et_location"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="test"
app:layout_constraintTop_toBottomOf="#id/tv_location_title" />
<Button
android:id="#+id/bt_cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginEnd="20dp"
android:backgroundTint="#ccc"
android:text="CANCEL"
android:textColor="#color/colorBlack"
app:layout_constraintEnd_toStartOf="#id/bt_save"
app:layout_constraintTop_toBottomOf="#id/et_location" />
<Button
android:id="#+id/bt_save"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginEnd="20dp"
android:text="save"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/et_location" />
</androidx.constraintlayout.widget.ConstraintLayout>

I changed inner ConstraintLayouts into LinearLayouts and used weights. I also used this trick to fill space between e.g. "Filter" title and "reset filters" button.
There was also an issue with ll_location LinearLayout - it didn't match the parent.
I replaced:
<LinearLayout
android:id="#+id/ll_location"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/ll_distance_ext"
android:orientation="vertical">
<!-- content -->
</LinearLayout>
into:
<LinearLayout
android:id="#+id/ll_location"
android:layout_width="0dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/ll_distance_ext"
android:orientation="vertical">
<!-- content -->
</LinearLayout>
And then it worked.
The reason why I don't want to use flat layout (why I use nested layouts) is that IMHO the flat layout makes the code more difficult to maintain.
When you have Views splited into groups you can easily replace them, no matter how many View there are in a group.
My solution:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:paddingHorizontal="15dp"
android:paddingVertical="10dp">
<LinearLayout
android:id="#+id/ll_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
android:paddingBottom="15dp">
<TextView
style="#style/tv_big"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:text="Filter"/>
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1" />
<com.google.android.material.button.MaterialButton
android:id="#+id/bt_reset"
android:textColor="#color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
android:text="reset filters"/>
</LinearLayout>
<LinearLayout
android:id="#+id/ll_distance_ext"
app:layout_constraintTop_toBottomOf="#id/ll_header"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/tv_distance_title"
style="#style/tv_medium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Distance range"/>
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1" />
<TextView
android:id="#+id/tv_distance_result"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:textAlignment="center"
android:background="#ddd"
android:padding="3dp"
android:textColor="#333"
android:text="0 km - 500km"/>
</LinearLayout>
<com.google.android.material.slider.RangeSlider
android:id="#+id/slider_distance"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:labelBehavior="gone"
android:stepSize="1.0" />
</LinearLayout>
<LinearLayout
android:id="#+id/ll_location"
android:layout_width="0dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/ll_distance_ext"
android:orientation="vertical">
<TextView
android:id="#+id/tv_location_title"
style="#style/tv_medium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Location"/>
<EditText
android:id="#+id/et_location"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:hint="#string/filter_location_et_hint" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/ll_location"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginTop="10dp"
android:orientation="horizontal">
<Button
android:id="#+id/bt_cancel"
android:backgroundTint="#ccc"
android:textColor="#color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:text="cancel"/>
<Button
android:id="#+id/bt_save"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="save"
android:layout_marginHorizontal="20dp"/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Using Constraint layout not able to place a textview below guideline

I am trying to place a TextView below Guideline. I have tried as below,
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/package_name_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/black"
android:textSize="20sp"
android:text="Package Name"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintTop_toBottomOf="#id/start_guideline"
/>
<androidx.constraintlayout.widget.Guideline
android:id="#+id/start_guideline"
android:layout_width="wrap_content"
android:orientation="horizontal"
android:layout_height="wrap_content"
app:layout_constraintGuide_percent="0.05"/>
<TextView
android:id="#+id/sub_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Subscription"
android:textColor="#color/black"
android:textSize="15sp"
app:layout_constraintTop_toBottomOf="#id/package_name_text_view"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
My Package name TextView is not displaying below Guideline...I am new to use ConstraintLayout. Not able to find my mistake...Anybody help me to solve this.

Remove constraintTop_toTopOf in package_name_text_view
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/package_name_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/black"
android:textSize="20sp"
android:text="Package Name"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/start_guideline"
/>
<androidx.constraintlayout.widget.Guideline
android:id="#+id/start_guideline"
android:layout_width="wrap_content"
android:orientation="horizontal"
android:layout_height="wrap_content"
app:layout_constraintGuide_percent="0.05"/>
<TextView
android:id="#+id/sub_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Subscription"
android:textColor="#color/black"
android:textSize="15sp"
app:layout_constraintTop_toBottomOf="#id/package_name_text_view"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

How to make Imageview not overlap Textview in ConstraintLayout

I have problem to make this widget not overlap each other, what i found like below
(preview when imageview invisible)
(preview when imageview visible)
Here my xml snippet code:
<android.support.constraint.ConstraintLayout
android:id="#+id/constraits"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="5dp">
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
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">
<TextView
android:id="#+id/title_news"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tak Ada Nomor Anrean, Masyarakat Sesalkan Pelayanan Kantor Pos Senpokdsoa"
android:textStyle="bold" />
<TextView
android:id="#+id/date_published"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="4 Menit lalu"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Small"
android:textStyle="italic" />
</LinearLayout>
<ImageView
android:id="#+id/image_news"
android:layout_width="wrap_content"
android:layout_height="70dp"
android:src="#drawable/sample_headline_img2"
android:adjustViewBounds="true"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toEndOf="#+id/linearLayout"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
is there a better solution?

Try below code:
<android.support.constraint.ConstraintLayout
android:id="#+id/constraits"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="5dp">
<TextView
android:id="#+id/title_news"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Tak Ada Nomor Anrean, Masyarakat Sesalkan Pelayanan Kantor Pos Senpokdsoa"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#+id/image_news"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/date_published"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="4 Menit lalu"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Small"
android:textStyle="italic"
app:layout_constraintStart_toStartOf="#+id/title_news"
app:layout_constraintTop_toBottomOf="#+id/title_news"
app:layout_constraintEnd_toStartOf="#+id/image_news" />
<ImageView
android:id="#+id/image_news"
android:layout_width="wrap_content"
android:layout_height="70dp"
android:src="#drawable/sample_headline_img2"
android:adjustViewBounds="true"
android:visibility="visible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
Note: If you are using ConstraintLayout then try to manage every view by setting constraints of view. Here you used LinereLayout to display two TextView vertically which can be done by setting constraints like I did.

In the TextView:
<TextView
android:id="#+id/textView_01"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="The text"
app:layout_constraintEnd_toStartOf="#+id/imageView_01"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent" />
Create a constraint from the end of the textView to the start of the ImageView
app:layout_constraintEnd_toStartOf="#+id/imageView_01"
If you want the text to remain left justified, set the bias to 0.0.
app:layout_constraintHorizontal_bias="0.0"
And the key is making sure setting the width to 0dp:
android:layout_width="0dp"

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="5dp">
<ImageView
android:id="#+id/image_news"
android:layout_width="45dp"
android:layout_height="70dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:src="#drawable/sample_headline_img2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/title_news"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:text="Tak Ada Nomor Anrean, Masyarakat Sesalkan Pelayanan Kantor Pos Senpokdsoa"
app:layout_constraintEnd_toStartOf="#+id/image_news"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/date_published"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:text="4 Menit lalu"
app:layout_constraintEnd_toStartOf="#+id/image_news"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/title_news" />
</android.support.constraint.ConstraintLayout>

Complete Implementation Given as follows, You can try
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="0dp"
android:layout_height="150dp"
android:layout_margin="10dp"
android:gravity="center_vertical"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:layout_editor_absoluteY="8dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:layout_weight="1"
android:gravity="center_vertical"
android:orientation="vertical">
<TextView
android:id="#+id/textView4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:textStyle="bold"
android:text="Tak Ada Nomor Anrean, Masyarakat Sesalkan Pelayanan Kantor Pos Senpokdsoa"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Small" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="4 Menit lalu"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Small" />
</LinearLayout>
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:layout_weight="3"
android:scaleType="center"
app:srcCompat="#drawable/sample_headline_img2" />
</LinearLayout>

How to achieve a responsive layout for small and big screen sizes?

I have a problem with proper scaling the layout.
Here is my layout:
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_marginTop="#dimen/margin_large"
android:layout_marginLeft="#dimen/margin_xlarge"
android:layout_marginRight="#dimen/margin_xlarge">
<include
android:layout_width="match_parent"
android:layout_height="match_parent"
layout="#layout/commissioning_progress_component" />
<com.app.widget.StepProgressArrow
android:id="#+id/progress_arrow_asset_to_sync"
android:layout_width="match_parent"
android:layout_height="#dimen/progress_arrow_size"
app:startColor="#color/circular_progress_middle_color"
app:endColor="#color/circular_progress_end_color"
android:gravity="right"/>
<com.app.widget.StepProgressArrow
android:id="#+id/progress_arrow_sync_to_params"
android:layout_width="#dimen/progress_arrow_size"
android:layout_height="match_parent"
app:startColor="#color/circular_progress_middle_color"
app:endColor="#color/circular_progress_end_color"
android:gravity="bottom" />
<com.app.widget.StepProgressArrow
android:id="#+id/progress_arrow_params_to_completed"
android:layout_width="match_parent"
android:layout_height="#dimen/progress_arrow_size"
app:startColor="#color/circular_progress_middle_color"
app:endColor="#color/circular_progress_end_color"
android:gravity="left" />
<TextView
android:id="#+id/progress_text_stage_params"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/AppWidget.Text.Emphasized"
android:gravity="center"
android:textColor="#color/circular_progress_middle_color"
android:text="#string/msg_in_store_commissioning_stage_params" />
</FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/commissioning_upload_info"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/margin_normal"
android:layout_marginRight="#dimen/margin_normal"
android:layout_marginTop="#dimen/margin_normal"
android:gravity="center"
style="#style/AppWidget.Text.Gray.XSmall"
android:text="#string/msg_commissioning_cloud_upload_info"
android:visibility="gone"
tools:visibility="visible" />
<Button
android:id="#+id/button_back_to_device_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/margin_normal"
android:layout_marginRight="#dimen/margin_normal"
android:layout_marginTop="#dimen/margin_small"
android:layout_marginBottom="#dimen/margin_small"
android:text="#string/button_back_to_device_list"
android:visibility="gone"
tools:visibility="visible"
style="#style/AppWidget.Button"/>
<TextView
android:id="#+id/cloning_finished_info"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/margin_normal"
android:layout_marginRight="#dimen/margin_normal"
android:layout_marginTop="#dimen/margin_normal"
style="#style/AppWidget.Text.Gray.Medium"
android:text="#string/new_controller_installed"
android:visibility="gone"
tools:visibility="visible" />
<Button
android:id="#+id/button_continue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/margin_normal"
android:layout_marginRight="#dimen/margin_normal"
android:layout_marginTop="#dimen/margin_small"
android:layout_marginBottom="#dimen/margin_small"
android:layout_gravity="right"
android:paddingLeft="#dimen/margin_normal"
android:paddingRight="#dimen/margin_normal"
android:text="#string/button_continue"
android:visibility="gone"
tools:visibility="visible"
style="#style/AppWidget.Button.Green"/>
</LinearLayout>
<TextView
android:id="#+id/sync_time_left_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="#dimen/margin_small"
style="#style/AppWidget.Text.Gray.Medium"
android:gravity="center"
android:visibility="gone"
android:padding="#dimen/margin_small"
android:background="#drawable/box"
tools:visibility="visible"
tools:text="Time left 5s"/>
</FrameLayout>
And here is the layout that i am including:
<?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">
<com.app.widget.CircularColorProgressView
android:id="#+id/progress_stage_asset"
android:layout_width="#dimen/circular_color_progress_size_small"
android:layout_height="#dimen/circular_color_progress_size_small"
android:layout_marginStart="24dp"
app:hideText="true"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:skipStartColor="true" />
<TextView
android:id="#+id/progress_text_stage_asset"
style="#style/AppWidget.Text.Emphasized"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="22dp"
android:layout_marginTop="12dp"
android:gravity="center"
android:text="#string/msg_in_store_commissioning_stage_asset"
android:textColor="#color/circular_progress_middle_color"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/progress_stage_asset"
app:layout_gravity="center_horizontal"
/>
<com.app.widget.CircularColorProgressView
android:id="#+id/progress_stage_sync"
android:layout_width="#dimen/circular_color_progress_size_small"
android:layout_height="#dimen/circular_color_progress_size_small"
android:layout_marginEnd="10dp"
app:hideText="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:skipStartColor="true" />
<TextView
android:id="#+id/progress_text_stage_sync"
style="#style/AppWidget.Text.Emphasized"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margin_small"
android:gravity="center"
android:text="#string/msg_in_store_commissioning_stage_sync"
android:textColor="#color/circular_progress_middle_color"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/progress_stage_sync"
app:layout_gravity="center_horizontal" />
<com.app.widget.CircularColorProgressView
android:id="#+id/progress_stage_completed"
android:layout_width="#dimen/circular_color_progress_size_medium"
android:layout_height="#dimen/circular_color_progress_size_medium"
android:layout_marginBottom="48dp"
app:hideText="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_gravity="center_horizontal"
app:skipStartColor="true" />
<TextView
android:id="#+id/progress_text_stage_completed"
style="#style/AppWidget.Text.Emphasized"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="3dp"
android:layout_marginTop="#dimen/margin_small"
android:gravity="center"
android:text="#string/msg_in_store_commissioning_stage_completed"
android:textColor="#color/circular_progress_middle_color"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/progress_stage_completed"
app:layout_gravity="center_horizontal" />
<com.app.widget.CircularColorProgressView
android:id="#+id/progress_stage_params"
android:layout_width="#dimen/circular_color_progress_size_small"
android:layout_height="#dimen/circular_color_progress_size_small"
android:layout_marginBottom="72dp"
android:layout_marginEnd="10dp"
app:hideText="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:skipStartColor="true" />
So here is what that include layout looks like, it scales fine for every screen(from 3.7 to 6.0):
And here is the problem with scaling the wholelayout.
This is how it looks for screen 6.0:
And here is the issue with screen 3.7
So how to properly scale my layout for this case?

have you tried using relative layouts to position each item relative to another.Maybe thatll help.Enclose all your layouts in a relative layout and use aspects such as to_right of etc.Always works for me