Basics of Input Controls in Android

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
1. <Button
2. android:layout_width="wrap_content"
3. android:layout_height="wrap_content"
4. android:text="@string/button_text"
5. 　 ... />

Button with an icon using ImageButton
1. <ImageButton
2. android:layout_width="wrap_content"
3. android:layout_height="wrap_content"
4. android:src="@drawable/button_icon"
5. ... />

Button with text and icon using android.drawableLeft
1. <Button
2. android:layout_width="wrap_content"
3. android:layout_height="wrap_content"
4. android:text="@string/button_text"
5. android:drawableLeft="@drawable/button_icon"
6. ... />

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

/** Called when the user touches the button */
public void sendMessage(View view) {
// Do something in response to button click
}

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) {
// Do something in response to button click
}
});

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) {
// Use the current time as the default values for the picker
final Calendar c = Calendar.getInstance();
int hour = c.get(Calendar.HOUR_OF_DAY);
int minute = c.get(Calendar.MINUTE);
// Create a new instance of TimePickerDialog and return it
return new TimePickerDialog(getActivity(), this, hour, minute,
DateFormat.is24HourFormat(getActivity()));
}
public void onTimeSet(TimePicker view, int hourOfDay, int minute) {
// Do something with the time chosen by the user
}
}

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) {
// Use the current date as the default date in the picker
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);
// Create a new instance of DatePickerDialog and return it
return new DatePickerDialog(getActivity(), this, year, month, day);
}
public void onDateSet(DatePicker view, int year, int month, int day) {
// Do something with the date chosen by the user
}
}

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.