Frank Xu Gannon University.  Linear Layout  Relative Layout  Table Layout.

Slides:



Advertisements
Similar presentations
Chapter 3 – Web Design Tables & Page Layout
Advertisements

MS® PowerPoint.
Android UserInterfaces Nasrullah Niazi. overView All user interface elements in an Android app are built using View and ViewGroup objects. A View is an.
CE881: Mobile and Social Application Programming Simon M. Lucas Layouts.
Chapter 3 Creating a Business Letter with a Letterhead and Table
Programming with Android: Widgets and Events Luca Bedogni Marco Di Felice Dipartimento di Scienze dell’Informazione Università di Bologna.
Unlocking Android Chapter 4.  Understanding activities and views  Exploring the Activity lifecycle  Working with resources  Defining the AndroidManifest.xml.
 User Interface - Raeha Sandalwala.  Introduction to UI  Layouts  UI Controls  Menus and ‘Toasts’  Notifications  Other interesting UIs ◦ ListView.
User Interface Classes.  Design Principles  Views & Layouts  Event Handling  Menus  Dialogs.
Filip Debelić What is it? Android is a mobile operating system (OS) based on the Linux kernel and currently developed by Google Android,
More on User Interface Android Applications. Layouts Linear Layout Relative Layout Table Layout Grid View Tab Layout List View.
By: Jeremy Smith.  Introduction  Droid Draw  Add XML file  Layouts  LinearLayout  RelativeLayout  Objects  Notifications  Toast  Status Bar.
@2011 Mihail L. Sichitiu1 Android Introduction Hello Views Part 1.
Cosc 4730 Android TabActivity and ListView. TabActivity A TabActivity allows for multiple “tabs”. – Each Tab is it’s own activity and the “root” activity.
CS378 - Mobile Computing User Interface Basics MIKE!! LOOK HERE FOR intercepting the ListView items:
Android: Layouts David Meredith
Creating Android user interfaces using layouts 1Android user interfaces using layouts.
Android Boot Camp for Developers Using Java, Comprehensive: A Guide to Creating Your First Android Apps Chapter 9: Customize! Navigating with a Master/Detail.
Android Development: Application Layout Richard S. Stansbury 2015.
Liang, Introduction to Java Programming, Eighth Edition, (c) 2011 Pearson Education, Inc. All rights reserved Modify Android Objects Using.
CS5103 Software Engineering Lecture 08 Android Development II.
Chapter 5: Investigate! Lists, Arrays, and Web Browsers.
Chapter 9: Customize! Navigating with Tabs on a Tablet App.
Chapter 2: Simplify! The Android User Interface
XP New Perspectives on Microsoft Office FrontPage 2003 Tutorial 4 1 Microsoft Office FrontPage 2003 Tutorial 4 – Using Shared Borders and Themes.
Tip Calculator App Building an Android App with Java © by Pearson Education, Inc. All Rights Reserved.
Android Boot Camp for Developers Using Java, Comprehensive: A Guide to Creating Your First Android Apps Chapter 5: Investigate! Android Lists, Arrays,
Android Layouts. Layouts Define the user interface for an activity Layouts are defined in.xml files – within /res/layout folder – different layout can.
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.
Understanding Hello Android 1 CS300. Activity  Similar to a form  Base class for the visual, interactive components of your application  Android API.
Adobe Dreamweaver CS3 Revealed CHAPTER FIVE: USING HTML TABLES TO LAY OUT A PAGE.
Chapter 2 The Android User Interface. Objectives  In this chapter, you learn to:  Develop a user interface using the TextView, ImageView, and Button.
INTRODUCTION TO ANDROID. Slide 2 Application Components An Android application is made of up one or more of the following components Activities We will.
Android Boot Camp for Developers Using Java, Comprehensive: A Guide to Creating Your First Android Apps Chapter 7: Reveal! Displaying Pictures in a GridView.
Android Boot Camp for Developers Using Java, 3E
User Interfaces: Part 1 (View Groups and Layouts).
Application Development for mobile Devices
Chapter 7: Reveal! Displaying Pictures in a Gallery.
Android Boot Camp for Developers Using Java, Comprehensive: A Guide to Creating Your First Android Apps Chapter 2: Simplify! The Android User Interface.
MOBILE COMPUTING D10K-7D02 MC04: Layouts Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran.
HW#9 Clues CSCI 571 Fall, HW#9 Prototype
1 Android Development Lean and mean introduction Based on a presentation by Mihail L. Sichitiu.
CS378 - Mobile Computing User Interface Basics. User Interface Elements View – Control – ViewGroup Layout Widget (Compound Control) Many pre built Views.
Building User Interfaces Basic Applications
© 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Android Boot Camp.
CS371m - Mobile Computing User Interface Basics. UI Programming with Widgets Widget is an element in a Graphical User Interface (GUI) – not to be confused.
ANDROID LAYOUTS AND WIDGETS. Slide 2 Introduction Parts of the Android screen Sizing widgets and fonts Layouts and their characteristics Buttons, checkboxes.
CMPE419 Mobile Application Development Asst.Prof.Dr.Ahmet Ünveren SPRING Computer Engineering Department Asst.Prof.Dr.Ahmet Ünveren
XP New Perspectives on Microsoft Office FrontPage 2003 Tutorial 5 1 Microsoft Office FrontPage 2003 Tutorial 5 – Creating Tables and Frames.
Android 9: Layouts Kirk Scott.
Chapter 2: Simplify! The Android User Interface
Mobile Application Development BSCS-7 Lecture # 8
Android 9: Layouts Kirk Scott.
Activities and Intents
Android Widget Tutorial
Creation of an Android App By Keith Lynn
Mobile Application Development Chapter 4 [Android Navigation and Interface Design] IT448-Fall 2017 IT448- Fall2017.
Android Introduction Hello Views Part 1.
CIS 470 Mobile App Development
Android Programming Lecture 6
CS323 Android Getting Started
CS5103 Software Engineering
Android Lists and Fragments
DREAMWEAVER MX 2004 Chapter 3 Working with Tables
Building User Interfaces Basic Applications
CIS 470 Mobile App Development
Introduction to Android
Android Sensor Programming
UI Elements 2.
Presentation transcript:

