Mobile Development Lecture 10: Fragments

Similar documents
Fragments. Lecture 11

Fragments. Lecture 10

Fragments were added to the Android API in Honeycomb, API 11. The primary classes related to fragments are: android.app.fragment

UI Fragment.

Multiple devices. Use wrap_content and match_parent Use RelativeLayout/ConstraintLayout Use configuration qualifiers

CS371m - Mobile Computing. More UI Navigation, Fragments, and App / Action Bars

CS371m - Mobile Computing. More UI Action Bar, Navigation, and Fragments

Tablets have larger displays than phones do They can support multiple UI panes / user behaviors at the same time

Mobile Computing Fragments

EMBEDDED SYSTEMS PROGRAMMING UI and Android

Fragments. Fragments may only be used as part of an ac5vity and cannot be instan5ated as standalone applica5on elements.

Exam 2 Review. Akhilesh Tyagi

ListView Containers. Resources. Creating a ListView

Diving into Android. By Jeroen Tietema. Jeroen Tietema,

ACTIVITY, FRAGMENT, NAVIGATION. Roberto Beraldi

CS 4518 Mobile and Ubiquitous Computing Lecture 5: Rotating Device, Saving Data, Intents and Fragments Emmanuel Agu

More Effective Layouts

User Interface Development. CSE 5236: Mobile Application Development Instructor: Adam C. Champion Course Coordinator: Dr.

CS 528 Mobile and Ubiquitous Computing Lecture 3b: Android Activity Lifecycle and Intents Emmanuel Agu

Building User Interface for Android Mobile Applications II

Getting Started. Dr. Miguel A. Labrador Department of Computer Science & Engineering

Programming with Android: Android for Tablets. Dipartimento di Scienze dell Informazione Università di Bologna

CSE 660 Lab 3 Khoi Pham Thanh Ho April 19 th, 2015

Mobile Application Development - Android

CS 528 Mobile and Ubiquitous Computing Lecture 3: Android UI, WebView, Android Activity Lifecycle Emmanuel Agu

Activities and Fragments

Initialising the Views (GameFragment) 5COSC005W MOBILE APPLICATION DEVELOPMENT Lecture 5: Ultimate Tic-Tac-Toe Game: The Interface (Part III)

FRAGMENTS.

Android Application Model I

Produced by. Mobile Application Development. David Drohan Department of Computing & Mathematics Waterford Institute of Technology

CE881: Mobile & Social Application Programming

Android CardView Tutorial

Fig. 2.2 New Android Application dialog. 2.3 Creating an App 41

The drawable/tile empty.xml file

Lab 1: Getting Started With Android Programming

CHAPTER 4. Fragments ActionBar Menus

Fragments and the Maps API

User Interface: Layout. Asst. Prof. Dr. Kanda Runapongsa Saikaew Computer Engineering Khon Kaen University

Android Basics. Android UI Architecture. Android UI 1

Mobile Development Lecture 8: Intents and Animation

Create new Android project in Android Studio Add Button and TextView to layout Learn how to use buttons to call methods. Modify strings.

Embedded Systems Programming - PA8001

CS 528 Mobile and Ubiquitous Computing Lecture 4a: Fragments, Camera Emmanuel Agu

EMBEDDED SYSTEMS PROGRAMMING Application Basics

Android Application Model I. CSE 5236: Mobile Application Development Instructor: Adam C. Champion, Ph.D. Course Coordinator: Dr.

Mobile Programming Lecture 2. Layouts, Widgets, Toasts, and Event Handling

Real-Time Embedded Systems

Building MyFirstApp Android Application Step by Step. Sang Shin Learn with Passion!

LECTURE NOTES OF APPLICATION ACTIVITIES

Orientation & Localization

GUI Design for Android Applications

Mobile Programming Lecture 1. Getting Started

COMP4521 EMBEDDED SYSTEMS SOFTWARE

Login with Amazon. Getting Started Guide for Android apps

CS 4518 Mobile and Ubiquitous Computing Lecture 3: Android UI Design in XML + Examples. Emmanuel Agu

Mobile Programming Lecture 5. Composite Views, Activities, Intents and Filters

CS 370 Android Basics D R. M I C H A E L J. R E A L E F A L L

Android & iphone. Amir Eibagi. Localization

Mobile Application Programing: Android. View Persistence

Android HelloWorld - Example. Tushar B. Kute,

Understand applications and their components. activity service broadcast receiver content provider intent AndroidManifest.xml

Mobile Development Lecture 11: Activity State and Preferences

ANDROID APPS (NOW WITH JELLY BEANS!) Jordan Jozwiak November 11, 2012

Fragment Example Create the following files and test the application on emulator or device.

Repairing crashes in Android Apps. Shin Hwei Tan Zhen Dong Xiang Gao Abhik Roychoudhury National University of Singapore

MODULE 2: GETTING STARTED WITH ANDROID PROGRAMMING

CS 4330/5390: Mobile Application Development Exam 1

