chapter 4:layouts and views

22/10/2017

(c) Dr Sonia Sail LAJMI College of Computer Sciences & IT (girl Section) 1

CHAPTER CHAPTER 44:: LAYOUTS AND VIEWSLAYOUTS AND VIEWS

1

Dr. Sonia Saïd LAJMIPhD in Computer Sciences

Level 5: Baccalaureus in Computer Sciences

Layout.xmlLayout.xml

2

22/10/2017


Layout RequirementsLayout Requirements

android:layout_width: The width of the element.

android:layout_height: The height of the element.

Both of those width and height attributes can either take a numeric size value or simply a constant based on the expected size behavior. The supported constant values are:

◦ match_Parent /fill_parent View wants to be as big as its parent.

◦ wrap-_Content View wants to be just big enough to enclose its content.

3

Linear LayoutLinear Layout The LinearLayout organizes its elements in a linear

fashion either as a horizontal or a vertical row

4

The android:orientation attribute can take the following values:

horizontal: Organized as a horizontal row.

vertical: Organized as a vertical row.

22/10/2017


Linear Layout WeightLinear Layout Weight

By default, the space distribution is done equally for each child element

5

Linear Layout GravityLinear Layout Gravity

LinearLayout positions its elements aligned top.

android:layout_gravity used to change default behavior.

specify how View element should be positioned on the screen.

in Horizontal Orientation

◦ top: Position the View at the top of its container.

◦ center_vertical: Position the View in the vertical center of its container.

◦ bottom: Position the View to the bottom of its container.

in Vertical Orientation

◦ left: Position the View to the left of its container.

◦ center_horizontal Position the View in the horizontal center of its container.

◦ right: Position the View to the right of its container.

6

22/10/2017


Relative LayoutRelative Layout all kinds of user interfaces can be designed by LinearLayouts;

RelativeLayout to design complex user interfaces

Positioning Relative to a View

◦ android:layout_above: Position the bottom edge above View.

◦ android:layout_alignBaseline: Position the baseline on the baseline of View

◦ android:layout_alignBottom: Position the bottom edge to match that of View

◦ android:layout_alignEnd: Position the end edge to match that of the View

◦ android:layout_alignLeft: Position the left edge to match that of the View

◦ android:layout_alignRight: Position the right edge to match that of the View

◦ android:layout_alignStart: Position the start edge to match that of the View.

7

Positioning Relative to a ViewPositioning Relative to a View

android:layout_alignTop: Position the top edge to match that of the View.

android:layout_below: Position the top edge below that of the View.

android:layout_toEndOf: Position the start edge to match the end edge of the View.

android:layout_toLeftOf: Position the right edge to match the left edge of the View.

android:layout_toRightOf: Position the left edge to match the right edge of the View.

android:layout_toStartOf: Position the end edge to match the

start edge of the View.8

22/10/2017


Positioning Relative to Parent ViewPositioning Relative to Parent View

android:layout_alignParentBottom: Position thebottom edge to match that of the parent view.

android:layout_alignParentEnd: Position the end edgeto match that of the parent view.

android:layout_alignParentLeft: Position the left edgeto match that of the parent view.

android:layout_alignParentRight: Position the rightedge to match that of the parent view.

android:layout_alignParentStart: Position the startedge to match that of the parent view.

9

Positioning Relative to Parent ViewPositioning Relative to Parent View

android:layout_alignParentTop: Position the top edge to match

that of the parent view.

android:layout_centerHorizontal: If true, centers this view

horizontally within its parent.

android:layout_centerInParent: If true, centers this view both

horizontally and vertically within its parent.

android:layout_centerVertical: If true, centers this view vertically

within its parent.

10

22/10/2017


Grid ViewGrid View

11

Grid ViewGrid View android:columnWidth: Width of each column.

android:gravity: Gravity of cell content.

android:horizontalSpacing: Horizontal spacingbetween columns.

android:numColumns: Number of columns to show.

android:stretchMode: How columns should stretch to fill the empty space. It can take the following:

◦ none: Stretching is disabled.

◦ spacingWidth: Spacing between each column is stretched.

◦ columnWidth: Each column is stretched.

◦ spacingWidthUniform: Spacing between each column is uniformly stretched.

android:verticalSpacing: Vertical spacing between rows.12

22/10/2017


Accessing Individual Views in a Accessing Individual Views in a LayoutLayout Assigning a Unique ID to a View Element

13

Finding a View by Its Unique ID

ViewsViews

• Output Controls

• TextView

• ImageView

• ProgressBar

• Space

• Input Controls

• EditText

• Button

• ImageButton

• ToggleButton, Switch, and CheckBox

• Radio Button14

22/10/2017


Text ViewText View

15

Text ViewText View android:autoLink: If set, automatically converts links

such as URLs (uniform resource locators) and e-mailaddresses in the text to clickable links.

android:ellipsize: If set, words that are longer than the available

width get ellipsized instead of broken in the middle

—such as start, middle, end.

android:gravity: Text gravity, such as right|bottom.

android:singleLine: If set, the text won’t span to multiple lines.

android:text: Text to display.

android:textColor: Text color, such as #ff0000.

android:textSize: Size of the text, such as 12sp.

android:textStyle: Text style, such as bold, italic.

android:typeface: Text typeface, such as normal, sans.16

22/10/2017


