Layout In Android And Its types : Tutorial
Last Updated on: 27th Dec 2024 17:58:22 PM
Layout is used to define the structure of user Interface for an app or activity . It can hold UI element and provide possition which will apear on the screen to the user .
User Interface is designed with the help of Layout and all the UI element.which is build with a hierarchy of View and ViewGroup objects.
Generally, the android apps will contain one or more activities and each activity is one screen of the app. The activities will contain multiple UI components and those UI components are the instances of View and ViewGroup subclasses.
The View is a base class for all UI components in android and it is used to create an interactive UI components such as TextView, EditText, Checkbox, Radio Button, etc. and it responsible for event handling and drawing.
The ViewGroup is a subclass of View and it will act as a base class for layouts and layouts parameters. The ViewGroup will provide an invisible containers to hold other Views or ViewGroups and to define the layout properties.
Following The type of android layout which is Most commonly used in Android:
1.Lenear Layout
2.Relative Layout
3.Constrant layout
4.Appbar Layout
5.Persant Relative Layout
6.Cordinator Layout
7.Tab Layout
8.Fram Layout
9.Table Layout
10.Grid Layout
In android, we can define a layouts in two ways, those are
- Declare UI elements in XML :
- Instantiate layout elements at runtime
The Android framework provides you the flexibility to use either or both of these methods to build your app's UI
Declare UI elements in XML :
In this we define the Layout by using the View and ViewGroups directly in the XML files.Each layout file must contain exactly one root element, which must be a View or ViewGroup object. Once you've defined the root element, you can add additional layout objects or widgets as child elements to gradually build a View hierarchy that defines your layout.
below is the example of defining an XML layout (activity_main.xml) that uses a vertical LinearLayout to hold a TextView and a Button :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello, I am a TextView" />
<Button android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello, I am a Button" />
</LinearLayout>
After you've declared your layout in XML in your Android project's res/layout/ directory, now filewill properly compile.
Load XML Resource File from an Activity
When you complete the creation of Layout Resource file . then we need to need to load the XML layout resource from our activity onCreate() callback method implementation. Do so by calling setContentView()R.layout.layout_file_name. For example, if your XML layout is activity_main.xml, you would load it for your Activity like so:
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main_layout);
}
The onCreate() callback method in your Activity is called by the Android framework when your Activity is launched .
Instantiate Layout Elements at Runtime
In this technique we define/create our own custom View and ViewGroup object programmatically in the Java source file according to our required layout.that will be instantiate layout elements at runtime .
Following is the example of creating a layout using LinearLayout to hold a TextView, EditText and Button in an activity using custom View and ViewGroup objects programmatically.
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
TextView textView1 = new TextView(this);
textView1.setText("Name:");
EditText editText1 = new EditText(this);
editText1.setText("Enter Name");
Button button1 = new Button(this);
button1.setText("Add Name");
LinearLayout linearLayout = new LinearLayout(this);
linearLayout.addView(textView1);
linearLayout.addView(editText1);
linearLayout.addView(button1);
setContentView(linearLayout);
}
}
here addView() is the method that is used to add any View to the UI . this is the programmatically way to create our custom View and ViewGroup object. we can define a layouts based on our requirements in android applications.