Develop Reference

Android - Constraint Layout - Alignment of Text and Icon

first of all I am new to Android-Development.
My question is regards alignment of different views in Android Studio/Development.
Specifically the properly height-alignment of an icon and text.
Icon-Text-Alignment
As you can see, I tried to align the text with the icon. However the result looks slightly different in the emulator.
Here is my .xml-file:
<?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=".DashboardActivity">
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginStart="32dp"
android:layout_marginTop="32dp"
android:layout_marginBottom="352dp"
android:fontFamily="#font/poppins_medium"
android:text="Dashboard"
android:textAlignment="viewStart"
android:textColor="#color/colorText"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/imageView10"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.04" />
<ImageView
android:id="#+id/imageView10"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginEnd="32dp"
app:layout_constraintBottom_toBottomOf="#+id/textView3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/textView3"
app:layout_constraintTop_toTopOf="#+id/textView3"
app:srcCompat="#drawable/ic_settings_black_24dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
My questions are:
1. How can i fix the alignment of these two views?
2. Why is the result in the emulator different?
3. Is there a best-practice to align views properly?

<?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=".DashboardActivity">
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginStart="32dp"
android:layout_marginTop="32dp"
android:layout_marginBottom="352dp"
android:fontFamily="#font/poppins_medium"
android:text="Dashboard"
android:textAlignment="viewStart"
android:textColor="#color/colorText"
android:textSize="30sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toStartOf="#+id/imageView10" />
<ImageView
android:id="#id/imageView10"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginEnd="32dp"
app:srcCompat="#drawable/ic_settings_black_24dp"
app:layout_constraintTop_toTopOf="#id/textView3"
app:layout_constraintBottom_toBottomOf="#id/textView3"
app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

You can do this simply by using a custom toolbar and adding a menu to it.

Try using Custom toolbar :
<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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".terminalShortActivity">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#4EACE2"
app:popupTheme="#style/ThemeOverlay.AppCompat">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:orientation="horizontal">
<TextView
style="#style/TextAppearance.AppCompat.Widget.ActionBar.Title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Terminal Shortcuts"
android:textColor="#FFFFFF" />
</LinearLayout>
</androidx.appcompat.widget.Toolbar>
</LinearLayout>

So I dig into the alignment issue a little further and came up with a few "solutions". Generally speaking and to answer my questions the "Custom Toolbar" is not the right solution to align the views.
The problem lies in the padding of fonts. Android take the whole view to align views and not as assumed the "text" only. Therefore the alignment looks off.
Different paddings/fonts
Poppinsmedium: without padding
Poppinsmedium: with padding; normal state
Android-Font: with padding; normal state
The bottom-padding can be eliminated with the following code:
android:includeFontPadding="false"
Or check this thread for more in-depth knowledge of the issues of font-padding.
To align views, now I am using Chain-Constraints and do it without padding. It looks like the best-way to align views, especially Text-Views. However, I have to say that despite the deleting of the bottom padding it is necessary to adjust the alignment a littlebit with the vertical-bias.
For reference:
constraintlayout.com
Android-Doc: constrain-chain

ConstraintLayout content stuck in middle of screen

