Search code examples
androidandroid-layoutandroid-calendar

Android CalendarView with rounded corners still gives me a square looking shadow


So I've been trying to style a CalendarView component with some custom styling in Android Studio, but I'm having a weird issue that I can't find an answer to.

I'm using a shape in order to make the CalendarViews background card have rounded corners, but for some reason does the elevation drop-shadow still display as squared. (see image) This issue is visible in Android Studio, on an emulator or on a real device. Therefore it seems like I'm missing something but I don't understand what the could be.

I would be greatful for any help on this issue, thanks in advance!

Here's my shape-related code:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <solid android:color="@color/colorForeground" />
    <corners android:radius="10dp" />
</shape>

And here is my layout XML:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity" >

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

    

    <CalendarView
        android:id="@+id/calendarView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="24dp"
        android:layout_marginTop="24dp"
        android:layout_marginEnd="24dp"
        android:layout_marginBottom="24dp"
        android:background="@drawable/card_background"
        android:elevation="5dp" />

    </LinearLayout>
</ScrollView>

Image for reference


Solution

  • Wrap the CalendarView in a CardView instead of a LinearLayout

       <androidx.cardview.widget.CardView
            app:cardCornerRadius="10dp"
            app:cardElevation="5dp"
            ..>
    
            <CalendarView
                android:id="@+id/calendarView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/card_background"/>
    
        </androidx.cardview.widget.CardView>
    

    enter image description here