Android Studio All Details

Android: Widget

TextView: In android, TextView is a user interface control that is used to set and display the text to the user based on our requirements. The TextView control will act as like label control and it won’t allow users to edit the text.

In android, we can create a TextView control in two ways either in XML layout file or create it in Activity file programmatically.

Example 01: Create a TextView in Layout File

<?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/textView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:text="Welcome to Learning Tech Media"
        android:textColor="#86AD33"
        android:textSize="20dp"
        android:textStyle="bold" />
</LinearLayout>

Example 02: Create a TextView in Activity File

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        LinearLayout linearLayout = (LinearLayout) findViewById(R.id.linearlayout);
        TextView textView = new TextView(this);
        textView.setText("Welcome to Learning Tech Media");
        linearLayout.addView(textView);
    }
}

Button: Android Buttons are GUI components that the users can click upon to either go to the next screen, confirm an option/trigger any event created by you, the Android Developer.

The android.widget.Button is a subclass of Android TextView.

Example : Creating Button in Layout

We can define the Button widget in our layout file in Android Studio in the following way.

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"

xmlns:tools="https://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

android:gravity="center"

tools:context="com.journaldev.androidbutton.MainActivity">

<Button

android:id="@+id/button"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="DEFAULT BUTTON"

android:onClick="clickMe"/>

</LinearLayout>

In the above code, we’ve wrapped our Button widget inside a LinearLayout
The id represents the unique identifier.
The onClick attribute requires the method name as the value. This method name should be defined in the corresponding activity of the layout.
It’ll get triggered when the button is clicked.
Setting android:background as a color would remove the selection animation from the button.
We can set an image inside the button alongside the text by using the attribute android:drawableLeft to set the image to the left of the text.

Our MainActivity.java class looks like this:

package com.journaldev.androidbutton;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.view.View;

import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

}

public void clickMe(View view)

{

Toast.makeText(getApplicationContext(),"Button is clicked",Toast.LENGTH_LONG).show();

}

On clicking the button, a toast notification would be displayed onto the screen.

Toggle Button: A toggle button allows the user to change a setting between two states.

You can add a basic toggle button to your layout with the ToggleButton object. Android 4.0 (API level 14) introduces another kind of toggle button called a switch that provides a slider control, which you can add with a Switch object. SwitchCompat is a version of the Switch widget which runs on devices back to API 7.

To detect when the user activates the button or switch, create an CompoundButton.OnCheckedChangeListener object and assign it to the button by calling setOnCheckedChangeListener().

Example:

ToggleButton toggle = (ToggleButton) findViewById(R.id.togglebutton);
toggle.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
if (isChecked) {
// The toggle is enabled
} else {
// The toggle is disabled
}
}
});

Checkbox: A checkbox is a specific type of two-states button that can be either checked or unchecked.

Example:

public class MyActivity extends Activity {
protected void onCreate(Bundle icicle) {
super.onCreate(icicle);

setContentView(R.layout.content_layout_id);

final CheckBox checkBox = (CheckBox) findViewById(R.id.checkbox_id);
if (checkBox.isChecked()) {
checkBox.setChecked(false);
}
}
}

Radio Button: Radio button allow the user to select one option from a set.

Example:

When the user selects one of the radio buttons, the corresponding RadioButton object receives an on-click event.

To define the click event handler for a button, add the android:onClick attribute to the <RadioButton> element in your XML layout. The value for this attribute must be the name of the method you want to call in response to a click event. The Activity hosting the layout must then implement the corresponding method.

<?xml version="1.0" encoding="utf-8"?>
<RadioGroup xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RadioButton android:id="@+id/radio_pirates"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/pirates"
android:onClick="onRadioButtonClicked"/>
<RadioButton android:id="@+id/radio_ninjas"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/ninjas"
android:onClick="onRadioButtonClicked"/>
</RadioGroup>

Within the Activity that hosts this layout, the following method handles the click event for both radio buttons:

