Components of a screen - Srinivas Narasegouda

In Android, a screen is essentially the user interface (UI) that displays information to the user and allows them to interact with the app. This screen is made up of different components, and each component plays a specific role in displaying information or enabling user interaction. Understanding these components is essential for building a functional app.

At the most basic level, components on the screen could be text, buttons, images, and input fields. These elements are arranged and styled to create a cohesive user interface. Android provides a variety of built-in UI components that can be combined to create rich, interactive screens.

Here are the key components of a screen in Android Studio:

TextView: This is used to display text on the screen. It’s one of the most common UI components and is used for labels, messages, or any other static text.
EditText: This is a type of input field that allows users to enter text. It’s commonly used for gathering input, such as the user’s name, email, or password.
Button: A button is a clickable UI component that the user can interact with. When the user taps a button, it triggers an event, such as submitting data, navigating to another screen, or performing a specific action.
ImageView: This component is used to display images in your app. You can set it to show images from resources, external sources, or even from the device’s storage.
Checkbox: A checkbox is a component that allows the user to make binary choices (checked or unchecked). It’s often used for options like agreeing to terms or selecting multiple items from a list.
RadioButton: Similar to a checkbox, but used when you want the user to select only one option from a set. Radio buttons are usually grouped together in a RadioGroup, where only one option can be selected at a time.
Spinner: A spinner is a dropdown menu that allows the user to select an item from a list of choices. It’s like a simple combo box.
SeekBar: A SeekBar is a sliding bar that allows users to select a value from a range. It’s often used for volume control or setting brightness.
ProgressBar: A ProgressBar is used to indicate that something is loading or being processed. It can show either an indeterminate progress (when the exact progress is unknown) or a determinate progress (when the exact percentage of completion is known).
ListView: This component displays a list of items in a vertically scrollable format. It’s useful for showing multiple items like contacts, messages, or other repetitive data. Each item in the list is typically a View defined in a layout.
RecyclerView: Similar to ListView, but more powerful and flexible. It’s often used for displaying large sets of data in a list or grid format. It allows more efficient memory usage and better handling of item changes.
ScrollView: A ScrollView allows you to make a portion of the layout scrollable when there isn’t enough space to display everything at once. It can hold other UI components, like a form, which can be scrolled if the content exceeds the screen size.
LinearLayout: This is a type of layout container that arranges its child components either vertically or horizontally. It’s useful for simple layouts where you want elements to be stacked in one direction.
RelativeLayout: A RelativeLayout is a more flexible layout where components are positioned relative to each other or the parent container. It gives more control over positioning compared to LinearLayout.
ConstraintLayout: This is a powerful and flexible layout container that allows you to position and constrain elements based on the screen size and other components. It’s the most recommended layout for complex designs, offering great flexibility and performance.
FrameLayout: A FrameLayout is used to stack components on top of each other. It’s useful for scenarios where you want one element to overlap another, such as showing an image over a background or displaying a floating button.
Toolbar: The toolbar is a special type of component that provides a customizable action bar at the top of the screen. It typically contains navigation icons, titles, and action buttons, and is used to provide app-wide actions like searching, saving, or navigating between screens.
Navigation Drawer: The navigation drawer is a UI component that slides in from the side of the screen and contains a list of options for navigating through the app. It’s commonly used for apps with a lot of sections or features.
FloatingActionButton (FAB): A FloatingActionButton is a circular button that floats above the UI, usually positioned at the bottom-right corner of the screen. It’s often used to represent a primary action, such as creating a new item or composing a message.

Each of these components can be added to a screen using XML layout files, where you define the structure of the screen. Android Studio provides a visual layout editor, allowing you to drag and drop these components onto the screen, or you can write the XML code manually.

For instance, let’s say we are creating a simple screen where the user enters their name and presses a button to submit it. The components involved might include a TextView, an EditText, and a Button. A TextView is used to display a label or message, such as “Enter your name.” The EditText is an input field where the user types in their name. Finally, the Button is what the user taps to submit the name.

These components are usually arranged in a layout, which determines how they appear on the screen. For example, we might use a LinearLayout to stack the TextView, EditText, and Button vertically, so they appear one after the other. The LinearLayout is a type of container that holds child elements and arranges them either vertically or horizontally.

Here’s how we might define such a screen in XML, which is where we declare the layout of the components:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Enter your name:" />

    <EditText
        android:id="@+id/editText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="Your name" />

    <Button
        android:id="@+id/buttonSubmit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Submit" />
</LinearLayout>

In this example, the LinearLayout is the container that organizes the TextView, EditText, and Button vertically. The TextView displays the message “Enter your name”, the EditText allows the user to type their name, and the Button is what the user presses to submit the information.

Once this layout is defined in the XML file, the Android system will automatically create and display these components on the screen. But to make the app interactive, we need to add functionality to the Button, like displaying a message when the button is clicked.

In our activity code, we might do something like this:

TextView textView = findViewById(R.id.textView);
EditText editText = findViewById(R.id.editText);
Button buttonSubmit = findViewById(R.id.buttonSubmit);

buttonSubmit.setOnClickListener(v -> {
    String name = editText.getText().toString();
    textView.setText("Hello, " + name + "!");
});

Here, when the user clicks the submit button, the app retrieves the name from the EditText, and then updates the TextView to greet the user with their name.

So, understanding the components of a screen in Android involves knowing the different UI elements like text, buttons, and input fields, and how they are organized within layouts. The layout determines the visual arrangement of these components, while the code defines their behavior. By combining these elements, we can build screens that both look good and are interactive, offering a seamless experience for the user.