pawanharariya/about-me-and-boxes

This project has two apps, developed while learning about layouts in Android. View styling, vector drawables, data binding, constrain layout, etc have been used, following best practices.

This project has two apps developed while learning about layouts in Android. View styling, vector drawables, data binding, constrain layout, etc have been used, following best practices.

App 1 - About Me

This app displays my name and gives a basic introduction about me. It also takes an input nickname that you can give to me.

App Preview

More about the app

1. The app shows the use of LinearLayout, TextView, EditText, ImageView, Button and ScrollView.
2. A style is created to apply common properties like padding, fontFamily, textColor, etc. to all TextViews.
3. Attributes like content_description and hint are added to ImageView and EditText respectively to improve accessibilty.
4. All dimensions like padding, margins, and text_size are extracted to dimens.xml file.
5. All strings constants like button text are extracted to strings.xml file.
6. The app also uses vector drawables and vector drawable support provided by Android Support Library is enabled to support drawables below API Level 19.
7. Data Binding has been used to bind data directly to views.

Views and View Groups

In Android, every Activity that is visible on the screen needs a layout, defined in a xml layout file. All visual elements on the screen are views and they are children of View Class. Example of views are TextView, ImageView, Buttons, EditText, LinearLayout, etc. We can also implement our own custom views. Views can contain other views and they are called View groups, for example LinearLayout, ConstraintLayout and ScrollView.

dp and sp

Density Independent Pixel (dp) is the unit to express width and height of these views. It is based on physical pixel density of screen. For example :

• On a 160 dpi screen, 1 dp == 1 pixel
• On a 480- dpi screen, 1 dp == 3 pixels

where dpi stands for dots per inches

Scale Independent Pixel (sp) is the unit to express font-size of the text. It is same as dp unit, but it not only scaled by pixel density but also by font-size preference of the user in its phone settings. This makes text to automatically scale based on phone settings.

Android devices automatically covert dp/sp to pixel values, hence the layout remains consistent across multiple screen resolutions.

View Hierarchy

The views are inflated to created a hierarchy of view objects. Android system then traverses this hierarchy to draw views on screen. Complex and deeper view hierachies takes longer time to draw and affects performance and apps may load and respond slowly. Constraints layout provides flat hierarchy and is recommeded for complex layouts.

Layout Editor

Layout editor has bunch of toolbars and screens to create and maintain layouts. However the same can also be done directly via xml code. Layout Editor has various screens mentioned below :

1. Project View : Shows the project hierarchy and xml layouts in \res\layouts folder.
2. Design and Text tab : They can be used to switch between layout editor and the xml code.
3. Palette : It has commonly used UI elements and Views that can directly be added to the design.
4. Component Tree : It shows the layout hierarchy and is useful in selecting small and hidden views in complex and overlapping layout designs.
5. Attributes Pane : Shows attributes of currently selected view.
6. Design Editor : Shows preview of the screen and a blueprint version. Lines are easier to see in blueprint version.

Creating a style

To use same formatting across the whole app to make it look consistent a style can be created. Instead of repeating the same properties for multiple views, all formatting of a view can be extracted into a style and then style can be applied to the views. We can create the style on our own or extract it from an existing view. Styles lie in \res\values\styles.xml file.

Data Binding

When we use findViewById to reference views, Android has to traverse the view hierarchy to find the view at runtime. For large and deep view hierarchy this can slow down the app. Data Binding helps to connect layout to an activity or fragment at compile time. A binding class is generated by the compiler when the activity is created, the binding instance helps to access views without any extra overhead. Data binding also provides null safety and type safety. Data binding helps to bind data directly to views with the help of a data class. This reduces the effort of first updating the data and then updating the data displayed in views and separates data and presentation.

View Binding

View Binding is similar to Data Binding with less features. View binding also provides type safety and null safety. However, Data binding has advanced features like ways to write short logical expressions in XML code and enhanced functionality with Jetpack libraries. Whereas, View binding is ideal for simpler use cases and provides faster compilation.

Quick Tips

• Don't use hardcoded text in layout files, instead extract all string constants as a string resource in \res\values\strings.xml file.
• It is also recommeded to extract all dimensions like text sizes, margins and paddings into \res\values\dimens.xml file.
• We can add font files in res\font folder to support fonts the are not part of Android Studio.
• The content_description attribute should be added to ImageView as it is used by screen readers to describe images.
• Use vector drawable support library to support vector drawables below API level 19. In the app module gradle file add the following:

  defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
  

• We can give id to ScrollView, this gives the Android system an identifier for the view and it helps in preserving the scroll position when the device screen is rotated.
• Use start and end for giving margins and padding instead of left and right, because start and end adapt to right to left screens, for RTL languages like Arabic.
• We can specify inputType for EditText, which makes Android System to automatically validate the input based on the inputType. For example, for age we can set inputType to number or for email address we can set it to email.

App 2 - Boxes

This app uses constraint layout and its properties to create a screen and the user can click the boxes on the screen to color them. The layout is made such that it remains responsive with changes in screen orientation.

App Preview

Constraint Layout

A constraint is a connection or alignment to another UI element, to the parent layout, or to an invisible guideline. Following are few advantages of a Constraint Layout:

1. It makes layouts responsive to screens and resolutions.
2. Results in flatter view hierarchy.
3. Optimised for laying out its views.

Types of constraints

1. Fixed Constraint - It is represented by a straight line. It is defined by a specific value and is commonly used for margins.
2. Wrap content Constraint - It is represented by line of chevrons (>>>>>). It expand only as much as required to contain its contents.
3. Zig-Zag Constraint - It is used to match constraints relative to other views. More the matching constraints, more the layout can adapt to different screen sizes and orientation.

Properties of Constraint Layout

1. Bias - It provides preference or weight to a constraint.
2. Ratio - It is used to specify width and height as ratio of each other. To use it, first constraint either width or height and set the other dimension to 0dp. 0dp specifies that it will be calculated. Use layout_constraintDimensionRatio attribute to specify width to height ratio.
3. Chaining - It links set of views horizontally or vertically and then they behave as a group. To create a chain just connect the views in both direction. Chain can used to spread the elements equally and this can be more controlled using weight and bias. It also has other options like spread chain, packed chain and spread inside chain.
4. BaseLine Constraint - It contrainsts the bottow/baseline of elements to each other. It is helpful to align elements with text, when the fonts are differently sized.