Unit- 4

Designing User interface with View

CO4-Use user interface components for

android application development.
 Android UI Controls
 There are number of UI controls provided by Android
that allow you to build the graphical user interface
for your app.
 Following are the commonly used UI or input controls
in android applications.
TextView RadioGroup
EditText ProgressBar
AutoCompleteTextView TimePicker
Button DatePicker
ImageButton SeekBar
ToggleButton AlertDialog
CheckBox Switch
RadioButton RatingBar
 Android UI Controls
The “views” are the building blocks of a U.I design and
composes of almost every basic U.I element like TextViews,
EditTexts, ImageViews etc. This ‘view’ however comes
along with a few properties bundled to them. Some of the
important and are often used to build up a complete
meaningful screen design.

“id”
This is basically the name of the particular view and will be
used to refer that particular view through out the project. It
has to be unique(multiple views referencing to same id will
confuse the compiler).
 “width” and “height”
 As the name of these properties suggest, these

are the dimensions of that particular view. Now

these dimensions can be set using hard-coded
values and it will adopt to them in most layouts,
but its not a very good design as the content
inside them might get cropped or will have
unwanted spaces. Android provides two pre-
defined options to set these dimensions
— “match_parent” and “wrap_content”.
 Android UI Controls

Setting the dimensions to “match_parent” will make them equal

to those of its parent’s dimensions. If there is no parent to that
particular view, it merely sets to the screen’s dimensions (parent
of a view is the U.I element in which it is housed in). And setting it
to “wrap_content” will force the view to adopt its dimensions
according to its content.
 Android UI Controls
 “margin”
 This is the minimum distance that a view has to maintain from
its neighbouring views. Since there are four sides to any view,
the four margins corresponding to them are “margin_left”,
“margin_right”, “margin_top” and “margin_bottom”. If the
same margin is needed to be set on all sides, it can be set
directly through “margin” property.
 Android UI Controls
 “padding”
 The distance between the view’s outline and its content.
Again similar to the “margin” property, “padding” too
has “padding_left”, “padding_right”, “padding_top”,
“padding_bottom” and the common padding to all sides can
be set through “padding” property.

 Android UI Controls
1. TextView:

A TextView is a UI component in Android development
that's used to display text to the user on the screen. You can set the
text that you want to display in the TextView, and it will show that
text to the user in your app's interface. Additionally, you can
customize the appearance of the text such as its size, color, font,
alignment, and more using various properties and methods
provided by the TextView class.
Property Example Value Description
Text content displayed in the
android:text "Hello, World!"
TextView.
android:textSize "16sp" Size of the text.
android:textColor "#000000" (black) Color of the text.
Style of the text (normal, bold,
android:textStyle "bold"
italic).

Text alignment within the

android:gravity "center"
TextView (center, start, end).

Width of the TextView

android:layout_width "wrap_content" (wrap_content, match_parent,
etc).
android:layout_height "wrap_content" Height of the TextView.
Gravity of the TextView within
android:layout_gravity "center"
its parent layout.
Padding around the text inside
android:padding "8dp"
the TextView.
Background color or drawable
android:background "#CCCCCC" (light gray)
for the TextView.
Drawable to be displayed to
android:drawableLeft "@drawable/ic_icon"
the left of the text.
"text" or "number" or Input type if the TextView is
android:inputType
"password" editable.
 Android UI Controls
 2. EditText:
 EditText is a predefined subclass of TextView that
includes rich editing capabilities. It is used to allow the user to
enter or modify the text. While using EditText control in our
android applications, we need to specify the type of data the
text field can accept using inputType attribute.
 <?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" >
