Round only top corner of cardview

Question

I want to corner only the top of a cardview.

I used below property and it is rounding all the corner.

I want to show an overlap of all cards

card_view:cardCornerRadius="4dp"

here is my layout

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    card_view:cardCornerRadius="4dp"
    card_view:cardPreventCornerOverlap="false"
    >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:id="@+id/re1">

        <TextView
            android:id="@+id/title"
            android:layout_width="match_parent"
            android:layout_height="20dp"
            android:background="@color/colorAccent"
            android:text="contact det"
            android:gravity="center_vertical"
            android:textColor="@android:color/white"
            android:textSize="14dp"/>

        <TextView
            android:id="@+id/txtName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Name"
            android:gravity="center_vertical"
            android:textSize="10dp"
            android:layout_below="@id/title"
            android:layout_marginTop="10dp"
            android:layout_marginLeft="5dp"/>

        <TextView
            android:id="@+id/txtSurname"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Surname"
            android:gravity="center_vertical"
            android:textSize="10dp"
            android:layout_below="@id/txtName"
            android:layout_marginTop="10dp"
            android:layout_marginLeft="5dp"
            />

        <TextView
            android:id="@+id/txtEmail"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Email"
            android:textSize="10dp"
            android:layout_marginTop="10dp"
            android:layout_alignParentRight="true"
            android:layout_marginRight="150dp"
            android:layout_alignBaseline="@id/txtName"/>

        <TextView
            android:id="@+id/txtAdd"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Address"
            android:textSize="10dp"
            android:layout_alignLeft="@id/txtEmail"
            android:layout_alignBaseline="@id/txtSurname"/>

    </RelativeLayout>


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

Edward

Check this answer – Mckeon

Answer 1

We can set the marginBottom of the card view in negative value.Margin should be same value as card radius. For Example,

    <FrameLayout
        android:id="@+id/rootview"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

   <android.support.v7.widget.CardView
         android:id="@+id/card_view"
         android:layout_marginBottom="-3dp"
         project:cardCornerRadius="3dp"
         android:layout_width="match_parent"
         android:layout_height="match_parent">

         <!--The child view inside the cardview should have extra padding,so that negative margin will not affect the bottom padding of its child.Here normally we have 16dp bottom padding for child + margin bottom of the parent is 3dp=19dp comes.-->

       <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:paddingBottom="19dp"/>

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

It works for me.But I am in doubt whether it is the proper way of doing.Any suggestions are welcome.

Sonar

this works only if card view is at the bottom of the screen – Calycine

but android:layout_marginBottom="-3dp" decreased the height of cardview any other alternative solution for same. – Tinny

Thanks for the answer but it is not working for me on preLollipop devices – Backhander

just try this for half rounded view. you will get to know the mistake. – Wendolyn

Answer 2

Or, you can use MaterialCardView

<com.google.android.material.card.MaterialCardView
            style="@style/CustomCardViewStyle"
            ...>         
</com.google.android.material.card.MaterialCardView>

    <style name="CustomCardViewStyle" parent="@style/Widget.MaterialComponents.CardView">
         <item name="shapeAppearanceOverlay">@style/ShapeAppearanceOverlay_card_custom_corners</item>
      </style>
    
    
          <style name="ShapeAppearanceOverlay_card_custom_corners" parent="">
            <item name="cornerFamily">rounded</item>
            <item name="cornerSizeTopRight">4dp</item>
            <item name="cornerSizeTopLeft">8dp</item>
            <item name="cornerSizeBottomRight">16dp</item>
            <item name="cornerSizeBottomLeft">0dp</item>
          </style>

You cand find a good answer here

Unbar

Answer 3

I have been trying the same but none of the solutions provided worked for me.

The only thing that worked was:

1) Make a custom background resource (like a rectangle shape) with rounded corners.

2) set this custom background using the command -

cardView = view.findViewById(R.id.card_view2);
cardView.setBackgroundResource(R.drawable.card_view_bg);

