Android - PowerPoint PPT Presentation

Loading...

PPT – Android PowerPoint presentation | free to download - id: 4c4679-MzVlZ



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

Android

Description:

ANDROID INTERFACE AND LAYOUT L. Grewe * Interfaces: Two Alternatives Code or XML You have two ways you can create the interface(s) of your Application. – PowerPoint PPT presentation

Number of Views:129
Avg rating:3.0/5.0
Slides: 26
Provided by: MarkS201
Category:

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: Android


1
Android Interface and Layout
  • L. Grewe

2
Interfaces Two Alternatives Code or XML
  • You have two ways you can create the interface(s)
    of your Application.
  • Code write code using SDK with classes like
    LinearLayout, TextView,
  • XML create XML files in res/Layout (i.e.
    main.xml) that contain Android XML view tags like
    ltLinearLayoutgt ltTextViewgt, etc.

3
Option XML Interface
  • Lets look at this option first

4
XML Interface Creation
  • Generally, I would say if it is possible, doing
    XML would be better as it means a decoupling of
    design from Java code.
  • You can have both in your system.
  • Lets discuss this first.

5
The Layout --- the interface
  • Layouts defined with XML located in
  • res/layout

6
The Layout-the interface
  • res/layout/main.xml contains layout for
    interface
  • lt?xml version"1.0" encoding"utf-8"?gt
  • ltLinearLayout xmlnsandroid"http//schemas.androi
    d.com/apk/res/android"
  • androidorientation"vertical"
  • androidlayout_width"fill_parent"
  • androidlayout_height"fill_parent"
  • gt
  • ltTextView
  • androidlayout_width"fill_parent"
  • androidlayout_height"wrap_content"
  • androidtext"_at_string/hello"
  • /gt
  • lt/LinearLayoutgt
  • The above will create an interface in vertical
    (versus portrait) mode that fills the parent
  • Both in width and write and wraps and content as
    necessary.

7
XML interface
  • it's a tree of XML elements,
  • Inspired by web authoring
  • Build up UI quickly
  • each node is the name of a View class (example is
    just one View element).
  • Create your own View ---extends
  • Each node can have multiple attributes
  • Look to API for details

8
XML interface
  • ltTextView xmlnsandroid"http//schemas.android.co
    m/apk/res/android"  androidlayout_width"fill_pa
    rent"  androidlayout_height"fill_parent" 
    androidtext"_at_string/hello"/gt
  • xmlnsandroid XML namespace declaration that
    tells the Android tools that you are going to
    refer to common attributes defined in the Android
    namespace. The outermost tag in every Android
    layout file must have this attribute.
  • androidlayout_width This attribute defines how
    much of the available width on the screen this
    View should consume. As it's the only View so you
    want it to take up the entire screen, which is
    what a value of "fill_parent" means.androidlayou
    t_height This is just like androidlayout_width,
    except that it refers to available screen height.
  • androidtext This sets the text that the TextView
    should display. In this example, you use a string
    resource instead of a hard-coded string value.
    The hello string is defined in the
    res/values/strings.xml file.

9
Using Eclipse IDE to Visually Create XML file
  • Visual creation of XML file
  • Create New-gtOther-gtAndroid-gtXML file-
  • Select for layout type
  • Play with it.drag and drop

10
Using Eclipse IDE to Visually Create XML file
  • Visual creation of XML file
  • Create New-gtOther-gtAndroid-gtXML file-
  • Select for layout type
  • Play with it.drag and drop

11
Visually Creating XML interface
  • I dragged and dropped an EditText view and a
    Button. Below I show you the corresponding
    code.
  • res/layout/main2.xml
  • lt?xml version"1.0" encoding"utf-8"?gt
  • ltAbsoluteLayout
  • xmlnsandroid"http//schemas.android.com/apk/re
    s/android"
  • androidorientation"vertical"
  • androidlayout_width"match_parent"
  • androidlayout_height"match_parent"gt
  • ltEditText androidtext"_at_string/hello"
    androidid"_at_id/editText1" androidinputType"tex
    tMultiLine" androidlayout_width"169dp"
    androidlayout_height"115dp" androidlayout_x"11
    dp" androidlayout_y"20dp"gtlt/EditTextgt
  • ltButton androidid"_at_id/button1"
    androidlayout_width"wrap_content"
    androidlayout_height"wrap_content"
    androidtext"Button" androidlayout_x"27dp"
    androidlayout_y"146dp"gtlt/Buttongt
  • lt/AbsoluteLayoutgt

12
XML Interface tags
  • Besides drag and drop you can edit the xml file
    directly. Lets discuss some of the Android XML
    Interface related tags

13
Layout Tags
  • Control structure of interface

14
Layout Tags
  • Determines how the layout is structured.
  • Some Tags
  • LinearLayout
  • A Layout that arranges its children in a single
    column or a single row. The direction of the row
    can be set by calling setOrientation(). You can
    also specify gravity, which specifies the
    alignment of all the child elements by calling
    setGravity() or specify that specific children
    grow to fill up any remaining space in the layout
    by setting the weight member of
    LinearLayout.LayoutParams. The default
    orientation is horizontal.
  • AbsoluteLayout
  • A layout that lets you specify exact locations
    (x/y coordinates) of its children. Absolute
    layouts are less flexible and harder to maintain
    than other types of layouts without absolute
    positioning.
  • RelativeLayout
  • FrameLayout
  • TableLayout