Frank Xu Gannon University

 Linear Layout  Relative Layout  Table Layout

 There is a root LinearLayout LinearLayout ◦ defines its orientation to be vertical—all child Views (of which it has two) will be stacked vertically.View  The first child is another LinearLayout LinearLayout ◦ uses a horizontal orientation  The second child is a LinearLayout LinearLayout ◦ uses a vertical orientation.  Each of these nested LinearLayouts containLinearLayout ◦ several TextView elements,TextView ◦ are oriented with each other in the manner defined by their parent LinearLayout.LinearLayout

 RelativeLayout RelativeLayout ◦ is a ViewGroup that displays child View elements in relative positions.ViewGroupView  The position of a View can be specified asView ◦ relative to sibling elements  to the left-of or below a given element ◦ in positions relative to the RelativeLayout areaRelativeLayout  aligned to the bottom, left of center

 TableLayout is a ViewGroup that displays child View elements in rows and columns. TableLayoutViewGroupView

 GridView is a ViewGroup that displays items in a two-dimensional, scrollable grid. The grid items are automatically inserted to the layout using a ListAdapter. GridViewViewGroupListAdapter  In this tutorial, you'll create a grid of image thumbnails. When an item is selected, a toast message will display the position of the image.

Fill entire screen

 The GridView is captured from the layout with findViewById(int).GridViewfindViewById(int)  The setAdapter() method then sets a custom adapter (ImageAdapter) as the source for all items to be displayed in the grid.setAdapter() ◦ The ImageAdapter is created in the next step.  To do something when an item in the grid is clicked, the setOnItemClickListener() method is passed a new AdapterView.OnItemClickListener.setOnItemClickListener()AdapterView.OnItemClickListener ◦ This anonymous instance defines the onItemClick() callback method to show a Toast that displays the index position (zero-based) of the selected itemonItemClick()Toast ◦ in a real world scenario, the position could be used to get the full sized image for some other task

 This class represents the basic building block for user interface components.  A View occupies a rectangular area on the screen and is responsible for drawing and event handling. View is the base class for widgets, which are used to create interactive UI components (buttons, text fields, etc.).  The ViewGroup subclass is the base class for layouts, which are invisible containers that hold other Views (or other ViewGroups) and define their layout properties.ViewGroup

 The first method necessary is getView().getView()  This method creates a new View for each image added to the ImageAdapter.View  When this is called, a View is passed in, which is normally a recycled object (at least after this has been called once), so there's a check to see if the object is null. If it is null, an ImageView is instantiated and configured with desired properties for the image presentationViewImageView

 setLayoutParams(ViewGroup.LayoutParams) sets the height and width for the View—this ensures that, no matter the size of the drawable, each image is resized and cropped to fit in these dimensions, as appropriate. setLayoutParams(ViewGroup.LayoutParams)  setScaleType(ImageView.ScaleType) declares that images should be cropped toward the center (if necessary). setScaleType(ImageView.ScaleType)  setPadding(int, int, int, int) defines the padding for all sides. (Note that, if the images have different aspect-ratios, then less padding will cause for more cropping of the image if it does not match the dimensions given to the ImageView.) setPadding(int, int, int, int)

 Start a new project named HelloTabWidget.  Create three separate Activity classes in your project:Activity ◦ ArtistsActivity, ◦ AlbumsActivity, and ◦ SongsActivity.  These will each represent a separate tab. For now, make each one display a simple message using a TextView.TextView

