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




Comments

  1. Thanks for this useful post, esp the "weight" property was explained well

    ReplyDelete
  2. Thanks for your appreciation.
    Share this site among your friends.

    Cheers from CheezyCode!!!

    ReplyDelete
  3. This clears my doubt to the fullest . Thanks alot!

    ReplyDelete
  4. Can u provide the sever based app development videos.

    ReplyDelete
  5. activity_main.xml not sowing its codes. It is only showing drag and drop ui??

    ReplyDelete
  6. very nice we are expecting more videos

    ReplyDelete
  7. Pictures in your blog not showing by my side :/

    ReplyDelete

  8. These blogs are very useful specially for beginners because of the language used is very simple and easy to understandable
    good job carry on..

    ReplyDelete
  9. It is perfect time to make some plans for the future and it is time to be happy. I’ve read this post and if I could I desire to suggest you few interesting things or tips. Perhaps you could write next articles referring to this article. I want to read more things about it!

    Data Science Training

    ReplyDelete
  10. This comment has been removed by a blog administrator.

    ReplyDelete

Post a Comment

Hey there, liked our post. Let us know.

Please don't put promotional links. It doesn't look nice :)

Popular posts from this blog

Create Android Apps - Getting Started

Polymorphism in Kotlin With Example