Worked perfectly for me! Hope this helps you.

The XML layout I made with top left and bottom right radius.

<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/white" />
<corners android:topLeftRadius="18dp" android:bottomRightRadius="18dp" />
</shape>

In your case, you need to change only topLeftRadius as well as topRightRadius.

Quag

The problem with this approach is that when we set background, most properties of cardview disappears like : ripple effect and elevation – Obelisk

This solution does not work. It only works if you don't need to cut any part of content of CardView - which defeats the purpose of CardView. – Magus

Answer 4

Tricky thing because you can't make CardView do this. Internally it uses a RoundRectDrawable (package private) which uses roundRect like this:

 // rectf, rx, ry, paint
 canvas.drawRoundRect(mBoundsF, mRadius, mRadius, paint);

Therefore you need a different solution, for example I found this gist by Ahmed-Abdelmeged where they use canvas clipping per each corner using a path to describe the outline.

So while I'm not the one who made this code, I'll post it here for future travellers.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="RoundedView">
        <attr name="topLeftCornerRadius" format="dimension" />
        <attr name="topRightCornerRadius" format="dimension" />
        <attr name="bottomLeftCornerRadius" format="dimension" />
        <attr name="bottomRightCornerRadius" format="dimension" />
    </declare-styleable>
</resources>

and

package com.abdelmeged.ahmed.roundedlayout;

/**
 * Created by ahmed on 9/17/2017.
 */

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Path;
import android.graphics.RectF;
import android.graphics.Region;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;
import android.widget.FrameLayout;

/**
 * Custom wrapper view to get round corner round view
 */
public class RoundedView extends FrameLayout {

    /**
     * The corners than can be changed
     */
    private float topLeftCornerRadius;
    private float topRightCornerRadius;
    private float bottomLeftCornerRadius;
    private float bottomRightCornerRadius;

    public RoundedView(@NonNull Context context) {
        super(context);
        init(context, null, 0);
    }

    public RoundedView(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs, 0);
    }

    public RoundedView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs, defStyleAttr);
    }

    private void init(Context context, AttributeSet attrs, int defStyle) {
        TypedArray typedArray = context.obtainStyledAttributes(attrs,
                R.styleable.RoundedView, 0, 0);

        //get the default value form the attrs
        topLeftCornerRadius = typedArray.getDimension(R.styleable.
                RoundedView_topLeftCornerRadius, 0);
        topRightCornerRadius = typedArray.getDimension(R.styleable.
                RoundedView_topRightCornerRadius, 0);
        bottomLeftCornerRadius = typedArray.getDimension(R.styleable.
                RoundedView_bottomLeftCornerRadius, 0);
        bottomRightCornerRadius = typedArray.getDimension(R.styleable.
                RoundedView_bottomRightCornerRadius, 0);

        typedArray.recycle();
        setLayerType(View.LAYER_TYPE_SOFTWARE, null);
    }


    final Path path = new Path();

    @Override
    protected void dispatchDraw(Canvas canvas) {
        int count = canvas.save();

        path.reset();

        float[] cornerDimensions = {
                topLeftCornerRadius, topLeftCornerRadius,
                topRightCornerRadius, topRightCornerRadius,
                bottomRightCornerRadius, bottomRightCornerRadius,
                bottomLeftCornerRadius, bottomLeftCornerRadius};

        path.addRoundRect(new RectF(0, 0, canvas.getWidth(), canvas.getHeight())
                , cornerDimensions, Path.Direction.CW);

        canvas.clipPath(path);

        super.dispatchDraw(canvas);
        canvas.restoreToCount(count);
    }

    public void setTopLeftCornerRadius(float topLeftCornerRadius) {
        this.topLeftCornerRadius = topLeftCornerRadius;
        invalidate();
    }

    public void setTopRightCornerRadius(float topRightCornerRadius) {
        this.topRightCornerRadius = topRightCornerRadius;
        invalidate();
    }

    public void setBottomLeftCornerRadius(float bottomLeftCornerRadius) {
        this.bottomLeftCornerRadius = bottomLeftCornerRadius;
        invalidate();
    }

    public void setBottomRightCornerRadius(float bottomRightCornerRadius) {
        this.bottomRightCornerRadius = bottomRightCornerRadius;
        invalidate();
    }
}

