Android Design
Pattern-I
Contents
1.     Dealing With Data

2.          Getting Input

3.            Navigation

4.          Notifications

5.           Personalize

6.    Screen Interactions

7.                Social
Dealing With Data
Dealing with Data
1.     Change view on a set of data

2.        Know app is loading items

3.                          Search

                          Sort data
4. 
      Show a vast amount of content
5. 
Change View on a Set of Data
                                     1
•                   Options menu

•                 Dedicated button

•                         Tab bar
Options Menu
                    1
                   1.


“   ”
3
1   “   ”




            2
Options Menu
                              1
                             1.
•        • 

         •            2
         • 




     +               -
Options Menu
                                   1
                                  1.
Google Maps
Samsung-My Files
Google Maps

              1       2
                  “
              ”



                  “
                  ”
Google Maps

              3       4
              “
                  ”
                      “
                          ”
Dedicated Button
                  2
                 1.
1   2

        3
Dedicated Button
                           2
                          1.
•         • 

•    1




     +             -
Dedicated Button
                                  2
                                 1.
Layar
Google Places
Layar

        1   2
Layar

        3
Tab Bar
         3
        1.
1
    2
        3
Tab Bar
                       3
                      1.

•        • 


• 




• 


     +          -
Tab Bar
                         3
                        1.

Wikitude
Toilet Finder
Wikitude

           1   2   “
               ”
Know app is loading items
                                           2
•              Dynamic loading of a list
Options Menu
              2
             2.
3   “   ”



1   2
Options Menu
                            2
                           2.
•        • 

         • 
• 




     +               -
Options Menu
                               2
                              2.
Android Market
Gmail
AppBrain
Android market

            1    1       2
                 “
                     ”
Search
                      3
•       Search bar

•       Main menu

•    Dedicated item
Search Bar
            1
           3.
3
    1
2
4                   5
                        7
    6   “   ”   “   ”
Search Bar
                          1
                         3.

•        • 

• 




     +             -
Search Bar
                            1
                           3.

Google Search
Wapedia
Google Search

           1           2
            (Widget)       “
                           ”
                               “
                       ”
Google Search

           3    4
Main Menu
           2
          3.
1   “   ”




            2   “   ”




                3       “   ”
Main Menu
                         2
                        3.

•        • 

         • 




     +            -
Main Menu
                            2
                           3.

Dorpbox
Google Maps
Android Market
Google Search

           1    2
Dedicated Item
                              3
                             3.

(dashboard)
1   2

    3
Dedicated Item
                              3
                             3.

•        • 




     +                -
Dedicated Item
                                  3
                                 3.
Last.fm
Calorie Counter
Evernote
Evernote

           1            2
           (
           dashboard)
Evernote

           3
Sort Data
                       4
•       Drag & drop

•    Sort-key Dialog
Drag & Drop
             1
            4.
1   ”
        “




            2       ”
                            “           3

            4   ”
                        “       ”   “
5   6   “   ”“   ”
Drag & Drop
                           1
                          4.

•        • 

         • 




     +              -
Drag & Drop
                                  1
                                 4.

Google Stocks
HTC Sense Music Player
Playlist
Noodles
Google Searcks

            1    2   “
                 ”


                     “
                     ”
Google Search

           3    4
Google Stocks

                5
Sort-key Dialog
                 2
                4.
1
            3
2   “   ”
4
        6
5
Sort-key Dialog
                               2
                              4.

•        • 

         • 
• 




     +                 -
         • 
Sort-key Dialog
                                    2
                                   4.

HTC Sense Footprints
Uninstaller
HTC Sense Footprints

            1          2   “
                       ”


                           “
                       ”
HTC Sense Footprints

            3          4
Show a Vast Amount of Content
                                            5
 •                      Expandable list

 •                  Segmented control

 •                      Data drill down

 •             Dynamic loading of a list

 •                            Static list
