Android Text Controls

Text controls include: <br /><br />1. TextView.<br /><br />2. EditText<br /><br />3. AutoCompleteEditText<br /><br />4. MultiCompleteTextView<br /><br /><span style="font-size: large;">TextView</span> <br />The <span style="color: blue;">TextView</span> represent an un-editable text. It resembles the Label control in C# or ASP.NET but it has an interesting feature which is the ability to highlight the text if its is an URL, an e-mail or a phone number so that when the user clicks on the textview the default intent whether it is the web browser or the dialer launches<br /><pre class="brush:xml"><?xml version="1.0" encoding="utf-8"?><br /><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"<br /> android:orientation="vertical"<br /> android:layout_width="fill_parent"<br /> android:layout_height="fill_parent"<br /> ><br /><TextView <br /> android:layout_width="fill_parent" <br /> android:layout_height="wrap_content" <br /> android:text="Visit Http://www.android-pro.blogspot.com"<br /> android:autoLink="web"<br /> android:id="@+id/txtURL"<br /> /><br /> <br /> <TextView <br /> android:layout_width="fill_parent" <br /> android:layout_height="wrap_content" <br /> android:text="Dial 1 650-253-0000"<br /> android:autoLink="all"<br /> /><br /></LinearLayout><br /><br /></pre><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://dl.dropbox.com/u/2624328/Android%20Pro/2010/Mars/Text%20Controls/TextControls1.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://dl.dropbox.com/u/2624328/Android%20Pro/2010/Mars/Text%20Controls/TextControls1.JPG" width="226" wt="true" /></a></div>you can see that the TextViews containing URLs or Phone numbers are highlighted, and when the user presses on them the default intent (the browser or the dialer launches)<br /><br /><br />this is done by using the property <span style="color: purple;">android:autoLink</span> which can have the values: <br /><pre>web, email ,phone, map</pre>or <br /><pre>All</pre>this can be achieved from code by using the following code:<br /><pre class="brush:java">TextView txtURL=(TextView)findViewById(R.id.txtURL);<br />Linkify.addLinks(txtURL, Linkify.ALL);<br /></pre><br /><span style="font-size: large;">EditText</span><br />The EditText is a subclass of the TextView it is like the TextBox in C#. it enables users to edit text.<br /><br /><br />We can use the autoText property to make the EditText to correct the common spelling mistakes.<br /><br /><pre class="brush:xml"><?xml version="1.0" encoding="utf-8"?><br /><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"<br /> android:orientation="vertical"<br /> android:layout_width="fill_parent"<br /> android:layout_height="fill_parent"<br /> ><br /><EditText<br />android:layout_width="fill_parent"<br />android:layout_height="wrap_content"<br />android:autoText="true"<br /><br />/><br /></LinearLayout><br /><br /><br /></pre><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://dl.dropbox.com/u/2624328/Android%20Pro/2010/Mars/Text%20Controls/TextControls2.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://dl.dropbox.com/u/2624328/Android%20Pro/2010/Mars/Text%20Controls/TextControls2.JPG" width="224" wt="true" /></a></div>We can use the <span style="color: blue;">capitalize</span> property to make the text capitalized like this:<br /><pre class="brush:xml"><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"<br /> android:orientation="vertical"<br /> android:layout_width="fill_parent"<br /> android:layout_height="fill_parent"<br /> ><br /><br /><EditText<br />android:layout_width="fill_parent"<br />android:layout_height="wrap_content"<br />android:capitalize="characters"<br /><br />/><br /><EditText<br />android:layout_width="fill_parent"<br />android:layout_height="wrap_content"<br />android:capitalize="none"<br />/><br /><EditText<br />android:layout_width="fill_parent"<br />android:layout_height="wrap_content"<br />android:capitalize="words"<br />/><br /></LinearLayout><br /><br /><br /></pre><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://dl.dropbox.com/u/2624328/Android%20Pro/2010/Mars/Text%20Controls/TextControls3.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://dl.dropbox.com/u/2624328/Android%20Pro/2010/Mars/Text%20Controls/TextControls3.JPG" width="225" wt="true" /></a></div>we can use the <span style="color: blue;">password</span> property to make the control accepts phone numbers input:<br /><pre class="brush:xml"><?xml version="1.0" encoding="utf-8"?><br /><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"<br /> android:orientation="vertical"<br /> android:layout_width="fill_parent"<br /> android:layout_height="fill_parent"<br /> ><br /><br /><EditText<br />android:layout_width="fill_parent"<br />android:layout_height="wrap_content"<br />android:password="true"<br /><br />/><br /><br /></LinearLayout><br /><br /><br /></pre><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://dl.dropbox.com/u/2624328/Android%20Pro/2010/Mars/Text%20Controls/TextControls4.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://dl.dropbox.com/u/2624328/Android%20Pro/2010/Mars/Text%20Controls/TextControls4.JPG" width="223" wt="true" /></a></div>We can enforce the Control to wrap all the text in a single line by setting <span style="color: purple;">android:singleLine</span> property to true.<br /><br /><span style="font-size: large;">AutoCompleteTextView</span><br />The autoCompleteTextView is an EditText with auto complete functionality. The auto complete functionality can be achieved by attaching an Adapter with the auto complete values to the control like this:<br /><pre class="brush:xml"><?xml version="1.0" encoding="utf-8"?><br /><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"<br /> android:orientation="vertical"<br /> android:layout_width="fill_parent"<br /> android:layout_height="fill_parent"<br /> ><br /><br /><AutoCompleteTextView<br />android:layout_width="fill_parent"<br />android:layout_height="wrap_content"<br />android:id="@+id/act"<br /><br />/><br /><br /></LinearLayout><br /><br /><br /></pre><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://dl.dropbox.com/u/2624328/Android%20Pro/2010/Mars/Text%20Controls/TextControls5.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://dl.dropbox.com/u/2624328/Android%20Pro/2010/Mars/Text%20Controls/TextControls5.JPG" width="223" wt="true" /></a></div>Then attach the adapter from the code like this:<br /><pre class="brush:java">AutoCompleteTextView act=(AutoCompleteTextView)findViewById(R.id.act);<br /> ArrayAdapter<string> arr=new ArrayAdapter<string>(this,android.R.layout.simple_dropdown_item_1line,new String []{"Hello","Hi","Alloha"});<br /> act.setAdapter(arr);<br /><br /></pre>in a search program for example you can obtain the auto complete words from a web service and populate the adapter with these words.<br /><br /><span style="font-size: large;">MultiAutoCompleteTextView</span><br /><br />The <span style="color: blue;">AutoCompleteTextView</span> can suggest auto complete for the entire text in the control, meaning that if you type more than one word it would try to match the whole sentence not the single words.<br />The <span style="color: blue;">MultiAutoCompleteTextView</span> works the same way as the AutoCompleteTextView except you can add a Tokenizer that parses the text and allows you to suggest where to start suggesting words like this:<br /><pre class="brush:xml"><?xml version="1.0" encoding="utf-8"?><br /><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"<br /> android:orientation="vertical"<br /> android:layout_width="fill_parent"<br /> android:layout_height="fill_parent"<br /> ><br /><br /><MultiAutoCompleteTextView <br />android:layout_width="fill_parent"<br />android:layout_height="wrap_content"<br />android:id="@+id/act"<br /><br />/><br /><br /></LinearLayout><br /><br /></pre><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://dl.dropbox.com/u/2624328/Android%20Pro/2010/Mars/Text%20Controls/TextControls6.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://dl.dropbox.com/u/2624328/Android%20Pro/2010/Mars/Text%20Controls/TextControls6.JPG" width="224" wt="true" /></a></div>then from code:<br /><pre class="brush:java">MultiAutoCompleteTextView mact=(MultiAutoCompleteTextView)findViewById(R.id.act);<br /> ArrayAdapter<string> arr=new ArrayAdapter<string>(this,android.R.layout.simple_dropdown_item_1line,new String []{"Hello","Hi","Alloha"});<br /> mact.setAdapter(arr);<br /> mact.setTokenizer(new MultiAutoCompleteTextView.CommaTokenizer());<br /><br /></pre>The tokenizer tells the control to start suggesting for words separated by a comma.