Hello World. Lesson 1. Android Developer Fundamentals. Android Developer Fundamentals. Layouts, and. NonCommercial

Action Bar. (c) 2010 Haim Michael. All Rights Reserv ed.

getcount getitem getitemid getview com.taxi Class MainActivity drawerlayout drawerleft drawerright...

Getting started: Installing IDE and SDK. Marco Ronchetti Università degli Studi di Trento

Android development. Outline. Android Studio. Setting up Android Studio. 1. Set up Android Studio. Tiberiu Vilcu. 2.

ANDROID APPS DEVELOPMENT FOR MOBILE AND TABLET DEVICE (LEVEL I)

CS 403X Mobile and Ubiquitous Computing Lecture 3: Introduction to Android Programming Emmanuel Agu

Spring Lecture 5 Lecturer: Omid Jafarinezhad

ANDROID USER INTERFACE

Developing Android Applications Introduction to Software Engineering Fall Updated 1st November 2015

Agenda. Overview of Xamarin and Xamarin.Android Xamarin.Android fundamentals Creating a detail screen

ANDROID APPS DEVELOPMENT FOR MOBILE AND TABLET DEVICE (LEVEL I)

Lecture 2 Android SDK

Java & Android. Java Fundamentals. Madis Pink 2016 Tartu

ACTIVITY, FRAGMENT, NAVIGATION. Roberto Beraldi

CS 4518 Mobile and Ubiquitous Computing Lecture 4: WebView (Part 2) Emmanuel Agu

Solving an Android Threading Problem

Mobile Application Workbench. SAP Mobile Platform 3.0 SP02

Security model. Marco Ronchetti Università degli Studi di Trento

CMSC436: Fall 2013 Week 3 Lab

CE881: Mobile & Social Application Programming

Resources and Media and Dealies

CMSC 436 Lab 10. App Widgets and Supporting Different Devices

Mobile Programming Lecture 3. Resources, Selection, Activities, Intents

UNDERSTANDING ACTIVITIES

UI, Continued. CS 2046 Mobile Application Development Fall Jeff Davidson CS 2046

MVC Apps Basic Widget Lifecycle Logging Debugging Dialogs

INTRODUCTION TO ANDROID

CSCU9YH Development with Android

Lab 1 - Setting up the User s Profile UI

Android. Mobile operating system developed by Google A complete stack. Based on the Linux kernel Open source under the Apache 2 license

Mobile Application Development

ListView (link) An ordered collection of selectable choices. key attributes in XML:

Transcription:

Mobile Development Lecture 10: Fragments Mahmoud El-Gayyar elgayyar@ci.suez.edu.eg Elgayyar.weebly.com

Situational Layouts Your app can use different layout in different situations: different device type (tablet vs phone vs watch) different screen size different orientation (portrait vs. landscape) different country or locale (language, etc.) Mahmoud El-Gayyar / Mobile Development 2

Situation-Specific Folders Your app will look for resource folder names with suffixes: screen density (e.g. drawable-hdpi) xhdpi: 2.0 (twice as many pixels/dots per inch) hdpi: 1.5 mdpi: 1.0 (baseline) ldpi: 0.75 orientation (e.g. layout-land) portrait (), land (landscape) Mahmoud El-Gayyar / Mobile Development 3

Portrait vs Landscape Layout To create a different layout in landscape mode: create a folder in your project called res/layout-land place another copy of your activity's layout XML file there modify it as needed to represent the differences Mahmoud El-Gayyar / Mobile Development 4

Problem: Redundant Layouts With situational layout you begin to encounter redundancy. The layout in one case (e.g. portrait or medium) is very similar to the layout in another case (e.g. landscape or large). You don't want to represent the same XML or Java code multiple times in multiple places. You sometimes want your code to behave situationally. In portrait mode, clicking a button should launch a new activity. In landscape mode, clicking a button should launch a new view. Mahmoud El-Gayyar / Mobile Development 5

Fragments Fragment: A reusable segment of Android UI that can appear in an activity. can help handle different devices and screen sizes fragments can be swapped into and out of activities without stopping them can reuse a common fragment across multiple activities first added in Android 3.0 Mahmoud El-Gayyar / Mobile Development 6

Creating a Fragment In Android Studio, right-click app, click: New Fragment Fragment (blank) now create layout XML and Java event code as in an Activity Mahmoud El-Gayyar / Mobile Development 7

Fragment Subclasses DialogFragment - a fragment meant to be shown as a dialog box that pops up on top of the current activity. ListFragment - a fragment that shows a list of items as its main content. PreferenceFragment - a fragment whose main content is meant to allow the user to change settings for the app. Mahmoud El-Gayyar / Mobile Development 8

Using Fragments in Activity XML Activity layout XML can include fragments. <!-- activity_name.xml --> <LinearLayout...> <fragment... android:id="@+id/id1" android:name="classname1" tools:layout="@layout/name1" /> <fragment... </LinearLayout> android:id="@+id/id2" android:name="classname2" tools:layout="@layout/name2" /> Mahmoud El-Gayyar / Mobile Development 9