public void onRadioButtonClicked(View view) {
// Is the button now checked?
boolean checked = ((RadioButton) view).isChecked();

// Check which radio button was clicked
switch(view.getId()) {
case R.id.radio_pirates:
if (checked)
// Pirates are the best
break;
case R.id.radio_ninjas:
if (checked)
// Ninjas rule
break;
}
}

The method you declare in the android:onClick attribute must have a signature exactly as shown above.

Checked TextView: In Android, CheckedTextView is an extension of normal TextView that supports the checkable interface and displays it. It has a checkbox along with some text.

Example:

Basic code in XML

<CheckedTextView

android:id="@+id/simpleCheckedTextView"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:checked="true"

android:gravity="center"

android:checkMark="@drawable/checked"

android:text="Checked Text View" />

Spinner: Spinner allows you to select an item from a drop-down menu.

Example:

Basic code in XML

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:padding="10dip"

android:layout_width="fill_parent"

android:layout_height="wrap_content">

<TextView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_marginTop="10dip"

android:text="Category:"

android:layout_marginBottom="5dp"/>

<Spinner

android:id="@+id/spinner"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:prompt="@string/spinner_title"/>

</LinearLayout>

ProgressBar : In android, ProgressBar is a user interface control that is used to indicate the progress of an operation. For example, downloading a file, uploading a file.

Example:

Basic code in XML

Android ProgressBar with Determinate Mode

Generally, we use the Determinate progress mode in progress bar when we want to show the quantity of progress has occurred. For example, the percentage of file downloaded, number of records inserted into a database, etc.

Android ProgressBar with Indeterminate Mode

Generally, we use the Indeterminate progress mode in progress bar when we don’t know how long an operation will take or how much work has done.

SeekBar: SeekBar is an extension of ProgressBar control with a draggable thumb. The SeekBar allows users to touch the thumb and drag left or right to set the current progress levels.

Example:

Basic code in XML

Android SeekBar with Determinate Mode

Generally, we use the Determinate progress mode in seekbar when we want to show the quantity of progress has occurred. For example, the percentage of a file downloaded, number of records inserted into a database, etc.

Android SeekBar with Indeterminate Mode

Generally, we use the Indeterminate progress mode in SeekBar when we don’t know how long an operation will take or how much work has done.

QuickContactBadge: The QuickContactBadge view provides instant access to a contact's details, as well as a fast way of communicating with the contact. Users don't have to look up a contact, find and copy information, and then paste it into the appropriate app. Instead, they can click on the QuickContactBadge, choose the communication method they want to use, and send the information for that method directly to the appropriate app.

Example:

Basic code in XML

RatingBar: RatingBar is a UI control that is used to get the rating from the user. The RatingBar is an extension of SeekBar and ProgressBar that shows a rating in stars and it allows users to set the rating value by touch or click on the stars.

The android RatingBar will always return a rating value as a floating-point number such as 1.0, 2.0, 2.5, 3.0, 3.5, etc.

Example:

Create Android RatingBar in XML Layout File

In android, we can create RatingBar in XML layout file using <RatingBar> element with different attributes like as shown below.

Get Android RatingBar Value

In android, by using RatingBar methods (getNumStars(), getRating()) we can get the number of stars and the rating value which was selected.

Following is the code snippet to get the rating details from RatingBar in android applications.

int noofstars = rBar.getNumStars();
float getrating = rBar.getRating();
tView.setText("Rating: "+getrating+"/"+noofstars);

Switch: Switch is a two-state toggle switch widget that can select between two options. It is used to display checked and unchecked state of a button providing slider control to user. Switch is a subclass of CompoundButton. It is basically an off/on button which indicate the current state of Switch. It is commonly used in selecting on/off in Sound, Bluetooth, WiFi etc.

Example:

Switch code in XML:

<Switch

android:id="@+id/simpleSwitch"

android:layout_width="wrap_content"

android:layout_height="wrap_content"/>

Space: Space is a lightweight View subclass that may be used to create gaps between components in general purpose layouts.

Example:

public Space (Context context,

AttributeSet attrs,

int defStyleAttr,

int defStyleRes)

