I've built a Fragment with constraint layout with a ListView, empty view and a total count view. The bottom constraint is working (with an artificial adjustment though), but the top is overlapping the tabs from my MainActivity:
My code is here and it's my first time using constraint 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:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:id="#+id/listView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="#id/total_items_view"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.98"
tools:layout_editor_absoluteX="8dp" />
<TextView
android:id="#+id/total_items_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="#color/colorOrange"
android:padding="4dp"
android:text="Items in this category: "
android:textSize="28sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintRight_toLeftOf="#id/items_number_view"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/items_number_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="#color/colorOrange"
android:padding="4dp"
android:text="44"
android:textSize="28sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintLeft_toRightOf="#id/total_items_view" />
<RelativeLayout
android:id="#+id/empty_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:visibility="gone">
<ImageView
android:id="#+id/empty_book_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="#drawable/orange_orange_book" />
<TextView
android:id="#+id/empty_title_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/empty_book_image"
android:layout_centerHorizontal="true"
android:fontFamily="sans-serif-medium"
android:paddingTop="16dp"
android:text="This category is still empty..."
android:textAppearance="?android:textAppearanceMedium" />
<TextView
android:id="#+id/empty_subtitle_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/empty_title_text"
android:layout_centerHorizontal="true"
android:fontFamily="sans-serif"
android:paddingTop="8dp"
android:text="Let's start with adding books!"
android:textAppearance="?android:textAppearanceSmall"
android:textColor="#A2AAB0" />
</RelativeLayout>
</android.support.constraint.ConstraintLayout>
}
Is there any way to set a constraint to a view in a separate (main) activity? How can I fix this?
I have tried the wrap_content, and the only thing I can think of is manually setting it a little bit off the top, which kind of ruins the concept of constraint layout.
Thanks.
You cannot apply constraint outside constraint layout. The problem is with parent layout, it seems like your view pager is overlapping tab layout.
First of all, do not use match_parent in ConstraintLayout, just eg. if you want to make view match screen width use
android:layout_width="0dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
The thing why it overlapping is that you probably do not limit top of your list (or list container) to bottom of this top view like
app:layout_constraintTop_toBottomOf="#+id/top_view"
Your ListView's height is set to wrap_content in which case it will expand as much as it needs to and overlap other views. If you want to use wrap_content and enforce the constraints of the view at the same time, you need to add app:layout_constrainedHeight="true" attribute to to your ListView.
Related
I'm trying to make an items with just an image and a title below it in a recycler view. For some reason my text view's that hold the title are getting cut off on the bottom.
See below:
I've tried setting the text view height to wrap_content but that will result in my images being pushed up and not consistently the same size across all items. Also I find it odd that the text view size & positioning doesn't even match the preview layout in android studios.
Any suggestions?
My view holder layout:
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:background="#drawable/thumbnail_frame"
android:paddingLeft="16dp"
android:paddingTop="12dp"
android:paddingRight="16dp"
android:paddingBottom="12dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
android:weightSum="100"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="5:4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/thumbnail_item"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="80"
android:background="#color/dark_red"
android:scaleType="centerCrop" />
<TextView
android:id="#+id/thumbnail_title"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="20"
android:ellipsize="end"
android:maxLines="2"
android:padding="8dp"
android:text="#string/title_place_holder"
android:textColor="#color/white"
android:textSize="12sp" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
Why did you created a linear layout inside a constraint layout?
You can remove linear layout an put your ImageView and TextView directly inside constraint layout and constraint TextView top to bottom of ImageView
and instead of using weight you can use layout_constraintHeight_percent just like below:
app:layout_constraintHeight_percent="0.2"
But I recommend you not to use height_percant or weight and also avoid sizing the views width/height statically. it can cause problems on different screens
I think its better to remove LinearLayout and also remove weight and add this line to your ImageView:
app:layout_constraintDimensionRatio="H,5:4"
Write your TextView and ImageView like below:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:background="#drawable/thumbnail_frame"
android:paddingLeft="16dp"
android:paddingTop="12dp"
android:paddingRight="16dp"
android:paddingBottom="12dp">
<ImageView
android:id="#+id/thumbnail_item"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#color/dark_red"
android:scaleType="centerCrop"
app:layout_constraintDimensionRatio="H,5:4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/thumbnail_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="2"
android:padding="8dp"
android:text="#string/title_place_holder"
android:textColor="#color/white"
android:textSize="12sp"
app:layout_constraintTop_toBottomOf="#id/thumbnail_item"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
I believe I have found the problem and it's the weight you're using in your LinearLayout.
Depending on the ImageView height (80) you have determined TextView height (20). Because of that TextView cannot wrap, so text is being cut from the bottom.
Solution 1: remove weight in linear layout and set image height to fixed height, and TextView to wrap_content. Just like below:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="5:4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/thumbnail_item"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#color/dark_red"
android:scaleType="centerCrop" />
<TextView
android:id="#+id/thumbnail_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="2"
android:padding="8dp"
android:text="#string/title_place_holder"
android:textColor="#color/white"
android:textSize="12sp" />
</LinearLayout>
Solution 2: You can remove padding in the TextView or set it to smaller one, but the problem might reoccur on smaller screens.
Make the weight of imageview to 60 and the weight of textview to 40. In short keep adjusting the weight attr value in order to solve your problem. Use thia solution only when you really need weight attr in your code. Or else, just remove weight and set the height to wrap_content for both of them.
I had a few group in my constraint layout, which I use it to show/hide its component. But then I notice I can add constraint to group(saw the Constraint Widget at Attributes). I tried resizing the group, adding constraint at Attributes, but nothing changed.
The only thing i found online regarding to group is that i can show/hide its component. Even according to https://developer.android.com/reference/android/support/constraint/Group , it doesnt seems like it's possible to add constraint to group.
My question is, is it possible to add constraint between groups instead of adding constraint to every single view?
Here I'm providing an example you can check here how constrain to view-group work. Try this layout for any demo activity to check the functionality. Here you can see I have set visibility="gone" for view-group and set references for Add and Done buttons. So for child add and done buttons will be set as visibility="gone".
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<androidx.constraintlayout.widget.Group
android:layout_width="wrap_content"
android:visibility="gone"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
app:constraint_referenced_ids="btnAdd,btnDone" />
<TextView
android:id="#+id/tvText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:text="No buttons visible"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/btnAdd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Add"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/btnDone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Done"
app:layout_constraintEnd_toStartOf="#+id/btnAdd"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
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
I need to create a screen (activity/fragment) with items (tile) in a list that can scroll horizontally and vertically + tabs. Something like main page on Google Play.
See screenshot:
What is the best solution for this? Maybe advice some good library/component.
Thanks.
Here's the better way
Create a ScrollView
Use a LinearLayout
Make a CardView
Put a RecyclerView with horizontal scrolling and make cards for each row..
Repeat steps 3 and 4.
Enjoy.
You can do this in steps
Create the top tabs.
In the home tab create a ListView with custom view.
Create an custom Adapter for this list and populate each row of the listview with another list which traverses horizontally.
So you will have two Lists, the first which traverses vertically and the second which will be populated into the row of the first list and which traverses horizontally.
Try working this out and then update this question as you run into bugs.
Hope this helps :)
It's simple really. All you need to do is set "nestedScrollingEnabled" flag to true in the parent. A very high level example on how you can do it in xml with scrollview as your root layout:
--ScrollView
------RelativeLayout // as scrollview can have only one child
---------RecyclerView1 --> Set LayoutManager to HORIZONTAL
---------RecyclerView2 --> Set LayoutManager to HORIZONTAL
-------EndRelativeLayout
--EndScrollView
This works for me (you can ignore the #id/headers part):
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="none">
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/next"
android:nestedScrollingEnabled="true"
tools:ignore="MissingPrefix">
<TextView
android:id="#+id/header1"
fontPath="fonts/CircularStd-Bold.otf"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="24dp"
android:text=""
android:textSize="16dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/header2"
fontPath="fonts/CircularStd-Bold.otf"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="24dp"
android:text=""
android:textSize="16dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/recycler_view_2" />
<TextView
android:id="#+id/textView26"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:paddingBottom="100dp"
android:text=""
android:visibility="gone"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/recycler_view_1" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view_2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_below="#+id/header1"
android:layout_centerHorizontal="true"
android:layout_marginTop="24dp"
android:focusable="true"
android:focusableInTouchMode="true"
android:scrollbars="none"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/header2" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view_2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_below="#+id/header1"
android:layout_centerHorizontal="true"
android:layout_marginTop="24dp"
android:focusable="true"
android:focusableInTouchMode="true"
android:scrollbars="none"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/header1" />
</android.support.constraint.ConstraintLayout>
</ScrollView>
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>