Fragment Life Cycle Fragments have a similar life cycle and events as activities. Important methods: onattach: to glue fragment to its surrounding activity oncreate: when fragment is loading oncreateview: method that must return fragment's root UI view onactivitycreated: method that indicates the enclosing activity is ready onpause: when fragment is being left/exited ondetach: just as fragment is being deleted Mahmoud El-Gayyar / Mobile Development 10

Fragment Template public class Name extends Fragment { @Override public View oncreateview(layoutinflater inflater, } ViewGroup vg, Bundle bundle) { // load the GUI layout from the XML return inflater.inflate(r.layout.id, vg, false); public void onactivitycreated(bundle savedstate) { super.onactivitycreated(savedstate); //... any other GUI initialization needed } } // any other code (e.g. event-handling) Mahmoud El-Gayyar / Mobile Development 11

Fragment vs. Activity Fragment code is similar to activity code, with a few changes: Many activity methods aren't present in the fragment, but you can call getactivity to access the activity the fragment is inside of. Button b = (Button) findviewbyid(r.id.but); Button b = (Button) getactivity().findviewbyid(r.id.but); Sometimes also use getview to refer to the activity's layout Event handlers cannot be attached in the XML any more. :-( Must be attached in Java code instead. Passing information to a fragment (via Intents) is trickier. The fragment must ask its enclosing activity for the information. Mahmoud El-Gayyar / Mobile Development 12

Fragment onclick Listener Activity: <Button android:id="@+id/b1" android:onclick="onclickb1"... /> Fragment: <Button android:id="@+id/b1"... /> // in fragment's Java file Button b = (Button) getactivity().findviewbyid(r.id.b1); b.setonclicklistener(new View.OnClickListener() { @Override public void onclick(view view) { // whatever code would have been in onclickb1 } }); Mahmoud El-Gayyar / Mobile Development 13

Activity that accepts Parameters public class Name extends Activity { @Override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.name); // extract parameters passed to activity from intent Intent intent = getintent(); int name1 = intent.getintextra("id1", default); String name2 = intent.getstringextra("id2", "default"); } }... // use parameters to set up the initial state... Mahmoud El-Gayyar / Mobile Development 14

Fragment that accepts Parameters public class Name extends Fragment { @Override public View oncreateview(layoutinflater inflater, ViewGroup container, Bundle savedinstancestate) { } @Override return inflater.inflate(r.layout.name, container, false); public void onactivitycreated(bundle savedstate) { super.onactivitycreated(savedstate); // extract parameters passed to activity from intent Intent intent = getactivity().getintent(); int name1 = intent.getintextra("id1", default); String name2 = intent.getstringextra("id2", "default"); } // use parameters to set up the initial state... Mahmoud El-Gayyar / Mobile Development 15

Fragment that accepts Parameters Fragments can have a Bundle object attached to them referred to as arguments Create Bundle and attach after fragment created, but before fragment added to Activity Convention: create static method newinstancethat creates Fragment and bundles up arguments Mahmoud El-Gayyar / Mobile Development 16

Activity: getarguments Fragment: Mahmoud El-Gayyar / Mobile Development 17

Communication between Fragments One activity might contain multiple fragments. The fragments may want to talk to each other. Use activity's getfragmentmanager method. its findfragmentbyid method can access any fragment that has an id. Activity act = getactivity(); if (act.getresources().getconfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE) { // update other fragment within this same activity FragmentClass fragment = (FragmentClass) act.getfragmentmanager().findfragmentbyid(r.id.id); fragment.methodname(parameters); } Mahmoud El-Gayyar / Mobile Development 18

Add/Replace Fragments Programmatically //create a new instance of your fragment details= DetailsFragment.newInstance(index); //use a fragment transaction object FragmentTransaction ft= getfragmentmanager().begintransaction(); //add a new fragment ft.add(r.id.details,details); //first parameter is layout id //or replace an existing fragment ft.replace(r.id.details,details); //set transition animation ft.settransition(fragmenttransaction.transit_fragment_fade); //do the action ft.commit(); Mahmoud El-Gayyar / Mobile Development 19

Use of Fragments Android development documents recommend ALWAYS using Fragments Provide for flexibility of UIs Activity tightly coupled with its View Fragments provide flexibility, looser coupling between Activity and UI Views fragment becomes a building block downside, more complexity in code, more moving parts Mahmoud El-Gayyar / Mobile Development 20

Assignment Go to SDK Samples android-? (17) ApiDemos app Displays Shakespeare play titles in a List Clicking on a title displays a sample from the play com.example.android.apis.app FragmentLayout.java FragmentDialog.java Mahmoud El-Gayyar / Mobile Development 21

Assignment Details Fragment Titles Fragment Mahmoud El-Gayyar / Mobile Development 22