<EditText
android:id="@+id/txtSub"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Subject"
android:inputType="text"/>
</LinearLayout>
Property Description Possible Values
Hint text displayed when the
android:hint Any string
EditText is empty.
android:inputType Type of input expected. text, number, password, etc.
android:maxLength Maximum length of the input. Integer value
Default text displayed in the
android:text Any string
EditText.
Color values (e.g.,
android:textColor Text color.
#RRGGBB)
android:textSize Text size. Dimension value (e.g., 14sp)

android:hintTextColor Color of the hint text. Color values

Drawable or color resource
android:background Background drawable or color.
identifier
Gravity of the text inside the start, top, end, bottom, center,
android:gravity
EditText. etc.
Dimension value (e.g.,
android:layout_width Width of the EditText.
match_parent)
Dimension value (e.g.,
android:layout_height Height of the EditText.
wrap_content)
android:layout_margin Margin around the EditText. Dimension value
 Android UI Controls
 3. Button:
 Button is a user interface control which is used
to perform an action when the user click or tap on it.

 Create Button in XML Layout File

 <LinearLayout xmlns:android="http://
schemas.android.com/apk/res/android"
android:orientation="vertical"
 android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/submitbutton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=“Submit” />
</LinearLayout>
Property Description Example Values
Text displayed on the "Click me", "Submit",
android:text
button. "Next"
Size of the text on the
android:textSize "12sp", "18sp", "24sp"
button.
Color of the text on the "#FF0000" (Red),
android:textColor
button. "#00FF00" (Green)
"@drawable/
android:background Background of the button. my_button_background
", "#FFFFFF"
"wrap_content",
android:layout_widt
Width of the button. "match_parent",
h
"100dp"
android:layout_heig "wrap_content",
Height of the button.
ht "100dp", "fill_parent"
android:layout_grav Gravity of the button
"center", "start", "end"
ity within its parent layout.
android:layout_mar Margins around the button
"10dp", "5dp"
gin within its parent layout.

android:padding Padding inside the button. "5dp", "10dp"

Sets whether the button is

android:enabled "true", "false"
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<EditText
android:id="@+id/editTextNum1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Enter first number"
android:inputType="number" />

<EditText
android:id="@+id/editTextNum2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Enter second number"
android:inputType="number" />
<Button
android:id="@+id/buttonAdd"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Add" />

<TextView
android:id="@+id/textViewResult"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="24sp"
android:textStyle="bold" />

</LinearLayout>
public class MainActivity extends AppCompatActivity {

private EditText editTextNum1, editTextNum2;

private TextView textViewResult;
Button buttonAdd

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

editTextNum1 = findViewById(R.id.editTextNum1);
editTextNum2 = findViewById(R.id.editTextNum2);
textViewResult = findViewById(R.id.textViewResult);
buttonAdd = findViewById(R.id.buttonAdd);
buttonAdd.setOnClickListener(new
View.OnClickListener() {
@Override
public void onClick(View view) {
int num1 =
Integer.parseInt(editTextNum1.getText().toString());
int num2 =
Integer.parseInt(editTextNum2.getText().toString());
int result = num1 + num2;
textViewResult.setText(String.valueOf(result));
}
});
}
}
 Android UI Controls
 3. Image Button
 Image Button is a user interface control which is used
to display a button with image to perform an action
when user click or tap on it.
 Generally, the Image button in android looks similar
as regular Button and perform the actions same as
regular button but only difference is for image button
we will add an image instead of text.
 Create ImageButton in XML Layout File
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://
schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageButton
android:id="@+id/addBtn"

android:layout_width="wrap_content"

android:layout_height="wrap_content"
android:src="@drawable/
add_icon" />
</LinearLayout>
Property Description Example Values
Sets the image
android:src resource for the @drawable/ic_image
ImageButton.
@color/colorPrimary,
Sets the background
android:background @drawable/backgroun
drawable or color.
d_image
wrap_content,
Defines the width of
android:layout_width match_parent,
the ImageButton.
specific dimension
wrap_content,
android:layout_heigh Defines the height of
match_parent,
t the ImageButton.
specific dimension
Adds padding around
android:padding the content of the Specific dimension
ImageButton.
Provides a description
android:contentDesc "Play Button", "Delete
of the content for
ription Image"
accessibility.
Indicates whether the
android:enabled true, false
button is clickable.
 Android UI Controls
4. Toggle Button
 In android, Toggle Button is a user interface control
which is used to display ON (Checked) or OFF
(Unchecked) states as a button with a light indicator.

 Create ToggleButton in XML Layout File