Expandable List
                  3
                  1
                3..
                5
1   2
Expandable List
                          1
                         5.

•        • 




     +            -
Expandable List
                                    3
                                    1
                                  3..
                                  5
TVGids.tv Nederland
RSS Feeds(HTC Desire)
Brower(Samsung Galaxy
S)
RSS Feeds(HTC Desire)

           1            2
Segmented
          5
          3. 2
             3
   Control



    2~5
1
2
    3
Segmented
                        5. 2
                 Control
•        • 




     +            -
Segmented
                           5. 2
                    Control
Android Market
Layar
Foursquare
Android Market

            1    2
Data Drill Down
                53
                3.
1

    2   3
Data Drill Down
                          5.  3
•        • 
         • 

•             (breadcrumbs)




     +                    -
Data Drill Down
                                     3
                                    5.
Treintijden Light
Calorie Counter
Treintijden Light

              1     2
Treintijden Light

                    3
Options Menu
                4
               5.
Static List
                              3
                              5
                             3.
                             5




(Scroll Thumb)
1       3

    2       4
Static List
                           5
                          5.

•        • 
         • 




     +            -
Segmented
                       5. 2
                Control
Engadget
Amazon MP3
Engadget

           1   2
                   20
Getting Input
Getting Input
1.               Enter a Value

2.                   Enter Text

3.    Select a Predefined Value

4.        Select Multiple Items

5.          Set Time and Date
Enter a Value
                       1
•             Slider

•            Spinner
Slider
          1
         1.
3
1
            4
    2
Slider
                        1
                       1.
•        • 


• 
• 




     +        -
Slider
                                  1
                                 1.

Clock-Set Alarm
Layar-Filter Settings
Nexus One-Display
Settings
Clock-Set Alarm

            1     2
Spinner
           2
          1.
3
1
    2       5
        4
Spinner
                         2
                        1.
•        • 
• 
         • 
• 




     +          -
         • 
Spinner
                      2
                     1.

Facebook
Calender
Astrid
Facebook

           1          2
           Facebook   3




           “      ”
Facebook

           3   4
Enter Text
                     2
•      Pan & Scan

•          Extract
Enter Text
            1
           2.
3
1

    2       4
Enter Text
                            1
                           2.
•        • 

• 




     +            -
Enter Text
                         1
                        2.

Astrid
Calendar
Astrid

         1
         Astrid
                  2
Astrid

         3   4
Enter Text
            2
           2.
1           3
    2
        4
Enter Text
                          2
                         2.
•        • 




     +            -
Enter Text
                      2
                     2.

Twitter
Gmail
Dropbox
Twitter


          1

          2
Twitter


          3   tweet




          4
Select a Predefined Value
                              3
                    Spinner
Select Multiple Items
                              4
•                  Checkbox
Select Multiple Items
                       1
                      4.
1   2


3       4
Select Multiple Items
                            1
                           4.
•        • 




     +              -
Select Multiple Items
                                   1
                                  4.

Gmail
Gallery
Gmail

        1
        Gmail
                2
Set Time and Date
                             5
•             Plus & Minus

•                   Wheel
Set Time and Date
                           1
                          5.



Android
3
1   am/pm




2               4   “ok”
Set Time and Date
                           1
                          5.
•        • 

         • 




     +           -
                moeffju
Set Time and Date
                                   1
                                  5.

NS Reisplanner
Samsung Galaxy S
Calender
NS Reisplanner

            1    2
Set Time and Date
                   2
                  5.
“   ”


    3
                    “
        ”

1
2
Set Time and Date
                       5.2
•        • 

•        •      59
              00
         • 
• 




     +               -
         • 
Set Time and Date
                                  2
                                 5.

HTC Sense Alarm
HTC Sense Calendar
HTC Sense Alarm

           1      2
            HTC
HTC Sense Alarm

           3      4

Android Design Pattern-CH Part i