1 / 21

Understanding Android Screen Resolution and Layout Basics

Explore the impact of screen resolution on app development, DPI, XML syntax, and layout design on various Android devices. Learn about density-independent pixels (dp) and scale-independent pixels (sp) in XML, wrap_content, and match_parent attributes.

samuelv
Download Presentation

Understanding Android Screen Resolution and Layout Basics

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Android Layout BasicsTopics Screen resolution – Important factor in App Development Density Independent Pixels: dp vs sp XML Syntax wrap_content and match_parent Lab 2 Exercise 1

  2. Optimal Mobile Development Mobile Apps must run optimally across a range of devices. Developers must consider the following: • Processing • Memory usage • Screen resolution

  3. Android Screen Resolution in the Early Days • Android was first released in 2008. • In 2008 there was only one commercially available device, the T-Mobile G1. • It was common practice to build apps specifically with the resolution of this device in mind.

  4. Why is Resolution important? • Screen resolution is a commonly used spec when buying a device. • Android developers need to build apps that function well on all Android devices. • There are hundreds of different Android devices, with different resolutions, to choose from. How does this differ from Apple devices?

  5. Screen Resolution • A screen is comprised of a grid (thousands or millions) of pixels, arranged in rows and columns. • Each pixel represents the bits that store information about color depth. • DPI (dots per inch) describes pixel density of a screen .

  6. Potential problem (with Android images): An image may end up too small on the higher-resolution devices. An image may end up too large on the smaller-resolution devices.

  7. Image Solution: Density-Independent Pixel, dp • Consider a 2dp by 2dpView element. • The same physical size is maintained on different resolution devices. • Android maps dpsto a different number of pixels. • dps are relative to a 160dpi screen, so one dpis one pixel on a 160 dpi screen.

  8. Scale-Independent Pixel, sp sp is a scale-independent pixel. Usage: • sp is used when defining text size. • dp is used when defining image size.

  9. Layouts and XML • XML is Extensible Markup Language. • XML is used to describe how an Android app is going to look. • XML is used to build layouts and other data resource files. • An app layout will use XML to specify where View elements will be placed on an interface screen.

  10. Example What information is stored in this XML element?

  11. XML syntax Option 1: • XML information is stored as key/value pairs. • XML elements begin with an opening angle bracket, followed by the View type. • Key/value pairs are a list of attributes and values • A list of attributes often ends with forward slash and a closing angle bracket. This is a self-closing tag.

  12. Attribute /value pairs syntax • Attribute names are located the left side. Values are on the right side. • Attribute values should be put in quotation marks as part of the syntax for XML. • There are many attributes for a given view type. Unless specified, attributes are assigned default values. • The TextViewXML element below uses a self-closing tag.

  13. XML syntax Option 2: • Instead of a self-closing tagan element definition may use a separate opening tag and a closing tag. • This syntax is useful when using a View that is a container. • The TextViewXML element below uses a closing tag.

  14. Another Exampleof XML syntax Option 2 • This LinearLayoutis a container used to store a sequential list of items. • A separate opening tag and a closing tag allows the placement of items in a container View.

  15. wrap_content and match_parent • wrap_content and match_parentare values that specify a height and width. • wrap-contentmeans that the width (and height) will accommodate the width and height of content, which may change over time. • match-parent forces the view to occupy the complete area of the parent view - it will match the parent dimensions. Look at the examples below.

  16. Lab 2 Exercise 1

  17. Lab 2 Ex 1Structure Task 1: Locate the images. Task 2: Place images in the drawable folder.

  18. Lab 2Exercise 1:Layout DesignTask 3:Build the layout.Task 4:Code and test the app.

  19. Guide for building main_layout: <?xml version="1.0" encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"> <ImageView…/> <RelativeLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:background="#62f1f6"> <TextView…. /> <Button …. /> </RelativeLayout></LinearLayout> Add necessary attributes as key value pairs.

More Related