Introduction
In any system, programs or machines the basic thing is the layout and its specification. We have already learned the basics of Android in previous articles.
In this article, we will understand the Input controls used in Android. For example, in a machine, we first look at the design and layout and then start it using an input via controls, given at the side or anywhere. It might be located throughout the machine. Comparing it to Android mobile phones we saw various widgets and buttons for giving the inputs.
The Button, seek bars, toggles, and Text fields are basically input controls defined in the view group and view class. Input controls are interactive components in any application's user interface.
Adding an input control to the user interface is very simple. Just add resources to the XML file located at activity_main.xml or whatever one names it. Have a look at the code we have just tried to show the basic structure of Inputs.
activity_main.xml
- <?xml version="1.0" encoding="utf-8"?>
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:orientation="horizontal">
-
- <EditText android:id="@+id/edit_message"
- android:layout_weight="1"
- android:layout_width="0dp"
- android:layout_height="wrap_content"
- android:hint="@string/edit_message" />
-
- <Button android:id="@+id/button_send"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="@string/button_send"
- android:onClick="sendMessage" />
-
- </LinearLayout>
Here each input supports a specific set of input events so the handling of events becomes easy.
Button class
A button consists of text or an icon or both that communicates when an action occurs when the user clicks it.
It depends upon the user what kind of button to use. As previously said, the figures show the design of the button as provided in the APIs by Google.
- Button with text
- <Button
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="@string/button_text"
- ใ ... />ใ
- Button with an icon using ImageButton
- <ImageButton
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:src="@drawable/button_icon"
- ... />
- Button with text and icon using android.drawableLeft
- <Button
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="@string/button_text"
- android:drawableLeft="@drawable/button_icon"
- ... />ใ
Responding to Click Events
When a button class is used to create a button in the XML layout file then it is the programmer's duty to provide a listener in the Java file and we must define an onclick attribute in the XML file itself.
- <?xml version="1.0" encoding="utf-8"?>
- <Button xmlns:android="http://schemas.android.com/apk/res/android"
- android:id="@+id/button_send"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="@string/button_send"
- android:onClick="sendMessage" />
Activity that hosts XML file for the activity_main.xml
-
- public void sendMessage(View view) {
-
- }
Using onClickListener()
After setting the attributes on the XML file, now we must attach the event listener. To declare the event handler programmatically, create a View.OnClickListener object and assign it to the button by calling setOnClickListener(View.OnClickListener).
For example:
- Button button = (Button) findViewById(R.id.button_send);
- button.setOnClickListener(new View.OnClickListener() {
- public void onClick(View v) {
-
- }
- });
Pickers
Android provides controls for the user to pick a time or pick a date as a ready to use dialog. When a picker is selected each and every fragment is selected or is available for the user. For example, in a date and time format, each and every fragment is available for the user interaction of picking up the date and time. Certain DialogFragments are used to host each time or date picker.
Eventually, the DialogFragment was first added to the platform in Android 3.0 (API level 11), if your app supports versions of Android older than 3.0 (even as low as Android 1.6) then you can use the DialogFragment class available in the support library for backward compatibility.
Creating a Time Picker
To display a TimePickerDialog using DialogFragment, you need to define a fragment class that extends DialogFragment and returns a TimePickerDialog from the fragment's onCreateDialog() method.
Extending DialogFragment for a time picker
To define a DialogFragment for a TimePickerDialog you must:
- Define the onCreateDialog() method to return an instance of TimePickerDialog
- Implement the TimePickerDialog.OnTimeSetListener interface to receive a callback when the user sets the time
For example
Showing the time picker
- public static class TimePickerFragment extends DialogFragment implements TimePickerDialog.OnTimeSetListener {
-
- @Override
- public Dialog onCreateDialog(Bundle savedInstanceState) {
-
- final Calendar c = Calendar.getInstance();
- int hour = c.get(Calendar.HOUR_OF_DAY);
- int minute = c.get(Calendar.MINUTE);
-
-
- return new TimePickerDialog(getActivity(), this, hour, minute,
- DateFormat.is24HourFormat(getActivity()));
- }
-
- public void onTimeSet(TimePicker view, int hourOfDay, int minute) {
-
- }
- }
First, we need to create the button on the click of the button. A method is being called to show the activity visible to the user.
- <Button
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="@string/pick_time"
- android:onClick="showTimePickerDialog" />
On the click of the button it will invoke the following method:
- public void showTimePickerDialog(View v) {
- DialogFragment newFragment = new TimePickerFragment();
- newFragment.show(getSupportFragmentManager(), "timePicker");
- }
The preceding method calls the instance created of the DialogFragment defined above.
Creating a date picker
All the things remain similar as previously written but instead, the time and date replace it and various classes of date is as shown below.
- public static class DatePickerFragment extends DialogFragment implements DatePickerDialog.OnDateSetListener {
-
- @Override
- public Dialog onCreateDialog(Bundle savedInstanceState) {
-
- 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);
-
-
- return new DatePickerDialog(getActivity(), this, year, month, day);
- }
-
- public void onDateSet(DatePicker view, int year, int month, int day) {
-
- }
- }
Showing the Date Picker
Once we define a Dialogfragment such as previously described you can easily display that to the user with the following method.
- <Button
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="@string/pick_date"
- android:onClick="showDatePickerDialog" />
This is the same as the previously written procedure. Look at the following of when the user clicks the button, a system call invokes the method.
- public void showDatePickerDialog(View v) {
- DialogFragment newFragment = new DatePickerFragment();
- newFragment.show(getSupportFragmentManager(), "datePicker");
- }
This method calls the show() method on a new instance of the DialogFragment as defined above. This show() method requires an instance of FragmentManager.
TextFields
TextField is basically a part of a view group. It is the view object in which the user types something for doing certain things. For example, when we go to the main application in our Android enabled phone or any other device such that it contains a Blue or any other lining to show that user can type here. When we type there the dome application restricts the TextField and some not.
http://www.c-sharpcorner.com/UploadFile/0e8478/navigation-among-activities-using-android-studio/
For the creation of a TextField please refer to the link given previously because I have already created it using attribute EditText.
Summary
This article is all about the input controls when dealing with Android phones. Here we have learned various parts and fragments via input controls widgets and objects.