Why title, description goes off the screen and date not showing properly in constrainlayout-CodePudding

I am developing news app and I have implemented constraint layout with card view but title description not showing and title and description goes of the screen in real device but in layout inspector in android studio it is showing fine

below my view

<?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"
    xmlns:tools="http://schemas.android.com/tools">

    <data>

        <variable
            name="article"
            type="com.example.newsworldwide.model.Article" />
    </data>


    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    <androidx.cardview.widget.CardView
        android:id="@ id/cardView2"
        android:layout_width="0dp"
        android:layout_height="150dp"
        android:layout_marginHorizontal="16dp"
        android:layout_marginVertical="8dp"
        app:cardCornerRadius="12dp"
        app:cardElevation="10dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">



        <de.hdodenhof.circleimageview.CircleImageView
            android:id="@ id/articleImage"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_marginStart="4dp"
            android:elevation="16dp"
            android:src="@drawable/img"
            app:civ_border_width="2dp"
            app:imageUrl="@{article.urlToImage}"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>

        <TextView
            android:id="@ id/articleTitle"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginHorizontal="10dp"
            android:layout_marginTop="24dp"
            android:ellipsize="end"
            android:maxLines="2"
            android:text="Mini olive pies by Vaggelio"
            android:textColor="#000"
            android:textSize="18sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.65"
            app:layout_constraintStart_toEndOf="@ id/articleImage"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@ id/articleDescription"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginTop="16dp"
            android:ellipsize="end"
            android:maxLines="6"
            android:text="This is the most information savory snack that I have ever seen!!!"
            android:textColor="#000"
            android:textSize="12sp"
            android:textStyle="italic"
            app:layout_constraintStart_toStartOf="@ id/articleTitle"
            app:layout_constraintTop_toBottomOf="@ id/articleTitle" />

        <TextView
            android:id="@ id/articleDate"
            android:layout_width="wrap_content"
            android:layout_height="16dp"
            android:layout_marginEnd="48dp"
            android:layout_marginBottom="8dp"
            android:text="01.02.2022"
            android:textColor="#FF9935"
            android:textSize="12sp"
            android:textStyle="bold"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent" />


    </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.cardview.widget.CardView>
    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

below my recyclerview 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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <androidx.recyclerview.widget.RecyclerView
        android:id="@ id/recyclerView"
        android:layout_width="491dp"
        android:layout_height="826dp"
        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.506"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0"
        tools:listitem="@layout/news_item" />

    <ProgressBar
        android:id="@ id/progressBar"
        android:layout_width="0dp"
        android:layout_height="48dp"
        android:layout_marginBottom="260dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

following screenshot from layout inspector in android studio

following screenshot of the app from real device

I want to know where exactly I am making mistake what I have to do in order to show title description and date so that it can fit screen perfectly

CodePudding user response：

i think tour item not problem. check your size of RecyclerView

CodePudding user response：

I've made some tweaks to your xml files
RecyclerView layout should look like this:

<?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">


    <androidx.recyclerview.widget.RecyclerView
        android:id="@ id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.506"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0"
        tools:listitem="@layout/news_item" />

    <ProgressBar
        android:id="@ id/progressBar"
        android:layout_width="0dp"
        android:layout_height="48dp"
        android:layout_marginBottom="260dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Your mistake was right here:

android:layout_width="491dp"
android:layout_height="826dp"

putting exact values for layout_width and layout_height is almost never a good idea when trying to build a responsive UI. Instead try using match_parent (matches the screen width) or wrap_content (takes as much space as it needs) in your layout_width/height.

Also I found one more thing wrong with news_item.xml

articleDescription TextView should have this parameter:

app:layout_constraintEnd_toEndOf="@ id/articleTitle"

this parameter will make sure, that your textView end where the parent view ends, means not going out of screen.