Android CardView containing ImageView and TextView issue

Question

I made an item XML file that I want to pass to an Adapter so I can display a list of items within a RecyclerView.

The layout file consists of a CardView which contains an ImageView to show a movie poster and a TextView to display the movie title.

My problem is that I can't find a way to place the TextView over the ImageView so the title can be seen above the poster.

my xml file:

<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="wrap_content"
android:layout_margin="@dimen/dimension_value_10"
>

    <android.support.v7.widget.CardView
        app:cardCornerRadius="@dimen/dimension_value_5"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:elevation="@dimen/dimension_value_15"
        android:id="@+id/movie_poster_card"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true">

            <ImageView
                android:id="@id/movie_poster_image"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:elevation="10dp" />

            <TextView
                android:id="@+id/movie_title_text_view"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_above="@+id/movie_poster_card"
                android:layout_centerHorizontal="true"
                android:gravity="center|start"
                android:layout_margin="@dimen/dimension_value_10"
                android:paddingLeft="@dimen/dimension_value_10"
                android:text="Movie title here"
                android:textColor="@color/white"
                android:layout_gravity="bottom"
                android:textSize="26sp" />

    </android.support.v7.widget.CardView>

Here is the design image to be more explicit:

Use a relative layout inside cardview and put imageview and textview inside relative layout. — Bruno Ferreira, Jul 26 '17 at 15:19
[ This may Solve your problem...](https://stackoverflow.com/questions/26976135/display-textview-over-imageview-in-android) — Harshal Deshmukh, Jul 26 '17 at 16:13
[ This may Solve your problem...](https://stackoverflow.com/questions/26976135/display-textview-over-imageview-in-android) — Harshal Deshmukh, Jul 26 '17 at 16:14

score 2 · Answer 1 · answered Jul 26 '17 at 16:15

You can use a Vertical LinearLayout inside the CardView and center the textView..

<android.support.v7.widget.CardView
    app:cardCornerRadius="@dimen/dimension_value_5"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:elevation="@dimen/dimension_value_15"
    android:id="@+id/movie_poster_card"
    android:layout_centerVertical="true"
    android:layout_centerHorizontal="true">

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

        <TextView
            android:id="@+id/movie_title_text_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_above="@+id/movie_poster_card"
            android:layout_centerHorizontal="true"
            android:gravity="center"
            android:layout_margin="@dimen/dimension_value_10"
            android:paddingLeft="@dimen/dimension_value_10"
            android:text="Movie title here"
            android:textColor="@color/white"
            android:layout_gravity="bottom"
            android:textSize="26sp" />

        <ImageView
            android:id="@id/movie_poster_image"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:elevation="10dp" />

    </LinearLayout>

</android.support.v7.widget.CardView>

Brian Yencho · Answer 2 · 2017-07-26T18:28:24.563

1

A CardView is really only meant to have a single child. You should wrap your ImageView and TextView in something like a FrameLayout and make that the CardView child.

edited Jul 26 '17 at 18:28

answered Jul 26 '17 at 16:09

Brian Yencho

2,748
1
18
19

anomeric · Answer 3 · 2017-07-26T16:08:50.993

Wrap imageview and textview in a relative layout and move the elevation to the relative layout container to maintain the shadow effect you're looking for.

Edit::

I'm not sure why this was down voted, since it's the correct answer.

For clarity you should change your code to:

<android.support.v7.widget.CardView
    app:cardCornerRadius="@dimen/dimension_value_5"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:elevation="@dimen/dimension_value_15"
    android:id="@+id/movie_poster_card"
    android:layout_centerVertical="true"
    android:layout_centerHorizontal="true">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:elevation="10dp" >

        <ImageView
            android:id="@id/movie_poster_image"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <TextView
            android:id="@+id/movie_title_text_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_above="@+id/movie_poster_card"
            android:layout_centerHorizontal="true"
            android:gravity="center|start"
            android:layout_margin="@dimen/dimension_value_10"
            android:paddingLeft="@dimen/dimension_value_10"
            android:text="Movie title here"
            android:textColor="@color/white"
            android:layout_gravity="bottom"
            android:textSize="26sp" />
      </RelativeLayout>
</android.support.v7.widget.CardView>

Android CardView containing ImageView and TextView issue

3 Answers3