Wednesday, July 2, 2014

Android - Day 1 - Android Input Controls Part 1

These are the interactive components. Below are some common controls 

Button :- A push-button that can be pressed or clicked by the user to perform an action. 
Text Field : editable textview. Application can use AutocompleteText widget to create a text entry widget that provides auto-complete suggestions. 
Checkbox : On/Off switch as usual.
RadioButton, ToggleButton, Spinner, 
Pickers -> This displays Dialog for users to select a Single value for a set by using up/down button or swipe gesture. DatePicker or TimePicker widget can be used for acheving this. 

Buttons can have text, icon or both. Application needs to use Button and ImageButton class for this. With the Button, the icon image can be placed on the button using android:leftDrawable property. 

There are two ways application have listeners to the button. Defining in the layout xml file in the Button XML attributes using android:onClick property. Inside the Activity which hosts this Button view need to write the method as public, void and accepting the View argument. 

Programmatically can define the action by using the View.onClickListener object. For e.g. below 

Button b = findViewById(R.id.button_id)
button.setOnClickListener(new View.onClickListener() 
{
public void onClick(View v)
{
}
});

The appearance of the button may vary across the different devices since they are from different manufacturers. However, application can set a theme for the entire application and
For e.g application can set the theme as holo theme using the following 

android:theme="@android:style/Theme.Holo" in the manifest element. The theme is not supported on older devices, so, http://android-developers.blogspot.com/2012/01/holo-everywhere.html can help to do something similar for earlier versions of OS. 

Application can set the border style of a button like style="?android:attr/borderlessButtonStyle"

Application can also set a custom background. Below is what application needs to do for this 

1. Create three bitmpas for the button background that represents the default, pressed and focused button states. Application needs to create these as nine patch images
2. place the bitmapts in /drawable resource. the convention is something like button_pressed.9.png, button_focused.9.png, button_default.9.png 
3. Create a new XML in the /res/drawable directory (the name can be like button_custom.xml)

The below could be the content of this XML file 


Text Fields
Applications can use EditText class to display the text. android:inputType specifies whether we should get the input type as email id, text, texturi, number, phone. The inputType filed is a bit or-ed value and the other values are textCapSentences, text capWords, textAutoCorrect, textPassword, textMultiLine, Applications can specify the subsequent actions using the imeOptions value. The possible values are actionDone, actionSend, actionSearch, or suppress everything by using actionNone. In order to listen to the IME action events, below code can be used 

EditText et = findViewById(R.id.edit_text); 
et.setOnEditActionListener(new OnEditorActionListener()
{
@override
public boolean onEditorAction(TextView v, int actionId, KeyEvent evt)
{
boolean handled = false;
if(actionId == Editor.IME_ACTION_SEND)
{
sendMessage();
handled = true;
}
return handled;
}
}
);

Application can also set a custom IME action label by using the property imeActionLabel property. In addition, many flags can be set using android:imeOptions attribute For e.g. in landscape mode, the text field may turn to a full screen one. And this can be disabled using the flag "flagNoExtractUi"

If application needs to provide an AutoCompleteTextView, The code can be something like below 

AutocompleteTextView tv = (AutocompleteTextView) findViewById(R.id.autocomplete_text);
String countries[] = getResources().getStringArray(R.array.countries_array);
ArrayAdapter adapter = (this, android.R.simple_list_item_1,countries);

tv.setAdapter(adapter);

references: 
http://developer.android.com/guide/topics/ui/controls.html

No comments:

Post a Comment