How to create a layout with rounded corners on only the top or bottom half?

Question

I'm trying to add row items into a RecyclerView that looks like this:

The view layout has 2 versions; one with an image on the top half and one that only contains text. A few things make this a tricky layout to create;

The image is only rounded on the top
The textview bottom half is only rounded on the bottom
If the ImageView is gone, then the textview DOES have rounded top corners.

I'd prefer to have only one row layout and designed in XML. Is that possible, or do I need to create this layout in code?

Ziyaad Shiraz · Answer 1 · 2021-12-07T09:33:32.587

1

You need to create a drawable, set the corners value in the drawable, and set the drawable as the background of the view you want to have the top rounded corners. here is a working drawable:

<!--  res/drawable/rounded_edittext.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    >
    <corners android:topLeftRadius="15dp"
        android:topRightRadius="15dp"/>
    <solid android:color="#ABC123"/>
   
</shape>

edited Dec 07 '21 at 09:33

answered Dec 07 '21 at 09:29

Ziyaad Shiraz

144
2
7

it will be working when you add `` - some fulfiling color for showing rounded corners – snachmsm Dec 07 '21 at 09:31

score 1 · Accepted Answer · answered Dec 07 '21 at 09:42

You can achieve this using material cardview. Here's the xml code of the full layout file:

<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">

<com.google.android.material.card.MaterialCardView
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_margin="10dp"
    app:cardCornerRadius="30dp"
    app:layout_constraintDimensionRatio="1:1"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/image"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="#406cca"
            android:visibility="visible" />

        <TextView
            android:id="@+id/text"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="#fb7500" />

    </LinearLayout>

</com.google.android.material.card.MaterialCardView>

</androidx.constraintlayout.widget.ConstraintLayout>

Remember, if the image is not there, just make the visibility of that particular imageview in your recyclerview to View.GONE in your code.

I hope you understood. If any queries, put a comment!

Here a pic of what this code looks like:

This works. However if you attempt to use a ConstraintLayout instead of a LinearLayout everything goes to hell. It's unfortunate that Google makes creating layouts so difficult sometimes. With a ConstraintLayout the image refuses to go near the rounded corners :( — szaske, Dec 07 '21 at 18:16
@szaske yes I understand your point. And in fact, I tried constraint layout instead of linear layout at first... I mean, you could actually achieve this same effect with constraint layout using vertical chains. But again, you also want that your imageView to vanish if there's no image source. So achieving that with vertical chain on, was a bit frustrating. So I think its best to use a vertical linear layout (correct me if I'm wrong somewhere) — costomato, Dec 08 '21 at 19:22

score 1 · Answer 3 · answered Dec 07 '21 at 09:43

for image holder use this library

<com.makeramen.roundedimageview.RoundedImageView
     android:id="@+id/imgUser"
     android:layout_width="match_parent"
     android:layout_height="100dp"
     app:riv_corner_radius_top_left="5dp"
     app:riv_corner_radius_top_right="5dp"/>

How to create a layout with rounded corners on only the top or bottom half?

3 Answers3