Android Calendar View - How to customize Calendar View to make it like Google Calendar App one?

Question

In recent Google Calendar App , it has a calendar which can be pulled down to show, and display in the style like this:

I wanted to build a Calendar like this to the App, but when I put the android API CalendarView to the app, its style is very different:

So, the problem is how could I style/customize the CalendarView to like the one in Google Calendar App?

Also, for Google Calendar App's calendar, when there is an event on a particulate, there will be "small dots" under the date text (Like the 19th and 21th of Augest in the above Google Calendar's image). How to achieve something like this, when I am having a list of dates (NOT events of android calendar, just a list of dates) and wanted to mark a dot on these dates on the Calendar, like what the Google Calendar App did?

Answer 1

I wanted to build a Calendar like this to the App

You can use This Library to achieve what you want.

In recent Google Calendar App , it has a calendar which can be pulled down to show

You can hide/show your calendar view using animations.

there will be "small dots" under the date text

I've achieved this using this library but you need to study it a bit and modify it.This is using a canvas to build the calendar view and You can add circles on your dates using the x,y coordinates of these dates.Just pass the dates to this lib and use drawCircle() method for canvas.

Answer 2

I have found one project which create dropdown view like Google calendar app

Use this : Sample Project

Which is use CollapsingToolbarLayout inside it put custom calenderView which set dots on event date also it copy of google calendar app

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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:id="@+id/coordinatorLayout"
    android:layout_width="match_parent"
    android:background="@android:color/white"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:stateListAnimator="@animator/ann"
        app:expanded="false"
        android:background="@android:color/white"
        app:layout_behavior=".MyAppBarBehavior"
        tools:targetApi="lollipop">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsingToolbarLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"

            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap|enterAlways"
            app:statusBarScrim="?attr/colorPrimaryDark">

            <!--large view -->
            <com.example.GoogleCalendar.GooglecalenderView
                android:id="@+id/calander"
                android:layout_width="match_parent"
                android:layout_height="500dp"
                android:orientation="vertical"
                app:layout_collapseMode="pin"

                android:layout_marginTop="?attr/actionBarSize"
              >


            </com.example.GoogleCalendar.GooglecalenderView>

            <!--top toolbar-->
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:title="fkdl"
                app:contentInsetLeft="0dp"
                app:contentInsetStart="0dp"
                app:titleTextColor="@color/colorPrimaryDark"
                android:background="@android:color/white"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.PopupOverlay">

                <android.support.constraint.ConstraintLayout
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    android:clickable="true"
                    android:focusable="true">

                    <View
                        android:layout_width="0dp"
                        android:layout_height="0dp"
                        android:layout_marginTop="10dp"
                        android:id="@+id/backsupport"
                        android:background="?attr/selectableItemBackground"
                        android:clickable="true"
                        android:layout_marginBottom="10dp"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent" />
                <TextView
                        android:id="@+id/monthname"
                        app:layout_constraintLeft_toLeftOf="parent"
                        app:layout_constraintTop_toTopOf="parent"
                        app:layout_constraintBottom_toBottomOf="parent"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:paddingTop="4dp"
                        android:paddingBottom="4dp"
                        android:fontFamily="@font/googlesans_regular"
                        android:text="June"
                        android:textColor="#464646"
                        android:textSize="20sp" />
                    <ImageView
                        android:id="@+id/arrowImageView"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/ic_arrow_drop_up_black_24dp"
                        app:layout_constraintLeft_toRightOf="@+id/monthname"
                        android:translationX="-5dp"
                        app:layout_constraintTop_toTopOf="parent"
                        app:layout_constraintBottom_toBottomOf="parent"
                        tools:ignore="ContentDescription,RtlHardcoded" />
                                 </android.support.constraint.ConstraintLayout>

            </android.support.v7.widget.Toolbar>
  </android.support.design.widget.CollapsingToolbarLayout>

    </android.support.design.widget.AppBarLayout>

    <com.example.GoogleCalendar.MyRecyclerView
        android:id="@+id/nestedView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />


</android.support.design.widget.CoordinatorLayout>