how can I create ui the same as picture

user_11554408 0
Viewed 94

I am developing android app and how can I create ui like below picture

and below my xml I have played around but it is not giving expected output any suggestion will be greatly appreciated and hints welcome I dont know where exactly I am making mistake

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

enter image description here

cardview android
2 Answers

If you mean item list you maybe can do this

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

If you are looking for a way to build the whole screen I'd suggest you using Epoxy library by Airbnb https://github.com/airbnb/epoxy

You will basically treat this screen as RecyclerView which has 2 types of layouts - item without image (as the one on top) and item with image (all the bottom ones).

It will take some time to learn the library but it will be very handy especially if your layout is reusable and other screens use similar items

user_111660670
Related