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

Similar documents
UI Fragment.

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

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

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

Mobile Computing Fragments

EMBEDDED SYSTEMS PROGRAMMING UI and Android

Mobile Development Lecture 10: Fragments

Fragments. Lecture 11

How to support multiple screens using android? Synopsis

WebView Fragments Navigation Drawer

Fragments. Lecture 10

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

Fragments and the Maps API

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

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

Building User Interface for Android Mobile Applications II

ACTIVITY, FRAGMENT, NAVIGATION. Roberto Beraldi

Action Bar. Action bar: Top navigation bar at each screen The action bar is split into four different functional areas that apply to most apps.

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

CHAPTER 4. Fragments ActionBar Menus

Programmatically Working with Android Fragments

Android Application Model I

Mobile Application Development Android

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

Mobile and Ubiquitous Computing: Android Programming (part 3)

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

Designing and Implementing Android UIs for Phones and Tablets

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

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

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

Topics of Discussion

Comparative Study on Layout and Drawable Resource Behavior in Android for Supporting Multi Screen

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

ANDROID USER INTERFACE

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

CS 4330/5390: Mobile Application Development Exam 1

05. RecyclerView and Styles

Android App Development. Mr. Michaud ICE Programs Georgia Institute of Technology

Android Basics. Android UI Architecture. Android UI 1

Let s take a display of HTC Desire smartphone as an example. Screen size = 3.7 inches, resolution = 800x480 pixels.

Android UI: Overview

Programming with Android: Introduction. Layouts. Dipartimento di Informatica: Scienza e Ingegneria Università di Bologna

CE881: Mobile & Social Application Programming

FRAGMENTS.

UI (User Interface) overview Supporting Multiple Screens Touch events and listeners

ACTIVITY, FRAGMENT, NAVIGATION. Roberto Beraldi

ActionBar. import android.support.v7.app.actionbaractivity; public class MyAppBarActivity extends ActionBarActivity { }

ListView Containers. Resources. Creating a ListView

Instant Android Fragmentation Management How-to

Lecture 2 Android SDK

Android Application Development

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

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

MODULE 2: GETTING STARTED WITH ANDROID PROGRAMMING

Diving into Android. By Jeroen Tietema. Jeroen Tietema,

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

Android HelloWorld - Example. Tushar B. Kute,

Mobile Programming Lecture 7. Dialogs, Menus, and SharedPreferences

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

Activities and Fragments

Security model. Marco Ronchetti Università degli Studi di Trento

Programming with Android: Introduction. Layouts. Luca Bedogni. Dipartimento di Informatica: Scienza e Ingegneria Università di Bologna

Mobile Application Development - Android

BCA 6. Question Bank

Our First Android Application

Programming with Android: Application Resources. Dipartimento di Scienze dell Informazione Università di Bologna

Q.1 Explain the dialog and also explain the Demonstrate working dialog in android.

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

Announcements. Android: n-puzzle Walkthrough. Tommy MacWilliam. Dynamic GUIs. ListViews. Bitmaps. Gameplay. Saving State. Menus

Have a development environment in 256 or 255 Be familiar with the application lifecycle

The drawable/tile empty.xml file

Spring Lecture 5 Lecturer: Omid Jafarinezhad

Topics of Discussion

UNDERSTANDING ACTIVITIES

Mobile Software Development for Android - I397

Java & Android. Java Fundamentals. Madis Pink 2016 Tartu

MC Android Programming

Android UI Development

Real-Time Embedded Systems

COMP4521 EMBEDDED SYSTEMS SOFTWARE

Embedded Systems Programming - PA8001

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

Mobila applikationer och trådlösa nät, HI1033, HT2013

Minds-on: Android. Session 2

EECS 4443 Mobile User Interfaces. More About Layouts. Scott MacKenzie. York University. Overview (Review)

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

04. Learn the basic widget. DKU-MUST Mobile ICT Education Center

CS371m - Mobile Computing. User Interface Basics

Android Beginners Workshop

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

Android AND-401. Android Application Development. Download Full Version :

CS378 -Mobile Computing. More UI -Part 2

CS 528 Mobile and Ubiquitous Computing Lecture 2a: Android UI Design in XML + Examples. Emmanuel Agu

Answers to Exercises

EMBEDDED SYSTEMS PROGRAMMING Application Tip: Managing Screen Orientation

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

MARS AREA SCHOOL DISTRICT Curriculum TECHNOLOGY EDUCATION

CS 4518 Mobile and Ubiquitous Computing Lecture 4: Data-Driven Views, Android Components & Android Activity Lifecycle Emmanuel Agu

