Tuesday, January 15, 2019

android - MaterialCardView example

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
        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="match_parent"
        android:id="@+id/rootLayout"
        tools:context=".MainActivity"
        android:background="#fdfdfc">
    <com.google.android.material.card.MaterialCardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/card1"
            app:layout_constraintEnd_toEndOf="parent"
            android:layout_marginEnd="8dp"
            app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            app:layout_constraintTop_toTopOf="parent"
            app:cardCornerRadius="3dp"
            app:cardElevation="5dp"
            app:cardMaxElevation="8dp"
            app:contentPadding="10dp"
            app:cardPreventCornerOverlap="true"
            app:cardUseCompatPadding="false">
        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Material\nCard View"
                android:textSize="50sp"
                android:layout_gravity="center"
        />
    </com.google.android.material.card.MaterialCardView>
    <com.google.android.material.card.MaterialCardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/card2"
            app:strokeWidth="2dp"
            app:strokeColor="#ff3939"
            app:cardBackgroundColor="#cbd4c6"
            app:cardCornerRadius="3dp"
            app:contentPadding="10dp"
            app:cardPreventCornerOverlap="true"
            app:cardUseCompatPadding="false"
            app:layout_constraintEnd_toEndOf="parent"
            android:layout_marginEnd="8dp"
            android:layout_marginTop="8dp"
            app:layout_constraintTop_toBottomOf="@+id/card1"
            app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="8dp">
        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Colored Material \nCard View"
                android:textSize="40sp"
                android:layout_gravity="center"
        />
    </com.google.android.material.card.MaterialCardView>
</androidx.constraintlayout.widget.ConstraintLayout>
res/values/styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.MaterialComponents.Light">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>
gradle dependencies

// Material components theme
implementation 'com.google.android.material:material:1.0.0'