Android Layout Concepts PDF

11/3/2024 User Interface Layout 1 User interface Terminologies Orientation: The screen’s orientation from the user's point of view. There are two screen orientations: Landscape orientation has a widescreen aspect ratio while Portrait orientation has a tall...

11/3/2024 User Interface Layout 1 User interface Terminologies Orientation: The screen’s orientation from the user's point of view. There are two screen orientations: Landscape orientation has a widescreen aspect ratio while Portrait orientation has a tall screen aspect ratio. Different devices operate in different orientations by default, which can change at runtime when the user rotates the device. 2 1  11/3/2024 User interface Terminologies Resolution: The total number of physical pixels on a screen. Screen size is the Actual physical size, measured as the screen's diagonal. For simplicity, Android categorizes all actual screen sizes into four generalized sizes: small, normal, large, and extra large. 3 User interface Terminologies Screen density is the quantity of pixels within a physical area of the screen, usually referred to as dpi (dots per inch). Android categorizes screen densities as low, medium, high, and extra high. A "low" density screen has fewer pixels within a given physical area compared to a "normal" or "high" density screen. 4 2  11/3/2024 User interface Terminologies Illustration of how Android roughly maps actual screen sizes and screen densities to generalized sizes and densities (figures are not exact). 5 User interface Terminologies Density-independent pixel (dp): A virtual pixel unit that should be used when defining UI layout, to express layout dimensions or position in a density-independent way. The dp is equivalent to one physical pixel on a 160 dpi screen, which is the baseline density assumed by the system for a "medium" density screen. At runtime, the system transparently handles any scaling of the dp units, as necessary, based on the actual density of the screen in use. 6 3  11/3/2024 User interface Terminologies Android categorizes all density-independent pixel (dp) sizes into four generalized sizes: small, normal, large, and extra large. xlarge screens are at least 960dp x 720dp large screens are at least 640dp x 480dp normal screens are at least 470dp x 320dp small screens are at least 426dp x 320dp 7 User interface Terminologies The formula for converting dp units to screen pixels is as follows: px = dp * (dpi / 160). For example, on a 240 dpi screen, 1 dp equals 1.5 physical pixels. dp units are used when defining the application’s UI to ensure proper UI display on screens with different densities. 8 4  11/3/2024 Units for specifying user interface The following table shows a list of units that are used to specify dimensions of user interface 9 User Interface Layout The user interface layout of the Android application is defined using a hierarchy of Views and ViewGroups In a single Android user interface, Views and View groups are organized into a hierarchical tree structure. View groups are placed at the root and intermediate positions of the tree, while Views are placed at the tree’s leaf nodes. A single-user interface can only have one root element 10 5  11/3/2024 Views A View is a basic building block of UI (User Interface) in Android. A view is a small rectangular box that responds to user inputs. Eg: EditText, Button, CheckBox, etc. View refers to the android.view.View class is the base class of all UI classes. View is responsible for event handling and drawing. 11 ViewGroup So what about a ViewGroup? A ViewGroup is a subclass of the View class. ViewGroup acts as a base class for layouts and layout parameters. The ViewGroup provides an invisible container to hold other Views or ViewGroups and to define the layout properties. For example, Linear Layout is the ViewGroup that contains UI controls like Button, TextView, date picker etc., and other layouts also. ViewGroup Refer to the android.view.ViewGroup class is the base class of some special UI classes that can contain other View objects as children. Since ViewGroup objects are also View objects, multiple ViewGroup objects and View objects can be organized into an object tree to build a complex UI structure. 12 6  11/3/2024 View Group Examples Examples of the commonly used ViewGroup subclasses used in Android applications are; ❖ FrameLayout ❖ WebView ❖ ListView ❖ GridView ❖ LinearLayout ❖ RelativeLayout ❖ TableLayout The above are generally termed layouts. This will form our next item of discussion. But then, before discussing layouts, what is the difference between a view and a viewgroup? 13 Differences between a view and a ViewGroup; 14 7  11/3/2024 Android Layouts 15 Android Layout Android Layout defines the user interface, which holds the UI controls or widgets that will appear on an Android application or activity screen. Generally, every application is a combination of View and ViewGroup. All the elements in a layout are built using a hierarchy of View and ViewGroup objects. A View usually draws something the user can see and interact with. Whereas a ViewGroup is an invisible container that defines the layout structure for View and other ViewGroup objects. 16 8  11/3/2024 Illustration of a view hierarchy, which defines a UI layout 17 Android Layout The View objects are usually called "widgets" and can be one of many subclasses, such as Button or TextView. The ViewGroup objects are usually called "layouts“. The ViewGroup can be one of many types that provide a different layout structure, such as LinearLayout or ConstraintLayout. 18 9  11/3/2024 How to declare a layout? You can declare a layout in several ways: You can declare UI elements in XML. Android provides a straightforward XML vocabulary corresponding to View classes and subclasses, such as those for widgets and layouts. Declaring your UI in XML allows you to separate your app’s presentation from the code that controls its behavior. Using XML files also makes it easy to provide different layouts for different screen sizes and orientations. 19 Android Layout The Android framework allows you to use either or both methods to build your app's UI. For example, you can declare your app's default layouts in XML and modify the layout at runtime. 20 10  11/3/2024 Android Layout Use Android Studio's Layout Editor to build your XML layout using a drag-and-drop interface. The Layout Editor lets you quickly build layouts by dragging UI elements into a visual design editor instead of writing layout XML by hand. The design editor can preview your layout on different Android devices and versions, and you can dynamically resize it to ensure it works well on various screen sizes. Initiate layout elements at runtime. App can programmatically create View and ViewGroup objects (and manipulate their properties). 21 Android Layout Layout resources are stored as XML files in the /res/layout resource directory for the application. 22 11  11/3/2024 Examples of layout The most common layouts provided by Android are : 1. LinearLayout: 2. FrameLayout 3. RelativeLayout 4. TableLayout: 5. Tab layout 6. Constraint Layout 23 LinearLayout: Linear layout arranges controls (its children) in a single column or row. Controls can be aligned in one of the following directions. 1. Horizontally, this will only be one row high (the height of the tallest child, plus padding). 2. Vertically, this will only have one child per row, no matter how wide they are Linear layout is the most common layout 24 12  11/3/2024 1. Linear Layout:XML File Example: The following XML code shows a linear layout as the root view group with a text view and a button 25 1. Linear Layout: XML File XML code in this example can be explained as follows: Specify the XML version number(1.0) and used for character encoding standard (utf 8) used in the document. UTF-8 stands for Universal Character Set Transformation Format, which uses 1 byte (8 bits) to represent characters in the ASCII set and two or three bytes for the rest. 26 13  11/3/2024 1. Linear Layout: XML File defines the beginning of the linear layout file defines the end of the linear layout file xmlns:android=http://schemas.android.com/apk/res/android The file declares Java package for the application attribute Known as android, which is considered the root of the application. 27 1. Linear Layout: XML File android:layout_width="fill_parent“ Assign layout width equal to the width of the screen Assign layout height with the height of the screen android:layout_height=“fill_parent. “ This means that the layout’s height and width will be proportional to the screen. Match_ parent value can also be used instead of fill_parent in API. Example : android:layout_width="match_parent“ android:layout_height="match_parent“ 28 14  11/3/2024 1. Linear Layout: XML File android:orientation="vertical“ Declares the orientation attribute and initializes it with a value for the vertical direction This means that all children will be aligned vertically All children are stacked one after the other such that a vertical list will only have one child per row, no matter how wide they are Example 29 2. RelativeLayout Arrange view objects (its children) in relation to each other or the parent. For Example, If the first control is centered on the screen, other controls Will be aligned relative to the screen center Relative layout is often used to create forms. 30 15  11/3/2024 2. RelativeLayout Example Example output 31 2. RelativeLayout Example Example: XML file with Relative layout 32 16  11/3/2024 2. RelativeLayout Example Element in this example can be explained as follows: android:layout_height="wrap_content“ android:layout_width ="wrap_content“ Sets the height of a container (i.e., group view) to the height of its contents (children). This means that its height and width will expand only far enough to contain its contents, such as text or other child controls it. 33 2. RelativeLayout Example The children of the layout are identified by their unique identity values. For example: Button android:id= "@+id/ok“ Button android:id= "@+id/cncle“ In this example, "@+id/ok“ and "@+id/cncle“ values identify individual command buttons in the layout. The plus-symbol (+) means that this is a new resource name that must be created and added to application resources (in the R.java file). 34 17  11/3/2024 2. RelativeLayout Example android:layout_alignParentRight ="true“ Aligns the control to the right of the parent (e.g., layout) android:layout_toLeftOf="@id/ok“ Aligns a control to the left of another control with A unique identity /ok (in this case, ok button) android:layout_marginLeft ="10dp“ Aligns the control to 10 Density-independent pixels (dp) from the Left margin: 35 2. RelativeLayout Example Example output 36 18  11/3/2024 3. TableLayout: Table layout arranges controls (its children) in rows and columns, like an HTML table Each row has zero or more cells defined by any other View. So, the cells of a row may be composed of various View objects, like ImageView or TextView objects. 37 3. TableLayout: XML Example 38 19  11/3/2024 3. TableLayout: XML Example element defines the beginning of a table layout element defines the end of a table layout element specifies the beginning of a table row element defines the end of a table row 39 3. TableLayout: XML Example android:padding="3dip” Sets the space size between the view border and its contents. In TextView, padding is shifting a text inside it, but in Layout View, padding is shifting all layout elements. 40 20  11/3/2024 3. TableLayout: XML Example android:gravity=“ " positions the contents of that view (i.e., what’s inside the view) on the right side android:layout_gravity can position the view for its parent (i.e., what the view is contained in). E.g android:layout_gravity="right“ This statement positions the view on the right side of the layout 41 4. FrameLayout: FrameLayout creates a blank space on the screen that can be filled with a single object For example, a picture that you'll swap in and out. All its children(controls) start at the top left of the screen. you cannot specify a different location for a child view. Subsequent child views will simply be drawn over previous ones, partially or totally Observing them (unless the newer object is transparent). 42 21  11/3/2024 4. FrameLayout: Generally, FrameLayout should be used to hold a single child view because it can be difficult to organize child views in a scalable way to different screen sizes without the children overlapping each other. The FrameLayout is mainly used for tabbed views and image switchers. 43 4. FrameLayout: Example This XML example , the image is displayed on the center of Text view but at the left side of the frame layout 44 22  11/3/2024 4. FrameLayout: Example 45 4. FrameLayout: Example XML code in this example can be explained as follows: android:layout_width="fill_parent“ android:layout_height="fill_parent“ Sets layout height and width to the height of the screen android:src="@drawable/ic_launcher" Assigns "@drawable/ic_launcher“ image to src attribute 46 23  11/3/2024 4. FrameLayout: Example android:text="Frame Demo“ Assigns “Frame Demo“ value to Text attribute android:scaleType="fitCenter“ Adjust the object to fit at the center of its container proportionally. In this example, the object is “ ic_launcher” image and the container is element 47 4. FrameLayout: Example android:layout_height="250px" android:layout_width="250px“ Defines the height and the width of the view.(e.g Image View ) android:gravity="center“ Positions contents of the view on the center. In this example, the image is positioned at the center of Text view 48 24  11/3/2024 4. FrameLayout: Example This XML example , the image is displayed on the center of Text view but at the left side of the frame layout 49 5. Tab Layout A tab Layout has 2 main elements 1. Tab indicator e.g, Label or Label and Icon 2. Content: Tab content e.g. View or Activity 50 25  11/3/2024 6. Constraint Layout Constraint Layout is a ViewGroup (i.e. , a view that holds other views) that allows you to create large and complex layouts with a flat view hierarchy and allows you to position and size widgets in a very flexible way. It was created to help reduce the nesting of views and improve layout file performance. Constraint Layout is very similar to RelativeLayout in such a way because, views are laid out according to relationships between sibling views and the parent layout yet it’s a lot more flexible and works better with the Layout Editor of the Android Studio’s. 51 6. Constraint Layout – diagram: 52 26  11/3/2024 Constraint Layout Advantages Of Constraint Layout Over Other Layouts One great advantage of the constraintlayout is that you can perform animations on your Constraint Layout views with very little code. You can build your complete layout with simple drag-and-drop on the Android Studio design editor. You can control what happens to a group of widgets through a single line of code. Constraint Layout improves performance over other layout 53 Loading Layout XML Resource Android compiles the XML layout code that is later loaded in java code by the following method: Public void oncreate (Bundle savedinstancesstate) { ….. Setcontentview(R.layout.); …} 54 27  11/3/2024 Loading Layout XML Resource A layout file is referenced using the following syntax: R.layout. for instance, this example loads activity_main.xml file in the onCreate() method 55 Terminologies of Views and view groups Padding is the space inside the border, between the border and the actual view's content. Margins are the spaces outside the border, between the border and the other elements next to the view. Example: 56 28  11/3/2024 Operations on views Common operations that can be performed on Views are: 1. Set properties by putting values of attributes in the XML layout files. E.g. Layout_width=“fill parent”, Layout_height=“wrap content” 2. Set focus on view in response to user input by using the requestFocus() method. 3. Set up listeners by putting listeners that will be notified when something interesting happens to the view control. For example, a Button notifies a listener to call clients when the button is clicked. 3. Set visibility by hiding or showing views using setVisibility(int) method 57 29