Text controls include: 1. TextView.2. EditText3. AutoCompleteEditText4. MultiCompleteTextViewTextView The TextView represent an un-editable text. It resembles the Label control in C# or ASP.NET but it has an interesting feature which is the ability t…

Android Button Controls

Android offers three types of button controls<br /><br /><br />1. The Basic Button.<br /><br />2. Image Button<br /><br />3. Toggle Button.<br /><br /><span style="font-size: large;">The Basic Button:</span> <br /><br /><br />The android standard button. It is a subclass of the TextView class so it inherits all of its properties.<br /><br /><pre class="brush:xml"><linearlayout <br />android:layout_height="fill_parent" <br />android:layout_width="fill_parent" <br />android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android"<br />><br /><Button<br />android:id="@+id/btn"<br />android:layout_width="wrap_content"<br />android:layout_height="wrap_content"<br />android:text="Click Me"<br />/><br /></linearlayout><br /><br /></pre><div class="separator" style="clear: both; text-align: center;"><a href="http://dl.dropbox.com/u/2624328/Android%20Pro/2010/Mars/Button%20Controls/Button%20Controls.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://dl.dropbox.com/u/2624328/Android%20Pro/2010/Mars/Button%20Controls/Button%20Controls.JPG" width="223" wt="true" /></a></div><br />If you want to implement the <span style="color: blue;">OnClick</span> event handler for a button there are three ways to do it:<br /><u>First</u><br />You can implement the <span style="color: blue;">OnClickListner</span> Interface for each single button in the activity like this:<br /><br /><pre class="brush:java">Button btn=(Button)findViewById(R.id.btn);<br /> <br /> btn.setOnClickListener(new OnClickListener()<br /> {<br /> public void onClick(View v) {<br /> Button btn=(Button)v;<br /> btn.setText("You clicked on the button");<br /> }<br /> }<br /> );<br /> <br /></pre>But this will lead to large code blocks with lots of redundancy cause you will do it for each button in your activity.<br /><br /><u>Second</u><br />You can use an activity that implements the OnClickListner Interface and use the onClick method by switching between the buttons IDs:<br /><pre class="brush:java">public class ButtonControls extends Activity implements OnClickListener {<br /> /** Called when the activity is first created. */<br /> @Override<br /> public void onCreate(Bundle savedInstanceState) {<br /> super.onCreate(savedInstanceState);<br /> setContentView(R.layout.main);<br /> <br /> }<br /> public void onClick(View v) {<br /> // TODO Auto-generated method stub<br /> switch(v.getId())<br /> {<br /> case R.id.btn1:<br /> //Do something<br /> break;<br /> case R.id.btn2:<br /> // Do something<br /> break;<br /> }<br /> }<br />}<br /><br /></pre><br /><u>Third</u><br />Since Android 1.6 there was a new cool feature which is the ability to define the on click handlers for the bttons from the XML layout definition. Which is similar to that in ASP.NET.<br /><br /><pre class="brush:xml"><button <br />android:id="@+id/btn1" <br />android:layout_height="wrap_content" <br />android:layout_width="wrap_content" <br />android:onClick="ClickHandler" <br />android:text="Click Me"<br />/><br /><button <br />android:id="@+id/btn2" <br />android:layout_height="wrap_content" <br />android:layout_width="wrap_content" <br />android:onclick="ClickHandler" <br />android:text="Click Me too" <br />/><br />Then you define the event handler method in your class file in the same normal way<br /></pre><br /><pre class="brush:java"> public void ClickHandler(View v) { <br />// TODO Auto-generated method stub<br /> switch(v.getId())<br /> {<br /> case R.id.btn1:<br /> //Do something<br /> break;<br /> case R.id.btn2:<br /> // Do something<br /> break;<br /> }<br /> }<br /><br /></pre><span style="font-size: large;">The ImageButton</span><br />The <span style="color: blue;">ImageButton</span> control is similar to the Button except it represents a button with an image instead of the text<br /><pre class="brush:xml"><linearlayout android:layout_height="fill_parent" android:layout_width="fill_parent" android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android"<br />/><br /><imagebutton <br />android:id="@+id/btn1" <br />android:layout_height="wrap_content" <br />android:layout_width="wrap_content" <br />android:src="@drawable/globe"<br />/><br /></linearlayout><br /><br /></pre><div class="separator" style="clear: both; text-align: center;"><a href="http://dl.dropbox.com/u/2624328/Android%20Pro/2010/Mars/Button%20Controls/Button%20Controls2.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://dl.dropbox.com/u/2624328/Android%20Pro/2010/Mars/Button%20Controls/Button%20Controls2.JPG" width="222" wt="true" /></a></div>You can set the image source property from the code like this:<br /><pre class="brush:java">ImageButton btn=(ImageButton)findViewById(R.id.btn1);<br />btn.setImageResource(R.drawable.globe);<br /><br /></pre><br /><span style="font-size: large;">TheToggleButton:</span><br />The toggle button is like a check box or radio button, it has two states: On or Off.<br />The default behavior of ToggleButton is Off state, it displays a gray bar and the text Off.<br />When in On state it displays a green bar and has the text On.<br /><pre class="brush:xml"><?xml version="1.0" encoding="utf-8"?><br /><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"<br /> android:orientation="vertical"<br /> android:layout_width="fill_parent"<br /> android:layout_height="fill_parent"<br /> ><br /><ToggleButton<br />android:id="@+id/tb"<br />android:layout_width="wrap_content"<br />android:layout_height="wrap_content"<br />android:text="Switch On"<br />/><br /></LinearLayout><br /><br /></pre><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://dl.dropbox.com/u/2624328/Android%20Pro/2010/Mars/Button%20Controls/Button%20Controls3.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://dl.dropbox.com/u/2624328/Android%20Pro/2010/Mars/Button%20Controls/Button%20Controls3.JPG" width="223" wt="true" /></a></div>See that despite we specified the android:text property of the toggle button, it displays the default text “Off”.<br />This is because <span style="color: blue;">ToggleButton</span> inherits from <span style="color: blue;">TextView</span>. But practically the android:text property is useless.<br />Instead we define the <span style="color: blue;">android:textOn</span> and <span style="color: blue;">android:textOff</span> properties.<br /><br />In code to check the state of the Toggle button programmatically you can define the click handler in the regular way:<br /><pre class="brush:xml"><ToggleButton<br />android:layout_width="wrap_content"<br />android:layout_height="wrap_content"<br />android:textOff="Switch On"<br />android:textOn="Switch Off"<br />android:id="@+id/btn"<br />android:onClick="ClickHandler"<br />/><br /><br /></pre>Then check the state of it like this:<br /><pre class="brush:java">public void ClickHandler(View v)<br /> {<br /> ToggleButton tg=(ToggleButton)v;<br /> if(tg.isChecked())<br /> //Do something<br /> else<br /> //Do something else<br /> }<br /><br /></pre>here's what it's gonna look like:<br /><pre class="brush:xml"><?xml version="1.0" encoding="utf-8"?><br /><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"<br /> android:orientation="vertical"<br /> android:layout_width="fill_parent"<br /> android:layout_height="fill_parent"<br /> ><br /><ToggleButton<br />android:layout_width="wrap_content"<br />android:layout_height="wrap_content"<br />android:textOff="Switch On"<br />android:textOn="Switch Off"<br />/><br /><ToggleButton<br />android:layout_width="wrap_content"<br />android:layout_height="wrap_content"<br />android:textOff="Switch On"<br />android:textOn="Switch Off"<br />/><br /></LinearLayout><br /><br /></pre><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://dl.dropbox.com/u/2624328/Android%20Pro/2010/Mars/Button%20Controls/Button%20Controls4.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://dl.dropbox.com/u/2624328/Android%20Pro/2010/Mars/Button%20Controls/Button%20Controls4.JPG" width="221" wt="true" /></a></div>

