The most basic yet crucial part of Android app development is the ‘View’. A view is the fundamental element that makes up the user interface of the app and includes all elements that interact with the user. In this course, we will explore the types of main views used in Android applications, how to use them, and how to utilize views through example code.
1. What is a View?
A view refers to elements displayed on the screen. Through this, elements such as buttons, text fields, images, and lists that can interact with the user can be implemented. The view structure in Android is hierarchical, and each view can contain another view. This complex structure allows developers to create flexible user interfaces.
2. Types of Basic Views Available in Android
- TextView: Used to display text on the screen.
- EditText: An input field where users can enter text.
- Button: Provides a button that the user can click.
- ImageView: Displays an image on the screen.
- CheckBox: Provides a checkbox that can be selected.
- RadioButton: Allows selection of one option among several.
- Spinner: A selection box in a dropdown list format.
- ListView: Displays a list of items.
- RecyclerView: An improved version of ListView that efficiently displays lists of items, enhancing performance.
3. Detailed Explanation of Each View and Examples
3.1 TextView
TextView is a view that helps display textual information to the user. The properties that can be set include font, size, color, and line spacing. Here is an example of using TextView.
xml
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello, Android!"
android:textSize="20sp"
android:textColor="#000000" />
java
TextView textView = findViewById(R.id.textView);
textView.setText("Hello, Android!");
3.2 EditText
EditText is a field where users can input text. It is useful for receiving and processing data from users. Here is an example of using EditText.
xml
<EditText
android:id="@+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Enter here" />
java
EditText editText = findViewById(R.id.editText);
String inputText = editText.getText().toString();
3.3 Button
Button is a button that the user can click. You can set it to perform certain actions when clicked. Below is an example of using Button.
xml
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Click here" />
java
Button button = findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(getApplicationContext(), "Button clicked!", Toast.LENGTH_SHORT).show();
}
});
3.4 ImageView
ImageView is a view used to display images on the screen. Let’s look at how to use ImageView in the following example.
xml
<ImageView
android:id="@+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@drawable/sample_image" />
java
ImageView imageView = findViewById(R.id.imageView);
imageView.setImageResource(R.drawable.another_image);
3.5 CheckBox
CheckBox provides selectable checkbox items. It is useful when you want to choose among multiple items. Refer to the example below.
xml
<CheckBox
android:id="@+id/checkBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Select option" />
java
CheckBox checkBox = findViewById(R.id.checkBox);
checkBox.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
if (isChecked) {
Toast.makeText(getApplicationContext(), "Checked", Toast.LENGTH_SHORT).show();
} else {
Toast.makeText(getApplicationContext(), "Unchecked", Toast.LENGTH_SHORT).show();
}
}
});
3.6 RadioButton
RadioButton is a view that allows selection of one option among several. The user can select only one from the radio buttons. The example is as follows.
xml
<RadioGroup
android:id="@+id/radioGroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<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" />
</RadioGroup>
java
RadioGroup radioGroup = findViewById(R.id.radioGroup);
radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
switch (checkedId) {
case R.id.radioButton1:
Toast.makeText(getApplicationContext(), "Option 1 selected", Toast.LENGTH_SHORT).show();
break;
case R.id.radioButton2:
Toast.makeText(getApplicationContext(), "Option 2 selected", Toast.LENGTH_SHORT).show();
break;
}
}
});
3.7 Spinner
Spinner provides a dropdown list format for selectable items. Here is an example of using Spinner.
xml
<Spinner
android:id="@+id/spinner"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
java
Spinner spinner = findViewById(R.id.spinner);
ArrayAdapter adapter = ArrayAdapter.createFromResource(this,
R.array.options_array, android.R.layout.simple_spinner_item);
adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
spinner.setAdapter(adapter);
3.8 ListView
ListView is used to display a list of items. It can show multiple items simply in list form. Below is an example of ListView.
xml
<ListView
android:id="@+id/listView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
java
ListView listView = findViewById(R.id.listView);
ArrayAdapter adapter = new ArrayAdapter(this,
android.R.layout.simple_list_item_1, dataArray);
listView.setAdapter(adapter);
3.9 RecyclerView
RecyclerView is a view that creates lists that are more flexible and feature-rich than ListView. It can be considered an improved version in terms of performance. An example of using RecyclerView is as follows.
xml
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
java
RecyclerView recyclerView = findViewById(R.id.recyclerView);
recyclerView.setLayoutManager(new LinearLayoutManager(this));
MyAdapter adapter = new MyAdapter(myDataList);
recyclerView.setAdapter(adapter);
4. Relationship Between Layout and View
In Android, all views are placed within a layout. A layout is a container that defines how to arrange the views. Common types of layouts include LinearLayout, RelativeLayout, ConstraintLayout, and FrameLayout. The characteristics and usage of each layout are as follows.
4.1 LinearLayout
LinearLayout is a layout that can align child views either vertically or horizontally. The example below explains how to use LinearLayout.
xml
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="First Text" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Second Text" />
</LinearLayout>
4.2 RelativeLayout
RelativeLayout is a layout that allows arranging child views based on their relative positions to each other. An example can be where the title and description maintain their positional relationship.
xml
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Title" />
<TextView
android:id="@+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/title"
android:text="Description" />
</RelativeLayout>
4.3 ConstraintLayout
ConstraintLayout is a layout that helps create more complex user interfaces. You can determine the position of views using various constraints, enabling you to place more views more concisely.
xml
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Text arranged by constraints"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
5. View and Event Handling
One of the most important aspects when using views is event handling. Android can handle various types of user input events. Events are processed using listeners to handle click, touch, and other events for each view. Below is how to handle button click events.
java
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// Actions to perform when button is clicked
}
});
6. Conclusion
In this course, we have looked at the fundamental ‘View’ in Android app development. We learned about the types and usage of various views, the concept of layouts, and how to handle events. Understanding and utilizing these fundamental elements is an important first step toward developing more complex and diverse functionality apps. In the next course, we will return with more advanced content. Wishing you luck on your Android app development journey!