Reputation: 1643
I'm trying to recreate a cardview similar to this one with an image with title on top and then some data and maybe some action buttons below. But for the life of me I can't get the text to be on top of the image.
Here is what I have so far
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:cardview="http://schemas.android.com/apk/res-auto"
android:id="@+id/card_view"
android:layout_width="match_parent"
android:layout_height="325dp"
android:layout_margin="8dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/image1"
android:layout_width="match_parent"
android:layout_height="230dp"
android:layout_alignParentTop="true"
android:scaleType="centerCrop" />
<TextView
android:id="@+id/recipeName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/image1"
android:maxLines="3"
android:padding="8dp"
android:text="name"
android:textColor="#222"
android:textStyle="bold"
android:textSize="22dp" />
<TextView
android:id="@+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/recipeName"
android:maxLines="3"
android:padding="8dp"
android:text="description"
android:textColor="#666"
android:textSize="14dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_below="@+id/description">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/recipeName"
android:maxLines="3"
android:padding="8dp"
android:text="View"
android:textColor="#666"
android:textSize="14dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/recipeName"
android:maxLines="3"
android:padding="8dp"
android:text="Add"
android:textColor="#666"
android:textSize="14dp" />
</LinearLayout>
</RelativeLayout>
Upvotes: 1
Views: 587
Reputation: 952
I will assume you want @+id/recipeName
on top of @+id/image1
.
On recipeName
, you have set: android:layout_below="@+id/image1"
which will layout the element below image1
. Remove that line as you do not want it below that element. Try android:layout_alignBottom="@+id/image1"
. There are enough layout parameters to do most things: LayoutParams, though it can be a bit of a rabbit hole once you start doing complex layouts...
Also you've got layout_below
on elements inside your LinearLayout
which won't do anything.
Upvotes: 2