Android Layout Design PDF

Getting Started / Designing Layout in Android Chapter Outline Anatomy of Android App Android Project Structure Designing Layout in Android 2 1. Anatomy of Android App Basic Components App Components Each component is an entry point through which the system...

Getting Started / Designing Layout in Android Chapter Outline Anatomy of Android App Android Project Structure Designing Layout in Android 2 1. Anatomy of Android App Basic Components App Components Each component is an entry point through which the system or a user can enter your app. There are four different types of app components: Activities are “screens” with a UI. Services run a task in the background. Broadcast receivers deliver events to apps outside of regular user flow. Content providers manage a pool of information. 4 Activities An activity is the entry point for interacting with the user. A single screen with a user interface. Most apps have multiple independent activities. E-mail: Show messages, compose, read. If allowed, other apps can start any activity. Camera app opens “Compose” activity to share photo. Activities control and link processes. Ensure the current process is not killed. Link to calling activities and maintain their process. Model state in case process is killed. Model flow between apps. 5 Services A service is a general-purpose entry point for keeping an app running in the background. Playing music, sending files. Does not provide a direct UI. Can be started by an activity. Can maintain a notification to allow user interaction. Bound services offer an API to the calling app. if process A is bound to a service in process B, it knows that it needs to keep process B (and its service) running for A. 6 Broadcast Receivers A broadcast receiver is a component that enables the system to deliver events to the app outside of a regular user flow, allowing the app to respond to system-wide broadcast announcements. Many broadcasts originate from the system for example, a broadcast announcing that the screen has turned off, the battery is low, or a picture was captured.. Apps can also initiate broadcasts—for example, to let other apps know that some data has been downloaded to the device and is available for them to use. May create a status bar notification to alert the user when a broadcast event occurs 7 Content Providers A content provider manages a shared set of app data that you can store in any persistent storage location that your app can access - files, database, web resources. For example, the Android system provides a content provider that manages the user's contact information. To the system, a content provider is an entry point into an app for publishing named data items, identified by a URI scheme. App can decide how it wants to map the data it contains to a URI namespace to access the data. URIs provide a secure way to pass content. Content is locked and accessed through temporary permission. 8 2. Android Project Structure Android Apps - Structure Android Code All the logic Resources Manifest 10 The Manifest Before the Android system can start an app component, the system must know that the component exists – read app's manifest file. Each android app needs an AndroidManifest.xml file Essential information App name Components SDK version Permissions... 11  Declaring Components Resource for an icon. Class name of Activity Declares an Activity Label used to identify Activity The primary task of the manifest is to inform the system about the app's components. 12 App Resources An Android app is composed of more than just code. Bitmaps/Pictures UI definitions in XML Launcher icons Text strings (incl. translations) 13 App Resources Each resource is assigned a unique ID. Used to reference the resource from code or layout XML. File res/drawable/logo.png -> ID R.drawable.logo Can provide alternate resources for configurations. For example, by defining UI strings in XML, you can translate the strings into other languages and save those strings in separate files. Android applies the appropriate language strings to your UI based on a language qualifier directory (res/values-fr/) Many default qualifiers supported for different screen sizes, device types, orientations (layout vs portrait). 14 Permissions By default, apps are not allowed to use hardware, access data, access network. Permissions must be explicitly asked for in manifest Users must grant permission for dangerous requests (like the ones above). Formerly, user had to agree to all requests to install app (< API 6.0 (23)). Now, permissions granted individually. 15 3. Designing Layout in Android Main Components Introduction The user interface (UI) is everything that the user can see and interact with Android provides pre-built UI components such as structured layout objects and input controls that you can use to build your UI Android also provides other modules for special interfaces such as dialogs, notifications and menus Overview All Android UI elements built using View and ViewGroup objects View is an object that draws something on the screen that the user can interact with ViewGroup is a container that holds Views and other ViewGroup objects and defines layout of all or part of the screen Views and ViewGroups for a particular screen arranged into a hierarchy 19 User interface layout ViewGroup is an invisible container that organizes child Views (some of which might themselves be ViewGroups) ○ ViewGroup is a subclass of View! Child Views inside a ViewGroup are widgets or input controls that draw some part of the UI Make your UI no more complex than it needs to be ○ It takes more time and memory to construct and display a complex View hierarchy User interface layout Declare your layout either ○ in code, by instantiating View objects and building a tree ○ in an XML layout file (PREFERRED!)  Name of XML element for a View is the same as the class name of the View (e.g., TextView, LinearLayout)  Above is a simple vertical layout with a TextView and a Button  When XML layout loaded, each node inflated into a runtime object Layouts Layout defines visual structure of a user interface ○ e.g., for an Activity or an app widget You can declare Layouts either in your Java code or in an XML layout file ○ Can declare default layouts in XML ○ Modify state of UI components in your code Declaring UI in XML resource Declaring UI in XML resource lets you separate presentation from logic and behaviour ○ Can modify presentation without changing code Can create XML layouts for different screen orientations, sizes and densities or different languages Easier to debug when layout defined in XML Defining layout in XML XML vocabulary for defining layouts follows naming of classes and methods XML element names correspond to class names XML attribute names correspond to methods  Though there are a couple of small differences  e.g., EditText.setText() corresponds to text attribute Writing an XML layout file Each layout file contains one root element, which must be (i.e., correspond to) a View or a ViewGroup object This will usually be a Layout  Layout is a subclass of ViewGroup! The root element contains child elements which correspond to Views (often widgets) and ViewGroups (often Layouts) The layout XML file should end with “.xml” and be stored in the res/layout/ directory Loading an XML layout resource When app is compiled, each XML layout file is compiled into a View resource Load the layout by calling setContentView() from the onCreate() callback implementation in your Activity class Pass setContentView() the id of the layout resource, as defined in the R.java file Example shows case for layout declared in main_layout.xml Attributes Each View and ViewGroup element in an XML layout file has its own set of attributes (e.g., id, text) These attributes are inherited by any class that subclasses View or ViewGroup Some attributes are layout parameters that describe layout orientations of a View object (e.g., layout_width, layout_height) ID Any View object may have an integer ID Assigned in id attribute as a string ○ Associated with an integer constant in R.java @: indicates the type of the value following the slash ○ in this case, an “id” type resource +: indicates that this is the first time the resource is being defined and that it should be added to R.java Android resources You can also access a number of Android framework IDs Here you do not use the “+” symbol, since you are not defining the ID, just using one that has already been defined You declare the type of the resource to be “@android:id” to indicate that the id is defined in the android package namespace ○ “android” namespace means referencing a resource defined in android.R resources class, not private resources class Creating and referencing Views First define the view or widget in the layout file and assign a unique id Then create an instance of the View and capture it from the layout (usually in onCreate()) ID should be unique throughout the entire View tree Layout parameters XML layout attributes with name layout_something define layout parameters A ViewGroup implements a nested class that extends ViewGroup.LayoutParams ○ i.e., a class called LayoutParams, defined inside ViewGroup The ViewGroup.LayoutParams class inside a ViewGroup defines size and position of each of its child Views Layout parameters Every LayoutParams subclass has its own syntax for setting values Each child element must define LayoutParams appropriate for its parent A child ViewGroup may also define different LayoutParams for its own children layout_width and layout_height Every ViewGroup.LayoutParams defines a width (layout_width) and height (layout_height) ○ Every view in the ViewGroup must define these in its XML declaration Many ViewGroups also include optional margins and borders layout_width and layout_height can be defined by absolute distances (DISCOURAGED!) Usually define layout_width and layout_height using a constant such as ○ wrap_content – View expands to size of content ○ fill_parent or match_parent – View as big as parent will allow Can also use density-independent pixel units (dp)  L Layout position T View controls a rectangular area in the UI View has left, top, width and height H properties, expressed in pixels relative to the parent Has getter methods: getLeft(), getTop(), getWidth(), getHeight() W Size, padding and margins of a View T getWidth(), getHeight() ○ actual width and height of View on screen at drawing time after layout getMeasuredWidth(), getMeasuredHeight() ○ how big a view wants to be within its parent H setPadding(), getPaddingLeft(), getPaddingTop(), getPaddingRight(), getPaddingBottom() ○ pixels of padding between contents of view and edge of its rectangle ViewGroups can be used to define margins W Common layouts Each subclass of ViewGroup has its own way of managing the placement of the Views that it contains Try to keep your View hierarchies shallow – otherwise they may take a noticeable time to draw LinearLayout LinearLayout is a ViewGroup that aligns all its children in a single row or column Direction specified with android:orientation attribute Horizontal list will be height of the tallest element Vertical list will be width of the widest element LinearLayout respects margins between children and gravity of each child ○ gravity is right, center, or left alignment Layout weight in LinearLayout In LinearLayout, can assign a weight to each child with android:layout_weight attribute ○ Remaining space is allocated in proportion to the assigned weight of the children ○ Default weight is 0 If three text fields have weights, 1, 1 and 0, then ○ third text field is only big enough to contain its content ○ other two share equally the space remaining after all three fields are measured LinearLayout in which elements are equally sized Set android:layout_height (for vertical layout) to “0dp” Set android:layout_width (for horizontal layout) to “0dp” Set android:layout_weight of each view to 1 LinearLayout Example RelativeLayout RelativeLayout displays children in positions relative to each other (siblings)... ○ e.g., “left-of” or “below” a sibling...or relative to the parent RelativeLayout area ○ e.g., aligned to the bottom, left of centre RelativeLayout RelativeLayout can eliminate nested ViewGroups and keep the View hierarchy flat ○ improves performance! Can sometimes replace several nested LinearLayouts with a single RelativeLayout Positioning Views RelativeLayout lets child views specify their positions relative to each other and the containing Layout ○ e.g., align two elements by right border, make one below another, centered in the screen, centered left, etc. By default, all child Views drawn in the top-left of the layout Define positions using layout properties available from RelativeLayout.LayoutParams Examples of layout properties android:layout_alignParentTop ○ if “true” then top edge of View matches top edge of parent android:layout_centerVertical ○ if “true”, child centered vertically in parent android:layout_below ○ Top edge of this View below View specified with resource ID android:layout_toRightOf ○ Left edge of this View to the right of View specified with resource ID There are many more RelativeLayout layout attributes! RelativeLayout layout properties Value for a layout property in RelativeLayout is either ○ a boolean – enables layout position relative to parent RelativeLayout ○ an ID – references another View in Layout relative to which this View should be positioned Views can be declared in any order in the XML layout file ○ so a View can depend on a View that is declared later in the XML file Example of RelativeLayout Source Android API Guide on User Interface ○ http://developer.android.com/guide/topics/ui/index.html  CSC 557 Project OCTOBER 2025 ACADEMIC SESSION Project Theme: Edutainment Instruction: 1. This is group a group project that form of 3@4 members. 2. Prepare your project by refering given rubric. 3. Prepare your proposal and submit on 6/12/2024 (Week 8) infront my office (Hard copy) 52