Docs
Android
Unit 4

1. What is UI?

UI stands for User Interface, which refers to the part of a software application or system that allows users to interact with it. The user interface includes all of the graphical, textual, and other visual elements that users see and interact with, as well as any feedback they receive from the application in response to their actions.

In the context of mobile application development with Java, the UI is typically implemented using Android's user interface framework, which provides a set of widgets and tools for building graphical user interfaces.

The UI can be designed using XML or Java code, and can include a wide range of elements such as buttons, text boxes, menus, images, and more.

A well-designed UI is essential for creating a positive user experience and ensuring that users can easily and intuitively interact with your application.

2. Enlist elements of UI.

  1. Buttons - A button is a graphical element that represents an action that can be triggered by the user.
  2. Text fields - A text field is an area where the user can enter or edit text.
  3. Labels - Labels are used to display text or other information to the user.
  4. Images - Images can be used to provide visual cues or to display graphical content.
  5. Checkboxes and radio buttons - Checkboxes and radio buttons are used to provide the user with options to select.
  6. Dropdown menus - Dropdown menus allow the user to choose from a list of options.
  7. Sliders - Sliders are used to allow the user to select a value from a range of possible values.
  8. Progress bars - Progress bars are used to show the user the progress of an ongoing operation.
  9. Spinners - Spinners are used to allow the user to select a value from a predefined set of values.
  10. Navigation bars - Navigation bars are used to provide the user with access to different parts of the application.

3. What is TextView? How to create it? Explain with example.

TextView is a UI element that displays text on the screen. It is a subclass of the View class and is commonly used to display static text, such as labels or headings, in an Android application.

Here's an example of how to create a TextView:

// Obtain a reference to the parent view
ViewGroup parent = findViewById(R.id.parent_layout);
 
// Create a new TextView instance
TextView textView = new TextView(this);
 
// Set the text to be displayed
textView.setText("Hello, World!");
 
// Add the TextView to the parent view
parent.addView(textView);

In this example, we first obtain a reference to the parent view using its ID, which is defined in the layout XML file. We then create a new TextView instance using the TextView constructor and set its text using the setText() method. Finally, we add the TextView to the parent view using the addView() method.

Alternatively, we can create the TextView element in the layout XML file and then reference it in the Java code using its ID.

Here's an example of how to create a TextView element in an XML layout file:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/parent_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
 
    <TextView
        android:id="@+id/text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello, World!" />
</LinearLayout>

In this example, we define a TextView element with an ID of "text_view" and set its text to "Hello, World!". We also define a LinearLayout element as the parent view with an ID of "parent_layout". We can then reference the TextView in the Java code using its ID:

// Obtain a reference to the TextView using its ID
TextView textView = findViewById(R.id.text_view);
 
// Set the text to be displayed
textView.setText("Hello, World!");

This approach can be more efficient since the UI elements are created and configured during the layout inflation process, rather than dynamically at runtime.

4. Explain the term Button with example.

Button is a UI element that allows the user to trigger an action when it is pressed. It is a subclass of the TextView class and is commonly used to provide clickable actions in an Android application.

Here's an example of how to create a Button in Java code:

// Obtain a reference to the parent view
ViewGroup parent = findViewById(R.id.parent_layout);
 
// Create a new Button instance
Button button = new Button(this);
 
// Set the text to be displayed on the button
button.setText("Click me!");
 
// Set an OnClickListener to handle button clicks
button.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        // Handle button click event
        Toast.makeText(MainActivity.this, "Button clicked!", Toast.LENGTH_SHORT).show();
    }
});
 
// Add the Button to the parent view
parent.addView(button);

In this example, we first obtain a reference to the parent view using its ID, which is defined in the layout XML file. We then create a new Button instance using the Button constructor and set its text using the setText() method. We also set an OnClickListener to handle button clicks using the setOnClickListener() method, which defines a callback function to be called when the button is clicked. In this example, we simply display a toast message to indicate that the button was clicked. Finally, we add the Button to the parent view using the addView() method.

Alternatively, we can create the Button element in the layout XML file and then reference it in the Java code using its ID. Here's an example of how to create a Button element in an XML layout file:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/parent_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
 
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click me!" />
</LinearLayout>

In this example, we define a Button element with an ID of "button" and set its text to "Click me!". We also define a LinearLayout element as the parent view with an ID of "parent_layout". We can then reference the Button in the Java code using its ID:

// Obtain a reference to the Button using its ID
Button button = findViewById(R.id.button);
 
