Basics of Android layouts and views
What is a ViewGroup?
A viewgroup is a parent class of all the views. It holds all the children views (and viewgroups) within, as depicted by the structure above.
Types of ViewGroups
- Absolute Layout
- By using an Absolute Layout, you can specify the exact locations (x/y coordinates) of its children.
- They are less flexible and harder to maintain, rarely used nowadays.
- One needs to remember too many coordinate values for placing a view at a position, it would rather be much easier to remember a view with respect to which one needs to place a view on screen.
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent"> <Button android:layout_width="100dp" android:layout_height="wrap_content" android:text="OK" android:layout_x="50px" android:layout_y="361px" /> <Button android:layout_width="100dp" android:layout_height="wrap_content" android:text="Cancel" android:layout_x="225px" android:layout_y="361px" /> </AbsoluteLayout>
- Frame Layout
- It is usually used to block out an area on the screen and display only a single child on screen.
- If multiple children are used within it then all the children are placed on top of each other.
- Position of children can only be controlled by assigning gravity to them.
- Usually used to display single fragments on screen.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:src="@drawable/ic_launcher" android:layout_height="250px" android:layout_width="250px"/> <TextView android:text="Frame Demo" android:layout_height="match_parent" android:layout_width="match_parent" android:gravity="center"/> </FrameLayout>
- Linear Layout
- Aligns the children views either horizontally or vertically.
- The attribute
android:orientationspecifies wheher to horizontally or vertically align children views.
- We usually use the attribute
android:weightin the children views/viewgroups to decide what percentage of the available space they should occupy.
android:weightSumdefines the maximum weight sum, and is calculated as the sum of the
layout_weightof all the children if not specified explicitly.
TRIVIA: What would happen if the
weightSumis less than the sum of weights given to children explicitly?
- Relative Layout
- Relative Layout enables you to specify how child views are positioned relative to each other.
- The position of each view can be specified as relative to sibling elements or relative to the parent.
Some common attribute usages in relative layout:
android:layout_alignRightis used to align a view’s rightmost edge to the rightmost edge of the specified view, whereas
android:layout_toRightOfis used to place a view to the right of the specified view ie the left edge of a view is postioned to the right of the specified view.
Why to prefer
The views have LTR(left-to-right) orientation by default ie they start from left and end towards their righ, butthis orientation can be changed to RTL(right-to-left) where views start from right and end towards left. In suchcses,the views with the attribute
android:layout_toEndOfwill correctly align to the end w.r.t the view specifiedwhereas
android:layout_toRightOfwill still align it towards the right.
- Instead of specifying the width and height of a child, we can provide a percentage of screen width or height to use.
- It is very useful in scaling layouts to various screen sizes.
PercentSupportLayoutsupports two pre-built layout -
- Find an example for this here.
- It is a subclass of FrameLayout, as the name says it is used when your contents do not fit the screen and tend to overflow.
- ScrollView can hold only one direct child. This means that you need to wrap all your views into a single viewgroup in order to use it within a ScrollView.
- ScrollView only supports vertical scrolling. Use
HorizontalScrollViewif you want to have horizontal scrolling.
- It is advised not to use ScrollView with
Recycler Viewas they take care of their own vertical scrolling.
- Constraint Layout
- Constraint Layout is a new ViewGroup for android. The main motive of constraint layout is to design layouts which are flexible and look the same in all screen sizes.
- The layout editor uses constraints to identify the position of a view on the screen.
- The attributes like
android:layout_constraintTop_toBottomOfand other similar attributes are used to set constraints to views w.r.t. other views.
- It supports chaining of views, using which the views can be easily positioned over a space, and works much better than using a combo of weights and gravity to achieve a configuration. The attributes
android:layout_constraintVertical_chainStylecan be supplied various values to produce the following effects:
Supports horizontal and vertical bias,by which we can tweak the positioning to favor one side over another using the bias attributes.
<android.support.constraint.ConstraintLayout ...> <Button android:id="@+id/button" ... app:layout_constraintHorizontal_bias="0.3" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent/>
The above code produces a button like:
- It also provides a view called
Guidelineusing which you can have an imaginary line (which is not a view) anywhere on the screen and position views according to it. You can position this guideline by providing it either a fixed value or a percentage value (w.r.t. the screen).
- Coordinator Layout
- CoordinatorLayout is a super-powered FrameLayout.
- CoordinatorLayout is intended for two primary use cases:
- As a top-level application decor or chrome layout
- As a container for a specific interaction with one or more child views
- By specifying Behaviors for child views of a CoordinatorLayout you can provide many different interactions within a single parent and those views can also interact with one another. View classes can specify a default behavior when used as a child of a CoordinatorLayout using the DefaultBehavior annotation.
What is a List View?
- A list view is an adapter view that does not know the details, such as type and contents, of the views it contains. Instead list view requests views on demand from a
ListAdapteras needed, such as to display new views as the user scrolls up or down.
- ListView attempts to reuse view objects in order to improve performance and avoid a lag in response to user scrolls. To take advantage of this feature, check if the convertView provided to
getView(...)is null before creating or inflating a new view object(but this is not a default feature of listView, we have to implement it)
What is a Recycler View?
- A flexible view for providing a limited window into a large data set.
- List View creates the view objects of all elements but Recycler View recycles those view objects which are not present at the screen.
- To implement Recycler View we have to make classes which extends
RecyclerView.ViewHolderand then call
ViewHolderclass will manage all the tasks related to instantiation of view objects and adapter will act as a bridge between Recycler View and View Holder.
List View vs Recycler View
- Reuses cells while scrolling up/down - this is possible with implementing View Holder in the listView adapter, but it was an optional thing, while in the RecycleView it’s the default way of writing adapter.
- Decouples list from its container - so you can put list items easily at run time in the different containers (linearLayout, gridLayout) with setting
- Animates common list actions - Animations are decoupled and delegated to
What is an Adapter and AdapterView?
- Whenever data is dynamic and is determined at runtime, we have to use an
Spinneretc. to load views.
- An Adapter object acts as a bridge between an AdapterView and the underlying data for that view.
- The Adapter provides access to the data items.
- The Adapter is also responsible for making a View for each item in the data set.
What is a ViewHolder?
- It helps you to minimize the number of
findViewById()calls by caching the results in a holder object.
- In case of ListViews and RecyclerViews, where a single layout file is used for all the views, it can be time consuming to access
findViewById()again and again.
ViewHoldercan reduce this by providing a tag to each listItem so that you can immediately access them without the need to look them up repeatedly.
- We can even create our custom views by extending the
Viewclass and using a combo of
Some general trivia
- Padding and Margin:
android:paddingattribute adjusts the position of a view’s content from its borders internally.
android:marginattribute changes the distance of the borders of a view from its parent/view on which it depends.
- Gravity and LayoutGravity:
android:layout_gravityattribute is used to provide gravity (positioning w.r.t parent) to the entire view box.
android:gravityattribute is used to provide gravity to a view’s contents, so that it is positioned accordingly within the view box.
- In a
RelativeLayout, if you add
layout_alignBaselineto a textView, the text in that view will scoot to align with the baseline of the specified element. The text from both elements will appear as if they were written on the same invisible line.
- Have a look at an example here
- In a