This will let you clip the edge of images and views before they get rendered, therefore it does exactly what you want.

Tournai

The code provided in the link above works nice with Glide image loader and this answer should be accepted answer. – Westlund

@Tournai Thank you very much but please could you provide a way to add the elevation? just like in CardView? – Cleanshaven

Shadow is a matter of padding and elevation. If it works. – Tournai

Answer 5

In case if you just want to shape an image, use material ShapeableImageView that draws the bitmap with the provided Shape.

 <!-- Media -->
<com.google.android.material.imageview.ShapeableImageView
  ...
     app:shapeAppearance="?attr/shapeAppearanceMediumComponent"
     app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.App.Card.Media" />

In res/values/styles.xml:

<style name="ShapeAppearanceOverlay.App.Card.Media" parent="">
    <item name="cornerSizeBottomLeft">0dp</item>
    <item name="cornerSizeBottomRight">0dp</item>
    <item name="cornerSizeTopLeft">8dp</item>
    <item name="cornerSizeTopRight">8dp</item>
</style>

Hanse

Answer 6

Well, I am so desperate finding a way to achieve this, one it's not possible, and creating your own shadow is somewhat I don't like the result and I lucky in my case I need it in the corner of the screen top right to be exact.

let's make it simple, make oversized card view into another view in my case I use frame layout then change it's x and y translation to what you need, well what I do is, make translation x and y into same exact card radius corner value. and there you go one sided rounded card view with barbaric way.

code ? sample ? here you go

<FrameLayout
    android:id="@+id/miniTimer"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="@+id/frameLayout"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <androidx.cardview.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:translationX="10dp"
        android:translationY="-10dp"
        app:cardBackgroundColor="@android:color/transparent"
        app:cardCornerRadius="10dp"
        app:cardUseCompatPadding="true">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/drwable_red__rounded_botleft_10"
            android:gravity="center"
            android:orientation="horizontal"
            android:paddingStart="5dp"
            android:paddingLeft="5dp"
            android:paddingTop="10dp"
            android:paddingEnd="10dp"
            android:paddingRight="10dp"
            android:paddingBottom="5dp">

            <TextView
                android:id="@+id/miniTimerText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="@color/colorAccent"
                android:textSize="12dp" />

        </LinearLayout>
    </androidx.cardview.widget.CardView>
</FrameLayout>

note : oh I dynamically generate the textview text so add it yourself :)

Lief

From Review: First of all, welcome to Stack Overflow. I could barely understand your answer due to lack of puntuation and due to its grammar, although it looks like a possible solution. Could you please edit this post and improve the explanation text? Thanks. – Teratism

Answer 7

It's better to update your CardView form:

androidx.cardview.widget.CardView

to new one:

com.google.android.material.card.MaterialCardView

like this:

<com.google.android.material.card.MaterialCardView
            android:id="@+id/bottomCard"
            android:layout_width="70dp"
            android:layout_height="70dp">

then in Kotlin use like this:

 var shapeAppearanceModel: ShapeAppearanceModel.Builder =ShapeAppearanceModel().toBuilder()
        shapeAppearanceModel.setBottomRightCorner(
            CornerFamily.ROUNDED,
            CornerSize { return@CornerSize 45F })
        binding.bottomCard.shapeAppearanceModel =shapeAppearanceModel.build()

instead of binding you can put

bottomCard=view.findViewById<MaterialCardView>(R.id.bottomCard) 

Concertmaster

nice it working like charm – Adila