Android: Text Fields (Edit Text)

Plain Text: Plaintext is nothing but the EditText. It has changed the name in Android studio but if you check into Design view you will get to know that it still has name of EditText only.

Example:

Basic code in XML

<EditText

android:id="@+id/plain_text_input"

android:layout_height="wrap_content"

android:layout_width="match_parent"

android:inputType="text"/>

Password: In Android, you can use “android.widget.EditText“, with inputType="textPassword" to render a password component.

Example:

Basic code in XML

<?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:paddingLeft="20dp"
    android:paddingRight="20dp"
    android:orientation="vertical" >
    <EditText
        android:id="@+id/txtTo"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="To"/>
    <EditText
        android:id="@+id/txtSub"
      android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Subject"/>
    <EditText
        android:id="@+id/txtMsg"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="top"
        android:hint="Message"/>
    <Button
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:text="Send"
        android:id="@+id/btnSend"/>
</LinearLayout>

Now open our main activity file MainActivity.java from

\src\main\java\com.ltm.sendmailexample path and write the code like as shown below :

MainActivity.java

package com.ltm.sendmailexample;
import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;

public class MainActivity extends AppCompatActivity {

    private EditText eTo;
    private EditText eSubject;
    private EditText eMsg;
    private Button btn;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        eTo = (EditText)findViewById(R.id.txtTo);
        eSubject = (EditText)findViewById(R.id.txtSub);
        eMsg = (EditText)findViewById(R.id.txtMsg);
        btn = (Button)findViewById(R.id.btnSend);
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent it = new Intent(Intent.ACTION_SEND);
                it.putExtra(Intent.EXTRA_EMAIL, new String[]{eTo.getText().toString()});
                it.putExtra(Intent.EXTRA_SUBJECT,eSubject.getText().toString());
                it.putExtra(Intent.EXTRA_TEXT,eMsg.getText());
                it.setType("message/rfc822");
                startActivity(Intent.createChooser(it,"Choose Mail App"));
            }
        });
    }
}

Phone: It's a text field which let users enter and edit text for validating and specifying phone numbers or contacts.

Example:

<EditText

android:id="@+id/editTextId"

android:inputType="phone"

android:digits="0123456789+"

/>

Postal Address: In android, It's a text field which represents a postal address, e.g. for postal delivery or payments addresses.

Example:

activity_main.xml (XML Layout)

01.<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

02.xmlns:tools="http://schemas.android.com/tools"

03.android:layout_width="match_parent"

04.android:layout_height="match_parent" >

05.

06.<Button

07.android:id="@+id/button1"

08.android:layout_width="wrap_content"

09.android:layout_height="wrap_content"

10.android:layout_alignParentTop="true"

11.android:layout_centerHorizontal="true"

12.android:layout_marginTop="132dp"

13.android:text="Button" />

14.

15.<EditText

16.android:id="@+id/editText1"

17.android:layout_width="wrap_content"

18.android:layout_height="wrap_content"

19.android:layout_alignParentTop="true"

20.android:layout_centerHorizontal="true"

21.android:layout_marginTop="50dp"

22.android:ems="10"

23.android:inputType="textPostalAddress" >

24.

25.<requestFocus />

26.</EditText>

27.

28.</RelativeLayout>

MainActivity.java (Java Code)

01.package com.myapp;

02.

03.import android.os.Bundle;

04.import android.app.Activity;

05.import android.view.Menu;

06.import android.view.View;

07.import android.widget.EditText;

08.import android.widget.Button;

09.import android.widget.Toast;

10.

