Text in CardView is overlapping Android

Question

In my android app I have created two TextView inside CardView layout. The first TextView will show the description of one item and second TextView will show a link of that item. but whenever I run my app, the second text is overlapping with the first one. I want to implement in such a way that after finishing the first text the second one with start. but I fail to implement that. Here is my code for CardView layout.

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="20dp">

        <android.support.v7.widget.CardView
            android:id="@+id/cardView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            >
            <TextView
                android:id="@+id/news_description"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/large_text"/>

            <TextView
                android:id="@+id/webLink"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/link"
                android:layout_gravity="bottom"
                android:textAppearance="?android:attr/textAppearanceSmall" />

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

Answer 1

<RelativeLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:padding="20dp">

 <android.support.v7.widget.CardView
    android:id="@+id/cardView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
    <TextView
        android:id="@+id/news_description"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/large_text"/>

    <TextView
        android:id="@+id/webLink"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/link"
        android:layout_gravity="bottom"
        android:textAppearance="?android:attr/textAppearanceSmall" />
    </LinearLayout>

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

Answer 2

make your layout like this

<RelativeLayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:padding="20dp">

 <android.support.v7.widget.CardView
    android:id="@+id/cardView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

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

        <TextView
            android:id="@+id/news_description"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/large_text" />

        <TextView
            android:id="@+id/webLink"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:text="@string/link"
            android:textAppearance="?android:attr/textAppearanceSmall" />

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

</RelativeLayout>

Answer 3

Use the RelativeLayout or LinearLayout inside the CardView like this:

     <android.support.v7.widget.CardView
                android:id="@+id/cardView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                >

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">
                    <TextView
                        android:id="@+id/news_description"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="dklfjkdsjfsd"
                        />

                    <TextView
                        android:id="@+id/webLink"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="bottom"
                        android:layout_marginLeft="5dp"
                        android:layout_toRightOf="@+id/news_description"
                        android:textAppearance="?android:attr/textAppearanceSmall" />
                </RelativeLayout>


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

Hope this will help you out.....

Answer 4

You have put two TextViews inside CardView. The super class of CardView is FrameLayout. Putting your TextVeiws inside a LinearLayout or Relative Layout can solve your problem.

<android.support.v7.widget.CardView
android:id="@+id/cardView"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
<TextView
    android:id="@+id/news_description"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/large_text"/>

<TextView
    android:id="@+id/webLink"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/link"
    android:layout_gravity="bottom"
    android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
</android.support.v7.widget.CardView>