How can I create a weekly calendar view for an Android Honeycomb application?
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:
- Is there a better way of doing this?
- 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
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.