11.public class MainActivity extends Activity {

12.

13.

14.

15.@Override

16.public void onCreate(Bundle savedInstanceState) {

17.super.onCreate(savedInstanceState);

18.setContentView(R.layout.activity_main);

19.

20.// editText1

21.final EditText editT1 = (EditText)findViewById(R.id.editText1);

22.

23.// button1

24.final Button btn1 = (Button)findViewById(R.id.button1);

25.btn1.setOnClickListener(new View.OnClickListener() {

26.public void onClick(View v) {

27.Toast.makeText(MainActivity.this,

28.String.valueOf("Your Input : " + editT1.getText().toString()),

29.Toast.LENGTH_SHORT).show();

30.}

31.});

32.}

33.

34.

35.@Override

36.public boolean onCreateOptionsMenu(Menu menu) {

37.getMenuInflater().inflate(R.menu.activity_main, menu);

38.return true;

39.}

40.

41.}

Multiline Text: EditTexts in Android Programming extends android.widget.TextView and so are multi-lined by default.

You can make your EditTexts multi-line by added certain attributes to the EditTexts View.

Example: Basic code in XML

<EditText

android:id="@+id/editText1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:lines="10" android:minLines="5"

android:gravity="top|left"

android:maxLines="15"

Date: It is used to open Calendar on Clicking the EditText

Example :

(Java code)

SimpleDateFormat df = new SimpleDateFormat("dd-MM-YYYY");

java.util.Date myDate; myDate = df.parse(editText1.getText().toString());

String myText = myDate.getDay() + "-" + myDate.getMonth() + "-" + myDate.getYear() + "abcd";

(XML code)

<EditText

android:id="@+id/editText1"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:ems="10"

android:inputType="date"

/>

Number: It is used to to display a keyboard that has numbers visible, no other characters.

Example:

XML code:

<EditText

android:id="@+id/editText1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentTop="true"

android:layout_centerHorizontal="true"

android:layout_marginTop="52dp"

android:ems="10"

android:inputType="numberSigned"

Auto Complete TextView: A AutoCompleteTextView is a view that is similar to EditText, except that it shows a list of completion suggestions automatically while the user is typing.

Example: Basic code in XML

<AutoCompleteTextView

android:id="@+id/autoCompleteTextView1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignLeft="@+id/textView2"

android:layout_below="@+id/textView2"

android:layout_marginTop="54dp"

android:ems="10"

Android Layouts

Constraint Layout: A Constraint Layout is an android view group which allows you to position and size widgets in a flexible way.

Example: Basic code in XML

<androidx.constraintlayout.widget.ConstraintLayout >

<Button

android:id="@+id/button"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent/>

</ConstraintLayout>

Grid Layout: A layout that places its children in a rectangular grid.

Example: Basic code in XML

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
</GridLayout>

Frame Layout: Frame Layout is designed to block out an area on the screen to display a single item.

Example:

Following is the content of the modified main activity file src/com.example.demo/MainActivity.java. This file can include each of the fundamental lifecycle methods.

package com.example.demo;

import android.os.Bundle;

import android.app.Activity;

public class MainActivity extends Activity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

}

Following will be the content of res/layout/activity_main.xml file –

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent">

<ImageView

android:src="@drawable/ic_launcher"

android:scaleType="fitCenter"

android:layout_height="250px"

android:layout_width="250px"/>

<TextView

android:text="Frame Demo"

android:textSize="30px"

android:textStyle="bold"

android:layout_height="fill_parent"

android:layout_width="fill_parent"

android:gravity="center"/>

</FrameLayout>

Following will be the content of res/values/strings.xml to define two new constants –

<?xml version="1.0" encoding="utf-8"?>

<string name="action_settings">Settings</string>

</resources>

Linear Layout: Android Linear Layout is a view group that aligns all children in either vertically or horizontally.

Example:

Following is the content of the modified main activity file src/com.example.demo/MainActivity.java. This file can include each of the fundamental lifecycle methods.

package com.example.demo;

import android.os.Bundle;

import android.app.Activity;

public class MainActivity extends Activity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

}

Following will be the content of res/layout/activity_main.xml file –

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="vertical" >

<Button android:id="@+id/btnStartService"

android:layout_width="270dp"

android:layout_height="wrap_content"

android:text="start_service"/>

<Button android:id="@+id/btnPauseService"

android:layout_width="270dp"

android:layout_height="wrap_content"

android:text="pause_service"/>