After adding a ConstraintLayout inside a ScrollView, I noticed that the content remains stuck in the middle of the screen (both horizontally and vertically). I already tried add android:layout_gravity="top" to the main ConstraintLayout but that didn't work. Is there something else I can use to position the content at the top?
<?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="wrap_content"
android:fillViewport="true">
<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/cl_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingStart="#dimen/activity_horizontal_margin"
android:paddingEnd="#dimen/activity_horizontal_margin">
<androidx.cardview.widget.CardView
android:id="#+id/cv_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="30dp"
app:cardUseCompatPadding="true"
app:contentPadding="10dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toTopOf="#+id/tv_disclaimer">
<LinearLayout
android:id="#+id/ll_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/iv_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:importantForAccessibility="no"
android:paddingEnd="10dp" />
<TextView
android:id="#+id/tv_title"
style="#android:style/TextAppearance.Medium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="?android:attr/textColorPrimary" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<TextView
android:id="#+id/tv_disclaimer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:gravity="center"
android:textColor="?android:attr/textColorPrimary"
app:layout_constraintTop_toBottomOf="#+id/cv_title"
app:layout_constraintBottom_toTopOf="#+id/cv_description"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
style="#android:style/TextAppearance.Medium" />
<androidx.cardview.widget.CardView
android:id="#+id/cv_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardUseCompatPadding="true"
app:contentPadding="10dp"
app:layout_constraintTop_toBottomOf="#+id/tv_disclaimer"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent">
<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/cl_description"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/ll_allergies"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toTopOf="#+id/ll_ingredients">
<ImageView
android:id="#+id/iv_allergies"
android:importantForAccessibility="no"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingEnd="5dp"/>
<TextView
android:id="#+id/tv_allergies"
style="#android:style/TextAppearance.Large"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:textColor="?android:attr/textColorPrimary" />
</LinearLayout>
<LinearLayout
android:id="#+id/ll_allergyinfo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintTop_toBottomOf="#+id/ll_allergies"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toTopOf="#+id/ll_ingredients">
<TextView
android:id="#+id/tv_allergyinfo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="?android:attr/textColorPrimary"
android:layout_marginBottom="2dp"
android:gravity="start"
style="#android:style/TextAppearance.Medium" />
</LinearLayout>
<LinearLayout
android:id="#+id/ll_ingredients"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintTop_toBottomOf="#+id/ll_allergyinfo"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
<ImageView
android:id="#+id/iv_ingredients"
android:importantForAccessibility="no"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingEnd="5dp" />
<TextView
android:id="#+id/tv_ingredients"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:textColor="?android:attr/textColorPrimary"
style="#android:style/TextAppearance.Large" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
Current result

Two important things are going on here.
The first is that your ScrollView specifies android:fillViewport="true". This means that whenever the contents of the ScrollView are "smaller" than the screen size, they will be stretched to fill the screen. In other words, your wrap_content ConstraintLayout will only actually wrap its content when you have to scroll. In all other cases, your ConstraintLayout will functionally be match_parent in height.
The second is that the constraints on your CardView, TextView, and second CardView form a vertical chain. Chains have special behavior regarding spacing when the parent is larger than the sum of the views in the chain (which it is due to the fillViewport behavior discussed above); the default is "spread", which will position the three views such that all the remaining space is evenly divided into four chunks (one at the start of the chain, one between the first two views, one between the second two views, and the last at the end of the chain).
How to fix it, though?
The best thing to do is to break the chain. Assuming you just want the views all stacked one after the other, starting from the top of the screen, there's no need to use a chain. To break the chain, remove the bottom constraint from each view:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
...>
<androidx.constraintlayout.widget.ConstraintLayout
...>
<androidx.cardview.widget.CardView
android:id="#+id/cv_title"
...
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent">
...
</androidx.cardview.widget.CardView>
<TextView
android:id="#+id/tv_disclaimer"
...
app:layout_constraintTop_toBottomOf="#+id/cv_title"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<androidx.cardview.widget.CardView
android:id="#+id/cv_description"
...
app:layout_constraintTop_toBottomOf="#+id/tv_disclaimer"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent">
...
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
Alternatively, you could delete the fillViewport attribute from your ScrollView. Without this, the child ConstraintLayout won't ever be stretched to fill the screen, and wrap_content will mean that there's never any extra space to spread out between your chain views.

Try removing app:layout_constraintTop_toTopOf="parent" from your ll_allergies LinearLayout. When copied on my AS it was this line that was adding the unnecessary space between the textview and the layout. Alternatively, keep the constraint and add 0dp on its height so that it enforces the constraint.
UPDATE after comment: I think your views are overlapping because the bottom constraint of ll_allergies is on the top of ll_ingredients instead of ll_allergyinfo. Try changing this:
app:layout_constraintBottom_toTopOf="#id/ll_ingredients"
to this:
app:layout_constraintBottom_toTopOf="#id/ll_allergyinfo"
and bring back the wrap_content of ll_alergies. Hopefully, now everything will fall into place

