Matthew The Terrible
Matthew The Terrible

Reputation: 1643

xamarin card view layout

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. enter image description here

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

Answers (1)

Jonathan Twite
Jonathan Twite

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

Related Questions