Develop Reference

Android GUI looks different when using margin and padding

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

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>

ConstraintLayout and table

I want to get table 3х3. The rows should have the same height and the cells should be equal.
I tried using ConstraintLayout with weights and it works if i make one row
<TextView
android:id="#+id/view_1"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintHorizontal_weight="3"
android:text="view_1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/view_2"/>
But if I try to add second row and constraintVertical_weight for views (using height=0dp) they disappear. Is it possible to solve this problem without additional layouts?

If you're adamant on using constraint layout, the one below is a 3x3 table with all the appropriate constraints. As you populate the textviews, you can add the chain type (you can use "spread" in your case)
<?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/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView4"
app:layout_constraintEnd_toStartOf="#+id/textView2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView5"
app:layout_constraintEnd_toStartOf="#+id/textView3"
app:layout_constraintStart_toEndOf="#+id/textView"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginTop="8dp"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView6"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/textView2"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginStart="8dp"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView7"
app:layout_constraintEnd_toStartOf="#+id/textView5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView" />
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView8"
app:layout_constraintEnd_toStartOf="#+id/textView6"
app:layout_constraintStart_toEndOf="#+id/textView4"
app:layout_constraintTop_toBottomOf="#+id/textView2" />
<TextView
android:id="#+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView9"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/textView5"
app:layout_constraintTop_toBottomOf="#+id/textView3" />
<TextView
android:id="#+id/textView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="TextView"
app:layout_constraintEnd_toStartOf="#+id/textView8"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView4" />
<TextView
android:id="#+id/textView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="TextView"
app:layout_constraintEnd_toStartOf="#+id/textView9"
app:layout_constraintStart_toEndOf="#+id/textView7"
app:layout_constraintTop_toBottomOf="#+id/textView5" />
<TextView
android:id="#+id/textView9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginTop="8dp"
android:text="TextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/textView8"
app:layout_constraintTop_toBottomOf="#+id/textView6" />
</android.support.constraint.ConstraintLayout>

Assuming you have fixed width and height, the 3x3 cell can be created with ConstraintLayout with each cell having same width and height. Here's the code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textview_1"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
app:layout_constraintBottom_toTopOf="#id/textview_4"
app:layout_constraintEnd_toStartOf="#id/textview_2"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="spread"
tools:text="TextView 1" />
<TextView
android:id="#+id/textview_2"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
app:layout_constraintBottom_toBottomOf="#id/textview_1"
app:layout_constraintEnd_toStartOf="#id/textview_3"
app:layout_constraintStart_toEndOf="#id/textview_1"
app:layout_constraintTop_toTopOf="#id/textview_1"
tools:text="TextView 2" />
<TextView
android:id="#+id/textview_3"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
app:layout_constraintBottom_toBottomOf="#id/textview_1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/textview_2"
app:layout_constraintTop_toTopOf="#id/textview_1"
tools:text="TextView 3" />
<TextView
android:id="#+id/textview_4"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
app:layout_constraintBottom_toTopOf="#id/textview_7"
app:layout_constraintEnd_toEndOf="#id/textview_1"
app:layout_constraintStart_toStartOf="#id/textview_1"
app:layout_constraintTop_toBottomOf="#id/textview_1"
tools:text="TextView 4" />
<TextView
android:id="#+id/textview_5"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
app:layout_constraintBottom_toBottomOf="#id/textview_4"
app:layout_constraintEnd_toEndOf="#id/textview_2"
app:layout_constraintStart_toStartOf="#id/textview_2"
app:layout_constraintTop_toTopOf="#id/textview_4"
tools:text="TextView 5" />
<TextView
android:id="#+id/textview_6"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
app:layout_constraintBottom_toBottomOf="#id/textview_4"
app:layout_constraintEnd_toEndOf="#id/textview_3"
app:layout_constraintStart_toStartOf="#id/textview_3"
app:layout_constraintTop_toTopOf="#id/textview_4"
tools:text="TextView 6" />
<TextView
android:id="#+id/textview_7"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#id/textview_1"
app:layout_constraintStart_toStartOf="#id/textview_1"
app:layout_constraintTop_toBottomOf="#id/textview_4"
tools:text="TextView 7" />
<TextView
android:id="#+id/textview_8"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
app:layout_constraintBottom_toBottomOf="#id/textview_7"
app:layout_constraintEnd_toEndOf="#id/textview_2"
app:layout_constraintStart_toStartOf="#id/textview_2"
app:layout_constraintTop_toTopOf="#id/textview_7"
tools:text="TextView 8" />
<TextView
android:id="#+id/textview_9"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
app:layout_constraintBottom_toBottomOf="#id/textview_7"
app:layout_constraintEnd_toEndOf="#id/textview_3"
app:layout_constraintStart_toStartOf="#id/textview_3"
app:layout_constraintTop_toTopOf="#id/textview_7"
tools:text="TextView 9" />
</android.support.constraint.ConstraintLayout>
Here a vertical chain has been created on the first column and a horizontal chain has been created on the first row. This way you can control the width of all the cells from the first row and control the height of all the cells from the first column. This also saves you from creating multiple chains in a layout and all of the chains in this layout which are actually 2 reside only on the first TextView only, so it is more manageable.
I hope this helps and let me know if you have any questions regarding this.

