CODEWITHSUNDEEP
androidtextviewimageviewoverlaycardview
petrrr33
petrrr33

Reputation: 599

Android CardView containing ImageView and TextView issue

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:

enter image description here

Upvotes: 0

Views: 2166

Answers (3)

Brian Yencho
Brian Yencho

Reputation: 2958

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.

Upvotes: 1

Shareefoo
Shareefoo

Reputation: 41

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>

Upvotes: 2

anomeric
anomeric

Reputation: 698

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>

Upvotes: -1

Related Questions