WORKING WITH USER
INTERFACE
MODULE 2 Chapter 5
USING BASIC VIEWS
1. Text View
[Link] View
3. Button
4. Image Button
[Link]
[Link] Button
[Link] bar
8. Auto Complete Text View
[Link]
It used to display text to the user. Its most fundamentals and
commonly used views in Android App Development. The TextView
component can be styled and customized to fit various design
requirements.
Key Features of TextView
1. Display Text: TextView is primarly to display text on
the screen , supporting plain text, formatted text
and styled text.
2. Text Styling: Provides options for text styling,
including setting text color, text size, text style, text
alignment and text appearance.
3. Text Fromatting: uses HTML tags to format text in the
TextView for the inclusion of links, lists and other
formatted content within the text display.
Key Features of TextView
4. Text Accessibility: Text View supports accessibility
features to create apps that are accessible to users with
disabilities by specifying content description .
5. Event Handling: TextView can respond to user interaction
such as clicks and long presses by implementing event
listeners for interactive elements within the text display.
6. Read-Only: By default , text view is read only preventing
users from modifying the displayed text.
7. Auto Linking: TextView can automatically detect web
URL email addresses phone numbers and map addresses
within the text.
Key Features of TextView
8. Ellipsizing: Supports ellipsizing which truncate
text that is too long fit within the view and adds
ellipis(“…”).
Key Attributes of TextView
Attribute Name Description Example Explanation
Android : text Sets the text to be Android:text=“Hell Specifies the Text
displayed in o, World!” content in the
textview TextView
Android:textSize Sets the text to the Android:textSize=“ Defines the size of
text 16sp” the text
Android:textColor Sets the color of Android:textColor Specifies the color
the text =“#FF0000” of the text
Android: textStyle Sets the style of Android:textStyle= Applies a style to
the text “bold” the text such as
bold
Android: Sets the font Android:fontFamil Specifies the font
fontFamiliy family y=“sans-serif” family
Android: ellipsize Controls how thw Android:ellipsize=“ Handles text from
text is truncated end” ‘end’,’start’
Key Attributes of TextView
Attribute Name Description Example Explanation
Android : hint Sets the hint text Android:hint=“Ent Displays the hint or
to be displayed er yout name” placeholder
Android:layout_gr Sets the text in Android:layoutgra Displays the text in
avity center vity=“center” center
Example TextView in Activity Code
TextView myText=findViewById([Link]);
[Link]("WELCOME to ANDROID STUDIO APP");
Take the TextView variable myText (which is already
linked to the TextView in your XML
using findViewById([Link])), and
Change the text displayed on that TextView to the
string WELCOME to ANDROID STUDIO APP at
runtime.
Example TextView
5.2. EditText View
EditText helps in editing and modifying text. The EditText view provide an
input field where users can enter the text. It allows user to input
alphanumeric characters, numbers, symbols and more.
Features of EditText
[Link] Input: Edit Text allows to users and edit text within the view capturing
user generated content.
2. Input Types: Supports various input types such as text , number,
password,email,phones and more.
3. Validation: EditText is used to validate the user input and display error
message.
4. Auto Complete: EditText can provide suggestion and autocomplete
capabilities to enhance the user experience by predicting and completing
text.
Features of Edit Text
5. Customization: it provides customization for text size,
color,background,padding, and other visual attributes.
6. Formatting: it supports text features such as bold italic underline.
7. Error Handling: respond to the user interaction, like clicks and long passes
8. Accessibility: features to ensure apps are accessible to ensure with
disabilities.
Attributes of Edit Text
Attribute Name Description Example Explanation
Android:hint Sets a hint Android:hint=“Enter Displays the hint
your name”
Android:inputType Set a type of input Android:inputType=“t Define the type of
expected extusername” data
Android:ems Sets the Edit Text Android:ems=“10” Specifies the width of
width to a specified edit text
number ems
Android:maxLength Sets a maximum Android:maxLength= Limits the number of
number of character “30” character
Android:singleLine Restricts the edit text Android:singleline=“tr Forces to the single
to single line ue” line
Android:textColorHint Sets the color to the Android:textColorHInt Specifies the color
hint =“#8888888” hint
Example EditText in Activity Code
EditText username = findViewById([Link]);
[Link]("ABC");
EditText passwordEdit = findViewById([Link]);
[Link]("123");
String user = [Link]().toString();
String pssword = [Link]().toString();
Example EditText in Activity Code
String user = [Link]().toString();
username is your EditText object.
getText() gets the current text from that EditText as an editable object.
toString() converts that text to a normal Java String.
The result is stored in the variable user, so user now holds whatever the user
typed in the username box
Output of EditText
5.3. Button
Button is an fundamental UI component in Android Application
Development and its designed to trigger actions when clicked. It specifies
actions like submitting as a form or navigating to another screen or
transforming to any other task.
Features of Button
1. User Interaction: initiates actions within the application.
2. Customization: Supports extensive customization options for text size color
background padding and other visual attributes.
3. Text and Icons: Buttons can display text and icons for versatile design.
4. Event Handling: Respond to user interaction like clicks by implementing
event listen Ener to perform specific action.
5. Accessibility: Supports accessibility features to ensure app are accessible
to users with diabilities.
Attributes of Buttons
Attribute Name Description Example Explanation
Android: text Sets the text to be Android:text=“click
displayed on the me”
button
Android:textColor Sets the color Android:textColor=“#
88888”
Android: textSize Sets the size Android:textSize=18sp
’
Android:drwableLeft Sets a icon to be Android:drwabaleLeft
displayed =“@drawable/icon”
Android: bankground Sets the background Android:
color background=“@color
/buttonColor”
Android:onClick Specifies the method Android:onClick=“ha
to be called ndleClick”
Android:enabled Enables or disables Android:enabled=“fal
the button for user se”
TOAST MESSAGE
public void onButtonClick(View view)
{
[Link](this, "Button 1 Clicked", Toast.LENGTH_SHORT).show();
}
OUTPUT
Button Click using Intent
public void onButtonClick(View view)
{
Intent intent = new Intent(this, [Link]);
startActivity(intent);
}
5.4. IMAGE BUTTON
1. Image Button designed to provide a clickable
button using image.
Features of Image Button
1. User Interaction: initiate action within an application .
2. Image Display: making it suitable for icons, graphics and other visual
elements.
3. Customization: options for image resources, background padding.
4. Event Handling: Clicks by implementing event listeners to perform
specific tasks.
5. Accessibility: image button to enhance usability for all users.
Example XML code
<imagebutton
android:id=“@+id/imagebut1”
android:layout_width=“100dp”
android:layout_height=“100dp”
android:src=“@drawable/icon1”
android:onClick=“onImageButtonClick”/>
Example java code
ImageButton imagebut1=findViewById([Link].imagebut1);
[Link](new [Link]() {
@Override
public void onClick(View v) {
[Link]([Link], "imagebutton 1 clicked",
Toast.LENGTH_SHORT).show();
}
});
}
}
5.5. CHECK BOX
Checkbox is a UI component in Android that allows user to make a binary choice
indicating choice to be true or false.
XML CODE FOR CHECK BOX:
<CheckBox
android:id="@+id/cb1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="option1"
android:textSize="16sp"
android:textColor="#000000"/>
[Link] BUTTON
When a radio button is checked all other radiobutton views within the same
are unchecked
XML CODE
<RadioGroup
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Male"/>
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Female"/>
</RadioGroup>
[Link] BAR
Progress Bar are used as loading indicators in android applications. These
are generally used when the application is loading the data from the server
or database. There are different types of progress bars used within the
android application as loading indicators.
PROGRESS BAR
Types of Progress Bar:
Horizontal Progress Bar (Determinate) - A linear progress indicator that
moves from left to right. Suitable when the progress of a task can be
measured (e.g., file download or data processing). Requires setting a
maximum value and updating the progress accordingly.
Circular Progress Bar (Indeterminate) - A spinning circular indicator used
when the duration or progress of a task is unknown. Ideal for operations
where you cannot predict the completion time (e.g., loading content from
the network).
button = findViewById([Link]);
progressBar = findViewById([Link]);
// Click listener for the button
[Link](new [Link]() {
@Override
public void onClick(View v) {
if (isProgressVisible) {
//true
// Hide progress bar and update button text
[Link]("Show Progress Bar");
[Link]([Link]);
isProgressVisible = false;
} else {
//false
// Show progress bar and update button text
// 1. Change the name
[Link]("Hide Progress Bar");
// 2. Enable the loader
[Link]([Link]);
// [Link] the default to true
isProgressVisible = true;
}
}
});
}
}
[Link] COMPLETE TEXT VIEW
[Link] COMPLETE TEXT VIEW
The AutoCompleteTextView is a type of edit text in android which gives
suggestions to the user if the user types something in the
AutoCompleteTextView. This type of edit text we can see while we register
on some websites. If we type "In" it will suggest India, Indonesia, West Indies
….. etc. Like this, the AutoCompleteTextView works.
[Link] COMPLETE TEXT VIEW
EXAMPLE
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This is AutoCompleteTextView"/>
<AutoCompleteTextView
android:layout_width="match_parent"
android:layout_height="100px"
android:placeholder="Enter your country name"
android:id="@+id/txtcountries"/>
JAVA CODE
String[] countries={"India","Australia","West indies","indonesia","Indiana",
"South Africa","England","Bangladesh","Srilanka","singapore"};
@Override
public void onCreate(Bundle savedInstanceState) {
[Link](savedInstanceState);
setContentView([Link].activity_main);
ArrayAdapter<String> adapter=new
ArrayAdapter<String>(this,[Link].simple_dropdown_item_1line,countries)
AutoCompleteTextView
textView=(AutoCompleteTextView)findViewById([Link]);
[Link](3);
[Link](adapter);
}
}
Array Adapter
The Adapter acts as a bridge between the UI Component and the Data
Source. It converts data from the data sources into view items that can be
displayed into the UI Component. Data Source can be Arrays, HashMap,
Database, etc. and UI Components can be ListView, GridView, Spinner, etc.
ArrayAdapter is the most commonly used adapter in android. When you have
a list of single type items which are stored in an array you can use
ArrayAdapter. Likewise, if you have a list of phone numbers, names, or cities.
ArrayAdapter has a layout with a single TextView. If you want to have a more
complex layout instead of ArrayAdapter use CustomArrayAdapter.
Syntax of ArrayAdapter
ArrayAdapter<String> adapter = new ArrayAdapter<String>(Context context, int
resource, List<String> objects);