Property Description Possible Values

Text to be displayed when
android:textOn the ToggleButton is in the String (text content)
ON state.
Text to be displayed when
android:textOff the ToggleButton is in the String (text content)
OFF state.
Determines the initial
android:checked true (ON), false (OFF)
state of the ToggleButton.
Sets the background Reference to a
android:backgrou
drawable or color for the drawable or color
nd
ToggleButton. value
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/mainLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<ToggleButton
android:id="@+id/toggleButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOff="OFF"
android:textOn="ON"
android:layout_marginTop="100dp"
android:layout_centerHorizontal="true" />
</RelativeLayout>
public class MainActivity extends AppCompatActivity {
private ToggleButton toggleButton;
private TextView textView;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

toggleButton = findViewById(R.id.toggleButton);
textView = findViewById(R.id.textView);

toggleButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (toggleButton.isChecked()) {
textView.setText("Toggle button is ON");
} else {
textView.setText("Toggle button is OFF");
}
}
});
}
}
5. Radio Button & Radio
Button Group

 In android, Radio Button is a two states

button that can be either checked or
unchecked and it cannot be unchecked
once it is checked.
 Create RadioButton in XML Layout File
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/andr
oid"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/mainLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<RadioGroup
android:id="@+id/radioGroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="50dp">

<RadioButton
android:id="@+id/radioButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Option 1" />
<RadioButton
android:id="@+id/radioButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Option 2" />

<RadioButton
android:id="@+id/radioButton3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Option 3" />

</RadioGroup>

<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Submit"
android:layout_below="@+id/radioGroup"
android:layout_centerHorizontal="true"
android:layout_marginTop="50dp" />
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="You selected: "
android:textSize="24sp"
android:textColor="#000000"
android:layout_below="@+id/button"
android:layout_centerHorizontal="true"
android:layout_marginTop="50dp" />

</RelativeLayout>
public class MainActivity extends AppCompatActivity {

private RadioGroup radioGroup;

private RadioButton radioButton1, radioButton2,
radioButton3;
private Button button;
private TextView textView;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

radioGroup = findViewById(R.id.radioGroup);
radioButton1 = findViewById(R.id.radioButton1);
radioButton2 = findViewById(R.id.radioButton2);
radioButton3 = findViewById(R.id.radioButton3);
button = findViewById(R.id.button);
textView = findViewById(R.id.textView);
 button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
int selectedId = radioGroup.getCheckedRadioButtonId();

if (selectedId == radioButton1.getId()) {
textView.setText("You selected: Option 1");
} else if (selectedId == radioButton2.getId()) {
textView.setText("You selected: Option 2");
} else if (selectedId == radioButton3.getId()) {
textView.setText("You selected: Option 3");
} else {
textView.setText("Please select an option");
}
}
});
}
}
 Android UI Controls
 6. CheckBox
 Checkbox is a two states button that can

be either checked or unchecked.

 Create CheckBox in XML Layout File
XML FILE
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="16dp">

<CheckBox
android:id="@+id/checkBox1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Checkbox 1"/>

<CheckBox
android:id="@+id/checkBox2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Checkbox 2"/>
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Submit"/>
</LinearLayout>
public class MainActivity extends AppCompatActivity {
CheckBox checkBox1, checkBox2;
Button submitButton;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

// Initialize UI components
checkBox1 = findViewById(R.id.checkBox1);
checkBox2 = findViewById(R.id.checkBox2);
submitButton = findViewById(R.id.button);

// Set up event listener for submit button

submitButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// Check which checkboxes are selected
boolean checkBox1Selected = checkBox1.isChecked();
boolean checkBox2Selected = checkBox2.isChecked();
 // Display a message based on the checkbox
selections
String message = "";
if (checkBox1Selected && checkBox2Selected) {
message = "Both checkboxes selected";
} else if (checkBox1Selected) {
message = "Checkbox 1 selected";
} else if (checkBox2Selected) {
message = "Checkbox 2 selected";
} else {
message = "No checkboxes selected";
}

Toast.makeText(MainActivity.this, message,
Toast.LENGTH_SHORT).show();
}
});
}
DatePicker
DatePicker is a user interface control in Android that allows
the user to select a date