ImageViewImageView

17

ImageViewImageView

android:adjustViewBounds: If set, adjusts its bounds to preserve the aspect ratio.

android:cropToPadding: If set, crops the image to fitwithin its padding.

android:scaleType: Controls how the image should bescaled, such as matrix, fitXY, fitStart, fitCenter,

fitEnd, etc.

android:src: Image source as a resource ID or a color.

android:tint: Tinting color for the image.

android:tintMode: Blending mode to apply image tint,such as multiply, add.

18

22/10/2017


ProgressBarProgressBar

19

ProgressBarProgressBar

android:indeterminate: If set, enables theindeterminate mode.

android:max: Maximum value the progress can take.

android:progress: Progress value.

style: The style for the ProgressBar; some of the stylesthat are provided by the Android platform are

◦ @android:style/Widget.ProgressBar.Horizontal :Horizontal progress bar.

◦ @android:style/Widget.ProgressBar.Small: Small spinner icon for indeterminate progress bar.

◦ @android:style/Widget.ProgressBar.Large: Large spinnericon for indeterminate progress bar.@android:style/Widget.ProgressBar.Inverse: Reversespinning icon for indeterminate progress bar.

20

22/10/2017


SpaceSpace

Space is a lightweight View object that can be used to insert gaps between other components in both directions.

21

ViewsViews

• Output Controls

• TextView

• ImageView

• ProgressBar

• Space

• Input Controls

• EditText

• Button

• ImageButton

• ToggleButton, Switch, and CheckBox

• Radio Button22

22/10/2017


EditTextEditText

android:autoText: If set, automatically corrects some ofthe common spelling errors.

android:capitalize: If set, automatically capitalizeswhat the user types.

android:cursorVisible: If set, makes the cursor visible.

android:digit: If set, only accepts the numeric input.

android:enabled: Specifies whether the control is enabled.

android:password: If set, displays the characters as password dots instead of themselves.

android:phoneNumber: If set, enables the phone number input method.

23

ButtonButton

The Button is a subclass of the TextView class. Allrelevant XML attributes of a TextView also apply to a Button.

24

22/10/2017


ImageButtonImageButton

ImageButton not a subclass of the Button class

Is subclass of ImageView class. All XMLattributes supported by the ImageView also apply to the ImageButton,

the click events on an ImageButton are still received through the OnClickListener interface

25

ToggleButtonToggleButton

android:disabledAlpha: The alpha to apply to the indicator

when disabled.

android:textOff: Text to show when not checked.

android:textOn: Text to show when checked.

android:checked: Toggled or not.

26

22/10/2017


SwitchSwitch

android:showText: Show the text or not.

android:textOff: Text to show when not checked.

android:textOn: Text to show when checked.

android:checked: Switched or not.

android:thumb: Drawable to use as the thumb.

android:track: Drawable to use as the track.

27

CheckBoxCheckBox

CheckBox subclass Button class,

supports all the XML attributes supported by the Button class

+android:checked: Checked or not.

28

22/10/2017


CheckBoxCheckBox

Getting the Checked State

29

Getting Notified on Checked State Change

Radio ButtonRadio Button RadioButton subclass Button class,

accepts all of the XML attributes of the Button class,

+ android:checked checked state by default.

30

22/10/2017


Getting Notified on Getting Notified on RadioButtonRadioButtonChecked ChangeChecked Change

31

if(email.isChecked())//do something

Getting the Checked State

Event ListenerEvent Listener

There are 3 manners to get an event after the user make the action(click, focus, itemclick,…):

set the listener with:

Objcet.setOnXXXListener(new OnXXXListener(){

OnXXX(..){..}…})

In the layout/layout.xml, add android:onXXX (i.e,

onClick)=“X” property and definie X(View V) in the corresponding activity

You can’t redefine onXXX() (abuse of inheritence!)32

22/10/2017


to create a DYNAMIC layout contents –one where the contents are dynamic (maybe read in from database or???)

Subclasses of AdapterView

RELATED LAYOUT TAGSRELATED LAYOUT TAGS

SOME Examples of Layout Tags that can load SOME Examples of Layout Tags that can load contents/data dynamicallycontents/data dynamically

ListView Gallery GridView

All these (and there are more) are descendants of AdapterView

22/10/2017


ListView <ListView …..>ListView <ListView …..>

A view that shows items in a

vertically scrolling list.

Attributes

android:divider Drawable or color to draw between list items.

android:dividerHeight Height of the divider.

android:entries Reference to an array resource that will populate the ListView.

android:footerDividersEnabled When set to false, the ListView will not draw the divider before each footer view.

android:headerDividersEnabled When set to false, the ListView will

not draw the divider after each header view.

CodeCode——setting up Gallerysetting up Gallery

@Overridepublic void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);setContentView(R.layout.main); //use xml file that contain a <Gallery>

Gallery gallery = (Gallery) findViewById(R.id.gallery);gallery.setAdapter(new ImageAdapter(this));

gallery.setOnItemClickListener(new OnItemClickListener() {public void onItemClick(AdapterView parent, View v, int position,

long id) {Toast.makeText(HelloGallery.this, "" + position,

Toast.LENGTH_SHORT).show();}

});}

We need a “HANDLE” to the Gallerywe created from XML in our Java code to

chapter 4:layouts and views

Documents