Working with Basic and Picker Views

Working with Basic and Picker Views

Introduction to Basic Views

Basic Views are the most fundamental building blocks of the Android UI. They are simple UI elements used to display information to the user and get input from them.

• TextView: Used to display text on the screen. It is non-editable.
• EditText: Used to get text input from the user. It is a subclass of `TextView`.
• Button: A standard push-button that the user can click.
• CheckBox: A special type of button with two states: checked and unchecked. Users can select multiple checkboxes.
• RadioButton: Similar to a checkbox, but users can only select one `RadioButton` from a group. They must be placed within a `RadioGroup`.
• Switch: A two-state toggle switch to represent an On/Off state.

Introduction to Picker Views

Picker Views provide a quick way for users to select a date or time from a dialog.

• DatePicker: Allows users to select a day, month, and year.
• TimePicker: Allows users to select an hour and minute.

Example of Basic Views in XML

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Your Name:" />

    <EditText
        android:id="@+id/name_edit_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Enter your name" />
    
    <CheckBox
        android:id="@+id/agree_checkbox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="I agree to the terms" />

    <RadioGroup
        android:id="@+id/gender_radio_group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <RadioButton
            android:id="@+id/male_radio"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Male" />
        <RadioButton
            android:id="@+id/female_radio"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Female" />
    </RadioGroup>

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

</LinearLayout>

Using Picker Views in Java

Rather than adding pickers directly to the layout, it is common to show them using a `DatePickerDialog` and `TimePickerDialog`.

Example of DatePickerDialog and TimePickerDialog:

Assume you have two Buttons in your layout (one for date, one for time) and a TextView to display the result.

public class MainActivity extends AppCompatActivity {

    Button datePickerBtn, timePickerBtn;
    TextView resultTextView;

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

        datePickerBtn = findViewById(R.id.date_picker_btn);
        timePickerBtn = findViewById(R.id.time_picker_btn);
        resultTextView = findViewById(R.id.result_tv);

        datePickerBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                showDatePickerDialog();
            }
        });

        timePickerBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                showTimePickerDialog();
            }
        });
    }

    private void showDatePickerDialog() {
        // Get current date
        final Calendar c = Calendar.getInstance();
        int year = c.get(Calendar.YEAR);
        int month = c.get(Calendar.MONTH);
        int day = c.get(Calendar.DAY_OF_MONTH);

        DatePickerDialog datePickerDialog = new DatePickerDialog(
                MainActivity.this,
                new DatePickerDialog.OnDateSetListener() {
                    @Override
                    public void onDateSet(DatePicker view, int year, int monthOfYear, int dayOfMonth) {
                        // Set selected date in TextView
                        resultTextView.setText(dayOfMonth + "-" + (monthOfYear + 1) + "-" + year);
                    }
                },
                year, month, day);
        datePickerDialog.show();
    }

    private void showTimePickerDialog() {
        // Get current time
        final Calendar c = Calendar.getInstance();
        int hour = c.get(Calendar.HOUR_OF_DAY);
        int minute = c.get(Calendar.MINUTE);

        TimePickerDialog timePickerDialog = new TimePickerDialog(
                MainActivity.this,
                new TimePickerDialog.OnTimeSetListener() {
                    @Override
                    public void onTimeSet(TimePicker view, int hourOfDay, int minute) {
                        // Set selected time in TextView
                        resultTextView.setText(hourOfDay + ":" + minute);
                    }
                },
                hour, minute, false); // false = 12-hour format
        timePickerDialog.show();
    }
}