<LinearLayout
xmlns:android="http://schemas.android.com/apk/re
s/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"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Date Picker Demo"
android:textColor="@color/purple_200"
android:textSize="30dp"
android:layout_marginLeft="90dp"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"/>

<DatePicker
android:id="@+id/datePicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:datePickerMode="calendar"
android:layout_gravity="center_horizontal"/>
package com.example.datepickerdemo;
import
androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.DatePicker;
import android.widget.Toast;
import java.util.Calendar;

public class MainActivity extends

AppCompatActivity {
DatePicker datePicker;
Toast toast;
protected void onCreate(Bundle
savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
datePicker = findViewById(R.id.datePicker);
Calendar calendar= Calendar.getInstance();
datePicker.init(calendar.get(Calendar.YEAR),
calendar.get(Calendar.MONTH),
calendar.get(Calendar.DAY_OF_MONTH), new
DatePicker.OnDateChangedListener() {
@Override
public void onDateChanged(DatePicker view, int year, int
monthOfYear, int dayOfMonth) {
if (toast != null)
toast.cancel();
toast= Toast.makeText(MainActivity.this,
datePicker.getDayOfMonth() + "-" + datePicker.getMonth() +
"-" + datePicker.getYear(),Toast.LENGTH_LONG);
toast.show();
}
});
}
}
Time Picker
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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"
android:orientation="vertical"
android:background="@color/purple_200">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Time Picker Demo"
android:textColor="@color/design_default_color_error"
android:textSize="30dp"
android:layout_marginLeft="90dp"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"/>
<TimePicker
android:id="@+id/timePicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:timePickerMode="spinner"

android:layout_gravity="center_horizontal"/
>

</LinearLayout>
package com.example.datepickerdemo;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.TimePicker;
import android.widget.Toast;

import java.util.Calendar;

public class MainActivity extends AppCompatActivity {

TimePicker timePicker;
Toast toast;
@Override
protected void onCreate(Bundle
savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
TimePicker timePicker = findViewById(R.id.timePicker);
timePicker.setIs24HourView(true);
Calendar calendar = Calendar.getInstance();
int hour = calendar.get(Calendar.HOUR_OF_DAY);
int minute = calendar.get(Calendar.MINUTE);
int second = calendar.get(Calendar.SECOND);
timePicker.setCurrentHour(hour);
timePicker.setCurrentMinute(minute);
timePicker.setCurrentSecond(second);
timePicker.setOnTimeChangedListener(new
TimePicker.OnTimeChangedListener() {
@Override
public void onTimeChanged(TimePicker view, int
hourOfDay, int minute, int second) {
if (toast != null) {
toast.cancel();
}
 toast =
Toast.makeText(MainActivity.this,
"Selected time: " + hourOfDay + ":" +
minute + ":" + second,
Toast.LENGTH_SHORT);
toast.show();
}
});
}
}
 Android UI Controls
7. Progress Bar
 ProgressBar is a user interface control which is used
to indicate the progress of an operation.
 A progress bar is a graphical user interface (GUI)
element used to display the progress of a particular
task or process.
 It typically consists of a horizontal bar that fills up
with color as the task progresses towards completion,
and often includes a percentage or text indicating the
progress.
 Progress bars can be found in many applications, such
as file downloads, software installations, and video
rendering.
 <LinearLayout
xmlns:android="http://schemas.android.com/apk/res/an
droid"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="16dp">

 <Button android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="244dp"
android:layout_x="235dp" android:layout_y="327dp"
android:text="stop" />
<Button android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="244dp"
android:layout_x="65dp" android:layout_y="325dp"
android:text="Start" />

