Just Maths - Views, View Groups and Layouts

Great android apps require great design. For great design you need to master layouts. Layout is one of the basic building block of Android User Interface. Lets jump right in and try designing layout for our app - Just Maths.

Just Maths has 3 screens - Main Menu Screen, Game Screen and Score Screen. Each of the screen is designed using Relative Layout and Linear Layout. There are other layouts as well like Frame Layout, Table Layout and Grid Layout. But you can design anything using only Relative Layout and Linear Layout. These layouts are nothing but View Groups.

What are View Groups ?

View Groups are the containers for views such as TextView, Button, Checkboxes etc. and it can also contain other view groups. For instance, you can have Linear Layout inside Relative Layout. These are required for arranging views onto the screen. They define the boundary within which you define your views. Every View Group has its own style and property of laying out the Views. These are the layout managers or layout controls if you are familiar with these terms.

What are Views ?

Views are the building blocks of every Android App. TextView, Button, Checkbox, Radio Button etc - these are all Views and they inherit from View class android.view.View.  Every view takes up a rectangular area on the screen and the area is defined using density independent pixels (dp or dip). Generally these views are placed inside containers (View Groups) to have consistent look across various screen sizes and screen resolutions. There are two special values that are used to define the width and height of the views MATCH_PARENT and WRAP_CONTENT. 

What is MATCH_PARENT and WRAP_CONTENT?

MATCH_PARENT - takes all the space available. WRAP_CONTENT - takes the space covered only by the content. For instance, if a view has android:layout_width="match_parent" & android:layout_height="wrap_content" then it will cover the entire width available and height will cover space required by the content.
  

What is dp and sp?

Dp is the sizing unit used for various view attributes. Instead of using pixels, density independent pixels are used. Android itself calculates the actual pixel size for you to provide consistent look to your apps. Sp is the scale independent pixel. This sizing unit is same as dp but it is used only for text size or font size and respects user preference of font size.

CHEEZYNOTE : Always use sp sizing unit for text and for other attributes use dp as sizing unit.

What is Linear Layout?

Linear Layout is a View Group and arrange views linearly which could be either Horizontally or Vertically. Default orientation is horizontal. android:orientation is the attribute to define the direction. In simple words, if you want to arrange views in a row or column use Linear Layout. For row, orientation is vertical and for column, orientation is horizontal.

One important property used in Linear Layout - android:layout_weight. This attribute tells Linear Layout how to divide the space between child views. As per official documentation - weight defines the importance of child views as to how much space is taken by these child views. Child view with larger weight means that it will take more space in the parent layout than other child views.

How Linear Layout Works?

First it arranges all the child views as per their layout width or layout height property. If linear layout has horizontal orientation, it considers layout width otherwise layout height. Then again it checks for layout weight property if it exists. Now, if it exists then extra space is divided proportionally as per weights among child views.

Examples:

Linear Layout and Layout Weight

Let us know if you have any query. Happy reading.

You can follow our video tutorial series as well to understand it better

Previous: Just Maths - Android Activities and Layouts

Next: Relative Layout and Just Maths Screen Layouts