O X X X O O X O X. Tic-Tac-Toe. 5COSC005W MOBILE APPLICATION DEVELOPMENT Lecture 2: The Ultimate Tic-Tac-Toe Game

Android Programs Day 5

Transcription:

Multiple devices

Multiple devices Use wrap_content and match_parent Use RelativeLayout/ConstraintLayout Use configuration qualifiers Create a new directory in your project's res/ and name it using the format: <resources_name>-<qualifier> <resources_name> is the standard resource name (such as drawable or layout) <qualifier> is a configuration qualifier specifying the configuration for which these resources are to be used (such as hdpi or xlarge)

Example res/layout/main.xml <LinearLayout android:orientation="vertical android:layout_width="match_parent android:layout_height="match_parent"> res/layout-large/main.xml <LinearLayout android:layout_width="fill_parent android:layout_height="fill_parent android:orientation="horizontal > <fragment android:id="@+id/headlines <fragment android:id="@+id/headlines" android:layout_height="fill_parent android:layout_height="fill_parent android:name="luc.polimi.app.fragment1 android:name= luc.polimi.app.fragment1" android:layout_width="match_parent" /> android:layout_width="400dp" </LinearLayout> android:layout_marginright="10dp"/> <fragment android:id="@+id/article" android:layout_height="fill_parent android:name= luc.polimi.app.fragment2 android:layout_width="fill_parent" /> </LinearLayout>

From Android 3.2 Screen configuration Qualifier values Description smallestwidth Available screen width Available screen height sw<n>dp Examples: sw600dp sw720dp w<n>dp Examples: w720dp w1024dp h<n>dp Examples: h720dp h1024dp The fundamental size of a screen, as indicated by the shortest dimension of the available screen area. Specifies a minimum available width in dp units at which the resources should be used defined by the <N> value Specifies a minimum screen height in dp units at which the resources should be used defined by the <N> value.

Examples (smallestwidth) 320, for 240x320 ldpi (QVGA handset) 320x480 mdpi (handset) 480x800 hdpi (high-density handset) 480 for 480x800 mdpi (tablet/handset) 600, for 600x1024 mdpi (7" tablet). 720, for 720x1280 mdpi (10" tablet).

Density px = dp * (dpi / 160) For example Android says that Launcher icons on a mobile device must be 48x48 dp

Manifest and devices We must also declare in the manifest file which screens our application supports Through <supports-screens> manifest element if your application supports all screen sizes supported by Android (as small as 426dp x 320dp), then you don't need to declare this attribute, because the smallest width your application requires is the smallest possible on any device

Bitmaps

Bipmaps The system uses any size- or density-specific resources from your application and displays them without scaling If resources are not available in the correct density, the system loads the default resources and scales them up or down as needed The system assumes that default resources (those from a directory without configuration qualifiers) are designed for the baseline screen density (mdpi) A bitmap designed at 50x50 pixels for an mdpi screen is scaled to 75x75 pixels on an hdpi screen (if there is no alternative resource for hdpi)

Guidelines Use wrap_content, match_parent, or the dp unit for layout dimensions Do not use hard-coded pixel values in your application code Do not use AbsoluteLayout (deprecated) Use size and density-specific resources

Example configuration

New problem

Fragments Introduced in Android 3.0 (API level 11) to support more dynamic and flexible UI designs on large screens One can combine multiple fragments in a single activity to build a multi-pane UI and reuse the same fragments in multiple activities Represent behaviors or portions of user interface in Activities Must always be embedded in an activity and their lifecycle is directly affected by the one of the host activity Can be manipulated independently We may also use A fragment without UI as invisible worker for the activity Special-purpose fragments: DialogFragment, ListFragment, PreferenceFragment

Reuse You should design each fragment as a modular and reusable activity component Each fragment defines its own layout and its own behavior You can include one fragment in multiple activities, so you should design for reuse Avoid directly manipulating one fragment from another fragment A modular fragment allows you to change your fragment combinations for different screen sizes

Fragment oncreate() initializes essential components of the fragment that you want to retain when the fragment is paused or stopped, then resumed oncreateview() called when it's time for the fragment to draw its user interface for the first time It returns a View that is the root of the fragment's layout It can return null if the fragment does not provide a UI onpause() called when the user is leaving the fragment This is usually where you should commit any changes that should be persisted A fragment can contribute menu items to the activity's Options Menu (and, consequently, the app bar)