This doesn't use a layout file. Just create a TextView, give it some text and set that as the content.TextView

 Three of the core components of an application — activities, services, and broadcast receivers — are activated through messages, called intents.  Intent messaging is a facility for late run-time binding between components in the same or different applications.  The intent itself, an Intent object, is a passive data structure holding an abstract description of an operation to be performedIntent

 To inform the system which implicit intents they can handle  Activities, services, and broadcast receivers can have one or more intent filters.  Each filter describes a capability of the component, a set of intents that the component is willing to receive.

 the selected icon to be a dark color (grey)  the unselected icon to be a light color (white)

 The TabHost requiresTabHost ◦ a TabWidget TabWidget ◦ a FrameLayout FrameLayout ◦ a vertical LinearLayoutLinearLayout  The FrameLayout is where the content for each tab goes,FrameLayout ◦ which is empty now ◦ because the TabHost will automatically embed eachActivity within itTabHostActivity  TabWidget and the FrameLayout elements have the IDs tabs and tabcontent, respectively. TabWidgetFrameLayout ◦ These names must be used so that the TabHost can retrieve references to each of them. It expects exactly these namesTabHost

TabHost. TabSpec newTabSpecnewTabSpec(String tag)Get a new TabHost.TabSpec associated with this tab host.StringTabHost.TabSpec

 Start a new project named HelloListView.  Create an XML file named list_item.xml and save it inside the res/layout/ folder. This file defines the layout for each item that will be placed in the ListView.ListView

 setListAdapter(ListAdapter) automatically adds a ListView to fill the entire screen of the ListActivity. setListAdapter(ListAdapter)ListView ListActivity  This method takes ◦ an ArrayAdapter, which manages the array of list items that will be placed into the ListView.ArrayAdapterListView  The ArrayAdapter constructor takesArrayAdapter ◦ the application Context,Context ◦ the layout description for each list item (created in the previous step), and ◦ a List of objects to insert in the ListView (defined next).ListListView

The setTextFilterEnabled(boole an) method turns on text filtering for the ListView, so that when the user begins typing, the list will be filtered. setTextFilterEnabled(boole an) ListView