Issue
Is there a way to make CardView only have corner radius at the top?
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="10dp"
>
Solution
Unless you try to extend the Android CardView
class, you cannot customize that attribute from XML
.
Nonetheless, there is a way of obtaining that effect.
Place a CardView
inside another CardView
and apply a transparent background to your outer CardView
and remove its corner radius ("cornerRadios = 0dp"
). Your inner CardView
will have a cornerRadius value of 3dp, for example. Then apply a marginTop to your inner CardView
, so its bottom bounds will be cut by the outer CardView
. This way, the bottom corner radius of your inner CardView
will be hidden.
The XML code is the following:
<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="200dp"
android:layout_gravity="center"
card_view:cardBackgroundColor="@android:color/transparent"
card_view:cardCornerRadius="0dp"
card_view:cardElevation="3dp" >
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/card_view_inner"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_gravity="center"
android:layout_marginTop="3dp"
card_view:cardBackgroundColor="@color/green"
card_view:cardCornerRadius="4dp"
card_view:cardElevation="0dp" >
</android.support.v7.widget.CardView>
</android.support.v7.widget.CardView>
And the visual effect is the following:
Always put your content in your Inner CardView
. Your outer CardView serves only the purpose of "hiding" the bottom Rounded Corners of the inner CardView
.
Answered By - joao2fast4u
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.