Android offers three types of button controls1. The Basic Button.2. Image Button3. Toggle Button.The Basic Button: The android standard button. It is a subclass of the TextView class so it inherits all of its properties.android:layout_height="fill_pa…

Introduction to UI in Android

Layouts in android is constructed from two objects: <span style="color: blue;">View</span> and <span style="color: blue;">ViewGroup</span>.<br /><br /><br />The <span style="color: blue;">View</span> class is the base class for many widgets sub classes such as <span style="color: blue;">TextView</span> and <span style="background-color: blue;">Button</span> classes.<br /><br />The <span style="color: blue;">ViewGroup</span> is a view that conatains other views. The Viewgroup class is the base class for many layouts in android.<br /><br />The UI Hierarchy is described in this picture from the android online sdk documentation<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://dl.dropbox.com/u/2624328/Android%20Pro/2010/Mars/Introduction%20to%20UI%20in%20Android/UI%20Hierarchy.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://dl.dropbox.com/u/2624328/Android%20Pro/2010/Mars/Introduction%20to%20UI%20in%20Android/UI%20Hierarchy.png" wt="true" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><br />As you can see the root node is a view group which can be any layout that contains child views or even other viewgroups.<br /><br /><br />The root node appears on the activity by calling setcontentview ( method). Which in turn draws its child nodes and each child node draws its child nodes<br /><br />In the following posts we are going to explore the categories of android widgets which are: <br />  <br />1. <a href="http://android-pro.blogspot.com/2010/03/android-text-controls.html">Text Controls</a> <br /><br /><br />2. <a href="http://android-pro.blogspot.com/2010/03/android-button-controls.html">Button controls</a><br /><br />3. <a href="http://android-pro.blogspot.com/2010/04/android-selection-controls.html">List controls</a><br /><br />4. Grid controls<br /><br />5. <a href="http://android-pro.blogspot.com/2010/04/android-date-and-time-controls.html">Date and time controls</a><br /><br />6. Menus<br /><br />7. Dialogs<br /><br />8. Adapters

Layouts in android is constructed from two objects: View and ViewGroup.The View class is the base class for many widgets sub classes such as TextView and Button classes.The ViewGroup is a view that conatains other views. The Viewgroup class is the ba…