Fundamental Android UI design 1. Layouts (View Group) 2. Views - - PowerPoint PPT Presentation

fundamental android ui design
SMART_READER_LITE
LIVE PREVIEW

Fundamental Android UI design 1. Layouts (View Group) 2. Views - - PowerPoint PPT Presentation

Fundamental Android UI design 1. Layouts (View Group) 2. Views (widgets) Layout Layout Android Application Development Basic - Day 2 Layouts Define using XML layout file Each element in the XML file is either View or ViewGroup


slide-1
SLIDE 1

Fundamental Android UI design

  • 1. Layouts (View Group)
  • 2. Views (widgets)

Android Application Development Basic - Day 2

Layout Layout

slide-2
SLIDE 2

Layouts

  • Define using XML layout file
  • Each element in the XML file is either View or ViewGroup
  • bject
  • View objects are leaves
  • ViewGroup objects are branches

Android Application Development Basic - Day 2

slide-3
SLIDE 3

Layouts (cont.)

Android Application Development Basic - Day 2

slide-4
SLIDE 4

Layouts (cont.)

Android Application Development Basic - Day 2

Linear Relative Table Grid Others: Frame Layout

slide-5
SLIDE 5

Absolute Layout

Android Application Development Basic - Day 2

<Button android:id="@+id/pixelsBtn" android:layout_width=" wrap_content" android:layout_height=" wrap_content" android:text="Pixels" android:layout_y=" 50px" android:layout_x="80px"> </Button> <Button android:id="@+id/scaledBtn" android: layout_width="wrap_content" android:layout_height=" wrap_content" android:text="Scaled" android:layout_y=" 100px" android:layout_x="80sp"> </Button>

slide-6
SLIDE 6

Widgets (views)

Android Application Development Basic - Day 2

  • TextView
  • EditText
  • ListView
  • Spinner
  • Button
  • CheckBox
  • RadioButton
  • ToggleButton
slide-7
SLIDE 7

Widgets

Android Application Development Basic - Day 2

  • ViewFlipper
  • QuickContactBadges

(0.33 sec)

slide-8
SLIDE 8

Task 3: Hello Views!

Android Application Development Basic - Day 2

  • Creating different types
  • f Views and Layouts
slide-9
SLIDE 9

Screen size

Android Application Development Basic - Day 2

VGA (640 x 480) HVGA (320 x 480) QVGA (320 x 240)

640 px 480 px

slide-10
SLIDE 10

Tips: Setting font styles

Android Application Development Basic - Day1

<TextView android:layout_width="fill_parent" android:layout_height=" wrap_content" android:text="Hello World Layout!" android:textSize="50sp" android:textColor="#FF0000" /> More about styles from: http://developer.android.com/guide/topics/ui/themes. html

slide-11
SLIDE 11

Tips: Toast

Android Application Development Basic - Day1

slide-12
SLIDE 12

Homework: Hello You!

Create an Android Hello World which can say hello to your name.

Pro Android - Day1

slide-13
SLIDE 13

Homework: Hello Spinner

Android Application Development Basic - Day1

  • Create a form with Spinner

which has these two values: ○ Male ○ Female

  • When select on any of the

values, show the value (Male/Female) with Toast

slide-14
SLIDE 14

Questions?

Pro Android - Day 1

slide-15
SLIDE 15

References & further readings

  • 1. User Interface: http://developer.android.

com/guide/topics/ui/index.html

  • 2. Reto Meier (2010). Professional Android 2

Application Development (Wrox Programmer to Programmer). Indiana Polis: Wiley publishing, Inc.

  • 3. Shane Conder & Lauren Darcey (2009).

Android Wireless Application Development. Addison-Wesley Professional.

  • 4. Mark L. Murphy (2010). Beginning Android 2.

New York: Apress.

  • 5. Rick Rogers, John Lombardo, Zigurd

Mednieks, & Blake Meike (2009). Android Application Development. CA: O’Reilly Media, Inc.

  • 6. Android Developer: http://developer.android.

com

Android Application Development Basic - Day1