How can I create a weekly calendar view for an Android Honeycomb application?

Question

I am working on an Android (v3.0) application that has a requirement of mimicking the weekly calendar layout found on Google Calendar:

The events will be based on external requests through the Google Calendar API (I already have this part working). Using the API, I can obtain a list of events for the week, with each event having a starting and and ending datetime. I would like to use this data to show the scheduled events to the application's users in a view similar to the one above.

Here's what I have so far:

The XML appears below:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="800dp"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Calendar Title"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <RelativeLayout
        android:id="@+id/relativeLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <LinearLayout
            android:id="@+id/linearLayout1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true" >

            <TextView
                android:id="@+id/textView2"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="" />

            <TextView
                android:id="@+id/textView3"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:gravity="center"
                android:text="Sunday" />

            <TextView
                android:id="@+id/textView4"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:gravity="center"
                android:text="Monday" />

            <TextView
                android:id="@+id/textView5"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:gravity="center"
                android:text="Tuesday" />

            <TextView
                android:id="@+id/textView6"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:gravity="center"
                android:text="Wednesday" />

            <TextView
                android:id="@+id/textView7"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:gravity="center"
                android:text="Thursday" />

            <TextView
                android:id="@+id/textView8"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:gravity="center"
                android:text="Friday" />

            <TextView
                android:id="@+id/textView9"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:gravity="center"
                android:text="Saturday" />
        </LinearLayout>
    </RelativeLayout>

    <ScrollView
        android:id="@+id/scrollView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="0dp"
        android:scrollbars="none" >"

        <RelativeLayout
            android:id="@+id/relativeLayout242"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="0dp" >


            <View android:background="#aaa" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="0dp"/>
            <View android:background="#aaa" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="40dp"/>
            <View android:background="#aaa" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="80dp"/>
            <View android:background="#aaa" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="120dp"/>
            <View android:background="#aaa" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="160dp"/>
            <View android:background="#aaa" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="200dp"/>
            <View android:background="#aaa" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="240dp"/>
            <View android:background="#aaa" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="280dp"/>
            <View android:background="#aaa" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="320dp"/>
            <View android:background="#aaa" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="360dp"/>
            <View android:background="#aaa" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="400dp"/>
            <View android:background="#aaa" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="440dp"/>
            <View android:background="#aaa" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="480dp"/>
            <View android:background="#aaa" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="520dp"/>
            <View android:background="#aaa" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="560dp"/>
            <View android:background="#aaa" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="600dp"/>
            <View android:background="#aaa" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="640dp"/>
            <View android:background="#aaa" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="680dp"/>
            <View android:background="#aaa" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="720dp"/>
            <View android:background="#aaa" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="760dp"/>
            <View android:background="#aaa" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="800dp"/>
            <View android:background="#aaa" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="840dp"/>
            <View android:background="#aaa" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="880dp"/>
            <View android:background="#aaa" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="920dp"/>

            <View android:background="#777" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="20dp"/>
            <View android:background="#777" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="60dp"/>
            <View android:background="#777" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="100dp"/>
            <View android:background="#777" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="140dp"/>
            <View android:background="#777" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="180dp"/>
            <View android:background="#777" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="220dp"/>
            <View android:background="#777" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="260dp"/>
            <View android:background="#777" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="300dp"/>
            <View android:background="#777" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="340dp"/>
            <View android:background="#777" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="380dp"/>
            <View android:background="#777" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="420dp"/>
            <View android:background="#777" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="460dp"/>
            <View android:background="#777" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="500dp"/>
            <View android:background="#777" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="540dp"/>
            <View android:background="#777" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="580dp"/>
            <View android:background="#777" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="620dp"/>
            <View android:background="#777" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="660dp"/>
            <View android:background="#777" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="700dp"/>
            <View android:background="#777" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="740dp"/>
            <View android:background="#777" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="780dp"/>
            <View android:background="#777" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="820dp"/>
            <View android:background="#777" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="860dp"/>
            <View android:background="#777" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="900dp"/>
            <View android:background="#777" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="940dp"/>

            <LinearLayout
                android:id="@+id/linearLayout2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="0dp" >

                <RelativeLayout
                    android:id="@+id/relativeLayout2"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:padding="0dp" >

                    <View android:background="#aaa" android:layout_width = "1dp" android:layout_height="fill_parent" android:layout_alignParentRight="true"/>

                    <TextView
                        android:id="@+id/textView10"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="0dp"
                        android:gravity="center"
                        android:text="12am" />

                    <TextView
                        android:id="@+id/textView10"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="40dp"
                        android:gravity="center"
                        android:text="1am" />

                    <TextView
                        android:id="@+id/textView10"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="80dp"
                        android:gravity="center"
                        android:text="2am" />

                    <TextView
                        android:id="@+id/textView10"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="120dp"
                        android:gravity="center"
                        android:text="3am" />

                    <TextView
                        android:id="@+id/textView10"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="160dp"
                        android:gravity="center"
                        android:text="4am" />

                    <TextView
                        android:id="@+id/textView10"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="200dp"
                        android:gravity="center"
                        android:text="5am" />

                    <TextView
                        android:id="@+id/textView10"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="240dp"
                        android:gravity="center"
                        android:text="6am" />

                    <TextView
                        android:id="@+id/textView10"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="280dp"
                        android:gravity="center"
                        android:text="7am" />

                    <TextView
                        android:id="@+id/textView10"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="320dp"
                        android:gravity="center"
                        android:text="8am" />

                    <TextView
                        android:id="@+id/textView10"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="360dp"
                        android:gravity="center"
                        android:text="9am" />

                    <TextView
                        android:id="@+id/textView10"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="400dp"
                        android:gravity="center"
                        android:text="10am" />

                    <TextView
                        android:id="@+id/textView10"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="440dp"
                        android:gravity="center"
                        android:text="11am" />

                    <TextView
                        android:id="@+id/textView10"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="480dp"
                        android:gravity="center"
                        android:text="12pm" />

                    <TextView
                        android:id="@+id/textView10"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="520dp"
                        android:gravity="center"
                        android:text="1pm" />

                    <TextView
                        android:id="@+id/textView10"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="560dp"
                        android:gravity="center"
                        android:text="2pm" />

                    <TextView
                        android:id="@+id/textView10"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="600dp"
                        android:gravity="center"
                        android:text="3pm" />

                    <TextView
                        android:id="@+id/textView10"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="640dp"
                        android:gravity="center"
                        android:text="4pm" />

                    <TextView
                        android:id="@+id/textView10"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="680dp"
                        android:gravity="center"
                        android:text="5pm" />

                    <TextView
                        android:id="@+id/textView10"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="720dp"
                        android:gravity="center"
                        android:text="6pm" />

                    <TextView
                        android:id="@+id/textView10"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="760dp"
                        android:gravity="center"
                        android:text="7pm" />

                    <TextView
                        android:id="@+id/textView10"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="800dp"
                        android:gravity="center"
                        android:text="8pm" />

                    <TextView
                        android:id="@+id/textView10"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="840dp"
                        android:gravity="center"
                        android:text="9pm" />

                    <TextView
                        android:id="@+id/textView10"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="880dp"
                        android:gravity="center"
                        android:text="10pm" />

                    <TextView
                        android:id="@+id/textView10"
                        android:layout_width="match_parent"
                        android:layout_height="40dp"
                        android:layout_marginTop="920dp"
                        android:gravity="center|top"
                        android:text="11pm" />
                </RelativeLayout>

                <RelativeLayout
                    android:id="@+id/relativeLayout3"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="14"
                    android:padding="0dp" >

                    <LinearLayout
                        android:id="@+id/linearLayout3"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_alignParentLeft="true"
                        android:layout_alignParentRight="true"
                        android:layout_alignParentTop="true"
                        android:padding="0dp" >

                        <RelativeLayout
                            android:id="@+id/relativeLayout4"
                            android:layout_width="0dp"
                            android:layout_height="match_parent"
                            android:layout_weight="1" >

                            <View android:background="#00f" android:layout_width = "fill_parent" android:layout_height="180dp" android:layout_marginTop="180dp"/>

                            <Button
                                android:id="@+id/button1"
                                android:layout_width="fill_parent"
                                android:layout_height="180dp"
                                android:layout_marginTop="180dp"
                                android:text="Some Event" />

                        </RelativeLayout>

                        <RelativeLayout
                            android:id="@+id/relativeLayout5"
                            android:layout_width="0dp"
                            android:layout_height="match_parent"
                            android:layout_weight="1" >

                            <View android:background="#00f" android:layout_width = "fill_parent" android:layout_height="180dp" android:layout_marginTop="280dp"/>

                            <Button
                                android:id="@+id/button1"
                                android:layout_width="fill_parent"
                                android:layout_height="180dp"
                                android:layout_marginTop="280dp"
                                android:text="Some Event" />

                        </RelativeLayout>

                        <RelativeLayout
                            android:id="@+id/relativeLayout6"
                            android:layout_width="0dp"
                            android:layout_height="match_parent"
                            android:layout_weight="1" >

                            <View android:background="#00f" android:layout_width = "fill_parent" android:layout_height="60dp" android:layout_marginTop="40dp"/>

                            <Button
                                android:id="@+id/button1"
                                android:layout_width="fill_parent"
                                android:layout_height="60dp"
                                android:layout_marginTop="40dp"
                                android:text="Some Event" />

                        </RelativeLayout>

                        <RelativeLayout
                            android:id="@+id/relativeLayout7"
                            android:layout_width="0dp"
                            android:layout_height="match_parent"
                            android:layout_weight="1" >

                            <View android:background="#00f" android:layout_width = "fill_parent" android:layout_height="90dp" android:layout_marginTop="60dp"/>

                            <Button
                                android:id="@+id/button1"
                                android:layout_width="fill_parent"
                                android:layout_height="90dp"
                                android:layout_marginTop="60dp"
                                android:text="Some Event" />

                            <View android:background="#00f" android:layout_width = "fill_parent" android:layout_height="120dp" android:layout_marginTop="340dp"/>

                            <Button
                                android:id="@+id/button1"
                                android:layout_width="fill_parent"
                                android:layout_height="120dp"
                                android:layout_marginTop="340dp"
                                android:text="Some Event" />

                        </RelativeLayout>

                        <RelativeLayout
                            android:id="@+id/relativeLayout8"
                            android:layout_width="0dp"
                            android:layout_height="match_parent"
                            android:layout_weight="1" >

                            <View android:background="#00f" android:layout_width = "fill_parent" android:layout_height="180dp" android:layout_marginTop="380dp"/>

                            <Button
                                android:id="@+id/button1"
                                android:layout_width="fill_parent"
                                android:layout_height="180dp"
                                android:layout_marginTop="380dp"
                                android:text="Some Event" />

                        </RelativeLayout>

                        <RelativeLayout
                            android:id="@+id/relativeLayout9"
                            android:layout_width="0dp"
                            android:layout_height="match_parent"
                            android:layout_weight="1" >

                            <View android:background="#00f" android:layout_width = "fill_parent" android:layout_height="180dp" android:layout_marginTop="480dp"/>

                            <Button
                                android:id="@+id/button1"
                                android:layout_width="fill_parent"
                                android:layout_height="180dp"
                                android:layout_marginTop="480dp"
                                android:text="Some Event" />

                        </RelativeLayout>

                        <RelativeLayout
                            android:id="@+id/relativeLayout10"
                            android:layout_width="0dp"
                            android:layout_height="match_parent"
                            android:layout_weight="1" >

                            <View android:background="#00f" android:layout_width = "fill_parent" android:layout_height="180dp" android:layout_marginTop="340dp"/>

                            <Button
                                android:id="@+id/button1"
                                android:layout_width="fill_parent"
                                android:layout_height="180dp"
                                android:layout_marginTop="340dp"
                                android:text="Some Event" />

                        </RelativeLayout>           

                    </LinearLayout>
                </RelativeLayout>
            </LinearLayout>
        </RelativeLayout>
    </ScrollView>