15
LinearLayout XML tag
  • Visual creation of XML file
  • XML Attributes Attribute Name Related Method
    Description androidbaselineAligned
    setBaselineAligned(boolean) When set to false,
    prevents the layout from aligning its children's
    baselines.  androidbaselineAlignedChildIndex
    setBaselineAlignedChildIndex(int) When a linear
    layout is part of another layout that is baseline
    aligned, it can specify which of its children to
    baseline align to (that is, which child
    TextView).  androidgravity setGravity(int)
    Specifies how to place the content of an object,
    both on the x- and y-axis, within the object
    itself.  androidmeasureWithLargestChild When set
    to true, all children with a weight will be
    considered having the minimum size of the largest
    child.  androidorientation setOrientation(int)
    Should the layout be a column or a row? Use
    "horizontal" for a row, "vertical" for a column. 
    androidweightSum Defines the maximum weight sum. 

16
Related Layout Tags
  • Control structure of interface, but commonly a
    sub-area

17
ListView ltListView ..gt
  • A view that shows items in a vertically scrolling
    list.
  • Attributes
  • androiddivider Drawable or color to draw between
    list items. 
  • androiddividerHeight Height of the divider. 
  • androidentries Reference to an array resource
    that will populate the ListView. 
  • androidfooterDividersEnabled When set to false,
    the ListView will not draw the divider before
    each footer view. 
  • androidheaderDividersEnabled When set to false,
    the ListView will not draw the divider after each
    header view. 

18
Gallery ltGallery .gt
  • A view that shows items in a center-locked,
    horizontally scrolling list.
  • The default values for the Gallery assume you
    will be using Theme_galleryItemBackground as the
    background for each View given to the Gallery
    from the Adapter. If you are not doing this, you
    may need to adjust some Gallery properties, such
    as the spacing.
  • Attributes
  • androidanimationDuration setAnimationDuration(int
    ) Sets how long a transition animation should run
    (in milliseconds) when layout has changed. 
  • androidgravity setGravity(int) Specifies how to
    place the content of an object, both on the x-
    and y-axis, within the object itself. 
  • androidspacing setSpacing(int)  
  • androidunselectedAlpha setUnselectedAlpha(float)
    Sets the alpha on the items that are not
    selected. 

19
Codesetting up Gallery
  • _at_Overridepublic void onCreate(Bundle
    savedInstanceState)     super.onCreate(savedInst
    anceState)    setContentView(R.layout.main) 
      Gallery gallery (Gallery) findViewById(R.id.ga
    llery)    gallery.setAdapter(new
    ImageAdapter(this))    gallery.setOnItemClickLi
    stener(new OnItemClickListener()         public
    void onItemClick(AdapterView parent, View v, int
    position, long id)            
    Toast.makeText(HelloGallery.this, "" position,
    Toast.LENGTH_SHORT).show()            )

20
Views and ViewGroups
  • Making the elements of your GUI

21
Views and ViewGroups
  • An Activity can contain views and ViewGroups.
  • android.view.View. base class for all Views.
  • example sub-classes include TextView, ImageView,
    etc.
  • android.view.ViewGroup Layout for views it
    contains, subclasses include
  • android.widget.LinearLayout
  • android.widget.AbsoluteLayout
  • android.widget.TableLayout
  • android.widget.RelativeLayout
  • android.widget.FrameLayout
  • android.widget.ScrollLayout

22
LinearLayout (ltLinearLayoutgt or
android.widget.LinearLayout)
  • arranges by single column or row.
  • child views can be arranged vertically or
    horizontally. lt?xml version"1.0"
    encoding"utf-8"?gt
  • ltLinearLayout xmlnsandroid"http//schemas.androi
    d.com/apk/res/android"
  • androidlayout_width"fill_parent"
  • androidlayout_height"fill_parent"
  • androidorientation"vertical" gt
  • ltText View
  • androidlayout_widthfill_parentandroid
    layout_heightwrap_contentandroidtext_at_string
    /hello/gt
  • lt/LinearLayoutgt

23
Linear Layout Example
  • lt?xml version"1.0" encoding"utf-8"?gt
    ltLinearLayout xmlnsandroid"http//schemas.androi
    d.com/apk/res/android" androidlayout_width"fill_
    parent" androidlayout_height"fill_parent
    androidorientation"vertical" gtltButton
    androidid"_at_id/btn_webbrowser"
    androidlayout_width"fill_parent"
    androidlayout_height"wrap_content"
    androidtext"Web Browser androidonClick"onCl
    ickWebBrowser" /gtltButton androidid"_at_id/btn_ma
    kecalls" androidlayout_width"fill_parent"
    androidlayout_height"wrap_content
    androidtext"Make Calls" androidonClick"onClic
    kMakeCalls" /gtltButton androidid"_at_id/btn_showM
    ap" androidlayout_width"fill_parent"
    androidlayout_height"wrap_content
    androidtext"Show Map" androidonClick"onClickS
    howMap" /gtltButton androidid"_at_id/btn_launchMyB
    rowser" androidlayout_width"fill_parent"
    androidlayout_height"wrap_content"
    androidtext"Launch My Browser"
    androidonClick"onClickLaunchMyBrowser"
    /gtlt/LinearLayoutgt

24
LinearLayout attributes
  • You can set either in XML or with set() methods.
  • i.e. Xml
  • androidorientationvertical
  • code (ll is LinearLayout instance)
  • ll.setOrientation(VERTICAL)

25
Each View or ViewGroup can have its own set of
attributesbut, some are very common
Attribute Description
layout_width specifies width of View or ViewGroup
layout_height specifies height
layout_marginTop extra space on top
layout_marginBottom extra space on bottom side
layout_marginLeft extra space on left side
layout_marginRight extra space on right side
layout_gravity how child views are positioned
layout_weight how much extra space in layout should be allocated to View (only when in LinearLayout or TableView)
layout_x x-coordinate
layout_y y-coordinate
About PowerShow.com