Card Interface: Can't fit contents and text is clipped

Question

I'm making an app with it's contents inside card-like views but I am having a couple of problems:

1. I can't get the label line (the blue line) to move away from the card text. I've tried both padding and margin (on both line imageview and textview from text) and nothing seems to work here.

2. The bottom part of the card title is getting cropped because of the line spacing. How can I fix this and keep the line spacing?

Check this screenshot for better understanding: https://i.sstatic.net/QUOWr.jpg

Here's the code to the card background and the interface itself:

card_bg:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle"
            android:dither="true">

            <corners android:radius="1dp"/>

            <solid android:color="#bdbdbd" />

        </shape>
    </item>

    <item android:bottom="2dp">
        <shape android:shape="rectangle"
            android:dither="true">

            <corners android:radius="2dp" />

            <solid android:color="@android:color/white" />

            <padding android:bottom="6dp"
                android:left="6dp"
                android:right="6dp"
                android:top="4dp" />
        </shape>
    </item>
</layer-list>

main acitivity:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="4dp"
        android:layout_marginLeft="6dp"
        android:layout_marginRight="6dp"
        android:layout_marginTop="4dp"
        android:background="@drawable/card_bg" >

        <ImageView
            android:id="@+id/iconView0001"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingTop="6dp"
            android:src="@drawable/icon_example" />

     <ImageView
            android:id="@+id/labelSource0001"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/cardText0001"
            android:layout_marginTop="4dp"
            android:background="@drawable/card_label" /> 

        <TextView
            android:id="@+id/cardTitle0001"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignTop="@+id/cardText0001"
            android:layout_toRightOf="@+id/iconView0001"
            android:fontFamily="sans-serif-condensed"
            android:maxLines="2"
            android:paddingLeft="4dp"
            android:lineSpacingExtra="-6dp"         
            android:text="@string/card_title_002"
            android:textColor="#717171"
            android:textSize="16sp" />

      <TextView
            android:id="@+id/cardText0001"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/iconView0001"
            android:fontFamily="sans-serif"
            android:layout_marginTop="4dp"
            android:maxLines="1"
            android:text="@string/card_desc_002"
            android:textColor="#acacac"
            android:textSize="12sp" />

    </RelativeLayout>

</FrameLayout>

Thanks in advance.

Answer 1

this is the creator of the Gist on GitHub!

Have you tried increasing padding on the RelativeLayout, perhaps that could fix the problem? Or even on the TextView element?

Try doing that and see what the results are.

EDIT: Also, why is there negative line spacing within the Text View?

DOUBLE EDIT: So what was happening is that your layout_alignBottom in the linkTitle TextView was shorter than the height of two lines of text, therefore it was cropping the title to limit the height of the TextView to that of the FavIcon ImageView. Removing this property fixes the issue.

Similar issue goes for the label shape, that alignBottom is what's messing it up.

Change layout_alignBottom to layout_below and then padding/margin should affect the position as you please.

Here is the updated version of your code that should remedy your issues:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/linkCardView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#ccc"   >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="4dp"
        android:layout_marginLeft="6dp"
        android:layout_marginRight="6dp"
        android:layout_marginTop="4dp"
        android:background="@drawable/card_bg">

        <TextView
            android:id="@+id/linkTitle"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/faviconView0001"
            android:padding="4dp"
            android:maxLines="2"
            android:text="@string/link_title_001"
            android:textColor="#717171"
            android:textSize="17sp" />

        <TextView
            android:id="@+id/linkDesc0001"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/linkTitle"
            android:paddingTop="6dp"
            android:paddingBottom="9dp"
            android:fontFamily="sans-serif"
            android:maxLines="1"
            android:text="@string/link_desc_001"
            android:textColor="#acacac"
            android:textSize="13sp"   />

        <ImageView
            android:id="@+id/faviconView0001"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingTop="6dp"
            android:layout_alignParentLeft="true"
            android:src="@drawable/favicon_example" />

        <View
            android:layout_height="0dp"
            android:layout_width="fill_parent" 
            />
        <ImageView
            android:id="@+id/labelSource0001"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/linkDesc0001"
            android:background="@drawable/card_label" /> 
    </RelativeLayout>
</FrameLayout>

I hope that all of this helps!