<Button android:id="@+id/btnStopService"

android:layout_width="270dp"

android:layout_height="wrap_content"

android:text="stop_service"/>

</LinearLayout>

Following will be the content of res/values/strings.xml to define two new constants –

<?xml version="1.0" encoding="utf-8"?>

<string name="app_name">Hello World</string>

<string name="action_settings">Settings</string>

</resources>

Relative Layout: RelativeLayout is a view group that displays child views in relative positions. The position of each view can be specified as relative to sibling elements (such as to the left-of or below another view) or in positions relative to the parent RelativeLayout area (such as aligned to the bottom, left or center).

Example: Basic code in XML

<?xml version="1.0" encoding="utf-8"?>

</RelativeLayout>

Table Layout: Android TableLayout going to be arranged groups of views into rows and columns. You will use the <TableRow> element to build a row in the table. Each row has zero or more cells; each cell can hold one View object.

Example:

Following is the content of the modified main activity file src/com.example.demo/MainActivity.java. This file can include each of the fundamental lifecycle methods.

package com.example.demo;

import android.os.Bundle;

import android.app.Activity;

import android.view.Menu;

public class MainActivity extends Activity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

}

Following will be the content of res/layout/activity_main.xml file –

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent">

<TableRow

android:layout_width="fill_parent"

android:layout_height="fill_parent">

<TextView

android:text="Time"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_column="1" />

<TextClock

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/textClock"

android:layout_column="2" />

</TableRow>

<TextView

android:text="First Name"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_column="1" />

<EditText

android:width="200px"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

</TableRow>

<TextView

android:text="Last Name"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_column="1" />

<EditText

android:width="100px"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

</TableRow>

<TableRow

android:layout_width="fill_parent"

android:layout_height="fill_parent">

<RatingBar

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/ratingBar"

android:layout_column="2" />

</TableRow>

<TableRow

android:layout_width="fill_parent"

android:layout_height="fill_parent"/>

<TableRow

android:layout_width="fill_parent"

android:layout_height="fill_parent">

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Submit"

android:id="@+id/button"

android:layout_column="2" />

</TableRow>

</TableLayout>

Following will be the content of res/values/strings.xml to define two new constants –

<?xml version="1.0" encoding="utf-8"?>

<string name="app_name">HelloWorld</string>

<string name="action_settings">Settings</string>

</resources>

Fragment: A Fragment represents a behavior or a portion of user interface in a FragmentActivity.

Example:

For example, here's a subclass of Fragment that loads a layout from the example_fragment.xml file:

public static class ExampleFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.example_fragment, container, false);
}
}

Android: Containers

Radio Group: In android, Radio Group is used to group one or more radio buttons into separate groups based on our requirements.

Example: Basic code in XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent">
<RadioGroup
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <RadioButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Java"/>

</RadioGroup>
</RelativeLayout>

List View: Android ListView is a view which contains the group of items and displays in a scrollable list. ListView is implemented by importing android.widget.ListView class. ListView is a default scrollable which does not use other scroll view.

Example: Basic code in XML

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="listview.example.com.listview.MainActivity">
<ListView
android:id="@+id/listView"
android:layout_width="match_parent"
android:layout_height="fill_parent"
/>
</android.support.constraint.ConstraintLayout>

Grid View: In android, Grid View is a ViewGroup that is used to display items in a two-dimensional, scrollable grid and grid items are automatically inserted to the gridview layout using a list adapter.

Example: Basic code in XML

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/gridview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnWidth="110dp"
    android:numColumns="auto_fit"
    android:verticalSpacing="10dp"
    android:horizontalSpacing="10dp"
    android:stretchMode="columnWidth"
    android:gravity="center" />

Scroll View: In android, ScrollView is a kind of layout that is useful to add vertical or horizontal scroll bars to the content which is larger than the actual size of layouts such as linear layout, relative layout, frame layout, etc.