// Set an OnClickListener to handle button clicks
button.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        // Handle button click event
        Toast.makeText(MainActivity.this, "Button clicked!", Toast.LENGTH_SHORT).show();
    }
});

This approach can be more efficient since the UI elements are created and configured during the layout inflation process, rather than dynamically at runtime.

5. What is ImageButton? how to create it? Explain with example.

ImageButton is a subclass of ImageView that provides a clickable button with an image on it. It is commonly used to provide clickable icons or images in an Android application.

Here's an example of how to create an ImageButton in Java code:

// Obtain a reference to the parent view
ViewGroup parent = findViewById(R.id.parent_layout);
 
// Create a new ImageButton instance
ImageButton imageButton = new ImageButton(this);
 
// Set the image to be displayed on the button
imageButton.setImageResource(R.drawable.ic_icon);
 
// Set an OnClickListener to handle button clicks
imageButton.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        // Handle button click event
        Toast.makeText(MainActivity.this, "ImageButton clicked!", Toast.LENGTH_SHORT).show();
    }
});
 
// Add the ImageButton to the parent view
parent.addView(imageButton);

In this example, we first obtain a reference to the parent view using its ID, which is defined in the layout XML file. We then create a new ImageButton instance using the ImageButton constructor and set its image using the setImageResource() method. We also set an OnClickListener to handle button clicks using the setOnClickListener() method, which defines a callback function to be called when the button is clicked. In this example, we simply display a toast message to indicate that the button was clicked. Finally, we add the ImageButton to the parent view using the addView() method.

Alternatively, we can create the ImageButton element in the layout XML file and then reference it in the Java code using its ID. Here's an example of how to create an ImageButton element in an XML layout file:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/parent_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
 
    <ImageButton
        android:id="@+id/image_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_icon" />
</LinearLayout>

In this example, we define an ImageButton element with an ID of "image_button" and set its image using the src attribute. We also define a LinearLayout element as the parent view with an ID of "parent_layout". We can then reference the ImageButton in the Java code using its ID:

// Obtain a reference to the ImageButton using its ID
ImageButton imageButton = findViewById(R.id.image_button);
 
// Set an OnClickListener to handle button clicks
imageButton.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        // Handle button click event
        Toast.makeText(MainActivity.this, "ImageButton clicked!", Toast.LENGTH_SHORT).show();
    }
});

This approach can be more efficient since the UI elements are created and configured during the layout inflation process, rather than dynamically at runtime.

6. Describe the following UI elements with example.

  1. ListView

  2. ScrollView

  3. GridView

  4. ImageView

  5. ListView: A scrollable list of items. Used to display a large number of items, such as contacts, messages, or products.

ListView listView = findViewById(R.id.list_view);
String[] items = {"Item 1", "Item 2", "Item 3", "Item 4", "Item 5"};
ArrayAdapter<String> adapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, items);
listView.setAdapter(adapter);
  1. ScrollView: A scrollable view of its contents. Used to display a large amount of content in a small space, such as a long text document or a complex layout.
ScrollView scrollView = findViewById(R.id.scroll_view);
TextView textView = new TextView(this);
textView.setText("Lorem ipsum dolor sit amet, consectetur adipiscing elit...");
scrollView.addView(textView);
  1. GridView: A scrollable grid of items. Similar to ListView, but displays items in a grid layout with multiple columns and rows.
GridView gridView = findViewById(R.id.grid_view);
int[] items = {R.drawable.image1, R.drawable.image2, R.drawable.image3, R.drawable.image4, R.drawable.image5};
ArrayAdapter<Integer> adapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, items);
gridView.setAdapter(adapter);
  1. ImageView: A UI element that displays an image. Used to display images such as photos, icons, or logos.
ImageView imageView = findViewById(R.id.image_view);
imageView.setImageResource(R.drawable.my_image);

7. Explain RadioGroup with example.

RadioGroup is a UI element in Android that allows the user to select a single option from a list of multiple options. It is often used to present a set of mutually exclusive options, where only one option can be selected at a time.

Here's an example of how to create and use a RadioGroup:

  1. Define the RadioGroup in the layout file (e.g. activity_main.xml):
<RadioGroup
    android:id="@+id/radio_group"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
 
    <RadioButton
        android:id="@+id/radio_button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Option 1"/>
 
    <RadioButton
        android:id="@+id/radio_button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Option 2"/>
 
    <RadioButton
        android:id="@+id/radio_button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Option 3"/>
 
</RadioGroup>
  1. In the corresponding Java/Kotlin file (e.g. MainActivity.java), create a reference to the RadioGroup and set a listener to handle the selection:
RadioGroup radioGroup = findViewById(R.id.radio_group);
 
radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
    @Override
    public void onCheckedChanged(RadioGroup group, int checkedId) {
        // Handle the selection
        switch (checkedId) {
            case R.id.radio_button1:
                // Option 1 selected
                break;
            case R.id.radio_button2:
                // Option 2 selected
                break;
            case R.id.radio_button3:
                // Option 3 selected
                break;
        }
    }
});

This code sets a listener on the RadioGroup to handle the selection. When an option is selected, the onCheckedChanged method is called, which checks the ID of the selected RadioButton and performs the appropriate action.

Note that you can also dynamically create and add RadioButton elements to the RadioGroup in code, instead of defining them in the layout file.

8. With the help of example describe ToggleButton.

ToggleButton is a UI element in Android that allows the user to toggle a binary state (on/off) by pressing a button. It is often used to control settings or preferences in an app.

Here's an example of how to create and use a ToggleButton:

  1. Define the ToggleButton in the layout file (e.g. activity_main.xml):
<ToggleButton
    android:id="@+id/toggle_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textOff="Off"
    android:textOn="On" />
  1. In the corresponding Java/Kotlin file (e.g. MainActivity.java), create a reference to the ToggleButton and set a listener to handle the toggle:
ToggleButton toggleButton = findViewById(R.id.toggle_button);
 
toggleButton.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
    @Override
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
        // Handle the toggle state
        if (isChecked) {
            // Toggle is on
        } else {
            // Toggle is off
        }
    }
});

This code sets a listener on the ToggleButton to handle the toggle state. When the toggle is switched, the onCheckedChanged method is called, which checks the boolean isChecked parameter and performs the appropriate action.

Note that you can also set the initial state of the ToggleButton by calling the setChecked() method in code, passing in a boolean value (true for on, false for off).

9. Describe ImageView with example.

ImageView is a UI element in Android that displays an image. It is often used to display icons, logos, or pictures in an app.

Here's an example of how to create and use an ImageView:

  1. Define the ImageView in the layout file (e.g. activity_main.xml):
<ImageView
    android:id="@+id/image_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/my_image" />
  1. In the corresponding Java/Kotlin file (e.g. MainActivity.java), create a reference to the ImageView:
ImageView imageView = findViewById(R.id.image_view);
  1. (Optional) Load an image dynamically from a URL or file:
String imageUrl = "https://example.com/my_image.jpg";
Picasso.get().load(imageUrl).into(imageView);

This code uses the Picasso library to load an image from a URL and display it in the ImageView. Alternatively, you can load an image from a file on the device's storage by specifying the file path in the load() method.

  1. (Optional) Handle user interactions with the ImageView, such as clicks:
imageView.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        // Handle the click event
    }
});

This code sets a listener on the ImageView to handle clicks. When the user clicks the image, the onClick method is called, which performs the appropriate action.

Note that you can also customize the appearance of the ImageView by setting attributes such as android:scaleType to control how the image is scaled and displayed.

10. How to custom toast alert?

You can customize the appearance of a Toast message in Android by creating a custom layout for it. Here's how to do it:

  1. Create a layout XML file for your custom Toast layout (e.g. toast_layout.xml). This file should contain the elements and styling you want for your Toast message.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/custom_toast_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="16dp"
    android:background="#FF4081">
 
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_alert"/>
 
    <TextView
        android:id="@+id/custom_toast_message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#FFFFFF"
        android:textSize="16sp"
        android:text="This is a custom toast message"/>
</LinearLayout>

In this example, the layout consists of a horizontal LinearLayout containing an ImageView and a TextView. The background color is set to pink (#FF4081).

  1. In your activity, inflate the custom layout and create a Toast object with it:
LayoutInflater inflater = getLayoutInflater();
View layout = inflater.inflate(R.layout.toast_layout, (ViewGroup) findViewById(R.id.custom_toast_layout));
 
TextView text = (TextView) layout.findViewById(R.id.custom_toast_message);
text.setText("This is a custom toast message");
 
Toast toast = new Toast(getApplicationContext());
toast.setDuration(Toast.LENGTH_LONG);
toast.setView(layout);
toast.show();

In this code, we first use the LayoutInflater to inflate our custom layout. We then find the TextView element inside the layout and set its text. Finally, we create a new Toast object and set its duration and view to our custom layout. The show() method is called to display the Toast message.

This will display a custom Toast message with the layout and styling you defined in the XML file. You can modify the XML file to include different elements or styles to further customize the Toast message.

11. Describe Data and Time picker with example.

In Android, the DatePicker and TimePicker widgets are used to allow users to select a date and time, respectively.

Here's an example of how to use the DatePicker widget in an Android app:

  1. Define the DatePicker in the layout file (e.g. activity_main.xml):
<DatePicker
    android:id="@+id/date_picker"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
  1. In the corresponding Java/Kotlin file (e.g. MainActivity.java), create a reference to the DatePicker:
DatePicker datePicker = findViewById(R.id.date_picker);
  1. (Optional) Set the initial date:
Calendar calendar = Calendar.getInstance();
datePicker.init(calendar.get(Calendar.YEAR), calendar.get(Calendar.MONTH), calendar.get(Calendar.DAY_OF_MONTH), new DatePicker.OnDateChangedListener() {
    @Override
    public void onDateChanged(DatePicker view, int year, int monthOfYear, int dayOfMonth) {
        // Handle the date change event
    }
});

This code sets the initial date to the current date and attaches an OnDateChangedListener to handle date change events.

  1. (Optional) Handle user interactions with the DatePicker, such as date changes:
datePicker.setOnDateChangedListener(new DatePicker.OnDateChangedListener() {
    @Override
    public void onDateChanged(DatePicker view, int year, int monthOfYear, int dayOfMonth) {
        // Handle the date change event
    }
});

This code sets a listener on the DatePicker to handle date changes. When the user selects a new date, the onDateChanged method is called, which performs the appropriate action.

Using the TimePicker widget is similar to the DatePicker. Here's an example of how to use the TimePicker widget:

  1. Define the TimePicker in the layout file (e.g. activity_main.xml):
<TimePicker
    android:id="@+id/time_picker"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
  1. In the corresponding Java/Kotlin file (e.g. MainActivity.java), create a reference to the TimePicker:
TimePicker timePicker = findViewById(R.id.time_picker);
  1. (Optional) Set the initial time:
Calendar calendar = Calendar.getInstance();
timePicker.setHour(calendar.get(Calendar.HOUR_OF_DAY));
timePicker.setMinute(calendar.get(Calendar.MINUTE));
timePicker.setOnTimeChangedListener(new TimePicker.OnTimeChangedListener() {
    @Override
    public void onTimeChanged(TimePicker view, int hourOfDay, int minute) {
        // Handle the time change event
    }
});

This code sets the initial time to the current time and attaches an OnTimeChangedListener to handle time change events.

  1. (Optional) Handle user interactions with the TimePicker, such as time changes:
timePicker.setOnTimeChangedListener(new TimePicker.OnTimeChangedListener() {
    @Override
    public void onTimeChanged(TimePicker view, int hourOfDay, int minute) {
        // Handle the time change event
    }
});

This code sets a listener on the TimePicker to handle time changes. When the user selects a new time, the onTimeChanged method is called, which performs the appropriate action.

12. What is progress bar? How to create it?

A progress bar is a graphical user interface element that indicates the progress of a particular task or operation. It is commonly used to show the progress of file downloads, installations, or data transfers.

In Android, you can create a progress bar using the ProgressBar widget. Here's how to create a simple ProgressBar in an Android app:

  1. Define the ProgressBar in the layout file (e.g. activity_main.xml):
<ProgressBar
    android:id="@+id/progress_bar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
  1. In the corresponding Java/Kotlin file (e.g. MainActivity.java), create a reference to the ProgressBar:
ProgressBar progressBar = findViewById(R.id.progress_bar);
  1. Set the progress of the ProgressBar:
progressBar.setProgress(50);

This code sets the progress of the ProgressBar to 50%. You can update the progress as needed to reflect the progress of the task or operation.

  1. (Optional) Customize the appearance of the ProgressBar:
<ProgressBar
    android:id="@+id/progress_bar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:indeterminate="true"
    android:indeterminateTintMode="src_in"
    android:indeterminateTint="@color/colorAccent" />

This code sets the ProgressBar to be indeterminate (i.e. not displaying a specific progress value), and customizes the color of the progress indicator. You can further customize the appearance of the ProgressBar using various attributes and styles.

Note that the above example shows a determinate ProgressBar, which displays a specific progress value. If you want to create an indeterminate ProgressBar (i.e. one that shows an animation without a specific progress value), you can use the ProgressBar with the style attribute set to ?android:attr/progressBarStyle. Here's an example:

<ProgressBar
    android:id="@+id/indeterminate_progress_bar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    style="?android:attr/progressBarStyle"
    android:indeterminateTintMode="src_in"
    android:indeterminateTint="@color/colorAccent" />

This code creates an indeterminate ProgressBar with a customized color for the progress indicator.

13. Explain GridView with example.

GridView is a UI element in Android that displays a collection of items in a grid layout. It is similar to ListView, but it arranges the items in a grid instead of a single column.

Here is an example of using GridView in Android:

  1. Define the GridView in your XML layout file:
<GridView
    android:id="@+id/grid_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:numColumns="3"
    android:horizontalSpacing="10dp"
    android:verticalSpacing="10dp"
    android:stretchMode="columnWidth" />

In this example, we have created a GridView with id of grid_view. We have set the number of columns to 3, and added some spacing between the columns and rows.

  1. Create a custom layout for the grid items:
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/grid_item_image"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="centerCrop"
    android:padding="8dp" />

This layout is used to display each item in the GridView. In this example, we've added an ImageView to display an image for each item.

  1. Create an Adapter class to provide data for the GridView:
public class ImageAdapter extends BaseAdapter {
    private Context mContext;
    private int[] mImageIds = {R.drawable.image1, R.drawable.image2, R.drawable.image3, R.drawable.image4, R.drawable.image5, R.drawable.image6};
 
    public ImageAdapter(Context context) {
        mContext = context;
    }
 
    @Override
    public int getCount() {
        return mImageIds.length;
    }
 
    @Override
    public Object getItem(int position) {
        return mImageIds[position];
    }
 
    @Override
    public long getItemId(int position) {
        return position;
    }
 
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ImageView imageView;
        if (convertView == null) {
            imageView = new ImageView(mContext);
            imageView.setLayoutParams(new GridView.LayoutParams(200, 200));
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            imageView.setPadding(8, 8, 8, 8);
        } else {
            imageView = (ImageView) convertView;
        }
 
        imageView.setImageResource(mImageIds[position]);
        return imageView;
    }
}

This adapter class provides the data and layout for each item in the GridView. In this example, we've created an array of image resource IDs, and overridden the getCount(), getItem(), and getItemId() methods to provide the data. We've also overridden the getView() method to inflate the custom layout for each item, and set the image resource using the setImageResource() method.

  1. Set the adapter for the GridView:
GridView gridView = (GridView) findViewById(R.id.grid_view);
ImageAdapter adapter = new ImageAdapter(this);
gridView.setAdapter(adapter);

Finally, in your activity's onCreate() method, you can set the adapter for the GridView to display the items. In this example, we've created a new ImageAdapter instance and set it as the adapter for the GridView.

With this implementation, you should now have a GridView with images displayed in a grid layout, as defined by your custom layout and adapter class.

14. Describe the following with example.

  1. RadioButton

  2. CheckBox

RadioButton:

RadioButton is a UI element that allows users to select one option from a group of options. Only one RadioButton can be selected at a time. Here's an example of how to use RadioButtons in an Android application:

First, add a RadioGroup element and two RadioButton elements to your layout file (activity_main.xml):

<RadioGroup
    android:id="@+id/radio_group"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
 
    <RadioButton
        android:id="@+id/radio_button_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Option 1" />
 
    <RadioButton
        android:id="@+id/radio_button_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Option 2" />
 
</RadioGroup>

Next, in your activity class (MainActivity.java), get references to the RadioGroup and RadioButton elements:

public class MainActivity extends AppCompatActivity {
 
    private RadioGroup radioGroup;
    private RadioButton radioButton1;
    private RadioButton radioButton2;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        radioGroup = findViewById(R.id.radio_group);
        radioButton1 = findViewById(R.id.radio_button_1);
        radioButton2 = findViewById(R.id.radio_button_2);
 
        radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                if (checkedId == R.id.radio_button_1) {
                    // Option 1 selected
                } else if (checkedId == R.id.radio_button_2) {
                    // Option 2 selected
                }
            }
        });
    }
}

In this code, we use the setOnCheckedChangeListener method of the RadioGroup to set up an event listener that listens for changes to the selected RadioButton. When a RadioButton is selected, the onCheckedChanged method is called, and we can use the checkedId parameter to determine which RadioButton was selected.

Checkbox:

Checkbox is a UI element that allows the user to select one or more options from a set of predefined options. It appears as a square box that can be either checked or unchecked.

To create a checkbox in an Android application, follow these steps:

  1. Open the XML layout file for the activity or fragment where you want to add the checkbox.

  2. Add the following code to the layout file:

    <CheckBox
    android:id="@+id/checkbox_id"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Checkbox Text" />

    Here, android:id specifies a unique identifier for the checkbox, android:layout_width and android:layout_height specify the dimensions of the checkbox, and android:text specifies the text that appears next to the checkbox.

  3. In the corresponding Java or Kotlin file, add the following code:

    CheckBox checkbox = findViewById(R.id.checkbox_id);
checkbox.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
    @Override
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
        if (isChecked) {
            // Checkbox is checked
        } else {
            // Checkbox is unchecked
        }
    }
});

    Here, findViewById retrieves the checkbox view by its ID, and setOnCheckedChangeListener sets a listener to be notified when the checkbox's state changes.

  4. To retrieve the current state of the checkbox, you can call the isChecked method:

    boolean isChecked = checkbox.isChecked();

With these steps, you can create and use a checkbox in your Android application.

15. Draw the hierarchy of designing User Interface (UI) with View.

Hierarchy of designing User Interface (UI) with View:

ViewGroup (Root)
├── View
│   ├── TextView
│   ├── ImageView
│   ├── Button
│   ├── ImageButton
│   ├── EditText
│   ├── ProgressBar
│   ├── RadioButton
│   ├── CheckBox
│   ├── Spinner
│   ├── DatePicker
│   ├── TimePicker
│   ├── SeekBar
│   ├── RatingBar
│   └── ...
├── ViewGroup
│   ├── LinearLayout
│   ├── RelativeLayout
│   ├── FrameLayout
│   ├── ConstraintLayout
│   ├── GridLayout
│   └── ...
└── ...

The root of the hierarchy is a ViewGroup, which can contain any number of Views or ViewGroups. Views are basic building blocks of the UI, such as TextViews, ImageViews, and Buttons. ViewGroups are containers that can hold other Views or ViewGroups, and they can be arranged in various ways, such as LinearLayout, RelativeLayout, FrameLayout, ConstraintLayout, and GridLayout.

UNIT%204%20ac49913340034ed78b0ef53f7d7588ef/V_Black.png This hierarchy can be nested and combined in different ways to create complex and responsive UI layouts for Android applications.

16. Describe the term “edit text” with example.

EditTextis a UI element used to allow the user to enter or modify text values. It is a subclass of TextView and provides a text editor for the user to enter or edit text. EditText can be used for various purposes such as accepting username, passwords, email addresses, and other textual data.

Here's an example of how to create an EditText in Android:

  1. Open your layout file (activity_main.xml) and add the following code:
<EditText
    android:id="@+id/edit_text"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Enter your name" />

This creates an EditText with an ID of "edit_text", with the width set to "match_parent" and the height set to "wrap_content". The "hint" attribute sets the hint text that will be displayed in the EditText before the user enters any text.

  1. Open your MainActivity.java file and add the following code to access the EditText and set its value:
EditText editText = findViewById(R.id.edit_text);
String name = editText.getText().toString();

This code accesses the EditText with an ID of "edit_text" and gets the text value that the user has entered.

You can then use the "name" variable to perform any necessary operations on the user's input.

17. Develop an Android application using Image Button.

Here's an example of an Android application that uses an ImageButton:

  1. Open Android Studio and create a new project with an empty activity.
  2. Open the layout file for the activity (activity_main.xml) and add the following code:
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
 
    <ImageButton
        android:id="@+id/image_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:src="@drawable/ic_android_black_24dp" />
 
    <TextView
        android:id="@+id/text_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Click the image button" />
 
</LinearLayout>

This creates a LinearLayout element that contains an ImageButton element with an ID of "image_button" and a TextView element with an ID of "text_view". The ImageButton displays the Android logo.

  1. Open the MainActivity.java file and add the following code:
public class MainActivity extends AppCompatActivity {
 
    private ImageButton imageButton;
    private TextView textView;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        imageButton = findViewById(R.id.image_button);
        textView = findViewById(R.id.text_view);
 
        imageButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                textView.setText("Image button clicked");
            }
        });
    }
}

This code sets up the ImageButton and TextView elements and creates an OnClickListener that listens for clicks on the image button. When the image button is clicked, the text of the TextView element is changed to "Image button clicked".

  1. Run the application and test it by clicking the image button. The text of the TextView element should change to "Image button clicked".

18. Develop an Android application using Toggle Button.

Sure, here's an example of an Android application that uses a ToggleButton:

  1. Open Android Studio and create a new project with an empty activity.
  2. Open the layout file for the activity (activity_main.xml) and add the following code:
<ToggleButton
    android:id="@+id/toggle_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textOff="Off"
    android:textOn="On" />

This creates a ToggleButton element with an ID of "toggle_button" and labels for the off and on states.

  1. Open the MainActivity.java file and add the following code:
public class MainActivity extends AppCompatActivity {
 
    private ToggleButton toggleButton;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        toggleButton = findViewById(R.id.toggle_button);
 
        toggleButton.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                if (isChecked) {
                    Toast.makeText(MainActivity.this, "Toggle button is on", Toast.LENGTH_SHORT).show();
                } else {
                    Toast.makeText(MainActivity.this, "Toggle button is off", Toast.LENGTH_SHORT).show();
                }
            }
        });
    }
}

This code sets up the ToggleButton element and creates an onCheckedChangeListener that listens for changes to the toggle button's state. When the toggle button is turned on, a Toast message is displayed that says "Toggle button is on". When the toggle button is turned off, a Toast message is displayed that says "Toggle button is off".

  1. Run the application and test it by turning the toggle button on and off. When the toggle button is turned on, the "Toggle button is on" Toast message should appear, and when the toggle button is turned off, the "Toggle button is off" Toast message should appear.

19. Develop an Android application using Checkbox.

Here's an example of an Android application that uses a CheckBox:

  1. Open Android Studio and create a new project with an empty activity.
  2. Open the layout file for the activity (activity_main.xml) and add the following code:
<CheckBox
    android:id="@+id/checkbox"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="I agree to the terms and conditions" />

This creates a CheckBox element with an ID of "checkbox" and a text label that reads "I agree to the terms and conditions".

  1. Open the MainActivity.java file and add the following code:
public class MainActivity extends AppCompatActivity {
 
    private CheckBox checkBox;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        checkBox = findViewById(R.id.checkbox);
 
        checkBox.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                if (isChecked) {
                    Toast.makeText(MainActivity.this, "You agreed to the terms and conditions", Toast.LENGTH_SHORT).show();
                }
            }
        });
    }
}

This code sets up the CheckBox element and creates an onCheckedChangeListener that listens for changes to the checkbox's state. When the checkbox is checked, a Toast message is displayed that says "You agreed to the terms and conditions".

  1. Run the application and test it by checking and unchecking the checkbox. When the checkbox is checked, the Toast message should appear.

20. Develop an Android application using Progress bar.

Sure, here's an example of an Android application that uses a ProgressBar to show progress:

  1. Open Android Studio and create a new project with an empty activity.
  2. Open the layout file for the activity (activity_main.xml) and add the following code:
<ProgressBar
    android:id="@+id/progress_bar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:indeterminate="true"
    android:visibility="gone" />

This creates a ProgressBar element with an ID of "progress_bar". The "indeterminate" attribute set to "true" means that the progress bar will animate indefinitely, and the "visibility" attribute set to "gone" means that the progress bar will be hidden by default.

  1. Open the MainActivity.java file and add the following code:
public class MainActivity extends AppCompatActivity {
 
    private ProgressBar progressBar;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        progressBar = findViewById(R.id.progress_bar);
    }
 
    public void onButtonClick(View view) {
        progressBar.setVisibility(View.VISIBLE);
 
        // Simulate a long-running task
        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                progressBar.setVisibility(View.GONE);
            }
        }, 3000);
    }
}

This code sets up the ProgressBar element and also creates a button with an onClick event handler. When the user clicks the button, the progress bar is made visible and a simulated long-running task is started. After 3 seconds, the progress bar is hidden again.

  1. Open the layout file for the activity again (activity_main.xml) and add a button element:
<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Start Task"
    android:onClick="onButtonClick" />

This creates a button with the text "Start Task" that triggers the onButtonClick method when clicked.

  1. Run the application and test it by clicking the button. The progress bar should appear and animate for 3 seconds before disappearing.

21. Develop an Android application using Time Picker.

Here's an example of an Android application that uses a TimePicker to allow the user to select a time:

  1. Open Android Studio and create a new project with an empty activity.
  2. Open the layout file for the activity (activity_main.xml) and add the following code:
<TimePicker
    android:id="@+id/time_picker"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

This creates a TimePicker element with an ID of "time_picker".

  1. Open the MainActivity.java file and add the following code:
public class MainActivity extends AppCompatActivity {
 
    private TimePicker timePicker;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        timePicker = findViewById(R.id.time_picker);
        timePicker.setIs24HourView(true);
    }
 
    public void onButtonClick(View view) {
        int hour = timePicker.getCurrentHour();
        int minute = timePicker.getCurrentMinute();
 
        Toast.makeText(this, "Time selected: " + hour + ":" + minute, Toast.LENGTH_SHORT).show();
    }
}

This code sets up the TimePicker element and also creates a button with an onClick event handler. When the user clicks the button, the selected time is retrieved from the TimePicker and displayed in a Toast message.

  1. Open the layout file for the activity again (activity_main.xml) and add a button element:
<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Select Time"
    android:onClick="onButtonClick" />

This creates a button with the text "Select Time" that triggers the onButtonClick method when clicked.

  1. Run the application and test it by selecting a time from the TimePicker and clicking the button. The selected time should be displayed in a Toast message.

22. Develop an Android application using Date Picker.

Here's an example of an Android application that uses a DatePicker to allow the user to select a date:

  1. Open Android Studio and create a new project with an empty activity.
  2. Open the layout file for the activity (activity_main.xml) and add the following code:
<DatePicker
    android:id="@+id/date_picker"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

This creates a DatePicker element with an ID of "date_picker".

  1. Open the MainActivity.java file and add the following code:
public class MainActivity extends AppCompatActivity {
 
    private DatePicker datePicker;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        datePicker = findViewById(R.id.date_picker);
    }
 
    public void onButtonClick(View view) {
        int day = datePicker.getDayOfMonth();
        int month = datePicker.getMonth() + 1; // months are zero-indexed
        int year = datePicker.getYear();
 
        Toast.makeText(this, "Date selected: " + month + "/" + day + "/" + year, Toast.LENGTH_SHORT).show();
    }
}

This code sets up the DatePicker element and also creates a button with an onClick event handler. When the user clicks the button, the selected date is retrieved from the DatePicker and displayed in a Toast message.

  1. Open the layout file for the activity again (activity_main.xml) and add a button element:
<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Select Date"
    android:onClick="onButtonClick" />

This creates a button with the text "Select Date" that triggers the onButtonClick method when clicked.

  1. Run the application and test it by selecting a date from the DatePicker and clicking the button. The selected date should be displayed in a Toast message.

23. Describe the concept of Custom Toast Alert with example.

In Android, a Toast is a short message that pops up on the screen to provide information or notification to the user. A Custom Toast Alert allows you to modify the layout and appearance of the default Toast to better fit the style and theme of your app.

To create a custom Toast Alert, you need to define a layout XML file that describes the content and appearance of the Toast, and then inflate that layout in your Java code to create the Toast.

Here is an example of creating a custom Toast Alert in Android:

  1. Create a new layout XML file for your custom Toast, let's call it custom_toast.xml. This file should define the content and layout of your Toast. For example:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/toast_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/toast_background"
    android:orientation="horizontal"
    android:padding="16dp">
 
    <ImageView
        android:id="@+id/toast_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_warning"/>
 
    <TextView
        android:id="@+id/toast_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/toast_text_color"
        android:textSize="16sp"/>
 
</LinearLayout>
  1. In your Java code, create a Toast object and set its view to your custom layout:
LayoutInflater inflater = getLayoutInflater();
View layout = inflater.inflate(R.layout.custom_toast,
    (ViewGroup) findViewById(R.id.toast_layout));
 
ImageView icon = (ImageView) layout.findViewById(R.id.toast_icon);
icon.setImageResource(R.drawable.ic_success);
 
TextView text = (TextView) layout.findViewById(R.id.toast_text);
text.setText("Operation successful");
 
Toast toast = new Toast(getApplicationContext());
toast.setGravity(Gravity.CENTER_VERTICAL, 0, 0);
toast.setDuration(Toast.LENGTH_SHORT);
toast.setView(layout);
toast.show();

This code inflates the custom_toast.xml layout file, finds the ImageView and TextView within the layout, and sets their contents. Then it creates a new Toast object and sets its view to the inflated layout.

UNIT%204%20ac49913340034ed78b0ef53f7d7588ef/V_Black%201.png Note that in this example, we've added a custom background and color for the Toast to make it stand out more. You can customize the layout and appearance of your Toast to match the design of your app.

Unit 3Unit 5