CODEWITHSUNDEEP
androidandroid-studiokotlinmobile
ekm0d
ekm0d

Reputation: 61

How to add shadow on constraint layout items?

I want to add a shadow to a note in a constraint layout. I have tried using elevation but that does not seem to work. Also if I try to use a separate file for styling the background, if I apply it the backgroud colour of the note also changes. This app allows to specify the color of the note when it is created and I would like to keept it that way. But as I mentioned, if I specify background from my drawables the background collour of the note also changes. I have tried using card views as well but it just covers the item and nothing appears. This what I have:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="5dp">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/row_background"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:id="@+id/title_text"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginTop="16dp"
            android:layout_marginEnd="16dp"
            android:maxLength="20"
            android:text="Title"
            android:textSize="20sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/notes_text"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="16dp"
            android:layout_marginBottom="16dp"
            android:maxLength="350"
            android:maxLines="12"
            android:text="Example text"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="@+id/title_text"
            app:layout_constraintTop_toBottomOf="@+id/title_text"
            app:layout_constraintVertical_bias="0.0" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

notes

I would like the notes to have a shadow like so: goal

Howw can I achieve this?

Upvotes: 1

Views: 4022

Answers (4)

Ole Pannier
Ole Pannier

Reputation: 3673

I bet this is what you were searching for:

<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
    
    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:layout_gravity="fill"
        app:cardCornerRadius="8dp"
        android:layout_margin="10dp"
        app:cardElevation="8dp"
        tools:ignore="MissingConstraints">

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
            
            <TextView
                android:id="@+id/title_text"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="25sp"
                android:text="Title"
                android:textColor="#000000"
                android:layout_margin="16dp"/>
    
            <TextView
                android:id="@+id/notes_text"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Example Text"
                android:layout_margin="16dp"
                android:textColor="#000000"
                android:textSize="25sp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                tools:ignore="MissingConstraints"
                android:layout_below="@+id/title_text"/>
    
        </RelativeLayout>
    </androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>

It is also important to use a RelativeLayout in the CardView, here between CardView and TextView (as I did). Happy coding buddy! :)

The result

Upvotes: 2

Riaz Mahmud
Riaz Mahmud

Reputation: 119

Here a example to use shadow in your layout with cardView

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <TextView
        android:id="@+id/textView3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Card Example"
        android:layout_marginTop="50dp"
        android:layout_marginStart="10dp"
        android:layout_marginEnd="10dp"
        android:textColor="@color/LightBlack"
        android:textSize="25sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="MissingConstraints" />

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:layout_gravity="fill"
        android:layout_margin="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        app:cardCornerRadius="8dp"
        app:cardElevation="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView3">

        <Spinner
            android:id="@+id/locationSpinner"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:textSize="25sp" />

    </androidx.cardview.widget.CardView>

</androidx.constraintlayout.widget.ConstraintLayout>

Check the image It's look like

Image

Upvotes: 1

Ayush Saini
Ayush Saini

Reputation: 180

See this tutorial at GFG and also this. You can also read official docs at CardView Based layout and cardview widget

Upvotes: 0

SooryaSRajan
SooryaSRajan

Reputation: 64

Inorder to get shadows In your layout, you must use he CardView layout, above your constraint layout or below it depending on how you configure your XML layout. You can use it from the androidx.cardview:cardview:1.0.0 dependency. It has the elevation attribute which generates shadows.

Upvotes: 0

Related Questions