Example: Basic code in XML

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fillViewport="false">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView android:id="@+id/loginscrn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="80dp"
        android:text="ScrollView"
        android:textSize="25dp"
        android:textStyle="bold"
        android:layout_gravity="center"/>
    <TextView android:id="@+id/fstTxt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="Welcome to Tutlane"
        android:layout_gravity="center"/>
    <Button android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="60dp"
        android:text="Button One" />
    <Button android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="60dp"
        android:text="Button Two" />
    <Button android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="60dp"
        android:text="Button Three" />
    <Button android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="60dp"
        android:text="Button Four" />
    <Button android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="60dp"
        android:text="Button Five" />
    <Button android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="60dp"
        android:text="Button Six" />
    <Button android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="60dp"
        android:text="Button Seven" />
    <Button android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="60dp"
        android:text="Button Eight" />
    <Button android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="60dp"
        android:text="Button Nine" />
</LinearLayout>
</ScrollView>

Tab Host: In Android, TabHost is a Container for tabbed window view. This object holds two children one is set of tab labels that the user clicks to select a specific tab and other is a FrameLayout object that displays the content of that page.

Whenever we need to enter or display a lot of information in one activity. A simple and effective method is to use tabs in your interface form which is done using TabHost in Android.

Example: Basic code in XML

<?xml version="1.0" encoding="UTF-8"?>

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@android:id/tabhost"

android:layout_width="fill_parent"

android:layout_height="fill_parent">

<LinearLayout

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="vertical">

<FrameLayout

android:id="@android:id/tabcontent"

android:layout_width="fill_parent"

android:layout_height="0dip"

android:layout_weight="1" />

<TabWidget

android:id="@android:id/tabs"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_marginBottom="-4dp"

android:layout_weight="0" />

</LinearLayout>

</TabHost>

Tab Host: WebView is a view that display web pages inside your application. You can also specify HTML string and can show it inside your application using WebView. WebView makes turns your application to a web application.

Example: Basic code in XML

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin"

tools:context=".MainActivity">

<WebView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/webView"

android:layout_below="@+id/button"

android:layout_alignParentLeft="true"

android:layout_alignParentStart="true"

android:layout_alignParentRight="true"

android:layout_alignParentEnd="true"

android:layout_alignParentBottom="true"

</RelativeLayout>

Search View: In Android, SearchView widget provide search user interface where users can enter a search query and then submit a request to search provider.

Example: Basic code in XML

<SearchView

android:id="@+id/simpleSearchView"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

Android: Images & Media

Image Button: In Android, ImageButton is used to display a normal button with a custom image in a button.

Example: Basic code in XML

<ImageButton

android:id="@+id/simpleImageButton"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:src="@drawable/home" />

Image View: In Android, ImageView class is used to display an image file in application.

Example: Basic code in XML

<ImageView

android:id="@+id/simpleImageView"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:src="@drawable/picture" />

Video View: In Android, VideoView is used to display a video file. It can load images from various sources (such as content providers or resources) taking care of computing its measurement from the video so that it can be used for any layout manager, providing display options such as scaling and tinting.

Example: Basic code in XML

<VideoView

android:id="@+id/simpleVideoView"

android:layout_width="fill_parent"

android:layout_height="fill_parent" />

Android: Date & Time

Time Picker: In android, TimePicker is a widget for selecting the time of day, in either 24-hour or AM/PM mode.

Example: Basic code in XML

Date Picker: In android, DatePicker is a control that will allow users to select the date by a day, month and year in our application user interface.

Example: Basic code in XML

Calender View: In Android, Calendar View widget was added in API level 11(Android version 3.0) which means this view is only supported in the device that are running on Android 3.0 and higher version. It is used for displaying and selecting dates.

Example: Basic code in XML

<CalendarView

android:id="@+id/simpleCalendarView"

android:layout_width="fill_parent"

android:layout_height="fill_parent" />

Chronometer: In Android, Chronometer is a class that implements a simple timer. Chronometer is a subclass of TextView. This class helps us to add a timer in our app.

Example: Basic code in XML

<Chronometer

android:id="@+id/simpleChronometer"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

