Android Views

Views (UI Elements)

Views are the basic building blocks of the Android user interface. They are the interactive components that the user sees and interacts with. Views are drawn on the screen and can respond to user input.

All View classes inherit from the base android.view.View class. Views are typically defined in XML layout files within a ViewGroup (a layout).

TextView:

A TextView is used to display non-editable text to the user.

Common attributes:

  • android:text: The text to be displayed.
  • android:textSize: The size of the text (use sp unit).
  • android:textColor: The color of the text.
  • android:textStyle: The style of the text (e.g., "bold", "italic", "normal").
  • android:gravity: Controls the alignment of the text within the TextView (e.g., "center", "left", "right").
  • android:maxLines: Limits the number of lines the TextView will display.
  • android:ellipsize: Specifies how to truncate text that is too long to fit (e.g., "end" for "...", "middle").

Example:

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Welcome to my app!"
    android:textSize="20sp"
    android:textColor="#333333"
    android:textStyle="bold"
    android:gravity="center" />

EditText:

An EditText is a subclass of TextView that allows users to input and edit text. It provides a text field for user interaction.

Common attributes:

  • android:hint: Placeholder text that is displayed when the EditText is empty.
  • android:inputType: Specifies the type of input expected (e.g., "text", "number", "textPassword", "textEmailAddress"). This affects the keyboard displayed to the user.
  • android:maxLength: Limits the maximum number of characters the user can enter.
  • android:lines: Sets the height of the EditText to be a specific number of lines.

Example:

<EditText
    android:id="@+id/nameEditText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Enter your name"
    android:inputType="textPersonName" />

Button:

A Button is a clickable UI element that performs an action when the user taps it.

Common attributes:

  • android:text: The text displayed on the button.
  • android:onClick: Specifies the name of a method in the Activity that should be called when the button is clicked (an alternative to setting an OnClickListener programmatically).
  • android:background: Sets the background drawable for the button.

Example:

<Button
    android:id="@+id/submitButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Submit"
    android:onClick="onSubmitButtonClick" />

If you use the android:onClick attribute, you need a corresponding public method in your Activity with the signature public void onSubmitButtonClick(View view).

ImageView:

An ImageView is used to display images (drawables) on the screen. Images can be from various sources, such as resources, assets, or URLs (though loading from URLs typically requires a library like Glide or Coil).

Common attributes:

  • android:src: Sets the image to be displayed. This usually refers to a drawable resource (e.g., "@drawable/my_image").
  • android:scaleType: Controls how the image is scaled and positioned within the ImageView's bounds (e.g., "centerCrop", "fitCenter", "centerInside").

Example:

<ImageView
    android:id="@+id/logoImageView"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:src="@drawable/app_logo"
    android:scaleType="centerCrop"
    android:contentDescription="App logo" />

It's good practice to include the android:contentDescription attribute for accessibility, providing a text description of the image.

These are just a few of the many View types available in Android. You'll encounter and use many more as you develop more complex applications, such as CheckBox, RadioButton, Spinner, SeekBar, and more.