Activities and fragments Lifecycle of the activity in which the fragment lives directly affects the lifecycle of fragment Some further callbacks Each lifecycle callback for the activity results in a similar callback for each fragment onattach() called when fragment has been associated with activity onactivitycreated() called when activity's oncreate() method has returned ondestroyview() called when the view hierarchy associated with fragment is being removed ondetach() is called when the fragment is being disassociated from activity

Example public static class ExampleFragment extends Fragment { @Override public View oncreateview(layoutinflater inflater, ViewGroup container, Bundle savedinstancestate) { // Inflate the layout for this fragment return inf.inflate(r.layout.ex_frag, container, false); } }

Adding fragments to activities <LinearLayout xmlns:android= android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="match_parent" android:baselinealigned="false"> <fragment android:name="it.polimi.first.articlelistfragment" android:id="@+id/list" android:layout_weight="1" android:layout_width="0dp" android:layout_height="match_parent" /> <fragment android:name="it.polimi.first.articlereaderfragment" android:id="@+id/viewer" android:layout_weight="2" android:layout_width="0dp" android:layout_height="match_parent" /> </LinearLayout>

FragmentManager Needed to Manage fragments in an activity getfragmentmanager() provides a manager that can then be used to Add, remove, replace fragments (through transactions) Get fragments that exist in the activity Pop fragments off the back stack Register a listener for changes to the back stack

Adding a fragment FragmentManager fragmentmanager = getfragmentmanager(); FragmentTransaction fragmenttransaction = fragmentmanager.begintransaction(); ExampleFragment fragment = new ExampleFragment(); fragmenttransaction.add(r.id.fragment_container, fragment); fragmenttransaction.commit(); To add a fragment without a UI, add the fragment using add(fragment, String) Supply a unique string "tag", instead of a view ID oncreateview() is not called

addtobackstack() // Create new fragment and transaction Fragment newfragment = new ExampleFragment(); FragmentTransaction transaction = getfragmentmanager().begintransaction(); // Replace whatever is in the fragment_container view with // this fragment, and add the transaction to the back stack transaction.replace(r.id.fragment_container, newfragment); transaction.addtobackstack(null); // Commit the transaction transaction.commit();

Fragments and Activities A given instance of a fragment is directly tied to the activity that contains it The fragment can then access the activity instance with getactivity() and easily perform tasks such as find a view in the activity Likewise the activity can call methods in the fragment by acquiring a reference to the fragment from the FragmentManager

Menus

Three options (I) Android apps should provide an app bar to present common user actions Options menu and app bar Is the primary collection of menu items (actions that have a global impact) for an activity On Android 3.0 and higher, these items are presented by the app bar as a combination of on-screen action items and overflow options

Three options (II) Context menu and contextual action mode It is a floating menu that appears when the user performs a longclick on an element and provides actions that affect the selected content or context frame On Android 3.0 and higher, you should instead use the contextual action mode to display action items in a bar at the top of the screen and allow the user to select multiple items Popup menu It displays a list of items in a vertical list that is anchored to the view that invoked the menu Good for providing an overflow of actions that relate to specific content

Menus Must be properly designed If they become too big, they do not fit Should guide the user properly Should exploit the current state/context Two ways XML: file in res/menu and inflate it (reuse) Java: directly part of the activity s code

Usual XML definition Each menu entry is specified by an ID, a label, and an icon (optional) Method oncreateoptionsmenu() inflates the menu Specific actions must then be implemented One can add a submenu to an item in any menu (except a submenu) A menu group is a collection of menu items that share properties <menu xmlns:android= > <item android:id="@+id/newgame" android:icon="@drawable/ic_launcher" android:title="new Game" android:showasaction="ifroom"/> <item android:id="@+id/help" android:icon="@drawable/ic_launcher" android:title="help" /> </menu>

Within the activity @Override public boolean oncreateoptionsmenu(menu menu) { MenuInflater inflater = getmenuinflater(); inflater.inflate(r.menu.main, menu); return true; } @Override public boolean onoptionsitemselected(menuitem item) { // Handle item selection switch (item.getitemid()) { case R.id.newgame: newgame(); return true; case R.id.help: showhelp(); return true; default: return super.onoptionsitemselected(item); } }

Contextual menus Most often used for items in a ListView, GridView, or other view collections in which the user can perform direct actions on each item floating context menu contextual action bar

Popup menus Instantiate a PopupMenu with its constructor Current application Context and the View to which the menu should be anchored as parameters Use MenuInflater to inflate your menu resource into the Menu object returned by PopupMenu.getMenu() Call PopupMenu.show()