</LinearLayout>

My approach was to make 40dp equal to 1 hr of time. Thus, whenever I would like to add an event that has a duration of 1.5 hours, I will make an 60dp button that I will place at the exact location that the time begins (12am = 0dp from the top, 1pm = 40dp from the top, 2pm = 80d from the top, etc).

My questions are:

1. Is there a better way of doing this?
2. How can I convert my XML to be stand-alone view that could be added to any Android project? (I plan on perhaps making a blog post about the end product)

Thank you!

Answer 1

I ended up following a similar approach to my original post. I created a scroll view with a linear layout inside of it. I then added seven relative layouts to the linear layout. Each of the relative layouts is one day. I made sure that the heights of these layouts were equal to the number of minutes in a day. This would make 1 hour = 60 minutes = 60 dp, which makes measuring the heights of events easier. For events, I created a custom view that can display the start and end time of the event, as well as the event's title. The events were added to the relative layouts with a layout_marginTop property, whose value equaled to the starting time of the event in minutes from the beginning of the day. This seemed to work just fine.

Here's a preview of what it ended up looking like:

Here's the XML layout: http://pastebin.com/jT4wQxeb

The code is too long to fit into the answer.

Note: calendar_zebra is simply a 60 * 24 = 1440dp high layout with 1 dp high horizontal Views with a solid gray background placed every 60dp. Each represents a marker for an hour of time.

Answer 2

1. Here is what I figure out from the source of Calendar

It creates a customized View(DayView for the agenda in a day) for the whole layout in your xml.

Then it draw the canvas using rectangle and text like what you can see in the app when the onDraw() is called.

The View implements OnClickListener and OnLongClickListener for the event. When you click on the canvas, it transfers your click position to the Event with corresponding Date and Time(so it calculated a lots of related size for event, margin, whole day event when the override onSizeChanged() is called), then starts the Activity if such Event exists, otherwise creates a new Event.

2.You need to create a Class extends View, say DayView, then you should add this into attrs.xml

<resources>
  <declare-styleable name="DayView">
  </declare-styleable>
</resources>

Then you can use it as a xml tag in layout with your package name. like here:

<xxxxxxx.DayView
       android:layout_height="wrap_content"
       android:layout_width="match_parent"
       android:id="@id/ui_schedule_dayview">

Here you can find the sample to do so