Android Linearlayout Tablelayout RelativeLayout Framelayout

0
1469

What is layout in android

In this post, I will describe the complete example Android Linearlayout Tablelayout RelativeLayout Framelayout. We will also describe all the layout controls available for organizing the activity.

The View is the basic building block it shows different element on the screen. The ViewGrope is a subclass of View. There are different types of layout in Android. Some of them are commonly used to design an activity.

The layout is the subclass of View Gropes that show the children at the different position. In Android, all the View Groupe are defining in Layout_xml. The following is the different types of layout in android.

  • Table layout
  • Linear layout
  • Relative layout
  • Frame layout

Prerequisite

It will good to cover my previous articles before this. Its help to learn more about Android development. In which I explained.Android ListView and customized listView.

Common attribute in layout

 Common property Detail
android:layout_width : android:layout_height: As the name implies both attributes used for the height and width of any type of View.
android: id: Android_id is uniquely identified in a View.
android:layout_weigh: How much space one view can take.
android:layout_gravity: Useful for child view position.
android:layout_x : android:layout_y: X is set x-coordinate of the layout where Y is set Y coordinate of the layout.
android:layout_padding: Enable extra space inside the layout.
android:layout_margin: Enable extra space outside the layout.

Table layout

Using Table _layout we will create a layout similar to the calculator. The layout that arranges the value in form of row and column. Define the Row using TableRow. There is no need to define columns.

Each View place inside the TableRow in form of the column. A TableLayout is a ViewGroup that arrange its youngster’s Views  To characterize a column, you can utilize TableRow inside this design.

There is no compelling reason to specify the number of sections or columns in a TableLayout in light of the fact that android naturally includes segments according to the number of perspectives and different designs included a table line.

In table layout no need to define the layout width and height in a table. because it is by default WRAP_CONTENT and PATCH_PARENT. The no reason to define hight and width inside View the Table layout also set it by default.

Attribute Description
android:id=”@+id/tableLayout” The _id which is uniquely identified in the layout.
android:shrinkColumns
  • android:shrinkColumns=”0”
  • android:shrinkColumns=”1,2”
  • android:shrinkColumns=”*”

That removes the extra space from the columns and shrink it.

android:stretchColumns
  • android:stretchColumns=”0″
  • android:stretchColumns=”1,2″
  • android:stretchColumns=”*”

This an attribute for the Table Layout element. Stretch consists either one columns or set of columns. The zero-based list of the sections to extend. The segment files must be isolated by a comma: 1, 2, 5.

android:collapseColumns It hides the segment of the given file in the Table Layout. He determines the zero-based record of the segments to fall. The segment records must be isolated by a comma: 1, 2, 5.

 

Using Table layout I create the layout that is similar to the calculator. How to do this work following is the detail. We have created a Relative_layout and set the background color black. The inside the Relative_layout we set the Table_layout and inside the Table_layout, we have set the Table_Row. The inside the Table_ Row we set the button and every Table_Row contain three buttons.

We declare three Table _Row and inside the Table_Row define nine buttons and set the text of these buttons. The top of the button we define a text view and change the background color.

Table_Layout in layout _XML

<Paste the following code>

File:Table_layout.xml.

Following is the main activity that hosts MainActivity.java

Here you can run the application and see the amazing output.

Alt tag Android Linearlayout Tablelayout RelativeLayout Framelayout

Linear layout

Concept: The Linear Layout is the most essential format supervisor given by Android. The linear layout uses anything we want to use horizontal or vertically in an activity. The orientation attributes define the direction. It depends upon the situation. But by _default its orientation is horizontal.

android: layout_weight” attribute has also the ability to assign the weight of each attribute. How to assign the weight we have two way to use this you will complete 1 or 100 to give weight to the view grope.

for example, we work on the layout which contains three buttons. It is depending on the situation which element are display large on the activity we will give maximum weight to the element.

Past the code in main Activity

Note: It depending on the situation to change the orientation.

Linear_Layout _Vertical

The following is the example of liner_layout in which orientation is set vertical. The XML contains three buttons.

<Paste the following code>

File:Linear_layout.xml.

Here run the application and see the output that contains three buttons. The buttons are vertically displayed.

Alt tag Android Linearlayout Tablelayout RelativeLayout Framelayout

Linear_Layout _Horizontal

The linear layout that shows the button in horizontal. To run the application and see the output.