<ProgressBar android:id="@+id/progressBar"
style="?android:attr/progressBarStyle"
android:layout_width="211dp"
android:layout_height="wrap_content"
android:layout_x="103dp"
android:layout_y="220dp" />
</AbsoluteLayout>
public class MainActivity extends AppCompatActivity {

private ProgressBar progressBar;

private TextView progressText;
private Button startButton;
private Button stopButton;
private int progressStatus = 0;
private Handler handler = new Handler();

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

progressBar = findViewById(R.id.progressBar);
progressText = findViewById(R.id.progressText);
startButton = findViewById(R.id.startButton);
stopButton = findViewById(R.id.stopButton);
 public class MainActivity extends AppCompatActivity
{
Button b1, b2; ProgressBar p1;
@Override
protected void onCreate(Bundle savedInstanceState)
{ super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
b1=(Button) findViewById(R.id.button);
b2=(Button) findViewById(R.id.button2);
p1=(ProgressBar) findViewById(R.id.progressBar);
b1.setOnClickListener(new View.OnClickListener()
{
@Override
public void onClick(View view)
{
p1.setVisibility(View.VISIBLE);
}
});
b2.setOnClickListener(new
View.OnClickListener()
{ @Override public
void onClick(View view)
{ p1.setVisibility(View.INVISIBLE);
}
});
}
}
stopButton.setOnClickListener(new
View.OnClickListener() {
@Override
public void onClick(View v) {
progressStatus = 0;
progressBar.setProgress(progressStatus);
progressText.setText(progressStatus + "%");
}
});
}
}
 Android UI Controls
1. ListView

In android, ListView is a ViewGroup which is used to display

the list of scrollable of items in multiple rows and the list items
are automatically inserted to the list using an adapter.

Adapter: To fill the data in a ListView we simply use adapters.

List items are automatically inserted to a list using
an Adapter that pulls the content from a source such as an
arraylist, array or database.

<ListView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/simpleListView"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</ListView>
 activity_main.xml
 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schem-
as.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/
tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ListView
android:id="@+id/userlist"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</ListView>
</LinearLayout>
 MainActivity.java
 package com.tutlane.listview;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class MainActivity extends AppCompatActivity {

private ListView mListView;
private ArrayAdapter aAdapter;
private String[] users = { "Suresh Dasari", "Rohini
Alavala", "Trishika Dasari", "Praveen Alavala", "Madav
Sai", "Hamsika Yemineni"};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mListView = (ListView) findViewById(R.id.userlist);
aAdapter = new ArrayAdapter(this, android.R.lay-
out.simple_list_item_1, users);
mListView.setAdapter(aAdapter);
}
}
 Android UI Controls
2. GridView
 In android, Grid View is a ViewGroup which 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.
 Android UI Controls
<?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"
tools:context=".MainActivity">
<GridView
android:id="@+id/grid_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:numColumns="3"
android:horizontalSpacing="10dp"
android:verticalSpacing="10dp"
android:padding="10dp"/>
</RelativeLayout>
public class MainActivity extends AppCompatActivity

{
private GridView gridView;
private String[] items = {"Item 1", "Item 2",
"Item 3", "Item 4", "Item 5"};

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

gridView = findViewById(R.id.grid_view);
ArrayAdapter<String> adapter = new
ArrayAdapter<>(this,
android.R.layout.simple_list_item_1, items);
gridView.setAdapter(adapter);
 gridView.setOnItemClickListener(new
AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?
parent, View view, int position, long id) {
Toast.makeText(MainActivity.this, "Clicked
item: " + items[position],
Toast.LENGTH_SHORT).show();
}
});
}
}
Android UI Controls
3. Scroll View
ScrollView is a view group in Android that allows
its children to be scrolled vertically. It is useful
when you have a lot of content that cannot fit on
the screen at once and you want to allow the
user to scroll through it.
<ScrollView

xmlns:android="http://schemas.android.com/apk/res/and
roid"
android:layout_width="match_parent"
android:layout_height="match_parent">

<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="This is a TextView" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@drawable/my_image" />

<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Enter your name" />

<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Click me" />

</LinearLayout>
</ScrollView>
public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

Button button = findViewById(R.id.button);

EditText editText = findViewById(R.id.editText);

button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
String name = editText.getText().toString();
Toast.makeText(MainActivity.this, "Hello, " + name
+ "!", Toast.LENGTH_SHORT).show();
}
});
}
}