ConstraintLayout : How to create this layout using the ConstraintLayout

I want to create this layout using the ConstraintLayout:
The "My Device" lies in the top-left corner, the "Bedroom" lies in the top-right corner, the user icon lies in the left of the layout, below "My Device". These 3 items are ok with ConstraintLayout. The problem is the center-right content area, include the "20:30" and an imageview.
I want them lie in the area that below "Bedroom" and "My Device", and to right of the user icon. My layout file is below:
<?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="255dp"
android:layout_height="#dimen/device_main_page_grid_item_height"
android:background="#drawable/rounded_white_bg_2"
android:layoutDirection="ltr"
android:transitionName="card_in">
<TextView
android:id="#+id/tv_num1"
style="#style/device_main_grid_item_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="9dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="6dp"
android:fadingEdge="horizontal"
android:fadingEdgeLength="#dimen/list_title_default_title_fade_edge"
android:includeFontPadding="false"
android:requiresFadingEdge="none"
android:text="My Device"
android:textColor="#color/class_V"
android:textSize="#dimen/font_size_13sp"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#id/tv_num"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tv_num"
style="#style/device_main_grid_item_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:layout_marginRight="10dp"
android:background="#drawable/rounded_gray_bg_3"
android:fadingEdge="horizontal"
android:gravity="center"
android:includeFontPadding="false"
android:paddingLeft="5dp"
android:paddingTop="1dp"
android:paddingRight="5dp"
android:paddingBottom="1dp"
android:text="Bedroom"
android:textColor="#FF999999"
android:textSize="#dimen/font_size_11sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#id/tv_num1" />
<ImageView
android:id="#+id/icon"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginLeft="1dp"
android:layout_marginTop="1dp"
android:layout_marginBottom="1dp"
android:src="#drawable/default_avatar"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1,1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#id/tv_num1" />
<View
android:id="#+id/devider_line"
android:layout_width="match_parent"
android:layout_height="1px"
app:layout_constraintTop_toBottomOf="#id/tv_num1"
/>
<RelativeLayout
android:id="#+id/right_bottom_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/devider_line"
app:layout_constraintStart_toEndOf="#id/icon"
app:layout_constraintLeft_toRightOf="#id/icon"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent">
<ImageView
android:id="#+id/shortcut"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="6dp"
android:layout_marginRight="6dp"
android:layout_marginBottom="6dp"
android:contentDescription="#string/operation_open_close"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:src="#drawable/kuailian_confirm_loading_filled"
android:visibility="visible"
/>
<TextView
android:id="#+id/status_tv"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_toLeftOf="#id/shortcut"
android:layout_centerVertical="true"
android:textSize="30dp"
android:text="20:30"
/>
</RelativeLayout>
<CheckBox
android:id="#+id/ckb_edit_selected"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:background="#drawable/list_icon_selector"
android:button="#null"
android:clickable="false"
android:focusable="false"
android:maxWidth="8dp"
android:maxHeight="8dp"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1,1"
app:layout_constraintRight_toRightOf="parent" />
</android.support.constraint.ConstraintLayout>
However, the preview of the layout is below in android studio:
It seems the center-right content area overlaps with the "Bedroom", and is not below the "Bedroom", which it should be.
How to create this layout using ConstrantLayout?

