Search code examples
androidxmlandroid-layoutandroid-cardview

How to shift text below the circle using given XML code?


I am using below XML code with card and RecyclerView but I am getting the text inside the card and upper side But I would like to see the text below the circle, what changes should I make in the following XML code?

Reference image consists with current and desire output image as enter image description here

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:padding="5dp">
    <!--
    grid items for RecyclerView
    -->
    <androidx.cardview.widget.CardView
        android:id="@+id/myCardView"
        android:layout_width="110dp"
        android:layout_height="110dp"
        app:cardCornerRadius="50dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true">
    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scaleType="fitXY"
        android:src="@mipmap/ic_launcher" />
    <TextView
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:text="ABCD"
        android:textSize="20sp"
        android:textColor="#fff" />
    </androidx.cardview.widget.CardView>
</RelativeLayout>

Solution

  • You can get the TextView out of the CardView in order to have the ImageView fully occupy the entire area of the rounded CardView

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout 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="200dp"
        android:gravity="center"
        android:padding="5dp">
        <!--
        grid items for RecyclerView
        -->
        <TextView
            android:id="@+id/name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/myCardView"
            android:layout_centerHorizontal="true"
            android:textColor="#fff"
            android:text="ABCD"
            android:textSize="20sp" />
    
        <androidx.cardview.widget.CardView
            android:id="@+id/myCardView"
            android:layout_width="110dp"
            android:layout_height="110dp"
            android:layout_centerHorizontal="true"
            app:cardCornerRadius="50dp">
    
            <ImageView
                android:id="@+id/image"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="fitXY"
                android:src="@mipmap/ic_launcher" />
        </androidx.cardview.widget.CardView>
    
    
    </RelativeLayout>
    

    Preview

    enter image description here