Answer 8

I only created card view to wrap around image for corner radius then used constraint layout to add guidline and add below text layout to guidline. then guidline have overlapped on card with margin.

<androidx.constraintlayout.widget.ConstraintLayout xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/card_icon"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="@dimen/_10sdp"
    android:layout_marginRight="@dimen/_10sdp"
    android:layout_marginTop="@dimen/_9sdp"
    android:elevation="@dimen/_2sdp"
    android:background="@drawable/card_top_corners"
    android:clipChildren="true"
     xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">


    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="@dimen/_152sdp"
        app:cardCornerRadius="@dimen/_10sdp"
        app:cardPreventCornerOverlap="false"
        app:cardElevation="0dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="match_parent"
            android:layout_height="@dimen/_142sdp"
            android:scaleType="centerCrop"
            android:src="@drawable/shahruk"
            android:visibility="visible" />


    </androidx.cardview.widget.CardView>

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline14"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="@dimen/_142sdp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white"
        android:orientation="vertical"

        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline14">

        <TextView
            android:id="@+id/txt_title"
            style="@style/medium_14sp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="start"
            android:paddingLeft="@dimen/_8sdp"
            android:paddingTop="@dimen/_8sdp"
            android:paddingRight="@dimen/_8sdp"
            android:text="Rupa Singh: First indian woman to become a Jockey."
            android:textColor="@color/city_news_text" />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/_8sdp"
            android:layout_marginRight="@dimen/_8sdp"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/txt_date"
                style="@style/medium_9sp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:gravity="center"
                android:maxWidth="@dimen/_120sdp"
                android:maxLines="1"
                android:paddingTop="2dp"
                android:text="Today"
                android:textColor="@color/header_new"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <View
                android:id="@+id/view2"
                android:layout_width="1dp"
                android:layout_height="@dimen/_8sdp"
                android:layout_gravity="center"
                android:layout_marginLeft="@dimen/_7sdp"
                android:layout_marginRight="@dimen/_7sdp"
                android:background="@color/header_new"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toEndOf="@+id/txt_date"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                android:id="@+id/txt_special_tag"
                style="@style/medium_9sp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:gravity="start|center_vertical"
                android:maxLines="1"
                android:paddingTop="2dp"
                android:text="Top News"
                android:textColor="@color/header_new"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@+id/view2"
                app:layout_constraintTop_toTopOf="parent" />
        </LinearLayout>

        <TextView
            style="@style/regular_11sp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/_5sdp"
            android:paddingLeft="@dimen/_8sdp"
            android:paddingTop="@dimen/_2sdp"

            android:paddingRight="@dimen/_8sdp"
            android:paddingBottom="@dimen/_8sdp"
            android:text="Napur records highest temperature in summers this year with  measure of 225 degree celsius....[Read more]"
            android:textColor="@color/scheme_subtext" />
    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

Please check result in image

Camilacamile

Answer 9

You can simply add an empty view to the bottom of your card view , set its background color the same as the cardView and also give a small negative margin to the top of the empty view, here is a sample :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/linBottomSheet"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    >


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        >

        <androidx.cardview.widget.CardView

            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginBottom="-8dp"
            android:elevation="2dp"
            app:cardBackgroundColor="@color/colorAccent"
            app:cardCornerRadius="10dp">




        </androidx.cardview.widget.CardView>

    </LinearLayout>

    <View
        
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:layout_marginTop="-10dp"
        android:background="@color/colorAccent" />
</LinearLayout>

Parmer

Answer 10

My custom way to implemented with a lib

//Rounded card

add this implementation on build.gradle

implementation 'com.github.captain-miao:optroundcardview:1.0.0'

in XML:

<com.github.captain_miao.optroundcardview.OptRoundCardView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="10dp"
    app:optRoundCardCornerRadius="40dp"
    app:optRoundCardLeftBottomCorner="false"
    app:optRoundCardRightBottomCorner="false"
    app:optRoundCardBackgroundColor="#E2EAF8">

