BCA / B.Tech 15 min read

Working with Basic and Picker Views

Basic और Picker Views के साथ काम करना

Basic Views का परिचय

Basic Views Android UI के सबसे fundamental building blocks हैं। ये simple UI elements होते हैं जिनका उपयोग user को information दिखाने और उनसे input लेने के लिए किया जाता है।

  • TextView: Screen पर text दिखाने के लिए उपयोग किया जाता है। यह non-editable होता है।
  • EditText: User से text input लेने के लिए उपयोग किया जाता है। यह `TextView` का एक subclass है।
  • Button: एक standard push-button जिसे user click कर सकता है।
  • CheckBox: एक special type का button जिसमें दो states होती हैं: checked और unchecked. Users multiple checkboxes को select कर सकते हैं।
  • RadioButton: Checkbox की तरह, लेकिन users एक group में से केवल एक `RadioButton` select कर सकते हैं। इन्हें `RadioGroup` में रखा जाना चाहिए।
  • Switch: On/Off state को represent करने के लिए एक two-state toggle switch.

Picker Views का परिचय

Picker Views users को एक dialog से date या time select करने का एक quick तरीका प्रदान करते हैं।

  • DatePicker: Users को day, month, और year select करने की अनुमति देता है।
  • TimePicker: Users को hour और minute select करने की अनुमति देता है।

XML में Basic Views का उदाहरण


<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>

Java में Picker Views का उपयोग करना

Pickers को सीधे layout में add करने के बजाय, उन्हें `DatePickerDialog` और `TimePickerDialog` का उपयोग करके दिखाना aam baat है।

DatePickerDialog और TimePickerDialog का उदाहरण:

मान लीजिए आपके layout में दो Buttons हैं (एक date के लिए, एक time के लिए) और एक TextView 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() {
        // 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) {
                        // Selected date को TextView में set करें
                        resultTextView.setText(dayOfMonth + "-" + (monthOfYear + 1) + "-" + year);
                    }
                },
                year, month, day);
        datePickerDialog.show();
    }

    private void showTimePickerDialog() {
        // 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) {
                        // Selected time को TextView में set करें
                        resultTextView.setText(hourOfDay + ":" + minute);
                    }
                },
                hour, minute, false); // false = 12-hour format
        timePickerDialog.show();
    }
}