Post
Ask Question

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
  1. <?xml version="1.0" encoding="utf-8"?>    
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    
  3.    android:layout_width="fill_parent"    
  4.    android:layout_height="fill_parent"    
  5.    android:orientation="horizontal">    
  6.    
  7. <EditText android:id="@+id/edit_message"    
  8.    android:layout_weight="1"    
  9.    android:layout_width="0dp"    
  10.    android:layout_height="wrap_content"    
  11.    android:hint="@string/edit_message" />    
  12.    
  13. <Button android:id="@+id/button_send"    
  14.    android:layout_width="wrap_content"    
  15.    android:layout_height="wrap_content"    
  16.    android:text="@string/button_send"    
  17.    android:onClick="sendMessage" />    
  18.    
  19. </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.
 
input controls
 
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.
  1. <?xml version="1.0" encoding="utf-8"?>    
  2. <Button xmlns:android="http://schemas.android.com/apk/res/android"    
  3.    android:id="@+id/button_send"    
  4.    android:layout_width="wrap_content"    
  5.    android:layout_height="wrap_content"    
  6.    android:text="@string/button_send"    
  7.    android:onClick="sendMessage" /> 
Activity that hosts XML file for the activity_main.xml
  1. /** Called when the user touches the button */    
  2. public void sendMessage(View view) {    
  3. // Do something in response to button click    
  4. }   
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:
  1. Button button = (Button) findViewById(R.id.button_send);    
  2. button.setOnClickListener(new View.OnClickListener() {    
  3. public void onClick(View v) {    
  4. // Do something in response to button click    
  5. }    
  6. });   

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
  1. public static class TimePickerFragment extends DialogFragment implements TimePickerDialog.OnTimeSetListener {    
  2.     
  3. @Override    
  4. public Dialog onCreateDialog(Bundle savedInstanceState) {    
  5. // Use the current time as the default values for the picker    
  6.    final Calendar c = Calendar.getInstance();    
  7.    int hour = c.get(Calendar.HOUR_OF_DAY);    
  8.    int minute = c.get(Calendar.MINUTE);    
  9.     
  10. // Create a new instance of TimePickerDialog and return it    
  11.    return new TimePickerDialog(getActivity(), this, hour, minute,    
  12.    DateFormat.is24HourFormat(getActivity()));    
  13. }    
  14.     
  15.    public void onTimeSet(TimePicker view, int hourOfDay, int minute) {    
  16. // Do something with the time chosen by the user       
  17.    }    
  18. }   
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.
  1. <Button     
  2.    android:layout_width="wrap_content"     
  3.    android:layout_height="wrap_content"    
  4.    android:text="@string/pick_time"     
  5.    android:onClick="showTimePickerDialog" />   
On the click of the button it will invoke the following method:
  1. public void showTimePickerDialog(View v) {    
  2.    DialogFragment newFragment = new TimePickerFragment();    
  3.    newFragment.show(getSupportFragmentManager(), "timePicker");    
  4. }   
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.
  1. public static class DatePickerFragment extends DialogFragment implements DatePickerDialog.OnDateSetListener {    
  2.     
  3. @Override    
  4. public Dialog onCreateDialog(Bundle savedInstanceState) {    
  5. // Use the current date as the default date in the picker    
  6.    final Calendar c = Calendar.getInstance();    
  7.    int year = c.get(Calendar.YEAR);    
  8.    int month = c.get(Calendar.MONTH);    
  9.    int day = c.get(Calendar.DAY_OF_MONTH);    
  10.     
  11. // Create a new instance of DatePickerDialog and return it    
  12.    return new DatePickerDialog(getActivity(), this, year, month, day);    
  13. }    
  14.     
  15.    public void onDateSet(DatePicker view, int year, int month, int day) {    
  16. // Do something with the date chosen by the user    
  17.    }    
  18. }    

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.
  1. <Button     
  2.    android:layout_width="wrap_content"     
  3.    android:layout_height="wrap_content"    
  4.    android:text="@string/pick_date"     
  5.    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.
  1. public void showDatePickerDialog(View v) {    
  2.    DialogFragment newFragment = new DatePickerFragment();    
  3.    newFragment.show(getSupportFragmentManager(), "datePicker");    
  4. }   
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.
 
text field
 

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.


Similar Articles