Issue
SOLVED!
Solution: remove the background color from the layout and set it on the card view itself as
app:cardBackgroundColor=" # the color you want"
and make sure you have the following dependency
implementation 'com.google.android.material:material:1.1.0'
Those should do the job.
Update! --> Added extra information
I have the following activity in which I try to make 3 card views containing information. And I want to make the card views to have rounded corners.
I use the app:cardCornerRadius="8dp" but it's not showing any result, the corners still do not look round.
Any idea where is my mistake and what I need to do in order to have them rounded? Is it because of the layout inside the CardView?
Thank you!
Below you can see the XML file
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".view.ViewRecipe"
android:padding="16dp"
android:background="@color/mainBackgroundColorRM">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="center">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:fontFamily="sans-serif"
android:text="Spaghette"
android:textAlignment="center"
android:textColor="#000000"
android:textSize="32sp" />
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="12dp"
android:layout_marginEnd="8dp"
app:cardPreventCornerOverlap="false"
app:cardCornerRadius="8dp"
app:cardElevation="20dp">
<!-- Here add the Contact Details-->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/buttonColorRM"
android:paddingStart="32dp"
android:paddingTop="8dp"
android:paddingEnd="32dp"
android:paddingBottom="8dp">
<!-- Here add the time value -->
<TextView
android:id="@+id/text_view_duration_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:text="10 minute"
android:textAppearance="@android:style/TextAppearance.DeviceDefault.Medium"
android:textColor="#000000">
</TextView>
<!-- Here add the portii value -->
<TextView
android:id="@+id/text_view_servings_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/text_view_duration_value"
android:layout_alignParentEnd="true"
android:text="@string/Servings_VALUE_demo"
android:textAppearance="@android:style/TextAppearance.DeviceDefault.Large"
android:textColor="#000000">
</TextView>
<!-- Duration is here-->
<TextView
android:id="@+id/text_view_duration"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/text_duration_ViewRecipe"
android:layout_toStartOf="@id/text_view_duration_value"
android:layout_alignParentStart="true"
android:textAppearance="@android:style/TextAppearance.DeviceDefault.Large"
android:textColor="#000000"
android:textStyle="bold">
</TextView>
<!-- Time is here-->
<TextView
android:id="@+id/text_view_portii"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/text_view_duration"
android:text="@string/text_servings_ViewRecipe"
android:textAppearance="@android:style/TextAppearance.DeviceDefault.Large"
android:textColor="#000000"
android:textStyle="bold">
</TextView>
</RelativeLayout>
</androidx.cardview.widget.CardView>
<!-- Ingredients -->
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="12dp"
app:cardElevation="20dp"
app:cardPreventCornerOverlap="false"
app:cardCornerRadius="8dp">
<!-- Here add the Contact Details-->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:paddingStart="32dp"
android:paddingEnd="32dp"
android:background="@color/buttonColorRM">
<!-- Duration is here-->
<TextView
android:id="@+id/text_view_ingredients"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" Incrediente:"
android:layout_alignParentStart="true"
android:ellipsize="end"
android:textAppearance="@android:style/TextAppearance.DeviceDefault.Large"
android:textColor="#000000"
android:textStyle="bold"
android:drawableStart="@drawable/list_icon">
</TextView>
<!-- Time is here-->
<TextView
android:id="@+id/text_view_ingredients_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/text_view_ingredients"
android:text="Incredient 1, incredient 2, altul mai unul si ai unul"
android:textAppearance="@android:style/TextAppearance.DeviceDefault.Medium"
android:textColor="#000000">
</TextView>
</RelativeLayout>
</androidx.cardview.widget.CardView>
<!-- Recipe -->
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="12dp"
app:cardElevation="20dp"
app:cardPreventCornerOverlap="false"
app:cardCornerRadius="8dp">
<!-- Recipe description is here-->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:paddingStart="32dp"
android:paddingEnd="32dp"
android:background="@color/buttonColorRM">
<!-- Duration is here-->
<TextView
android:id="@+id/text_view_recipe"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/text_view_descriere_ViewRecipe"
android:layout_alignParentStart="true"
android:ellipsize="end"
android:textAppearance="@android:style/TextAppearance.DeviceDefault.Large"
android:textColor="#000000"
android:textStyle="bold"
android:drawableStart="@drawable/description_icon">
</TextView>
<!-- Time is here-->
<TextView
android:id="@+id/text_view_recipe_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/text_view_recipe"
android:text="@string/demo_reteta"
android:textAppearance="@android:style/TextAppearance.DeviceDefault.Medium"
android:textColor="#000000">
</TextView>
</RelativeLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>
</ScrollView>
Also here it is the Gradle Module App file
apply plugin: 'com.android.application'
android {
compileSdkVersion 29
buildToolsVersion "29.0.2"
defaultConfig {
applicationId "com.ciucurdaniel.romania.retetelemele"
minSdkVersion 26
targetSdkVersion 29
versionCode 1
versionName "1.0"
testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
}
}
compileOptions {
targetCompatibility = 1.8
sourceCompatibility = 1.8
}
}
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation 'androidx.appcompat:appcompat:1.0.2'
implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'androidx.test.ext:junit:1.1.0'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.1.1'
//AD MOB
implementation 'com.google.android.gms:play-services-ads:19.1.0'
//CardView
implementation 'androidx.cardview:cardview:1.0.0'
}
Solution
your CardView are round corner but not displayed rounded because you set the background of the inner layout. just move that background inner layout to CardView
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".view.ViewRecipe"
android:padding="16dp"
android:background="@color/mainBackgroundColorRM">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="center">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:fontFamily="sans-serif"
android:text="Spaghette"
android:textAlignment="center"
android:textColor="#000000"
android:textSize="32sp" />
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="12dp"
android:layout_marginEnd="8dp"
android:background="@color/buttonColorRM"
app:cardPreventCornerOverlap="false"
app:cardCornerRadius="8dp"
app:cardElevation="20dp">
<!-- Here add the Contact Details-->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingStart="32dp"
android:paddingTop="8dp"
android:paddingEnd="32dp"
android:paddingBottom="8dp">
<!-- Here add the time value -->
<TextView
android:id="@+id/text_view_duration_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:text="10 minute"
android:textAppearance="@android:style/TextAppearance.DeviceDefault.Medium"
android:textColor="#000000">
</TextView>
<!-- Here add the portii value -->
<TextView
android:id="@+id/text_view_servings_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/text_view_duration_value"
android:layout_alignParentEnd="true"
android:text="@string/Servings_VALUE_demo"
android:textAppearance="@android:style/TextAppearance.DeviceDefault.Large"
android:textColor="#000000">
</TextView>
<!-- Duration is here-->
<TextView
android:id="@+id/text_view_duration"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/text_duration_ViewRecipe"
android:layout_toStartOf="@id/text_view_duration_value"
android:layout_alignParentStart="true"
android:textAppearance="@android:style/TextAppearance.DeviceDefault.Large"
android:textColor="#000000"
android:textStyle="bold">
</TextView>
<!-- Time is here-->
<TextView
android:id="@+id/text_view_portii"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/text_view_duration"
android:text="@string/text_servings_ViewRecipe"
android:textAppearance="@android:style/TextAppearance.DeviceDefault.Large"
android:textColor="#000000"
android:textStyle="bold">
</TextView>
</RelativeLayout>
</androidx.cardview.widget.CardView>
<!-- Ingredients -->
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="12dp"
android:background="@color/buttonColorRM"
app:cardElevation="20dp"
app:cardPreventCornerOverlap="false"
app:cardCornerRadius="8dp">
<!-- Here add the Contact Details-->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:paddingStart="32dp"
android:paddingEnd="32dp"
>
<!-- Duration is here-->
<TextView
android:id="@+id/text_view_ingredients"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" Incrediente:"
android:layout_alignParentStart="true"
android:ellipsize="end"
android:textAppearance="@android:style/TextAppearance.DeviceDefault.Large"
android:textColor="#000000"
android:textStyle="bold"
android:drawableStart="@drawable/list_icon">
</TextView>
<!-- Time is here-->
<TextView
android:id="@+id/text_view_ingredients_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/text_view_ingredients"
android:text="Incredient 1, incredient 2, altul mai unul si ai unul"
android:textAppearance="@android:style/TextAppearance.DeviceDefault.Medium"
android:textColor="#000000">
</TextView>
</RelativeLayout>
</androidx.cardview.widget.CardView>
<!-- Recipe -->
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="12dp"
android:background="@color/buttonColorRM"
app:cardElevation="20dp"
app:cardPreventCornerOverlap="false"
app:cardCornerRadius="8dp">
<!-- Recipe description is here-->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:paddingStart="32dp"
android:paddingEnd="32dp"
>
<!-- Duration is here-->
<TextView
android:id="@+id/text_view_recipe"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/text_view_descriere_ViewRecipe"
android:layout_alignParentStart="true"
android:ellipsize="end"
android:textAppearance="@android:style/TextAppearance.DeviceDefault.Large"
android:textColor="#000000"
android:textStyle="bold"
android:drawableStart="@drawable/description_icon">
</TextView>
<!-- Time is here-->
<TextView
android:id="@+id/text_view_recipe_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/text_view_recipe"
android:text="@string/demo_reteta"
android:textAppearance="@android:style/TextAppearance.DeviceDefault.Medium"
android:textColor="#000000">
</TextView>
</RelativeLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>
</ScrollView>
Answered By - Dinesh
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.