create custom calendar shape like google calendar image in android

Question

i want to create custom calendar shape like google calendar icon and use it as a container of other views like ImageView and Textview i try use XML drawable shape and the result seem not be good and i try to create it programmatically but i cant know how to put other views in custom view what is the proper way to create that?

bg_calendar_view.xml

<!-- Gray shadow. -->
<item>
    <shape>
        <solid android:color="#dadada" />
        <corners android:radius="15dp" />
    </shape>
</item>

<!-- White foreground.  -->
<item
    android:top="3dp"
    android:left="2dp"
    android:bottom="1dp"
    >
    <shape>
        <solid android:color="@android:color/white" />
        <corners android:radius="15dp" />
    </shape>
</item>

bg_notification_view.xml

<!-- Gray shadow. -->
<item>
    <shape>
        <solid android:color="#dadada" />
        <corners android:radius="15dp" />
    </shape>
</item>

<!-- White foreground.  -->
<item
    android:bottom="3dp"
    android:top="1dp"
    android:left="2dp">
    <shape>
        <solid android:color="@android:color/white" />
        <corners android:radius="15dp" />
    </shape>
</item>

bg_bottom_calendar.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
    android:bottom="4dp"
    android:right="25dp"
    android:left="25dp"
    android:drawable="@drawable/bg_notification_view">

</item>
<item
    android:left="15dp"
    android:bottom="20dp"
    android:right="15dp"


    android:drawable="@drawable/bg_notification_view">


</item>
<item
    android:bottom="40dp"
    android:drawable="@drawable/bg_notification_view">

</item>

bg_top_calendar.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
    android:bottom="4dp"
    android:right="25dp"
    android:left="25dp"
    android:drawable="@drawable/bg_calendar_view">

</item>
<item
    android:right="15dp"
    android:left="15dp"
    android:top="20dp"
    android:drawable="@drawable/bg_calendar_view">

</item>
<item
    android:top="40dp"
    android:drawable="@drawable/bg_calendar_view_blue">

</item>

my_layout.xml

<LinearLayout android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android"
android:gravity="center"
android:padding="16dp">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="250dp"
    android:background="@drawable/bg_top_calendar"
    android:padding="40dp"
    android:gravity="center"
    android:orientation="vertical"
    >
    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/notification"
        android:layout_gravity="center"
        android:layout_marginBottom="8dp"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="you Have 31 Notification"
        android:textColor="@color/white"
        android:textSize="18sp"/>

</LinearLayout>
<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="250dp"
    android:background="@drawable/bg_bottom_calendar"
    android:paddingBottom="40dp"
    android:paddingStart="4dp"
    android:paddingEnd="4dp"
    android:paddingTop="4dp"
    >

</FrameLayout>

Answer 1

We developed a Calendar for few months.

First we used linear layout to populate cells. We had 35 cells and each cell contained 1 RelativeLayout and 3 TextViews.

Then we populated views into cells programmatically, which was easy but turned out to be a very sluggish implementation. Then we used RecyclerView for cell implementation, but it didn't speedup by very margin.

Once We find out our bottleneck to be populating the complex views 35 times.

Then we came across a video about Custom Views. So we decided to give Custom Views a try after much study, and Voila! It solved our lagging issues like a charm.

You should too give it a try like us.