2.4 Layouts, Recycler View, List View, Grid View and Web view

Layouts

Layouts are Android’s solution to the variety of screens that come on Android devices: they can have different pixel densities, different dimensions, and different aspect ratios.

Layouts are intended to give developers a way to express the physical relationship of Views as they are drawn on the screen.

Android Layout Types

Frame Layout 

The Frame Layout is sort of a null layout specification. It reserves space on the screen for a single View to be drawn, and the View is always located at the upper left of the space. 

There is no way to specify a different location for the View, and there can be only one View in the Layout. If more than one View is defined in the layout file, they are just drawn on top of each other, all pinned to the upper-left corner.

LinearLayout 

LinearLayouts are used extensively in Android applications, and we used them in example code earlier. A LinearLayout asks that the contained Views be layed out as either a series of rows (vertical LinearLayout) or a series of columns (horizontal LinearLayout). 

In a vertical LinearLayout, all the rows are the same width (the width of the widest child). In a horizontal LinearLayout, there is one row of Views, all the same height (the height of the tallest child).

TableLayout 

A TableLayout includes Views in the form of a table (similar to an HTML table). We can create a table of TextViews to show how you would create that kind of screen for an application. 

AbsoluteLayout 

An AbsoluteLayout puts views on the screen wherever you tell it to. It doesn’t try to resize anything, and it doesn’t try to line anything up; it just puts things where it’s told.

AbsoluteLayout bypasses most of the layout manager, and while your application may look perfect on the device you used for development, the odds are very good that it will look terrible on other Android devices

RelativeLayout

RelativeLayout is a view group that displays child views in relative positions.

ListView

ListView is a view group that displays a list of scrollable items.

GridView

GridView is a ViewGroup that displays items in a two-dimensional, scrollable grid.

Layout Attributes

Recycler View

The RecyclerView class extends the ViewGroup class and implements the ScrollingView interface. It is introduced in Marshmallow. It is an advanced version of the ListView with improved performance and other benefits. 

RecyclerView is mostly used to design the user interface with the fine-grain control over the lists and grids of android application.

RecyclerView is a ViewGroup added to the android studio as a successor of the GridView and ListView. It is an improvement on both of them and can be found in the latest v-7 support packages. 

It has been created to make possible construction of any lists with XML layouts as an item which can be customised vastly while improving on the efficiency of ListViews and GridViews. 

This improvement is achieved by recycling the views which are out of the visibility of the user. For example, if a user scrolled down to a position where items 4 and 5 are visible; items 1, 2, and 3 would be cleared from the memory to reduce memory consumption.

Implementation: To implement a basic RecyclerView three sub-parts are needed to be constructed which offer the users the degree of control they require in making varying designs of their choice.

1. The Card Layout: The card layout is an XML layout which will be treated as an item for the list created by the RecyclerView.
2. The ViewHolder: The ViewHolder is a java class that stores the reference to the card layout views that have to be dynamically modified during the execution of the program by a list of data obtained either by online databases or added in some other way.
3. The Data Class: The Data class is a custom java class that acts as a structure for holding the information for every item of the RecyclerView.

List View

Android ListView is a ViewGroup that is used to display the list of items in multiple rows and contains an adapter that automatically inserts the items into the list.

The main purpose of the adapter is to fetch data from an array or database and insert each item that is placed into the list for the desired result. So, it is the main source to pull data from strings.xml file which contains all the required strings in Java or XML files.

XML Attributes of ListView

How to add a ListView in an Android App

Step 1: Create a new project

1. Click on File, then New => New Project.
2. Choose “Empty Activity” for the project template.
3. Select language as Java.
4. Select the minimum SDK as per your need.

Step 2: Modify activity_main.xml file

Add a ListView in the activity_main.xml file.

Step 3: Modify MainActivity.java file

Go to MainActivity.java. Now in the java file create a string array and store the values you want to display in the list. Also, create an object of ListView class. In the onCreate() method find Listview by id using findViewById() method. Create an object of ArrayAdapter using a new keyword followed by a constructor call. 

Grid View

A GridView is a type of AdapterView that displays items in a two-dimensional scrolling grid. Items are inserted into this grid layout from a database or from an array. 

The adapter is used for displaying this data, setAdapter() method is used to join the adapter with GridView. 

The main function of the adapter in GridView is to fetch data from a database or array and insert each piece of data in an appropriate item that will be displayed in GridView. 

XML Attributes of GridView

• android:numColumns: This attribute of GridView will be used to decide the number of columns that are to be displayed in Grid.
• android:horizontalSpacing: This attribute is used to define the spacing between two columns of GridView.
• android:verticalSpacing: This attribute is used to specify the spacing between two rows of GridView.

Web view

Android WebView is used to display web pages in android. The web page can be loaded from the same application or URL. It is used to display online content in android activity.

Android WebView uses a webkit engine to display web pages.

The android.webkit.WebView is the subclass of AbsoluteLayout class. The loadUrl() and loadData() methods of Android WebView class are used to load and display web pages.

Ex.

1.Simple code to display javatpoint.com web page using web view.

WebView mywebview = (WebView) findViewById(R.id.webView1);  

mywebview.loadUrl(“http://www.javatpoint.com/”); 

2.Simple code to display an HTML web page using web view. In this case, the html file must be located inside the asset directory.

WebView mywebview = (WebView) findViewById(R.id.webView1);  

mywebview.loadUrl(“file:///android_asset/myresource.html”);  

3.Code to display HTML code of a string.

String data = “<html><body><h1>Hello, Javatpoint!</h1></body></html>”;  

mywebview.loadData(data, “text/html”, “UTF-8”);