Skip to content

Instantly share code, notes, and snippets.

@nadar71
Last active June 11, 2020 08:25
Show Gist options
  • Save nadar71/d6bc6e0aa3189ff9264a116360b304fc to your computer and use it in GitHub Desktop.
Save nadar71/d6bc6e0aa3189ff9264a116360b304fc to your computer and use it in GitHub Desktop.
Material card with elevation & shadow : using cardElevation=8dp and (fundamental) layout_margin= 5dp (a greater value isn't work, must be similar to that of the cardElevation to work)
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView 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"
style="@style/HomeCard.White"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="@dimen/_5ssp"
app:cardCornerRadius="12dp"
app:cardElevation="8dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/room_name_txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:text="Home Name"
android:textAppearance="@style/Text.Bold"
android:textSize="20sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/devices_label_txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="Devices"
android:textAppearance="@style/Text.Regular"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="@+id/num_devices_txt"
app:layout_constraintStart_toEndOf="@+id/num_devices_txt" />
<TextView
android:id="@+id/num_devices_txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:text="0"
android:textAppearance="@style/Text.Regular"
android:textSize="18sp"
app:layout_constraintStart_toStartOf="@+id/room_name_txt"
app:layout_constraintTop_toBottomOf="@+id/room_name_txt" />
<ImageView
android:id="@+id/arrow_rg_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:backgroundTint="@color/white"
app:layout_constraintBottom_toTopOf="@+id/room_name_txt"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@+id/room_name_txt"
app:srcCompat="@drawable/ic_chevron_right_32dp" />
<ImageView
android:id="@+id/dev_01_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:layout_marginBottom="32dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="@+id/num_devices_txt"
app:layout_constraintTop_toBottomOf="@+id/num_devices_txt"
app:srcCompat="@drawable/placeholder_circ_black_24dp" />
<ImageView
android:id="@+id/dev_02_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
app:layout_constraintBottom_toBottomOf="@+id/dev_01_img"
app:layout_constraintStart_toEndOf="@+id/dev_01_img"
app:srcCompat="@drawable/placeholder_circ_black_24dp" />
<ImageView
android:id="@+id/dev_03_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
app:layout_constraintBottom_toBottomOf="@+id/dev_02_img"
app:layout_constraintStart_toEndOf="@+id/dev_02_img"
app:srcCompat="@drawable/placeholder_circ_black_24dp" />
<ImageView
android:id="@+id/dev_04_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
app:layout_constraintBottom_toBottomOf="@+id/dev_03_img"
app:layout_constraintStart_toEndOf="@+id/dev_03_img"
app:srcCompat="@drawable/placeholder_circ_black_24dp" />
<ImageView
android:id="@+id/badge_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
app:layout_constraintBottom_toBottomOf="@+id/dev_04_img"
app:layout_constraintStart_toEndOf="@+id/dev_04_img"
app:srcCompat="@drawable/circle_primarycolor" />
<TextView
android:id="@+id/plus_symb_txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="+"
android:textColor="@color/white"
app:layout_constraintBottom_toBottomOf="@+id/badge_img"
app:layout_constraintEnd_toEndOf="@+id/badge_img"
app:layout_constraintHorizontal_bias="0.12"
app:layout_constraintStart_toEndOf="@+id/badge_img"
app:layout_constraintStart_toStartOf="@+id/badge_img"
app:layout_constraintTop_toTopOf="@+id/badge_img" />
<TextView
android:id="@+id/num_dev_badge_txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="10"
android:textAppearance="@style/Text.Regular"
android:textColor="@color/white"
app:layout_constraintBottom_toTopOf="@+id/plus_symb_txt"
app:layout_constraintStart_toEndOf="@+id/plus_symb_txt"
app:layout_constraintTop_toBottomOf="@+id/plus_symb_txt" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
<!-- Notes :
- using tools:text = "..." make textview do not show in card -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment