Demonstrates multiple UI widgets.

 

Exploring Android Widgets: Building an Interactive UI with Java and XML

In this blog post, we'll explore how to create an interactive Android UI using various widgets like RatingBar, AutoCompleteTextView, MultiAutoCompleteTextView, DatePicker, TimePicker, ProgressBar, AnalogClock, and DigitalClock. We'll break down the XML layout and Java code that powers this UI.

Brief Explanation of the Files

XML File (activity_widgets_example2.xml)

The XML file defines the layout of the app using a ScrollView to allow scrolling through multiple widget sections. Each section is wrapped in a LinearLayout with distinct background colors and elevation for a card-like effect. Widgets include:

• RatingBar: Allows users to rate with stars.
• AutoCompleteTextView: Suggests fruits as the user types.
• MultiAutoCompleteTextView: Suggests colors with comma-separated input.
• DatePicker & TimePicker: For selecting dates and times.
• ProgressBar: Shows progress visually.
• AnalogClock & DigitalClock: Display current time.

Java File (WidgetsExample2.java)

The Java file handles the logic for the widgets. It sets up listeners (e.g., for RatingBar) and populates the AutoCompleteTextView and MultiAutoCompleteTextView with data using ArrayAdapter. It also simulates progress for the ProgressBar.

Directory Structure

To use these files in an Android project, follow these steps:

1. Open Android Studio and create a new project (e.g., "WidgetsDemo").
2. Navigate to app/src/main/res/layout/ and create a new XML file named activity_widgets_example2.xml. Copy the XML code below into this file.
3. Navigate to app/src/main/java/com/vipul/p6/. If the package com.vipul.p6 doesn’t exist, create it by right-clicking the java folder → New → Package, and name it com.vipul.p6.
4. Inside this package, create a new Java class named WidgetsExample2.java and paste the Java code below.

Make sure to update the package name in the Java file if your project uses a different package structure!

XML Code (activity_widgets_example2.xml)

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#F5F5F5">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="16dp">

        <!-- RatingBar Section -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="16dp"
            android:background="#FFEBEE"
            android:elevation="4dp"
            android:orientation="vertical"
            android:padding="16dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Rate Our App:"
                android:textColor="#D32F2F"
                android:textSize="18sp" />

            <RatingBar
                android:id="@+id/ratingBar"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:numStars="5"
                android:stepSize="1" />
        </LinearLayout>

        <!-- AutoCompleteTextView Section -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="16dp"
            android:background="#E8F5E9"
            android:elevation="4dp"
            android:orientation="vertical"
            android:padding="16dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Your Favorite Fruit:"
                android:textColor="#388E3C"
                android:textSize="18sp" />

            <AutoCompleteTextView
                android:id="@+id/autoCompleteTextView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@android:drawable/editbox_background"
                android:hint="Start typing..."
                android:padding="8dp" />
        </LinearLayout>

        <!-- MultiAutoCompleteTextView Section -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="16dp"
            android:background="#E3F2FD"
            android:elevation="4dp"
            android:orientation="vertical"
            android:padding="16dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Favorite Colors (comma separated):"
                android:textColor="#1976D2"
                android:textSize="18sp" />

            <MultiAutoCompleteTextView
                android:id="@+id/multiAutoCompleteTextView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@android:drawable/editbox_background"
                android:hint="Type colors here..."
                android:padding="8dp" />
        </LinearLayout>

        <!-- DatePicker -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="16dp"
            android:background="#FFF3E0"
            android:elevation="4dp"
            android:orientation="vertical"
            android:padding="16dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Pick a Date:"
                android:textColor="#F57C00"
                android:textSize="18sp" />

            <DatePicker
                android:id="@+id/datePicker"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:calendarViewShown="true" />
        </LinearLayout>

        <!-- TimePicker -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="16dp"
            android:background="#F3E5F5"
            android:elevation="4dp"
            android:orientation="vertical"
            android:padding="16dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Pick a Time:"
                android:textColor="#7B1FA2"
                android:textSize="18sp" />

            <TimePicker
                android:id="@+id/timePicker"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:timePickerMode="spinner" />
        </LinearLayout>

        <!-- ProgressBar -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="16dp"
            android:background="#E0F2F1"
            android:elevation="4dp"
            android:orientation="vertical"
            android:padding="16dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Loading Progress:"
                android:textColor="#00796B"
                android:textSize="18sp" />

            <ProgressBar
                android:id="@+id/progressBar"
                style="?android:attr/progressBarStyleHorizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:max="100"
                android:progress="50" />
        </LinearLayout>

        <!-- AnalogClock & DigitalClock -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="16dp"
            android:background="#ECEFF1"
            android:elevation="4dp"
            android:orientation="vertical"
            android:padding="16dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Analog Clock:"
                android:textColor="#37474F"
                android:textSize="18sp" />

            <AnalogClock
                android:id="@+id/analogClock"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:text="Digital Clock:"
                android:textColor="#37474F"
                android:textSize="18sp" />

            <DigitalClock
                android:id="@+id/digitalClock"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>

    </LinearLayout>
</ScrollView>
    

Java Code (WidgetsExample2.java)

package com.vipul.p6;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.AutoCompleteTextView;
import android.widget.MultiAutoCompleteTextView;
import android.widget.ProgressBar;
import android.widget.RatingBar;
import android.widget.Toast;

public class WidgetsExample2 extends AppCompatActivity {
    RatingBar ratingBar;
    AutoCompleteTextView autoCompleteTextView;
    MultiAutoCompleteTextView multiAutoCompleteTextView;
    ProgressBar progressBar;

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

        ratingBar = findViewById(R.id.ratingBar);
        autoCompleteTextView = findViewById(R.id.autoCompleteTextView);
        multiAutoCompleteTextView = findViewById(R.id.multiAutoCompleteTextView);
        progressBar = findViewById(R.id.progressBar);

        // RatingBar listener
        ratingBar.setOnRatingBarChangeListener((ratingBar, rating, fromUser) ->
                Toast.makeText(WidgetsExample2.this, "Rating: " + rating, Toast.LENGTH_SHORT).show()
        );

        // AutoCompleteTextView setup
        String[] fruits = {"Apple", "Banana", "Cherry", "Date", "Grape", "Mango", "Pineapple"};
        ArrayAdapter<String> fruitAdapter = new ArrayAdapter<>(this, android.R.layout.simple_dropdown_item_1line, fruits);
        autoCompleteTextView.setAdapter(fruitAdapter);

        // MultiAutoCompleteTextView setup
        String[] colors = {"Red", "Green", "Blue", "Yellow", "Pink", "Orange", "Black", "White"};
        ArrayAdapter<String> colorAdapter = new ArrayAdapter<>(this, android.R.layout.simple_dropdown_item_1line, colors);
        multiAutoCompleteTextView.setAdapter(colorAdapter);
        multiAutoCompleteTextView.setTokenizer(new MultiAutoCompleteTextView.CommaTokenizer());

        // Optionally, simulate progress bar increment
        progressBar.setProgress(70);
    }
}
    

That’s it! You now have a fully functional Android app showcasing various widgets. Feel free to tweak the colors, data, or functionality as needed.