So you can make something like this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="255dp"
android:layout_height="70dp"
xmlns:app="http://schemas.android.com/apk/res-auto">
<TextView
android:id="#+id/myDevice"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="My device"
android:layout_margin="8dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
<ImageView
android:id="#+id/img1"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:src="#mipmap/ic_launcher"
app:layout_constraintTop_toBottomOf="#+id/myDevice"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
<TextView
android:id="#+id/clock"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="20:30"
android:textSize="24sp"
app:layout_constraintTop_toTopOf="#id/img1"
app:layout_constraintBottom_toBottomOf="#id/img1"
app:layout_constraintStart_toEndOf="#id/img1"
app:layout_constraintEnd_toStartOf="#id/img2"/>
<TextView
android:id="#+id/Bedroom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Bedroom"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#id/myDevice"/>
<ImageView
android:id="#+id/img2"
android:layout_width="0dp"
android:layout_height="0dp"
android:src="#mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/Bedroom"
app:layout_constraintStart_toEndOf="#id/clock"/>
</android.support.constraint.ConstraintLayout>
Result that you will get be like:

how to align a text view in a listView?

I am not getting proper alignment even though I constrained the textviews.My text is running over the other text which looks messy.
Here is the screenshot of that.
I want it to align properly even if the text goes some large.Please suggest some ways to do that.
Here is the code for my layout-
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/magnitude"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="24dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="24dp"
android:layout_marginRight="8dp"
android:layout_marginStart="24dp"
android:layout_marginTop="24dp"
android:textSize="20sp"
android:textStyle="bold"
android:textColor="#color/colorPrimary"
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.0"
tools:text="7.5" />
<TextView
android:id="#+id/place"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="24dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="32dp"
android:layout_marginRight="8dp"
android:maxWidth="135dp"
android:layout_marginStart="32dp"
android:layout_marginTop="24dp"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/date"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/magnitude"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
tools:text="Rio de Janerio" />
<TextView
android:id="#+id/date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="24dp"
android:layout_marginEnd="24dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="24dp"
android:layout_marginStart="8dp"
android:layout_marginTop="24dp"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.967"
app:layout_constraintStart_toEndOf="#+id/magnitude"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
tools:text="May 20,2016" />
</android.support.constraint.ConstraintLayout>
The New layout that I want is in this image

You can use this library to fit text
build gradle file(app):
implementation 'me.grantland:autofittextview:0.2.+'
Usage in layout
<me.grantland.widget.AutofitTextView
android:id="#+id/question_title"
android:layout_width="match_parent"
android:layout_height="125dp"
android:layout_gravity="center"
android:gravity="center"
android:padding="8dp"
android:text="Post samething"
android:textAlignment="center"
android:textColor="#color/icons"
android:textStyle="bold"
android:maxLines="2"
android:textSize="30sp"
autofit:minTextSize="16sp"
/>
You can read more from this link
Hope this helps

I have re created your layout please use below
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum=".6"
android:padding="15dp"
android:orientation="horizontal">
<TextView
android:id="#+id/magnitude"
android:layout_width="0dp"
android:layout_weight=".1"
android:layout_height="wrap_content"
android:textSize="20sp"
android:padding="5dp"
android:textStyle="bold"
android:textColor="#color/colorPrimary"
tools:text="7.5" />
<TextView
android:id="#+id/place"
android:layout_width="0dp"
android:layout_weight=".3"
android:layout_height="wrap_content"
android:textSize="20sp"
android:padding="5dp"
tools:text="Rio de Janerio" />
<TextView
android:id="#+id/date"
android:layout_width="0dp"
android:layout_weight=".2"
android:padding="5dp"
android:layout_height="wrap_content"
android:textSize="20sp"
tools:text="May 20,2016" />
</LinearLayout>

if you are working with constraint layout you can use the baseline of the text view for this purpose
Baseline alignment
Align the text baseline of a view to the text baseline of another view.
See the related section in the documentation in order to learn how to use the baseline allinment
https://developer.android.com/training/constraint-layout/#baseline