I'm trying to show a badge(Pink TextView) on my CardView as below:
The elevation value of the CardView is not set, so it should be default and the elevation of the badge is set to 2dp.
With API Level > 22 there is no problem, but with API Level <= 22 the badge stays under the CardView as below:
When I change the elevation value of the badge from 2dp to 2.285738dp then it works.
My initial idea was that the default elevation value of the CardView changes according to the API Level. Wanted to post here to find out a more logical reason for that.
<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="wrap_content"
android:clipToPadding="false"
android:paddingBottom="8dp">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="72dp"
android:layout_marginStart="#dimen/margin_horizontal_default"
android:layout_marginTop="#dimen/margin_inner_half_default"
android:layout_marginEnd="#dimen/margin_horizontal_half_default"
android:foreground="?android:attr/selectableItemBackground"
app:cardBackgroundColor="?backgroundCardColor"
app:cardCornerRadius="#dimen/card_corner_radius"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/accountImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/margin_inner_default"
android:src="#drawable/ic_account"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#+id/accountImage"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/accountIdText"
style="#style/TextStyle.SemiBoldActiveMedium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="12058.01" />
<TextView
android:id="#+id/accountTypeText"
style="#style/TextStyle.BoldSmallInactive"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
tools:text="Collection" />
</LinearLayout>
<TextView
android:id="#+id/tvAmountView"
style="#style/TextStyle.BoldPrime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="4dp"
android:layout_marginBottom="1dp"
android:textSize="15sp"
app:layout_constraintBottom_toBottomOf="#id/ivChevron"
app:layout_constraintEnd_toStartOf="#+id/tvAmountCurrency"
app:layout_constraintTop_toTopOf="#id/ivChevron"
tools:text="13,592.04" />
<TextView
android:id="#+id/tvAmountCurrency"
style="#style/TextStyle.BoldSmallInactive"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:layout_marginEnd="4dp"
app:layout_constraintBottom_toBottomOf="#id/ivChevron"
app:layout_constraintEnd_toStartOf="#id/ivChevron"
app:layout_constraintTop_toTopOf="#id/ivChevron"
tools:text="KES" />
<ImageView
android:id="#+id/ivChevron"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/margin_inner_default"
android:src="#drawable/ic_chevron_right"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
<TextView
android:id="#+id/accountCurrencyText"
style="#style/TextStyle.InvertedTag"
android:layout_width="wrap_content"
android:layout_height="20dp"
android:layout_marginStart="#dimen/margin_horizontal_half_default"
android:background="#drawable/background_inverted_secondary"
android:elevation="2dp"
android:gravity="center_vertical"
android:paddingStart="12dp"
android:paddingEnd="12dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="KES" />
Please try replacing your TextView with the androidx.TextView and see if it works.
I had this problem before and fixed it by setting elevation for both of two items, in the background, I set 2sp and for the item, in the foreground, I set 4sp. and it works perfectly.
The default value for CardView is 2dp.
Related
I have a question about the items height in a recyclerview, here is my screen
Is it possible to have the same height for each rows like that for example:
So the first one has to have the same height of the second and the third the same as the 4th one.
Currently I used wrap-content that's why the height is changing regarding the content of the cardview but I would like to use smt dynamic if it possible and not put a fixed height.
Here is my code
<MvvmCross.DroidX.RecyclerView.MvxRecyclerView
android:id="#+id/recyclerViewSalary"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:nestedScrollingEnabled="false"
app:layout_constraintTop_toBottomOf="#id/lblSalary"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:MvxItemTemplate="#layout/cell_tool_cardview"
app:MvxBind="ItemClick OpenTool;ItemsSource SalarisToolItems"
app:layoutManager="androidx.recyclerview.widget.GridLayoutManager"
app:spanCount="2"/>
and the itemtemplate
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.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_marginEnd="#dimen/margin2"
android:layout_marginStart="#dimen/margin2"
android:layout_marginBottom="#dimen/margin2"
android:layout_marginTop="#dimen/margin2"
app:cardCornerRadius="#dimen/margin1"
app:cardElevation="0dp"
app:MvxBind="Visibility Visibility(Available)">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="#dimen/margin4"
android:background="#color/lightBlue">
<FrameLayout
android:id="#+id/frameLayoutCellTool"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margin5"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent">
<ImageView
android:id="#+id/imgTool"
android:layout_width="wrap_content"
android:layout_height="35dp"
android:layout_gravity="center"
android:scaleType="centerInside"
android:tint="#color/blue"
app:MvxBind="DrawableName ImageDrawable"/>
</FrameLayout>
<TextView
android:id="#+id/lblTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/margin3"
android:layout_marginEnd="#dimen/margin3"
android:textColor="#color/blue"
android:fontFamily="#font/poppins_semibold"
android:textSize="#dimen/t4"
android:gravity="center"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/frameLayoutCellTool"
app:MvxBind="Text Title"/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="#dimen/t2"
android:gravity="center"
android:fontFamily="#font/mulish_regular"
android:textColor="#color/blue"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/lblTitle"
app:MvxBind="Text SubTitle; Visibility InvertedVisibility(IsEmptySubTitle)"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
Anyone has an idea ? Thanks
I am trying to use ConstraintWidth_percent in my shop_list_item.xml, which is used inside my shopadapter. The problem I encounter is, that the design tab (how it should look like) and the in-app design (how it looks) are totally different. What am I doing wrong here?
How it should look like
How it looks
Code
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.card.MaterialCardView
android:id="#+id/mcv_product_item"
android:layout_width="0dp"
android:layout_height="210dp"
android:clickable="true"
android:focusable="true"
app:cardBackgroundColor="#android:color/white"
app:cardCornerRadius="4dp"
app:cardElevation="4dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="0.40">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/iv_product_image"
android:layout_width="match_parent"
android:layout_height="110dp"
android:contentDescription="TODO"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:loadImage="#{product.images[0]}"
tools:ignore="ContentDescription, HardcodedText"
tools:src="#drawable/ic_calibrate" />
<ImageView
android:id="#+id/iv_service_indicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:contentDescription="#null"
android:src="#drawable/ic_service"
app:hideView="#{product.hasService}"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.textview.MaterialTextView
android:id="#+id/tv_product_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="12dp"
android:layout_marginEnd="8dp"
android:ellipsize="end"
android:maxLines="2"
android:text="#{product.name}"
android:textAlignment="textStart"
android:textColor="#color/color_text_dark"
android:textSize="#dimen/textDescriptionNormal1"
app:layout_constraintEnd_toEndOf="#+id/iv_product_image"
app:layout_constraintStart_toStartOf="#+id/iv_product_image"
app:layout_constraintTop_toBottomOf="#+id/iv_product_image"
tools:text="TEST TITLE TO ENSURE STUFF" />
<com.google.android.material.textview.MaterialTextView
android:id="#+id/tv_product_price"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="12dp"
android:text="#{product.price}"
android:textColor="#color/color_text_blue"
android:textSize="#dimen/textHeadlineNormal1"
android:textStyle="italic|bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#+id/tv_product_name"
tools:text="4870.00" />
<com.google.android.material.textview.MaterialTextView
android:id="#+id/tv_euro"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/currency"
android:textColor="#color/color_text_blue"
android:textSize="#dimen/textHeadlineNormal1"
android:textStyle="italic|bold"
app:layout_constraintBottom_toBottomOf="#+id/tv_product_price"
app:layout_constraintEnd_toEndOf="#+id/tv_product_name"
app:layout_constraintStart_toEndOf="#+id/tv_product_price"
app:layout_constraintTop_toTopOf="#+id/tv_product_price" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
<!-- Currently not using -->
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.30"/>
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.70"/>
</androidx.constraintlayout.widget.ConstraintLayout>
When I change constraintWidth_percent to something really high like 0.8, it works like it should (but looks weird in the design tab).
This is a normal behavior as the design preview of Android Studio can have different screen size than your mobile set or the emulator.. You can change the design preview width/height to have similar width/height like your testing emulator/mobile and you'll notice there is no change.
You can change this form:
This can be very obvious as your CardView apparently takes the 40% of the RecyclerView item width. You can notice this will the green guidelines in below pic.
What you can do is to teak the 40% until you feel comfortable with a certain width that can fits for the cart items.
Last thing you can try the below layout for aligning the item in the middle of the RecyclerView item layout
<?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="wrap_content">
<com.google.android.material.card.MaterialCardView
android:id="#+id/mcv_product_item"
android:layout_width="0dp"
android:layout_height="210dp"
android:clickable="true"
android:focusable="true"
app:cardBackgroundColor="#android:color/white"
app:cardCornerRadius="4dp"
app:cardElevation="4dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="0.4">
<!-- Add CardView items -->
</com.google.android.material.card.MaterialCardView>
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.3" />
</androidx.constraintlayout.widget.ConstraintLayout>
i have a list item, in that i have certain text views and image views. The thing is that the design that i have got has three themes in it dark, brown and light. Now if I want to change the background of a list item to any of these three colors, how do I set the background. Like if i change the theme of the app from settings, the list item background should change. How am I suppose to make the themes with different backgrounds?
<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="wrap_content"
android:orientation="vertical"
tools:context=".MainActivity">
<android.support.constraint.ConstraintLayout
android:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="12dp"
android:paddingEnd="16dp"
android:paddingStart="16dp"
android:paddingTop="12dp">
<TextView
android:id="#+id/company_name_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/montserratlight"
android:text="Synergy Bizcon"
android:textColor="#color/textColorMediumThemeDark"
android:textSize="#dimen/fontMedium"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/schedule_imageview"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_marginTop="5dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/company_name_textview"
app:srcCompat="#drawable/ic_watch" />
<TextView
android:id="#+id/date_time_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="6dp"
android:layout_marginTop="4dp"
android:fontFamily="#font/montserratlight"
android:text="26 Apr 11:10 PM"
android:textColor="#color/textColorSmallThemeDark"
android:textSize="#dimen/fontExtraSmall"
app:layout_constraintStart_toEndOf="#id/schedule_imageview"
app:layout_constraintTop_toBottomOf="#id/company_name_textview" />
<TextView
android:id="#+id/pipe_textview"
android:layout_width="0.5dp"
android:layout_height="12dp"
android:layout_marginStart="6dp"
android:background="#color/textColorSmallThemeDark"
app:layout_constraintBottom_toBottomOf="#id/date_time_textview"
app:layout_constraintStart_toEndOf="#id/date_time_textview"
app:layout_constraintTop_toTopOf="#id/date_time_textview" />
<TextView
android:id="#+id/exhcange_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="6dp"
android:fontFamily="#font/montserratlight"
android:text="BSE"
android:textColor="#color/textColorSmallThemeDark"
android:textSize="#dimen/fontExtraSmall"
app:layout_constraintBottom_toBottomOf="#id/pipe_textview"
app:layout_constraintStart_toEndOf="#id/pipe_textview"
app:layout_constraintTop_toTopOf="#id/pipe_textview" />
<TextView
android:id="#+id/rate_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:fontFamily="#font/montserratlight"
android:text="34567.58"
android:textColor="#color/textColorMediumThemeDark"
android:textSize="#dimen/fontMedium"
app:layout_constraintEnd_toStartOf="#id/add_imageview"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/points_change_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:fontFamily="#font/montserratlight"
android:text="-21.10(-0.02%)"
android:textColor="#color/textColorSmallThemeDark"
android:textSize="#dimen/fontExtraSmall"
app:layout_constraintEnd_toEndOf="#id/rate_textview"
app:layout_constraintTop_toBottomOf="#id/rate_textview" />
<ImageView
android:id="#+id/add_imageview"
android:layout_width="16dp"
android:layout_height="16dp"
android:tint="#color/iconsColor"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_add" />
</android.support.constraint.ConstraintLayout>
<View
android:layout_width="match_parent"
android:layout_height="0.2dp"
android:background="#color/listItemDivider" />
</Linear Layout>
Like i have this list item, i want to change constraint layouts background to may be dark or brown or light. I would eventually use style to give the background, but i do not know how? Can someone help? Thanks
I want to make recyclerView round corner but seem like if the child item has background color, it will cover to the recyclerView and couldn't be clipped. Here is the design
If I remove the background color of item, then it could be like my design. But unfortunately, sometime it has blue background
Here is what my app show
Here is my item layout
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/item_popover"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/dp_8"
android:background="#color/white"
tools:ignore="RtlHardcoded,RtlSymmetry"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto">
<com.jp.base.customView.AppImageView
android:id="#+id/img_notification"
android:paddingRight="#dimen/dp_8"
app:srcCompat="#mipmap/ic_launcher_round"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginStart="#dimen/dp_8"
android:layout_marginEnd="#dimen/dp_8"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<android.support.v7.widget.AppCompatImageView
android:id="#+id/img_arrow"
app:srcCompat="#drawable/ic_keyboard_arrow_right_blue_24dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<com.jp.base.customView.AppTextView
android:id="#+id/tv_message"
tools:text="Message....\nMessage"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="#id/img_notification"
app:layout_constraintEnd_toStartOf="#id/img_arrow"
android:maxLines="5"
android:layout_marginTop="#dimen/dp_5"
android:textColor="#color/black"
android:layout_width="0dp"
android:layout_height="wrap_content" />
<com.jp.base.customView.AppTextView
android:id="#+id/tv_time"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/dp_8"
android:drawablePadding="#dimen/dp_8"
android:gravity="center_vertical"
android:textSize="#dimen/text_small"
app:app_leftDrawable="#drawable/ic_access_time_black_24dp"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/img_arrow"
app:layout_constraintStart_toEndOf="#id/img_notification"
app:layout_constraintTop_toBottomOf="#+id/tv_message"
app:layout_constraintVertical_bias="100"
tools:text="a month ago" />
<View
app:layout_constraintTop_toBottomOf="#id/tv_time"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginTop="#dimen/dp_8"
android:background="#color/gray"
android:layout_width="0dp"
android:layout_height="0.5dp" />
</android.support.constraint.ConstraintLayout>
My RecyclerView:
<android.support.v7.widget.RecyclerView
android:id="#+id/list_notification"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="-30dp"
android:background="#drawable/rect_bound_bottom_5dp"
android:clipChildren="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/tv_popup_title"
tools:listitem="#layout/item_popover" />
I would try:
Setting "round rect" Outline on the Recycler View - setOutline
This is usually used to provide a shadow effect together with "elevation" but if you don't need a shadow - you can skip the elevation part
Finally call setClipToOutline again on the RecyclerView
Most easy solution will be
Just wrap your RecyclerView inside CardView.
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:cardCornerRadius="50dp"
tools:cardElevation="0dp">
<android.support.v7.widget.RecyclerView
...
/>
</android.support.v7.widget.CardView>
Use cardCorderRadius to change corner radius.
I have a RecyclerView with CardView as its items.
Below is the layout for my main activity.
<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="com.example.personal.newz.ui.MainActivity">
<android.support.v7.widget.RecyclerView
android:id="#+id/rv"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"></android.support.v7.widget.RecyclerView>
</android.support.constraint.ConstraintLayout>
And below is the layout for my recycler view items
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_margin="16dp"
card_view:cardCornerRadius="4dp"
>
<android.support.constraint.ConstraintLayout xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.Guideline
android:id="#+id/vertical_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.6" />
<TextView
android:id="#+id/date_tv"
android:layout_width="wrap_content"
android:layout_height="16dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="16dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="2 hours ago" />
<TextView
android:id="#+id/source_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:textStyle="bold"
app:layout_constraintLeft_toRightOf="#id/date_tv"
app:layout_constraintTop_toTopOf="#id/date_tv"
tools:text="BBC News" />
<TextView
android:id="#+id/headline_tv"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginTop="32dp"
android:maxLines="2"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#id/vertical_guideline"
app:layout_constraintTop_toBottomOf="#id/date_tv"
tools:text="Apple admits slowing down older iphones" />
<TextView
android:id="#+id/description_tv"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:maxLines="4"
app:layout_constraintLeft_toLeftOf="#id/date_tv"
app:layout_constraintRight_toLeftOf="#id/vertical_guideline"
app:layout_constraintTop_toBottomOf="#id/headline_tv"
tools:text="Customers have long suspected iPhones slow down over time. Now, Apple has confirmed some models do." />
<ImageView
android:id="#+id/article_image"
android:layout_width="100dp"
android:layout_height="100dp"
android:scaleType="fitXY"
app:layout_constraintHorizontal_bias=".7"
app:layout_constraintLeft_toRightOf="#id/vertical_guideline"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/source_tv"
tools:src="#drawable/placeholder" />
<ImageView
android:id="#+id/bookmark_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:src="#drawable/bookmark"
app:layout_constraintEnd_toStartOf="#+id/share_image"
app:layout_constraintStart_toEndOf="#+id/vertical_guideline"
app:layout_constraintTop_toBottomOf="#id/article_image"
app:layout_constraintHorizontal_chainStyle="packed"/>
<ImageView
android:id="#+id/share_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/share_icon"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/bookmark_image"
app:layout_constraintTop_toBottomOf="#id/article_image" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
Now when I first start my app the individual cardview's width don't match to the parent and kind of behave like their width is wrap content. After a few seconds the width of all the cardviews adjusts itself to match the parent.
ConstraintLayout does not actually support match_parent for its children. If you try to use match_parent, sometimes it will work, and sometimes it will not. Android Studio is also sort of weird about match_parent, and sometimes will allow it and sometimes will automatically replace it with a hardcoded value that matches the last emulator you ran. Regardless, do not use match_parent for children of a ConstraintLayout.
Instead of android:layout_width="match_parent", use this:
android:layout_width="0dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
Instead of android:layout_height="match_parent", use this:
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
When I make these changes to your RecyclerView tag, the problem goes away.