praktikum entwicklung von mediensystemen mit android
TRANSCRIPT
![Page 1: Praktikum Entwicklung von Mediensystemen mit Android](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555ac7ead8b42a761a8b4f2b/html5/thumbnails/1.jpg)
LFE Medieninformatik Prof. Dr. Heinrich Hußmann (Dozent), Alexander De Luca, Gregor Broll (supervisors)
Praktikum Entwicklung vonMediensystemen mit AndroidImplementing a User Interface
![Page 2: Praktikum Entwicklung von Mediensystemen mit Android](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555ac7ead8b42a761a8b4f2b/html5/thumbnails/2.jpg)
Outline
• Introduction• Layouting Components using XML• Common Layout Objects• Hooking into a Screen Element• Listening for UI Notifications• Applying a Theme to Your Application
![Page 3: Praktikum Entwicklung von Mediensystemen mit Android](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555ac7ead8b42a761a8b4f2b/html5/thumbnails/3.jpg)
Introduction
• ActivityBasic functional unit of an Android applicationBut by itself, it does not have any presence on the screen
• Views and ViewgroupsBasic units of user interface expression on the Android platform
![Page 4: Praktikum Entwicklung von Mediensystemen mit Android](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555ac7ead8b42a761a8b4f2b/html5/thumbnails/4.jpg)
ViewsIntroduction
• android.view.ViewStores layout and content for a specific rectangular area of the screenHandles measuring and layout, drawing, focus change, scrolling, and key/gesturesBase class for widgets
TextEditTextInputMethodMovementMethodButtonRadioButtonCheckboxScrollView
![Page 5: Praktikum Entwicklung von Mediensystemen mit Android](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555ac7ead8b42a761a8b4f2b/html5/thumbnails/5.jpg)
ViewgroupsIntroduction
• android.view.ViewgroupContains and manages a subordinate set of views and other viewgroupsBase class for layouts
![Page 6: Praktikum Entwicklung von Mediensystemen mit Android](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555ac7ead8b42a761a8b4f2b/html5/thumbnails/6.jpg)
Tree-Structured UIIntroduction
• An Activity in AndroidDefined using a tree of view and viewgroup nodes
• setContentView() methodCalled by the Activity to attach the tree to the screen for rendering
![Page 7: Praktikum Entwicklung von Mediensystemen mit Android](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555ac7ead8b42a761a8b4f2b/html5/thumbnails/7.jpg)
LayoutParamsIntroduction
• Every viewgroup class uses a nested class that extends ViewGroup.LayoutParams
Contains property types that defines the child’s size and position
![Page 8: Praktikum Entwicklung von Mediensystemen mit Android](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555ac7ead8b42a761a8b4f2b/html5/thumbnails/8.jpg)
Programmatic UI Layout
• Programmatic UI LayoutConstructing and building the applications UI directly from source codeDisadvantage
small changes in layout can have a big effect on the source code
![Page 9: Praktikum Entwicklung von Mediensystemen mit Android](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555ac7ead8b42a761a8b4f2b/html5/thumbnails/9.jpg)
Upgrading UI to XML Layout
• XML-based LayoutInspired by web development model where the presentation of the application’s UI is separated from the logicTwo files to edit
Java file – application logicXML file – user interface
![Page 10: Praktikum Entwicklung von Mediensystemen mit Android](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555ac7ead8b42a761a8b4f2b/html5/thumbnails/10.jpg)
Upgrading UI to XML Layout
![Page 11: Praktikum Entwicklung von Mediensystemen mit Android](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555ac7ead8b42a761a8b4f2b/html5/thumbnails/11.jpg)
Upgrading UI to XML Layout
![Page 12: Praktikum Entwicklung von Mediensystemen mit Android](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555ac7ead8b42a761a8b4f2b/html5/thumbnails/12.jpg)
![Page 13: Praktikum Entwicklung von Mediensystemen mit Android](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555ac7ead8b42a761a8b4f2b/html5/thumbnails/13.jpg)
Common Layout Objects
• FrameLayout• LinearLayout• TableLayout• AbsoluteLayout• RelativeLayout
![Page 14: Praktikum Entwicklung von Mediensystemen mit Android](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555ac7ead8b42a761a8b4f2b/html5/thumbnails/14.jpg)
FrameLayoutCommon Layout Objects
• Simplest layout object • Intended as a blank reserved space on your screen
that you can later fill with a single object Example: a picture that you'll swap out
• All child elements are pinned to the top left corner of the screen
• Cannot specify a location for a child element
![Page 15: Praktikum Entwicklung von Mediensystemen mit Android](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555ac7ead8b42a761a8b4f2b/html5/thumbnails/15.jpg)
LinearLayoutCommon Layout Objects
• Aligns all children in a single direction —vertically or horizontally
All children are stacked one after the other
a vertical list will only have one child per row (no matter how wide they are)a horizontal list will only be one row high (the height of the tallest child, plus padding)
![Page 16: Praktikum Entwicklung von Mediensystemen mit Android](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555ac7ead8b42a761a8b4f2b/html5/thumbnails/16.jpg)
TableLayoutCommon Layout Objects
• Positions its children into rows and columns
• Does not display border lines for their rows, columns, or cells
• Cells cannot span columns, as they can in HTML
![Page 17: Praktikum Entwicklung von Mediensystemen mit Android](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555ac7ead8b42a761a8b4f2b/html5/thumbnails/17.jpg)
AbsoluteLayoutCommon Layout Objects
• Enables children to specify exact x/y coordinates to display on the screen
(0,0) is the upper left cornervalues increase as you move down or to the right
• Overlapping elements are allowed (although not recommended)
• NOTE:It is generally recommended NOT to use AbsoluteLayout UNLESS you have good reasons to use itIt is because it is fairly rigid and does not work well with different device displays
![Page 18: Praktikum Entwicklung von Mediensystemen mit Android](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555ac7ead8b42a761a8b4f2b/html5/thumbnails/18.jpg)
RelativeLayoutCommon Layout Objects
• Lets children specify their position relative to each other (specified by ID), or to the parent
![Page 19: Praktikum Entwicklung von Mediensystemen mit Android](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555ac7ead8b42a761a8b4f2b/html5/thumbnails/19.jpg)
Online Referencehttp://developer.android.com/guide/tutorials/views/index.html
![Page 20: Praktikum Entwicklung von Mediensystemen mit Android](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555ac7ead8b42a761a8b4f2b/html5/thumbnails/20.jpg)
Hooking into a Screen Element
Text field
Button
![Page 21: Praktikum Entwicklung von Mediensystemen mit Android](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555ac7ead8b42a761a8b4f2b/html5/thumbnails/21.jpg)
Hooking into a Screen Element
![Page 22: Praktikum Entwicklung von Mediensystemen mit Android](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555ac7ead8b42a761a8b4f2b/html5/thumbnails/22.jpg)
@+id syntax:Creates a resource number in the R class (R.java file) if one doesn't exist, or uses it if it does exist.
Any String value(no spaces)
Hooking into a Screen Element
![Page 23: Praktikum Entwicklung von Mediensystemen mit Android](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555ac7ead8b42a761a8b4f2b/html5/thumbnails/23.jpg)
Hooking into a Screen Element
![Page 24: Praktikum Entwicklung von Mediensystemen mit Android](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555ac7ead8b42a761a8b4f2b/html5/thumbnails/24.jpg)
Hooking into a Screen Element
![Page 25: Praktikum Entwicklung von Mediensystemen mit Android](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555ac7ead8b42a761a8b4f2b/html5/thumbnails/25.jpg)
Hooking into a Screen Element
![Page 26: Praktikum Entwicklung von Mediensystemen mit Android](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555ac7ead8b42a761a8b4f2b/html5/thumbnails/26.jpg)
Listening for UI Notifications
![Page 27: Praktikum Entwicklung von Mediensystemen mit Android](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555ac7ead8b42a761a8b4f2b/html5/thumbnails/27.jpg)
Applying a Theme to Your Application
• Default theme: android.R.style.Themehttp://developer.android.com/reference/android/R.style.html
• Two ways to set the themeAdding the theme attribute in AndroidManifest.xmlCalling setTheme() inside the onCreate() method
![Page 28: Praktikum Entwicklung von Mediensystemen mit Android](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555ac7ead8b42a761a8b4f2b/html5/thumbnails/28.jpg)
Editing AndroidManifest.xmlApplying a Theme to Your Application
• Adding the theme attribute in AndroidManifest.xml
![Page 29: Praktikum Entwicklung von Mediensystemen mit Android](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555ac7ead8b42a761a8b4f2b/html5/thumbnails/29.jpg)
Calling setTheme()Applying a Theme to Your Application
• Calling setTheme() inside the onCreate() method
![Page 30: Praktikum Entwicklung von Mediensystemen mit Android](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555ac7ead8b42a761a8b4f2b/html5/thumbnails/30.jpg)
Theme_Black Theme_Light
![Page 31: Praktikum Entwicklung von Mediensystemen mit Android](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555ac7ead8b42a761a8b4f2b/html5/thumbnails/31.jpg)
Exercise•Chatting with Myself Application
ComponentsImageText that displays the NameDrop down box that displays the
statusoAvailableoBusyoAway
Text Area that displays messagesoFormat for the output is
□ChatterName:The Message
Text Field where the user can type the messageSend Button
oWhen Pressed□Message typed on the text field is displayed on the text area□Text field is cleared
•Any improvements on the design or additional functionality is encouraged
![Page 32: Praktikum Entwicklung von Mediensystemen mit Android](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555ac7ead8b42a761a8b4f2b/html5/thumbnails/32.jpg)
Fragen?Viel Spaß!