how can I create ui like like on picture

Question

I am developing news android app, how can I create ui like in the picture below,

below my xml file but it is not give output what I want

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView 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="25dp"
    xmlns:android="http://schemas.android.com/apk/res/android">



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

        <TextView
            android:id="@+id/articleTitle"
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:paddingStart="60dp"
            android:paddingLeft="100dp" />
<TextView
            android:id="@+id/articleTitle"
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:paddingStart="60dp"
            android:paddingLeft="100dp" />


</androidx.cardview.widget.CardView>

score 1 · Answer 1 · answered Oct 05 '19 at 22:24

if you mean item row maybe you 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>

https://stackoverflow.com/questions/58269105/how-to-implement-cardview-correctly-and-achieve-ui-the-same-as-on-the-image?noredirect=1#comment102905599_58269105 what about here — Edgar Shvedskiy, Oct 07 '19 at 12:54
@EdgarShvedskiy StackOverflow is not a service which writes code for you for free. Right now you aren't showing any attempts and you want people to write full layouts for you... I don't think that's right — Zun, Oct 08 '19 at 10:00

score 0 · Answer 2 · answered Oct 05 '19 at 19:29

0

Try this in your code

 <android.support.v7.widget.CardView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            card_view:cardPreventCornerOverlap="false"
            card_view:cardCornerRadius="25dp">

            <ImageView
                android:layout_width="60dp"
                android:layout_height="60dp"/>
        </android.support.v7.widget.CardView>

answered Oct 05 '19 at 19:29

Amin Pinjari

2,129
3
25
53

Why are you using `card_view:cardCornerRadius="25dp"` and `android:layout_width="wrap_content"` and `android:layout_height="wrap_content"` – Zun Oct 08 '19 at 09:58

how can I create ui like like on picture

2 Answers2