Update: response no longer valide after the code was updated
There are some errors in your code:
1.you set the layout to be to bottom of itself
android:id="#+id/ll_ingredients"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintTop_toBottomOf="#+id/ll_ingredients"`
the id "ll_alighting" is not defined

Why are the XML Elements not visible on my emulator in android studio?

My problem is that the controls (checkboxes, buttons etc) which I have placed are not visible on my emulator.
Below is my XML file:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<Button
android:id="#+id/btn1"
android:layout_width="match_parent"
android:layout_height="52dp"
android:text="#string/btn1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
tools:ignore="MissingConstraints"
tools:layout_editor_absoluteY="0dp" />
<Button
android:id="#+id/btn2"
android:layout_width="match_parent"
android:layout_height="77dp"
android:text="#string/btn2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
tools:ignore="MissingConstraints"
tools:layout_editor_absoluteY="68dp" />
<fragment
android:id="#+id/fragment"
android:name="com.example.mypc.fragmentactivity.Fragment1"
android:layout_width="222dp"
android:layout_height="285dp"
android:layout_marginBottom="40dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:ignore="MissingConstraints" />
Here is my XML (design view):
Here is my emulator window:
Is there is something wrong in my XML file?
Please provide me solution for this.
How should I handle this?

You are using ConstraintLayout without relative positioning.
According to developer site:
Relative positioning is one of the basic building blocks of creating layouts in ConstraintLayout. Those constraints allow you to position a given widget relative to other. You can constrain a widget on the horizontal and vertical axis:
Horizontal Axis: left, right, start and end sides
Vertical Axis: top, bottom sides, and text baseline
Here is the solution which may help you:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<Button
android:id="#+id/btn1"
android:layout_width="match_parent"
android:layout_height="52dp"
android:text="#string/btn1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="#id/btn2"/>
<Button
android:id="#+id/btn2"
android:layout_width="match_parent"
android:layout_height="77dp"
android:text="#string/btn2"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/btn1"
android:layout_marginTop="10dp"/>
</android.support.constraint.ConstraintLayout>
I have used relative positioning to solve the problem. If you are using constraint layout then without relative positioning your views will get overlap with each other.

Because you didn't align properly the second button. it seems like second button overlap first one.
try this one
<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=".activites.HomeActivity"
android:layout_margin="6dp">
<Button
android:id="#+id/btnOne"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Button One"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/btnTwo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Button Two"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/btnOne" />
<fragment
android:id="#+id/fragment"
android:layout_width="222dp"
android:layout_height="285dp"
android:layout_marginBottom="40dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/btnTwo"
tools:ignore="MissingConstraints" />
</android.support.constraint.ConstraintLayout>
output would be like this

In your code your elements are overflowing each other at one position that is why they are not visible.
My suggestion is do not constraint Layout at initial stage of learning android.
Use Linear Layout in place of constraint Layout.
Since in constraint Layout Layout Editor uses constraints to determine the position of a UI element within the layout. You have to give many constraint XML attributes like.
app:layout_editor_absoluteX="73dp"
app:layout_editor_absoluteY="176dp"
app:layout_constraintLeft_creator="1"
app:layout_constraintTop_creator="1"
app:layout_constraintRight_creator="1"
to specify the position of elements in layout.
Use Linear Layout in place of Constraint Layout and give
orientation:"vetical"
to view all your elements.

The layout_editor attributes are only used for the editor preview and have no effect on the final layouts. You should position your elements using the ConstraintLayout specific attributes.
It's used to just for preview purpose.
tools:layout_editor_absoluteY="68dp"

Simply use LinearLayout instead of ConstraintLayout. Also provide orientation vertical to that LinearLayout.
It will helps you
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<Button
android:id="#+id/btn1"
android:layout_width="match_parent"
android:layout_height="52dp"
android:text="#string/btn1" />
<Button
android:id="#+id/btn2"
android:layout_width="match_parent"
android:layout_height="77dp"
android:text="#string/btn2" />
<fragment
android:id="#+id/fragment"
android:name="com.example.mypc.fragmentactivity.Fragment1"
android:layout_width="222dp"
android:layout_height="285dp"
android:layout_marginBottom="40dp" />
</LinearLayout>

Constraint Layout Getting a default top margin for imageview

I am trying to create a layout using constraint layout, with an ImageView on top, a button in the ImageView, a TextView below it and then another TextView below it. Following is the xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
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:layout_margin="10dp"
app:cardElevation="4dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/news_image1"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="16:9"
android:scaleType="centerCrop"
android:adjustViewBounds="true"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="0dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toTopOf="#+id/news_title1"/>
<ImageButton
android:id="#+id/news_share_button_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:src="#drawable/share_button_big"
app:layout_constraintBottom_toBottomOf="#+id/news_image1"
app:layout_constraintRight_toRightOf="#+id/news_image1"
android:layout_marginRight="15dp"
android:layout_marginEnd="15dp"/>
<TextView
android:id="#+id/news_title1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:gravity="center_vertical|start"
android:layout_alignParentBottom="true"
android:lines="3"
android:ellipsize="end"
app:layout_constraintTop_toBottomOf="#+id/news_image1"
app:layout_constraintBottom_toTopOf="#+id/news_read_more1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:textColor="#color/colorPrimaryText"
android:layout_margin="#dimen/news_cell0_textview_margin"
android:textSize="12sp"
android:typeface="monospace" />
<TextView
android:id="#+id/news_read_more1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:gravity="center_vertical|start"
android:layout_alignParentBottom="true"
android:lines="1"
android:ellipsize="end"
app:layout_constraintTop_toBottomOf="#+id/news_title1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
android:textColor="#color/read_more_text_color"
android:text="#string/news_read_more"
android:layout_margin="#dimen/news_cell0_textview_margin"
android:textSize="10sp" />
</android.support.constraint.ConstraintLayout>
</RelativeLayout>
</android.support.v7.widget.CardView>
Everything is correct except for a small margin on top of the first ImageView. Whatever I do I cannot get rid of that margin. See the image below.
Please note the margin between the top of the ImageView and the card, that is what is troubling me.

Your news_image, news_title1, and news_read_more1 views form a chain. Apparently, though I cannot find documentation on this, all views in a vertical chain will share vertical margins. In other words, applying a layout_marginTop or layout_marginBottom attribute to one of those three views will wind up applying it to all three of them.
You will have to re-allocate your margins, keeping this in mind.
Edit
Looks like the behavior is a little more sophisticated than I thought. First of all, it looks like it only applies to views with the spread "chain style" (which is the default). Second, it looks like top margin is applied to the view it is specified on as well as all views above that one in the chain, while bottom margin is applied to the view it is specified on as well as all views below that one in the chain. Finally, it appears that margins are cumulative (so if you had 10dp top margin on your bottom view and 20dp top margin on your middle view, the final result would be 30dp on your top view, 30dp on your middle view, and 10dp on your bottom view).
As for how to solve this problem in your specific case? You should be able to use left/right margins without issue. And then probably you should use bottom margin on your top view to space the three views out.
Edit #2
Muthukrishnan's answer made me realize that you could solve this problem by simply removing the chain from your views. If you delete the app:layout_constraintBottom_toTopOf="#+id/news_title1" constraint from your ImageView, that will break the chain and now the vertical margins aren't shared.

Thanks to the great starter by Ben P, I managed to figure out a solution. There are three(plus one weighed) chaining styles available in ConstraintLayout. According to this great tutorial the chaining styles are explained as:
Spread: The views are evenly distributed. E.g.
app:layout_constraintHorizontal_chainStyle=”spread”
app:layout_constraintVertical_chainStyle=”spread”
Spread inside: The first and last view are affixed to the constraints on each end of the chain and the rest are evenly distributed. E.g.
app:layout_constraintHorizontal_chainStyle=”spread_inside”
app:layout_constraintVertical_chainStyle=”spread_inside”
Packed: The views are packed together (after margins are accounted for). You can then adjust the whole chain’s bias (left/right or up/down) by changing the chain’s head view bias. E.g.
app:layout_constraintHorizontal_chainStyle=”packed”
app:layout_constraintVertical_chainStyle=”packed”
Weighted: When the chain is set to either spread or spread inside, you can fill the remaining space by setting one or more views to “match constraints” (0dp). By default, the space is evenly distributed between each view that's set to "match constraints," but you can assign a weight of importance to each view using thelayout_constraintHorizontal_weight and layout_constraintVertical_weight attributes. If you're familiar with layout_weight in a linear layout, this works the same way. So the view with the highest weight value gets the most amount of space; views that have the same weight get the same amount of space.
spread is the default chaining style. I changed it to spread_inside so that the first and last views are affixed to the constraints on each end of the chain(hence obeying the margins provided). The xml now looks like:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
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:layout_margin="10dp"
app:cardElevation="4dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/news_image1"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="16:9"
android:scaleType="centerCrop"
android:adjustViewBounds="true"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="0dp"
app:layout_constraintVertical_chainStyle="spread_inside"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toTopOf="#+id/news_title1"/>
<ImageButton
android:id="#+id/news_share_button_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:src="#drawable/share_button_big"
app:layout_constraintBottom_toBottomOf="#+id/news_image1"
app:layout_constraintRight_toRightOf="#+id/news_image1"
android:layout_marginRight="15dp"
android:layout_marginEnd="15dp"/>
<TextView
android:id="#+id/news_title1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:gravity="center_vertical|start"
android:layout_alignParentBottom="true"
android:lines="3"
android:ellipsize="end"
app:layout_constraintVertical_chainStyle="spread_inside"
app:layout_constraintTop_toBottomOf="#+id/news_image1"
app:layout_constraintBottom_toTopOf="#+id/news_read_more1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:textColor="#color/colorPrimaryText"
android:layout_margin="#dimen/news_cell0_textview_margin"
android:textSize="12sp"
android:typeface="monospace" />
<TextView
android:id="#+id/news_read_more1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:gravity="center_vertical|start"
android:layout_alignParentBottom="true"
android:lines="1"
android:ellipsize="end"
app:layout_constraintVertical_chainStyle="spread_inside"
app:layout_constraintTop_toBottomOf="#+id/news_title1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
android:textColor="#color/read_more_text_color"
android:text="#string/news_read_more"
android:layout_margin="#dimen/news_cell0_textview_margin"
android:textSize="10sp" />
</android.support.constraint.ConstraintLayout>
</RelativeLayout>
</android.support.v7.widget.CardView>

Try this, I remove app:layout_constraintTop_toTopOf="parent" in your layout it works
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
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:layout_margin="10dp"
app:cardElevation="4dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/news_image1"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="16:9"
android:scaleType="centerCrop"
android:adjustViewBounds="true"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"/>
<ImageButton
android:id="#+id/news_share_button_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:src="#drawable/ic_menu_share"
app:layout_constraintBottom_toBottomOf="#+id/news_image1"
app:layout_constraintRight_toRightOf="#+id/news_image1"
android:layout_marginRight="15dp"
android:layout_marginEnd="15dp"/>
<AliasTextView
android:id="#+id/news_title1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:gravity="center_vertical|start"
android:layout_alignParentBottom="true"
android:lines="3"
android:ellipsize="end"
app:layout_constraintTop_toBottomOf="#+id/news_image1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:textColor="#color/colorPrimaryText"
android:layout_margin="#dimen/news_cell0_textview_margin"
android:textSize="12sp"
android:typeface="monospace" />
<TextView
android:id="#+id/news_read_more1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:gravity="center_vertical|start"
android:layout_alignParentBottom="true"
android:lines="1"
android:ellipsize="end"
app:layout_constraintTop_toBottomOf="#+id/news_title1"
app:layout_constraintLeft_toLeftOf="parent"
android:textColor="#color/read_more_text_color"
android:text="#string/news_read_more"
android:layout_margin="#dimen/news_cell0_textview_margin"
android:textSize="10sp" />
</android.support.constraint.ConstraintLayout>
</RelativeLayout>
</android.support.v7.widget.CardView>

ConstraintLayout: how to center a view under another and also stay within parent bounds?

I want to center a view under another like this "sign out" button under the email:
I did this by using a ConstraintLayout as the parent and constraining the bottom view's left and right edges to the left and right edges of the top view. This properly centers the two views. (Note that I don't want to center the views in the parent.)
The problem I'm having is that if the top view is narrow, the bottom view can end up truncated on the right by the parent, as here (from the layout editor):
I don't know in advance how narrow the top view will be at run time. (It won't necessarily be an email address, and, even if it were, I know someone whose email address is only 8 characters!)
I would like to set up constraints so that the bottom view is centered under the top view, but if it ends up too far to the right, it shifts left just enough to avoid crossing a guideline. The right edge of the top view needs to remain fixed. How can I achieve this effect? (I'm not wedded to using a ConstraintLayout if there's another way that will work better.)
Here's the actual layout file I'm using:
<?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/user_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:layout_marginTop="10dp"
android:text="user"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="HardcodedText"
tools:layout_constraintRight_creator="1"
tools:layout_constraintTop_creator="1"/>
<View
android:id="#+id/scrim"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#android:color/transparent"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:layout_constraintLeft_creator="1"
tools:layout_constraintTop_creator="1"
tools:visibility="visible"/>
<Button
android:id="#+id/sign_out"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#android:drawable/dialog_holo_light_frame"
android:text="#string/sign_out"
android:visibility="gone"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/user_name"
tools:visibility="visible"/>
</android.support.constraint.ConstraintLayout>

This sounds to me like a case where ConstraintLayout isn't the best tool for the job. You might still wind up using ConstraintLayout as your top-level view, but to get what you want I believe you will have to nest your TextView and Button inside a LinearLayout.
The core of the problem is that you want whichever view is wider to touch the edge of the parent, and whichever view is smaller to be horizontally centered against the wider view. Given that ConstraintLayout doesn't let you do more than one constraint for a given view's edge, it's not capable of doing this.
A vertical LinearLayout with android:gravity="center_horizontal" should do exactly what you want, however. And then you can position that at the top-right of your screen (maybe by using ConstraintLayout, or maybe some other way).
Edit
After re-reading your question, I realize I misunderstood your requirements. You need the TextView to always be positioned in the top-right corner, and the Button to be centered beneath the text view unless that would cause it to be clipped by the edge of the parent.
I still think LinearLayout is the way to go here, but you'll need to be a little more sophisticated with its children. This should work:
<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">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
constrants=top-right>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"/>
</LinearLayout>
</ConstraintLayout>

Suppose there are 2 views.
Select first view
Press shift
Select the second view.
Right click
Select Align >> Horizontal Centers.
Done.

I didn't get you perfectly, but I'm posting the answer for what I understood.
<?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/user_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginRight="20dp"
android:text="user"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="HardcodedText"
tools:layout_constraintRight_creator="1"
tools:layout_constraintTop_creator="1" />
<Button
android:id="#+id/sign_out"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#android:drawable/dialog_holo_light_frame"
android:text="SIGNOUT"
android:visibility="gone"
app:layout_constraintTop_toBottomOf="#id/user_name"
tools:visibility="visible"
app:layout_constraintLeft_toLeftOf="#+id/user_name"
app:layout_constraintRight_toRightOf="#+id/user_name" />

I think here it is try it
<?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/user_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:layout_marginTop="10dp"
android:text="user#mail.com"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="HardcodedText"
tools:layout_constraintRight_creator="1"
tools:layout_constraintTop_creator="1"/>
<View
android:id="#+id/scrim"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#android:color/transparent"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp"
app:layout_constraintVertical_bias="0.0"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/sign_out"
app:layout_constraintHorizontal_bias="0.0" />
<Button
android:id="#+id/sign_out"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="11dp"
android:background="#android:drawable/dialog_holo_light_frame"
android:text="sign_out"
android:visibility="gone"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/user_name"
tools:visibility="visible"
android:layout_marginRight="11dp" />
</android.support.constraint.ConstraintLayout>