15

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

Google Calendar Weekly Layout

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:

My Prototype Calendar View

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!

BVB
  • 5,380
  • 8
  • 41
  • 62
  • hey BVB how r u??? i need same calendar like of you given.hv u done the code for that view?i cant understand hoe to do this so if u hv code then can u give me ?/ – Google Mar 20 '12 at 06:21
  • What do you mean? Which view? The first one is a screenshot from Google Calendar (the web application), while the second one is a screenshot of the result of the posted XML. – BVB Mar 21 '12 at 07:14
  • hey bvb i want to use first one nd i cant done that using google api.if u hv code for that then send me so i can see how to work this ?? – Google Mar 21 '12 at 08:48
  • I am sorry, but I don't understand what "first one" means. If you are looking fo how to use the Google Calendar API, check out https://developers.google.com/google-apps/calendar/ as well as some of the other posts I made here on stackoverflow. – BVB Mar 22 '12 at 18:48
  • ok thank u i want to really use google api – Google Mar 23 '12 at 04:12
  • I think this thread will be extremely helpful, as without the information here, you may not be able to make successful API calls: http://stackoverflow.com/questions/8435228/google-calendar-api-oauth2-troubles-on-android-honeycomb – BVB Mar 23 '12 at 18:41

2 Answers2

19

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:

Calendar preview

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.

BVB
  • 5,380
  • 8
  • 41
  • 62
  • I have to create calendar view same as you have created.I gone through the links that you have provided but not able to understand how to create weekly view. Will you please help me on this... – Narendra Jul 09 '13 at 12:08
  • I have posted the code. Please look at the comments here: http://aleakymemory.blogspot.com/2012/09/android-room-manager.html – BVB Jul 09 '13 at 18:14
  • @Ani, it has been posted in the link above - check the comments section. I will update the answer later with the xml file. – BVB Mar 24 '14 at 16:24
  • @Segi, I am unable to release the Java code, but the xml layout has been added to the answer. – BVB Mar 27 '14 at 15:01
  • No, I would like to not make it public. I think that the XML layout provides a very solid starting point. However, it is not too difficult to make the calendar application. Placing events on the calendar is simply done by adding views to one of the day columns. Removing events can be done by removing those views. The most time consuming part is integrating with Google Calendar. Check out the API here: https://developers.google.com/google-apps/calendar/ Also, the Calendar Provider API may be of use: http://developer.android.com/guide/topics/providers/calendar-provider.html – BVB Mar 28 '14 at 04:58
  • Thanks, it's an awesome layout :) – Valentino Aug 26 '16 at 22:03
4

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

Yibo Long
  • 1,287
  • 1
  • 8
  • 6