I need to make my splash screen fit all the devices. It works perfect on nexus but on other device the animation is a little bit different. Here is my splash screen activity. I think the problem is that axes Y and X will work different on other device
logo = findViewById(R.id.logo);
splashImg = findViewById(R.id.img);
lottieAnimationView = findViewById(R.id.lottie);
splashImg.animate().translationY(-2000).setDuration(1000).setStartDelay(4000);
logo.animate().translationY(1100).setDuration(1000).setStartDelay(4000);
lottieAnimationView.animate().translationY(1400).setDuration(1000).setStartDelay(4000);
and in the splash XML
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:layout_conversion_absoluteHeight="731dp"
tools:layout_conversion_absoluteWidth="411dp"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="0dp" >
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageView
android:id="#+id/img"
android:layout_width="wrap_content"
android:layout_height="900dp"
android:src="#drawable/shafaqat"
app:layout_constraintVertical_bias="0"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<ImageView
android:id="#+id/logo"
android:layout_width="300dp"
android:layout_height="300dp"
android:src="#drawable/logo"
app:layout_constraintVertical_bias=".1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<com.airbnb.lottie.LottieAnimationView
android:id="#+id/lottie"
app:lottie_autoPlay="true"
android:layout_width="wrap_content"
android:layout_height="200dp"
app:layout_constraintVertical_bias="0"
app:lottie_rawRes="#raw/splash"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/logo" />
</androidx.constraintlayout.widget.ConstraintLayout>
</FrameLayout>
i would use weights and fill content views
if i want to all screen view, use fill-content in size attribute, and if you want your logo in the center, i used views with height attribute to spacing like bootstrap
i would put three views and each one with the same weight, and in the middle view i would put the image view with fill-content size, this is my way to make responsive views with the same resource keeping proportions
this is an example about how to use weights
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:weightSum="5">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
android:text="2" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="3" />
Related
I have an imagebutton which I want to have it the same proportion for any type of screen size, so I want to do adjust in size according to the screen size so the all the ratios are the same. I tried to find an answer to how to do this but I can't find anything that explains how to do it clearly. This is my current image view code in my xml file.
<ImageButton
android:id="#+id/torchbtn"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:background="#color/black"
android:src="#drawable/torch_off">
</ImageButton>
Since you are using ConstraintLayout there is somewhat easy and straightforward way how to do it.
One of the widgets added with ConstraintLayout is Guideline that has an option to set the "margin" in percentages. Given your example of the ImageButton occupying 50% of the space you can do it with 4 Guidelines.
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline_start"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.25" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline_end"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.75" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline_top"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.25" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline_bottom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.75" />
<ImageButton
android:id="#+id/torchbtn"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#color/black"
android:src="#drawable/torch_off"
app:layout_constraintBottom_toBottomOf="#id/guideline_bottom"
app:layout_constraintEnd_toEndOf="#id/guideline_end"
app:layout_constraintStart_toStartOf="#id/guideline_start"
app:layout_constraintTop_toTopOf="#id/guideline_top" />
</androidx.constraintlayout.widget.ConstraintLayout>
Seems silly but I have tried using ImageButton, Image view but the black square behind circular image is not going. I am using png image and want transparent background.
I have attached the expected output, layout view in android and real device but look very different and nothing seems to work
Expected result
Actual result
Drawable Resource Image
Edited Code XML Layout. Reset other views are fine
Layout Image
<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=".view.fragments.DashboardFragment">
<ImageView
android:id="#+id/iv_dashboard"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="fitXY"
android:src="#drawable/bg_dashboard"
app:layout_constraintBottom_toTopOf="#+id/guide_horizontal_30"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<!-- background image resource -->
<TextView
android:id="#+id/txtFromDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/from_date"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/iv_dashboard" />
<TextView
android:id="#+id/tvFromDate"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="#dimen/margin_10dp"
android:text="Date"
android:drawableBottom="#drawable/dashboard_bottom_blue"
app:layout_constraintEnd_toStartOf="#+id/guide_vertical_40"
app:layout_constraintStart_toStartOf="#+id/txtFromDate"
app:layout_constraintTop_toBottomOf="#+id/txtFromDate" />
<TextView
android:id="#+id/txtToDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/margin_5dp"
android:text="#string/to_date"
app:layout_constraintBaseline_toBaselineOf="#+id/txtFromDate"
app:layout_constraintStart_toEndOf="#+id/guide_vertical_40" />
<TextView
android:id="#+id/tvToDate"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Date"
android:paddingTop="#dimen/margin_2dp"
android:paddingBottom="#dimen/margin_2dp"
app:layout_constraintBaseline_toBaselineOf="#+id/tvFromDate"
app:layout_constraintEnd_toStartOf="#+id/guide_vertical_80"
app:layout_constraintStart_toStartOf="#+id/txtToDate" />
<!-- problematic image view-->
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/btnGo"
android:layout_width="0dp"
android:layout_height="0dp"
android:src="#drawable/btn_search"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintBottom_toBottomOf="#+id/tvToDate"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/guide_vertical_80"
app:layout_constraintTop_toTopOf="#+id/txtToDate" />
</androidx.constraintlayout.widget.ConstraintLayout>
use this if you don't want black background just remove background from layout.
<android.support.v7.widget.AppCompatImageView
android:id="#+id/btn_key"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/black"
android:src="#drawable/img_key"
/>
I was having the same issue with my image and what I just did is to change the Background of the imageView and make it Transparent.
<ImageView
android:id="#+id/iv_dashboard"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="fitXY"
android:background="#android:color/transparent"
android:src="#drawable/bg_dashboard"
app:layout_constraintBottom_toTopOf="#+id/guide_horizontal_30"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
I have an imageview that I will place different images.
This images can have many sizes like 200x200 200x400 400x200...
Above imageview I have an adview and below this imageview I need 4 buttons.
The problem is, I'd like the image be below adview, but stop jumping position when ad loads. It goes down when an ad loads, I'd to stop this move, make the image fix, but above the adview.
My xml:
<?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=".MainActivity">
<LinearLayout
android:id="#+id/ad_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="49dp"
android:orientation="horizontal"
app:layout_constraintBottom_toTopOf="#+id/imageView1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.gms.ads.AdView xmlns:ads="http://schemas.android.com/apk/res-auto"
android:id="#+id/adView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
ads:adSize="SMART_BANNER"
ads:adUnitId="ca-app-pub-xxx/xxx">
</com.google.android.gms.ads.AdView>
</LinearLayout>
<ImageView
android:id="#+id/imageView1"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:layout_marginTop="89dp"
android:contentDescription="img"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/ad_view" />
<TextView
android:id="#+id/a1"
android:layout_width="127dp"
android:layout_height="50dp"
android:gravity="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.207"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.447" />
<TextView
android:id="#+id/a2"
android:layout_width="127dp"
android:layout_height="50dp"
android:gravity="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.806"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.447" />
<TextView
android:id="#+id/a3"
android:layout_width="127dp"
android:layout_height="50dp"
android:gravity="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.207"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.582" />
<TextView
android:id="#+id/a4"
android:layout_width="127dp"
android:layout_height="50dp"
android:gravity="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.806"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.582" />
</androidx.constraintlayout.widget.ConstraintLayout>
TL;DR
The fastest solution would be to change your ad view android:layout_height="wrap_content" into android:layout_height="fixed size" so your ad view will have a single height and won't change because of its wrap_content attribute (If your ad view is not loaded you can think of wrap_content as height of 0 and only after its loaded it will have height, thus the layout jump).
Why is it bad?
your layout won't be responsive.
How to fix?
Read the answer below.
Long but better answer:
You can use guidelines with app:layout_constraintGuide_percent=".2" to tell your guideline to be at the top of your screen (80%) and constraint your ad view to your guideline - this way your layout will won't jump (it will have its space to load into).
Another thing, different phones got different screen size, in your layout you are using fixed size on your view (fixed size is 50dp for example) and the result is that what may look good on one screen (your android studio preview screen) will not look good on another screen (your actual phone).
Here is an example to achieve your wanted look using ConstaintLayout:
<?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=".MainActivity">
<Button
android:id="#+id/adView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintHeight_percent="0.08"
android:text="add view"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="0dp"
android:layout_height="0dp"
android:src="#drawable/ic_launcher_background"
android:scaleType="fitXY"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.4"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline"
app:layout_constraintWidth_percent="0.6" />
<TextView
android:id="#+id/a1"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="a1"
app:layout_constraintHeight_percent="0.08"
app:layout_constraintWidth_percent="0.25"
app:layout_constraintBottom_toTopOf="#+id/a3"
app:layout_constraintEnd_toStartOf="#+id/a2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/imageView1"
app:layout_constraintTop_toBottomOf="#+id/imageView1" />
<TextView
android:id="#+id/a2"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="a2"
app:layout_constraintHeight_percent="0.08"
app:layout_constraintWidth_percent="0.25"
app:layout_constraintBottom_toBottomOf="#+id/a1"
app:layout_constraintEnd_toEndOf="#+id/imageView1"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/a1"
app:layout_constraintTop_toTopOf="#+id/a1"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/a3"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="a3"
app:layout_constraintHeight_percent="0.08"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/a1"
app:layout_constraintStart_toStartOf="#+id/a1"
app:layout_constraintTop_toBottomOf="#+id/a1" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent=".2" />
<TextView
android:id="#+id/a4"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="a4"
app:layout_constraintBottom_toBottomOf="#+id/a3"
app:layout_constraintEnd_toEndOf="#+id/a2"
app:layout_constraintHeight_percent="0.08"
app:layout_constraintStart_toStartOf="#+id/a2"
app:layout_constraintTop_toTopOf="#+id/a3" />
</androidx.constraintlayout.widget.ConstraintLayout>
Here is how it will look (I am adding a screenshot from the layout editor for better understanding ConstaintLayout)
Some extra information:
ConstraintLayout is not meant to have nested view groups (in your case you have LinearLayout inside constraintlayout).
ConstraintLayout allows you to create large and complex layouts with a flat view hierarchy (no nested view groups). It's similar to RelativeLayout in that all views are laid out according to relationships between sibling views and the parent layout, but it's more flexible than RelativeLayout and easier to use with Android Studio's Layout Editor.
You can Use ConstraintLayout with guidelines and Chains to support different screen sizes, you won't have to use fixed sizes on your views and you will be able to use a single layout to support different screen size.
Give the adview or it's surrounding layout a minimum height equal to the smart banner content in your case likely 90px.
It's jumping because with no content loaded your wrap_content height = 0, then it gets a new height of x, so your imageview shifts down x.
I need to place the button(green) at the place shown on the image(red).
It should be the same for all kind of phone screens in portrait mode.
This is the middle of the screen but the height is changing according to the screen size. These are the properties of the button. android:layout_marginBottom is not true for all screens sizes.
Button
<ImageView
android:id="#+id/circle_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="100dp"
app:srcCompat="#drawable/circle" />
Irregular shape
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:adjustViewBounds="true"
android:src="#drawable/irregular_shape" />
Wanted result
One of the ways to solve this is to separate your irregular shape into two shapes, and than place the button between the shapes with ConstraintLayout, something like this:
shapes image
And the code would be something like this:
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/shape2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/shape_bank_bill_dotted_transparent"
app:layout_constraintBottom_toTopOf="#+id/shape1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="#+id/shape1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<ImageView
android:id="#+id/shape1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/shape_bank_bill_dotted_transparent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</android.support.constraint.ConstraintLayout>
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.