Teresaterese

Answer 11

Simply scrolling the CardView on the Y-axis did the trick for me. Note the scrollY attribute on the CardView

<androidx.cardview.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:cardElevation="0dp"
                app:cardCornerRadius="12dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                android:scrollY="10dp"
                >

            <ImageView
                android:id="@+id/imageView"
                android:layout_width="match_parent"
                android:layout_height="80dp"
                android:scaleType="fitXY"
                android:src="@drawable/sample_post_image"
                />

            </androidx.cardview.widget.CardView>

I tried this answer but the cut-out radius has some dark background, which is not desirable.

Linseed

Bravo! Simple but elegant. – Estafette

Answer 12

Use this library https://github.com/captain-miao/OptionRoundCardview

Instead of using CardView, use OptRoundCardView

Heir

Answer 13

You need to create a custom background drawable for the CardView and apply it as the background. Here's an example:

Create a new XML file in your project's res/drawable directory (e.g., rounded_cardview_background.xml).

Add the following code to the XML file:

 <shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners
        android:topLeftRadius="8dp"
        android:topRightRadius="8dp" />
    <solid android:color="@android:color/white" />
</shape>

Apply the custom background drawable to your CardView in your layout XML file by setting the android:background attribute:

  <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/rounded_cardview_background"
        <!-- other attributes -->
        >
        <!-- card content -->
    </androidx.cardview.widget.CardView>

Peoples

Answer 14

As per the question, I am assuming that you want to apply corner radius property to only top of the card. You can obtain this effect by using two CardView. Place one CardView inside another CardView and remove outer CardView corner radius property. Also apply a transparent background to your outer CardView Your inner CardView will have a cornerRadius value of 4dp. Then apply a marginTop to your inner CardView, so that its bottom part becomes hidden by the outer CardView. This way, the bottom corner radius of your inner CardView will be hidden.

You will have to put your xml content in your Inner CardView. Outer CardView serves only the purpose of hiding the bottom rounded corners of the inner CardView. Your xml layout will look like this:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view_outer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    card_view:cardBackgroundColor="@android:color/transparent"
    card_view:cardCornerRadius="0dp"
    card_view:cardElevation="4dp" >

<android.support.v7.widget.CardView
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="3dp"
    card_view:cardElevation="0dp"
    card_view:cardCornerRadius="4dp"
    >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:id="@+id/re1">

        <TextView
            android:id="@+id/title"
            android:layout_width="match_parent"
            android:layout_height="20dp"
            android:background="@color/colorAccent"
            android:text="contact det"
            android:gravity="center_vertical"
            android:textColor="@android:color/white"
            android:textSize="14dp"/>

        <TextView
            android:id="@+id/txtName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Name"
            android:gravity="center_vertical"
            android:textSize="10dp"
            android:layout_below="@id/title"
            android:layout_marginTop="10dp"
            android:layout_marginLeft="5dp"/>

        <TextView
            android:id="@+id/txtSurname"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Surname"
            android:gravity="center_vertical"
            android:textSize="10dp"
            android:layout_below="@id/txtName"
            android:layout_marginTop="10dp"
            android:layout_marginLeft="5dp"
            />

        <TextView
            android:id="@+id/txtEmail"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Email"
            android:textSize="10dp"
            android:layout_marginTop="10dp"
            android:layout_alignParentRight="true"
            android:layout_marginRight="150dp"
            android:layout_alignBaseline="@id/txtName"/>

        <TextView
            android:id="@+id/txtAdd"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Address"
            android:textSize="10dp"
            android:layout_alignLeft="@id/txtEmail"
            android:layout_alignBaseline="@id/txtSurname"/>

    </RelativeLayout>


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

I have taken reference from this SO question: Question. I hope it solves your problem.

Souffle

Are you copying exactly the same code which I have posted in answer? – Souffle