CardView с меньшим корпусом и плавающим вне изображения

Question

Я пытаюсь создать CardView in Android, чтобы изображение выглядело так, как будто оно плавает за пределами поля, а поле CardView, покрывающее его, выглядело бы меньше.

Поскольку я не знаю, как лучше описать это, я нашел похожий дизайн и попытался нарисовать его на Paint.

Смущает меня то, что поле должно выглядеть меньше, чем фактическое CardView.

Answer 1

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">



        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:layout_margin="20dp"
            android:layout_marginBottom="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:background="@color/cinza_claro"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:foregroundGravity="bottom"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>



        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_marginBottom="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:background="@color/red_app_accent"
            android:foregroundGravity="center"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

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

Answer 2

Только не помещайте ImageView в CardView.

Попробуйте что-то вроде этого:

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top|start"
        android:elevation="16dp"
        />

    <CardView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:margin_top="8dp"
        android:margin_start="8dp">

            <!-- CardView contents -->
    </CardView>

</FrameLayout>

Вам необходимо отрегулировать размеры в соответствии с вашим макетом.

Answer 3

Попробуйте этот код (для файла макета вашего элемента):

<?xml version="1.0" encoding="utf-8"?>

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@android:color/holo_green_dark"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v7.widget.CardView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="25dp"
        app:cardBackgroundColor="@android:color/holo_orange_light"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView One"
            android:textSize="20sp"
            android:textStyle="bold"
            android:textColor="@android:color/black"
            android:layout_marginStart="70dp"
            android:layout_marginTop="15dp"
            android:layout_marginBottom="5dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView Two"
            android:textSize="20sp"
            android:textStyle="bold"
            android:textColor="@android:color/black"
            android:layout_marginStart="70dp"
            android:layout_marginBottom="5dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView Three"
            android:textSize="20sp"
            android:textStyle="bold"
            android:textColor="@android:color/black"
            android:layout_marginStart="70dp"
            android:layout_marginBottom="15dp" />

        </LinearLayout>

    </android.support.v7.widget.CardView>

    <ImageView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginTop="14dp"
        android:layout_marginStart="12dp"
        android:elevation="2dp"
        android:background="@android:color/holo_red_dark"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

Примечание: Вы должны дать больше elevation ImageView, который должен быть расположен над CardView, поскольку CardView уже имеет некоторую собственную высоту по умолчанию.

В вашем файле build.gradle (Module: app) под зависимостями добавьте эти две зависимости следующим образом:

dependencies {
    // For ConstraintLayout:
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'

    // For CardView:
    implementation 'com.android.support:cardview-v7:27.1.1'
}

Снимок экрана (для вышеприведенного кода):

Для размера экрана - 5,0 дюйма (1080 x 1920 пикселей) [Устройство: пиксель 2]

Надеюсь, это вам поможет.

Answer 4

Вы должны попробовать FrameLayout с CardView и ImageView. Затем добавьте маржу к CardView, и вы ее получите.

Надеюсь, это поможет.