Android - PowerPoint PPT Presentation


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


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation



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


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

Title: Android

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.
  • 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.

Option XML Interface
  • Lets look at this option first

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.

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

The Layout-the interface
  • res/layout/main.xml contains layout for
  • lt?xml version"1.0" encoding"utf-8"?gt
  • ltLinearLayout xmlnsandroid"http//schemas.androi"
  • 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

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

XML interface
  • ltTextView xmlnsandroid"http//
    m/apk/res/android"  androidlayout_width"fill_pa
    rent"  androidlayout_height"fill_parent" 
  • 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.

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

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

Visually Creating XML interface
  • I dragged and dropped an EditText view and a
    Button. Below I show you the corresponding
  • res/layout/main2.xml
  • lt?xml version"1.0" encoding"utf-8"?gt
  • ltAbsoluteLayout
  • xmlnsandroid"http//
  • 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"
    androidtext"Button" androidlayout_x"27dp"
  • lt/AbsoluteLayoutgt

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

Layout Tags
  • Control structure of interface

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
  • RelativeLayout
  • FrameLayout
  • TableLayout

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. 

Related Layout Tags
  • Control structure of interface, but commonly a

ListView ltListView
  • A view that shows items in a vertically scrolling
  • 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. 

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

Codesetting up Gallery
  • _at_Overridepublic void onCreate(Bundle
    savedInstanceState)     super.onCreate(savedInst
    anceState)    setContentView(R.layout.main) 
      Gallery gallery (Gallery) findViewById(
    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()            )

Views and ViewGroups
  • Making the elements of your GUI

Views and ViewGroups
  • An Activity can contain views and ViewGroups.
  • android.view.View. base class for all Views.
  • example sub-classes include TextView, ImageView,
  • 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

LinearLayout (ltLinearLayoutgt or
  • arranges by single column or row.
  • child views can be arranged vertically or
    horizontally. lt?xml version"1.0"
  • ltLinearLayout xmlnsandroid"http//schemas.androi"
  • androidlayout_width"fill_parent"
  • androidlayout_height"fill_parent"
  • androidorientation"vertical" gt
  • ltText View
  • androidlayout_widthfill_parentandroid
  • lt/LinearLayoutgt

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

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

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