Text Clock: In android, TextClock is a UI control that is used to show the current date or time as a formatted string.

Example : Basic code in XML

Android: Transitions

Image Switcher: In android, ImageSwitcher is a specialized view switcher that will provide a smooth transition animation effect to the images while switching from one image to another.

Example: Basic code in XML

Adapter View Flipper: In Android, AdapterViewFlipper is same as ViewFlipper that are used for switching between views. It is an element of transition widget which helps us to add transitions on the views.

Example: Basic code in XML

<AdapterViewFlipper

android:id="@+id/simpleAdapterViewFlipper"

android:layout_width="match_parent"

android:layout_height="wrap_content" >

</AdapterViewFlipper >

Stack View: StackView helps in arranging items in the form of stacked cards, where the front item can be flipped to bring the item behind it to the front. In addition to images, you can stack objects composed of text and other data, too.

Example: Basic code in XML

Text Switcher: In Android, TextSwitcher is a specialized ViewSwitcher that contains only children of type TextView. TextSwitcher is available in Android from version Android 1.6+.

Example: Basic code in XML

<TextSwitcher

android:id="@+id/simpleTextSwitcher"

android:layout_width="match_parent"

android:layout_height="wrap_content"/>

View Animator: In Android, ViewAnimator is a sub class of FrameLayout container that is used for switching between views. It is an element of transition widget which helps us to add transitions on the views (like TextView, ImageView or any layout).

Example: Basic code in XML

<ViewAnimator

android:id="@+id/simpleViewAnimator"

android:layout_width="match_parent"

android:layout_height="wrap_content">

</ViewAnimator>

Android: Advanced

Request Focus: Request focus is used to set automatically keypad function on edittext box so just after activity starts it will automatically select defined Requestfocus editText and open keypad so application user can directly insert data into editText box.

Example: Basic code in XML

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="com.edittextrequestfocus_android_examples.com.MainActivity" >

<EditText android:id="@+id/editText1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentTop="true"

android:layout_centerHorizontal="true"

android:layout_marginTop="160dp"

android:ems="10" android:hint="EditText box 1" />

<EditText android:id="@+id/editText2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignLeft="@+id/editText1"

android:layout_below="@+id/editText1"

android:layout_marginTop="16dp"

android:ems="10" android:hint="EditText box 2" >

<requestFocus />

</EditText>

<EditText

android:id="@+id/editText3"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_below="@+id/editText2"

android:layout_centerHorizontal="true"

android:layout_marginTop="16dp"

android:ems="10" android:hint="EditText box 3">

</EditText>

</RelativeLayout>

View Stub: In Android, ViewStub is zero sized invisible View that can be used to lazily inflate layout resource at runtime.

Example: Basic code in XML

<ViewStub

android:id="@+id/simpleViewStub"

android:inflatedId="@+id/subView"

android:layout="@layout/mySubView"

android:layout_width="fill_parent"

android:layout_height="200dp" />

Texture View: A TextureView can be used to display a content stream. Such a content stream can for instance be a video or an OpenGL scene.

Example: Basic code in XML

<TextureView

android:id="@+id/textureView1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentTop="true"

android:layout_centerHorizontal="true" />

Number Picker: In your application, if you need to provide an option of allowing user to select a number from a pre-defined range of numbers, then you’ll have to use android NumberPicker widget.

Example: Basic code in XML

<NumberPicker

android:id="@+id/numberPicker"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginBottom="8dp"

android:layout_marginEnd="8dp"

android:layout_marginStart="8dp"

android:layout_marginTop="8dp"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toBottomOf="@+id/textView" />

Android: Custom-Google

AdView: public final class AdView extends ViewGroup.The View to display banner ads.

Example: Basic code in XML

<com.google.android.gms.ads.AdView
android:id="@+id/ad_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
app:adSize="BANNER"
app:adUnitId="@string/banner_ad_unit_id"
/>

MapFragment: public class MapFragment extends Fragment. A Map component in an app. This fragment is the simplest way to place a map in an application.

