Как подключить и настроить MaterialCardView в Android

В двух словах: подключите библиотеку Material Components, используйте MaterialCardView в XML, задайте app:cardCornerRadius для скруглений, app:cardElevation для тени, управляйте отступами через android:padding / layout_margin и app:cardUseCompatPadding / app:cardPreventCornerOverlap для корректного поведения на разных API. Ниже — конкретные шаги и готовые примеры.

Подключение и базовая настройка

  1. В build.gradle (module) добавьте зависимость Material Components (укажите актуальную версию):
implementation "com.google.android.material:material:1.10.0"
  1. В теме приложения используйте Theme.MaterialComponents (или наследуйте от неё):
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <!-- настройки темы -->
</style>
  1. Пример простого MaterialCardView в XML:
<com.google.android.material.card.MaterialCardView
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    app:cardCornerRadius="12dp"
    app:cardElevation="6dp"
    app:cardUseCompatPadding="true"
    app:strokeColor="@color/gray"
    app:strokeWidth="1dp"
    android:padding="12dp">

    <!-- Вложенный контент -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Пример карты"/>
</com.google.android.material.card.MaterialCardView>

app:cardUseCompatPadding добавляет совместимые отступы для тени на старых версиях Android; app:cardPreventCornerOverlap управляет дополнительной внутренней подкладкой, чтобы контент не заходил за скруглённые углы.

Скругления и подбор формы через ShapeAppearance

Для централизованной настройки форм задайте ShapeAppearance в теме или отдельном стиле:

<style name="ShapeAppearance.Card" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">12dp</item>
</style>

<style name="CardStyle" parent="">
    <item name="materialCardViewStyle">@style/Widget.MaterialComponents.CardView</item>
</style>

<!-- Применение через атрибут shapeAppearance -->
<com.google.android.material.card.MaterialCardView
    app:shapeAppearance="@style/ShapeAppearance.Card"
    ... >

Это удобно, если хотите consistent дизайн по приложению и менять размеры одного места.

Тени: что важно знать

  • Тень определяется свойством elevation (app:cardElevation или android:elevation). На Android 5+ тень нативная и зависит от elevation и outline.
  • На API < 21 используется совместимая отрисовка, app:cardUseCompatPadding добавляет ударные паддинги.
  • Цвет тени менять стандартными средствами нельзя; если нужен цветной теневой эффект — используйте кастомный drawable (9-patch) или слой с blur-фильтром.

Примеры программной установки (Kotlin):

val card: MaterialCardView = findViewById(R.id.card)
card.radius = resources.getDimension(R.dimen.card_radius)
card.cardElevation = resources.getDimension(R.dimen.card_elevation)

Отступы, padding и поведение содержимого

  • Внешний отступ: android:layout_margin (контролируется родительским ViewGroup).
  • Внутренний отступ: android:padding.
  • cardUseCompatPadding добавляет дополнительные внутренние отступы, чтобы тень не обрезалась.
  • cardPreventCornerOverlap по умолчанию true — добавляет padding, чтобы контент не пересекал скруглённые углы. Установите false, если вы самостоятельно контролируете внутренние отступы.

Пример: убрать дополнительную подкладку, но оставить тень

app:cardUseCompatPadding="true"
app:cardPreventCornerOverlap="false"

Частые ошибки

  • Тень не видна: elevation = 0 или родитель обрезает (check clipToPadding / clipChildren). Убедитесь, что родитель не имеет android:clipToPadding="true", если тень выходит за границы.
  • Скругления не применяются к контенту: у MaterialCardView есть cardPreventCornerOverlap; если контент рисуется поверх углов, включите его.
  • Неправильная тема: MaterialCardView ожидает Theme.MaterialComponents-потомка — иначе стили могут не примениться.

Не пытайтесь менять цвет системной тени через elevation — это ограничение платформы. Для специфичных визуальных эффектов используйте собственные drawable.

FAQ

  • Почему border (stroke) не отображается?
    • Проверьте app:strokeWidth и app:strokeColor; stroke виден поверх background, у MaterialCardView поддерживается stroke.
  • Как сделать разную радиусность углов (например, верхние 12dp, нижние 0)?
    • Используйте shape drawable или ShapeAppearance с CornerFamily и cornerSizeTopLeft/TopRight/Bottom... через Material Components (ShapeAppearanceOverlay).
  • Можно ли анимировать тень?
    • Да: анимируйте cardElevation (ValueAnimator), но помните, что визуал может отличаться на разных API.

Соблюдая эти правила, вы получите предсказуемые скругления, корректные тени и удобный контроль отступов для MaterialCardView в вашем приложении.