Alt tag Android Linearlayout Tablelayout RelativeLayout Framelayout

Relative layout

The Relative layout displays the child view in the relative position. The relative view arranges the view that is relative to the parent or child view. The child view specifies the layout attribute to get aligned.

Utilizing RelativeLayout you can adjust two components by right outskirt or make one behind another focused on the screen focused left or center.

As a matter, of course, all child sees are drawn at the upper left of the design. So you should characterize the situation of each view utilizing the different format in a Relative Layout.

Respect to the Parent Attribute  Description
android:layout_alignParentBottom The bottom edge of this view matches the bottom edge of the parent It works with two way true or false similar to Boolean.
android:layout_alignParentTop This means that child view position of top match the position of the parent of the top. It works with two way “True” or “False” similar to Boolean.
android:layout_alignParentLeft The position of the child at left edge matches the parent of the left edge. It works with two way “True” or “False” similar to Boolean.
android:layout_alignParentRight The right edge of this view matches the right edge of the parent. It works with two way “True” or “False” similar to Boolean.
android:layout_centerInParent When it true its place the child in the center or vertically or horizontally. It works with two way “True” or “False” similar to Boolean.
android:layout_centerHorizontal It works with two way “True” or “False” similar to Boolean When it true its place the child in the center vertically.
android:layout_centerVertical It works with two way “True” or “False” similar to Boolean When it true its place the child in center horizontally.
With respect to other View Description
android:layout_alignRigh Adjusts right edge of the new component with the correct edge of the predefined component.
android:layout_alignLeft The left edge of the new component with the left edge of the predefined component.
android:layout_alignTop Adjusts the top of the new component in with the top of the predefined.
android:layout_alignBottom Adjusts the base of the new component in with the base of the predefined.

Relative_Layout

This model will find a way to demonstrate to make your own Android application utilizing Relative Layout. The following is the relative layout with three buttons.

<Paste the following code>

File:relativelayout.xml.

<Paste the following code on MainActivity.java>

The following is the relative layout that contains three buttons run the application see the output.

Alt tag Android Linearlayout Tablelayout RelativeLayout Framelayout

Frame layout

Frame layout one of the most efficient and simple types of layout and used for view control. They are useful when only one item is viewable on the screen. Frame Layout is intended to shut out a region on the screen to show a single thing.

The FrameLayout ought to be utilized to hold a single thing see since it tends to be hard to sort out kid sees in a way that is versatile to various screen sizes without the kids covering one another.

Frame layout is the ordinary design of decision when you need to cover view.
The effectiveness of a frame on it a decent for screens containing few views controls home screens diversion screens with a solitary canvas. With other great design composes like Table layout relative layout, and linear layout available to you.

android:layout_gravity attribute: You can be that as it may, add numerous kids to a FrameLayout and control their situation inside the FrameLayout by doling out gravity to every child, utilizing the android:layout_gravity property.

 Attribute Explanation
android:measureAllChildren This property is defined to measure the state where they children visible or invisible. This Boolean type “True” or “false”
android:foregroundGravity “Defines the gravity to apply to the foreground drawable”
android: id _id is uniquely identified in Layout.

This model will find a way to demonstrate to make your own Android application utilizing frame Layout. Suppose we have a casing design that is measured to control the whole screen  layout_width and layout_height ascribes are both set to match_parent. We could then add the two ImageView. The ImageView is pasting into the drawable folder.

Create a new Frame_Layout
>Right click> the ->layout folder-> select ->New option->and ->click ><-layout resource folder-> and<create a frame layout>
<Paste the following code>

File:frame_layout.xml.

<Paste the following code on an activity that hosts the layout>

Typecast image view that had used in Frame_layout. In the base of the _id attribute of the image we use if condition and set visible of the layout.            

Run the application and see the output.

Alt tag Android Linearlayout Tablelayout RelativeLayout Framelayout

When you swap the image the next View appears which is green and click on it a toast message is shown on that View.

Alt tag Android Linearlayout Tablelayout RelativeLayout Framelayout

Android application UI is characterized utilizing designs and Frame layout are one of the least complex and most effective design composes accessible. The kid control of an edge format is attracted with respect to the upper left-hand corner of the design. If the multiple children appear on the frame layout than the last view show on the top.

Conclusion

Here is complete layout detail in which I explain Android Linearlayout Tablelayout RelativeLayout Framelayout. You will understand the concept of each layout and apply your activity. for More Detail of android layout.