Example: Basic code in XML

<fragment

class="com.google.android.gms.maps.MapFragment"

android:layout_width="match_parent"

android:layout_height="match_parent"

MapView: public class MapView extends FrameLayout.

A View which displays a map (with data obtained from the Google Maps service). When focused, it will capture keypresses and touch gestures to move the map.

Android: Custom-Design

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

AppBar Layout: AppBarLayout is a vertical LinearLayout which implements many of the features of material designs app bar concept, namely scrolling gestures.

Example:

<androidx.coordinatorlayout.widget.CoordinatorLayout

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

android:layout_width="match_parent"

android:layout_height="match_parent">

<androidx.core.widget.NestedScrollView

android:layout_width="match_parent"

android:layout_height="match_parent"

app:layout_behavior="@string/appbar_scrolling_view_behavior">

</androidx.core.widget.NestedScrollView>

<com.google.android.material.appbar.AppBarLayout

android:layout_height="wrap_content"

android:layout_width="match_parent">

<androidx.appcompat.widget.Toolbar

...

app:layout_scrollFlags="scroll|enterAlways"/>

<com.google.android.material.tabs.TabLayout

...

app:layout_scrollFlags="scroll|enterAlways"/>

</com.google.android.material.appbar.AppBarLayout>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Tab Layout: TabLayout provides a horizontal layout to display tabs.

Example:

<androidx.viewpager.widget.ViewPager

android:layout_width="match_parent"

android:layout_height="match_parent">

<com.google.android.material.tabs.TabLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_gravity="top" />

</androidx.viewpager.widget.ViewPager>

Nested Scroll View: NestedScrollView is just like ScrollView, but it supports acting as both a nested scrolling parent and child on both new and old versions of Android.

Example: Basic code in XML

<androidx.core.widget.NestedScrollView

android:layout_width="match_parent"

android:layout_height="wrap_content">

<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="vertical">

<TextView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="@string/random_text_1" />

<Button

android:layout_width="match_parent"

android:layout_height="160dp"

android:background="@color/colorPrimary"

android:text="Nested Scroll View "

android:textColor="#ffffff"

android:textSize="32dp" />

<TextView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="@string/random_text_2" />

</LinearLayout>

</androidx.core.widget.NestedScrollView>

Floating Action Button: A floating action button (FAB) is a circular button that triggers the primary action in your app's UI.

Example: Basic code in XML

<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:src="@drawable/ic_my_icon"
android:contentDescription="@string/submit"
android:layout_margin="16dp" />

Text Input Layout: Android TextInputLayout extends LinearLayout. The primary use of a TextInputLayout is to act as a wrapper for EditText(or its descendant) and enable floating hint animations.

Example: Basic code in XML

<android.support.design.widget.TextInputEditText

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_margin="@dimen/activity_horizontal_margin"

android:hint="TextInputEditText" />

Android: Custom-Design

Card View: In Android, CardView is another main element that can represent the information in a card manner with a drop shadow called elevation and corner radius which looks consistent across the platform. CardView was introduced in Material Design in API level 21 (Android 5.0 i.e Lollipop).

Example: Basic code in XML

<android.support.v7.widget.CardView

xmlns:card_view="http://schemas.android.com/apk/res-auto"

android:layout_width="match_parent"

android:layout_height="wrap_content">

</android.support.v7.widget.CardView>

Recycler View: The RecyclerView class extends the ViewGroup class and implements ScrollingView interface.

Example: Basic code in XML

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.RecyclerView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
android:id="@+id/recyclerView"
tools:context="example.javatpoint.com.recyclerviewlist.MainActivity">
</android.support.v7.widget.RecyclerView>

Tool Bar: In Android Toolbar is similar to an ActionBar(now called as App Bars). Toolbar is a Viewgroup that can be placed at anywhere in the Layout. We can easily replace an ActionBar with Toolbar.

Example: Basic code in XML

<android.support.v7.widget.Toolbar

android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:background="@color/colorPrimary" />

-----------------------------------------------------------------