как я могу создать интерфейс так же, как изображение

Question

Я занимаюсь разработкой приложения для Android, и как я могу создать пользовательский интерфейс, как показано на картинке ниже

и ниже моего xml, я поиграл, но он не дает ожидаемого результата, любое предложение будет высоко оценено, и советы приветствуются. Я не знаюгде именно я делаю ошибку

<?xml version="1.0" encoding="utf-8"?>

<androidx.cardview.widget.CardView xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    card_view:cardPreventCornerOverlap="false"
    card_view:cardCornerRadius="50dp"
    xmlns:android="http://schemas.android.com/apk/res/android">

<androidx.constraintlayout.widget.ConstraintLayout

     android:layout_width="wrap_content"
     android:layout_height="wrap_content">


        <TextView
            android:id="@+id/articleTitle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/articleSource"
            android:paddingBottom="45dp"
            android:text="22222222"
            tools:layout_editor_absoluteX="25dp"
            tools:layout_editor_absoluteY="16dp" />


    <ImageView
        android:layout_width="60dp"
        android:contentDescription="@string/bbc_sport"
        android:layout_height="60dp"/>

    <TextView
        android:id="@+id/articleSource"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="90dp"
        android:text="News blalalalal"/>




    <TextView
        android:id="@+id/articleTime"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="90dp"
        android:text="News blalalalal"/>
</androidx.constraintlayout.widget.ConstraintLayout
        >

</androidx.cardview.widget.CardView>

Answer 1

Если вы ищете способ построить весь экран, я бы предложил вам использовать библиотеку Epoxy от Airbnb https://github.com/airbnb/epoxy

В основном вы будете рассматривать этот экран как RecyclerView, который имеет 2 типа макетов. - элемент без изображения (как верхний) и элемент с изображением (все нижние).

Изучение библиотеки займет некоторое время, но будет очень удобно, особенно если ваш макет можно использовать повторно идругие экраны используют похожие предметы

Answer 2

Если вы имеете в виду список предметов, вы можете сделать это

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:layout_marginBottom="16dp">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="100dp"
            android:layout_height="85dp"
            android:layout_marginStart="16dp"
            android:contentDescription="bbc"
            tools:background="@color/colorPrimary" />

        <TextView
            android:id="@+id/articleTitle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginEnd="16dp"
            android:layout_toEndOf="@id/imageView"
            android:ellipsize="end"
            android:lines="3"
            android:maxLines="3"
            android:text="1\n2\n3\n" />

        <ImageView
            android:id="@+id/imageCategory"
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:layout_below="@id/articleTitle"
            android:layout_marginStart="16dp"
            android:layout_toEndOf="@id/imageView"
            tools:background="@color/colorPrimary" />

        <TextView
            android:id="@+id/articleCategory"
            android:layout_width="wrap_content"
            android:layout_height="32dp"
            android:layout_below="@id/articleTitle"
            android:layout_marginStart="16dp"
            android:layout_toEndOf="@id/imageCategory"
            android:gravity="center|start"
            android:text="Onefootbal" />

        <TextView
            android:id="@+id/articleTime"
            android:layout_width="wrap_content"
            android:layout_height="32dp"
            android:layout_below="@id/articleTitle"
            android:layout_alignParentEnd="true"
            android:layout_marginStart="16dp"
            android:layout_marginEnd="16dp"
            android:layout_toEndOf="@id/articleCategory"
            android:gravity="center|start"
            android:text="- 1h"
            android:textColor="@android:color/darker_gray" />
    </RelativeLayout>

</androidx.cardview.widget.CardView>