Using Android SlidingDrawer

Remeber Android's old versions' (prior to 2.2) launcher screen where we had a sliding pane at the bottom that when dragged upwards displays the applications menu of the phone, that is called the <strong>SlidingDrawer</strong> control.<br /><div class="separator" style="clear: both; text-align: center;"><a href="http://dl.dropbox.com/u/2624328/Android%20Pro/2010/September/SlidingDrawer/slidingdrawer1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" qx="true" src="http://dl.dropbox.com/u/2624328/Android%20Pro/2010/September/SlidingDrawer/slidingdrawer1.jpg" width="320" /></a></div><br /><br />consider this layout:<br /><pre class="brush:xml"><?xml version="1.0" encoding="utf-8"?><br /><FrameLayout<br /> xmlns:android="http://schemas.android.com/apk/res/android"<br /> android:layout_width="wrap_content"<br /> android:layout_height="wrap_content"><br /> <SlidingDrawer<br /> android:layout_width="fill_parent"<br /> android:layout_height="fill_parent"<br /> android:id="@+id/drawer"<br /> android:handle="@+id/handle"<br /> android:content="@+id/content"<br /> ><br /> <ImageView<br /> android:layout_width="wrap_content"<br /> android:layout_height="wrap_content"<br /> android:id="@+id/handle"<br /> android:src="@drawable/tray_handle_normal"<br /> /><br /> <LinearLayout<br /> android:layout_width="fill_parent"<br /> android:layout_height="fill_parent"<br /> android:orientation="vertical"<br /> android:id="@+id/content"<br /> ><br /> <TextView<br /> android:layout_width="wrap_content"<br /> android:layout_height="wrap_content"<br /> android:text="This is some text"<br /> android:id="@+id/txt"<br /> /><br /> <Button<br /> android:layout_width="wrap_content"<br /> android:layout_height="wrap_content"<br /> android:text="Click Me"<br /> android:id="@+id/btn"<br /> android:onClick="ClickHandler"<br /> /><br /> </LinearLayout><br /> <br /> </SlidingDrawer><br /></FrameLayout><br /><br /><br /></pre><br />when the <b>SlidingDrawer</b> is pressed it looks like this:<br /><div class="separator" style="clear: both; text-align: center;"><a href="http://dl.dropbox.com/u/2624328/Android%20Pro/2010/September/SlidingDrawer/slidingdrawer2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" qx="true" src="http://dl.dropbox.com/u/2624328/Android%20Pro/2010/September/SlidingDrawer/slidingdrawer2.jpg" width="229" /></a></div><br />the SlidingDrawer is a container that when dragged or pressed shows/hides its contents.<br /><br />As the <b>SlidingDrawer</b> displays one content at a time, it must be declared within <a href="http://android-pro.blogspot.com/2010/02/frame-layout.html">FrameLayout</a><br /><br />the <b>SlidingDrawer</b> has two key properties:<br />android:handle: specifies the id of the control that acts as the handle.<br />android:content: specifies the id of the view that acts as content of the <b>SlidingDrawer</b>, most times will be a container.<br /><br />you can open/close the drawer from the code like this:<br /><pre class="brush:java">if(drawer.isOpened())<br /> {<br /> drawer.close();<br /> btnToggle.setText("Open");<br /> }<br /> else<br /> {<br /> drawer.open();<br /> btnToggle.setText("Close");<br /> }<br /></pre><br />you can open/close the drawer with animation using these methods instead<br /><pre class="brush:java">drawer.animateClose();<br />drawer.animateOpen();<br /></pre><br />or you can handle the open/close operations automatically using <b>toggle</b> method:<br /><pre class="brush:java">drawer.toggle();<br />drawer.animateToggle();<br /></pre><br />you can lock/unlock the SlidingDrawer to enable/disable dragging or clicking of the drawer using these methods:<br /><pre class="brush:java">drawer.lock();<br />drawer.unlock();<br /></pre><br /><span style="font-size: large;">Responding to SlidingDrawer Events:</span><br /><br /><b>SlidingDrawer</b> has three key callbacks:<br /><ol><li>when the drawer is open, handled by implementing OnDrawerOpenListener.</li><li>when the drawer is close, handled by implementing OnDrawerCloseListener.</li><li>when the drawer is close, handled by implementing OnDrawerScroll<br />Listener.</li></ol><br /><br /><pre class="brush:java">drawer.setOnDrawerOpenListener(new OnDrawerOpenListener() {<br /> <br /> @Override<br /> public void onDrawerOpened() {<br /> // TODO Auto-generated method stub<br /> TextView txtStatus=(TextView)findViewById(R.id.txtStatus);<br /> txtStatus.setText("Opened");<br /> ImageView view=(ImageView)drawer.getHandle();<br /> view.setImageResource(R.drawable.tray_handle_selected);<br /> <br /> }<br /> });<br /> <br /> <br /> <br /> drawer.setOnDrawerCloseListener(new OnDrawerCloseListener() {<br /> <br /> @Override<br /> public void onDrawerClosed() {<br /> // TODO Auto-generated method stub<br /> TextView txtStatus=(TextView)findViewById(R.id.txtStatus);<br /> txtStatus.setText("Closed");<br /> ImageView view=(ImageView)drawer.getHandle();<br /> view.setImageResource(R.drawable.tray_handle_normal);<br /> }<br /> });<br /> <br /> drawer.setOnDrawerScrollListener(new OnDrawerScrollListener() {<br /> <br /> @Override<br /> public void onScrollStarted() {<br /> // TODO Auto-generated method stub<br /> TextView txtStatus=(TextView)findViewById(R.id.txtStatus);<br /> txtStatus.setText("Scroll start");<br /> <br /> }<br /> <br /> @Override<br /> public void onScrollEnded() {<br /> // TODO Auto-generated method stub<br /> TextView txtStatus=(TextView)findViewById(R.id.txtStatus);<br /> txtStatus.setText("Scroll end");<br /> }<br /> });<br /></pre><br /><span style="font-size: large;">Notes:</span><br /><ul><li>you can make the drawer appear horizontally from right to left by setting the <b>android:orientation</b> property to <b>horizontal</b> in the xml file.</li><li>you can find images used as a source for the handler from this site: <a href="http://www.netmite.com/android/mydroid/1.0/packages/apps/Phone/res/drawable-finger/">http://www.netmite.com/android/mydroid/1.0/packages/apps/Phone/res/drawable-finger/</a>  I used tray_handle_normal.9.png and tray_handle_selected.9.png</li></ul>

Remeber Android's old versions' (prior to 2.2) launcher screen where we had a sliding pane at the bottom that when dragged upwards d...

Using View Flipper in Android

Suppose you want to display a news bar in your activity. this news bar displays a single news item at a time then flips and shows next item and so on, then your choice would be Android's <strong>ViewFlipper.</strong><br /><br />ViewFlipper inherits from <a href="http://android-pro.blogspot.com/2010/02/frame-layout.html"><strong>frame layout</strong></a><strong>, </strong>so it displays a single view at a time.<br /><br />consider this layout:<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="@string/hello"<br /> /><br /> <Button<br /> android:layout_width="wrap_content" <br /> android:layout_height="wrap_content" <br /> android:text="Flip"<br /> android:id="@+id/btn"<br /> android:onClick="ClickHandler"<br /> /><br /> <ViewFlipper<br /> android:layout_width="fill_parent" <br /> android:layout_height="fill_parent"<br /> android:id="@+id/flip"<br /> ><br /> <TextView <br /> android:layout_width="fill_parent" <br /> android:layout_height="wrap_content" <br /> android:text="Item1"<br /> /><br /> <TextView <br /> android:layout_width="fill_parent" <br /> android:layout_height="wrap_content" <br /> android:text="Item2"<br /> /><br /> <TextView <br /> android:layout_width="fill_parent" <br /> android:layout_height="wrap_content" <br /> android:text="Item3"<br /> /><br /> </ViewFlipper><br /></LinearLayout><br /><br /><br /></pre>just a ViewFlipper container that contains three text views<br /><div class="separator" style="clear: both; text-align: center;"><a href="http://dl.dropbox.com/u/2624328/Android%20Pro/2010/September/Flipping/flip1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" qx="true" src="http://dl.dropbox.com/u/2624328/Android%20Pro/2010/September/Flipping/flip1.png" width="225" /></a></div><br />now we want to flip the views when the button is clicked<br /><pre class="brush:java">public void onCreate(Bundle savedInstanceState) {<br /> super.onCreate(savedInstanceState);<br /> setContentView(R.layout.main);<br /> <br /> btn=(Button)findViewById(R.id.btn);<br /> flip=(ViewFlipper)findViewById(R.id.flip);<br /> <br /> }<br /> <br /> public void ClickHandler(View v)<br /> {<br /> <br /> flip.showNext();<br /> <br /> }<br /></pre><br />if we want to flip in reverese direction we could use<br /><b>flip.showPrevious()</b> instead<br /><br />we can add animations to the child views when they appear or disappear:<br /><pre class="brush:java">@Override<br /> public void onCreate(Bundle savedInstanceState) {<br /> super.onCreate(savedInstanceState);<br /> setContentView(R.layout.main);<br /> <br /> btn=(Button)findViewById(R.id.btn);<br /> flip=(ViewFlipper)findViewById(R.id.flip);<br /> //when a view is displayed<br /> flip.setInAnimation(this,android.R.anim.fade_in);<br /> //when a view disappears<br /> flip.setOutAnimation(this, android.R.anim.fade_out); <br /> }<br /></pre><br />we can also set the ViewFlipper to flip views automatically when the button is clicked:<br /><pre class="brush:java">public void ClickHandler(View v)<br /> {<br /> <br /> <br /> //specify flipping interval<br /> flip.setFlipInterval(1000);<br /> flip.startFlipping();<br /> }<br /></pre><br />we can stop the flipping by calling <b>flip.stopFlipping();</b> method.<br /><br />or we can set the flipper to flip autommatically when the activity starts<br /><pre class="brush:java">public void onCreate(Bundle savedInstanceState) {<br /> super.onCreate(savedInstanceState);<br /> setContentView(R.layout.main);<br /> <br /> btn=(Button)findViewById(R.id.btn);<br /> flip=(ViewFlipper)findViewById(R.id.flip);<br /> flip.setInAnimation(this,android.R.anim.fade_in);<br /> flip.setOutAnimation(this, android.R.anim.fade_out);<br /> flip.setFlipInterval(1000);<br /> flip.setAutoStart(true);<br /> <br /> }<br /></pre>

Suppose you want to display a news bar in your activity. this news bar displays a single news item at a time then flips and shows next item ...

Currency Converter v1.0 released on Slide ME

<span style="font-size: large;">Currency Converter v1.0</span> is released and is available at this location:<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://slideme.org/application/currency-converter-1" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" ox="true" src="http://dl.dropbox.com/u/2624328/Applications/Android/Currency%20Converter%20with%20no%20ads%20v1/logo.png" /></a></div><br />the application provides real time currency convertion for more than 100 currencies.<br /><br />provides the conversion rate of two currencies and the conversion of an amount of money from one currency to another.<br /><br />download it for free and tell me what you think.

Currency Converter v1.0 is released and is available at this location: the application provides real time currency convertion for more than...

Using Alerts in Android

In a previuos post we saw how to display a popup message using <strong>Toasts</strong>. Toasts are just notification messages involving no interaction from the user.<br /><br />another way to show interactive messages is to use <strong>Alerts. </strong>alerts act as <b>MessageBox</b> or <b>JOptionPane</b> in J2SE. they have buttons that can be used to take decisions.<br /><br /><strong><span style="font-size: large;">Creating Alerts</span></strong><br /><br />let's check this example to create an alert and show it:<br /><pre class="brush:java">//declared as final to be able to reference it in inner class declartations of the handlers <br /> final AlertDialog.Builder builder=new AlertDialog.Builder(this);<br /> builder.setTitle("Alert Dialog");<br /> builder.setMessage("This is the alert's body");<br /> builder.setIcon(android.R.drawable.ic_dialog_alert);<br /> <br /> builder.setPositiveButton("OK", new OnClickListener() {<br /> <br /> @Override<br /> public void onClick(DialogInterface dialog, int which) {<br /> TextView txt=(TextView)findViewById(R.id.txt);<br /> txt.setText("You clicked Ok");<br /> }<br /> });<br /> <br /> builder.setNegativeButton("Cancel", new OnClickListener() {<br /> <br /> @Override<br /> public void onClick(DialogInterface dialog, int which) {<br /> // TODO Auto-generated method stub<br /> TextView txt=(TextView)findViewById(R.id.txt);<br /> txt.setText("You clicked Cancel");<br /> }<br /> });<br /> <br /> builder.setNeutralButton("Do something", new OnClickListener() {<br /> <br /> @Override<br /> public void onClick(DialogInterface dialog, int which) {<br /> // TODO Auto-generated method stub<br /> TextView txt=(TextView)findViewById(R.id.txt);<br /> txt.setText("Neutral Button Clicked");<br /> AlertDialog ad=builder.create();<br /> ad.cancel();<br /> }<br /> });<br /> <br /> builder.setOnCancelListener(new OnCancelListener() {<br /> <br /> @Override<br /> public void onCancel(DialogInterface dialog) {<br /> // TODO Auto-generated method stub<br /> TextView txt=(TextView)findViewById(R.id.txt);<br /> txt.setText(txt.getText()+" the cancel listner invoked");<br /> }<br /> });<br /> <br /> <br /> <br /> builder.show();<br /></pre><br />the previous code displays the following Alert<br /><div class="separator" style="clear: both; text-align: center;"><a href="http://dl.dropbox.com/u/2624328/Android%20Pro/2010/September/Alerts/alerts1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" ox="true" src="http://dl.dropbox.com/u/2624328/Android%20Pro/2010/September/Alerts/alerts1.png" width="225" /></a></div><br />the code may look bulky but it's very simple.<br />first we create an instance of <strong>AlertDialog.Builder. </strong>we use the builder object to construct the <strong>AlertDialog</strong> object.<br />we specify the title and the icon of the alert. then the text to display in the body of the message.<br />the <strong>AlertDialog </strong>can display up to three buttons:<br /><strong>positive button: </strong>represents the OK button.<br /><strong>Negative button: </strong>represents the cancel button.<br /><strong>Neutral button: </strong>represents a button to perform another functionality other than ok or cancel.<br /><br />note that there are no restrictions on the use of the three buttons, they can perform the same functionality the difference is just in logical meaning. but the three buttons cause the Alert dialog to dismiss.<br /><br />we then specify the text and the click handler of each button.<br />in the neatral button click handler we added the lines <strong>AlertDialog ad=builder.create();</strong> and <strong>ad.cancel();. </strong>the firt line gets a reference to the current dialog created by the <strong>builder </strong>to provide additional functionality such as invoking <strong>cancel() </strong>method.<br /><br />the cancel method raises the <strong>onCancel </strong>callbcak method.<br /><br />we could have replaced the previous code with the following:<br /><pre class="brush:java">AlertDialog ad=builder.create();<br /> ad.setMessage(message);<br /> ad.setIcon(icon);<br /> ad.setMessage(message);<br /> ad.setButton(text, listener);<br /> .<br /> .<br /> .<br /></pre><br /><strong><span style="font-size: large;">Displaying Custom Views:</span></strong><br /><br />alerts can display complex views rather than simple text messages. create an xml layout file called alertview.xml 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 /> android:id="@+id/toastView"<br /> android:background="#DAAA"<br /> ><br /><TextView <br /> android:layout_width="fill_parent" <br /> android:layout_height="wrap_content" <br /> android:text="Hello alerts"<br /> android:textColor="#000"<br /> /><br /> <br /> <TextView <br /> android:layout_width="fill_parent" <br /> android:layout_height="wrap_content" <br /> android:id="@+id/txtDate"<br /> android:textColor="#000"<br /> /><br /> <Button<br /> android:layout_width="fill_parent" <br /> android:layout_height="wrap_content" <br /> android:id="@+id/btnAlert"<br /> android:text="Click"<br /> /><br /></LinearLayout><br /><br /><br /></pre><br />to display this view as the alert view we do it like this:<br /><pre class="brush:java">View bodyView=getLayoutInflater().inflate(R.layout.alertview, (ViewGroup)findViewById(R.id.toastView));<br /> <br /> <br /> TextView txtDate=(TextView)bodyView.findViewById(R.id.txtDate);<br /> txtDate.setText(Calendar.getInstance().getTime().toLocaleString());<br /> Button btnAlert=(Button)bodyView.findViewById(R.id.btnAlert);<br /> btnAlert.setOnClickListener(new View.OnClickListener() {<br /> <br /> @Override<br /> public void onClick(View v) {<br /> // TODO Auto-generated method stub<br /> TextView txtDate=(TextView)bodyView.findViewById(R.id.txtDate);<br /> txtDate.setText(Calendar.getInstance().getTime().toLocaleString());<br /> TextView txt=(TextView)findViewById(R.id.txt);<br /> txt.setText(Calendar.getInstance().getTime().toLocaleString());<br /> }<br /> });<br /> builder.setView(bodyView);<br /> .<br /> .<br /> .<br /></pre><br />what is interesting in this approach is that the alert is fully interactive, by clicking the button you can change the value of any view in the alert or in the activity.<br /><br />you can also set the title of hte alert to be a custom view via <b>builder.setCustomTitle(View v)</b> method in the same way described above.<br /><br /><strong><span style="font-size: large;">Displaying an alert of items:</span></strong><br /><br />alerts can display a list of items from which the user selects from like this:<br /><pre class="brush:java">final String [] items=new String []{"Item 1","Item 2","Item 3","Item 4"};<br /> AlertDialog.Builder builder=new AlertDialog.Builder(this);<br /> builder.setTitle("Items alert");<br /> <br /> builder.setItems(items, new OnClickListener() {<br /> <br /> @Override<br /> public void onClick(DialogInterface dialog, int which) {<br /> // TODO Auto-generated method stub<br /> TextView txt=(TextView)findViewById(R.id.txt);<br /> txt.setText(items[which]);<br /> }<br /> });<br /> <br /> builder.show();<br /></pre>this will display an alert like this:<br /><div class="separator" style="clear: both; text-align: center;"><a href="http://dl.dropbox.com/u/2624328/Android%20Pro/2010/September/Alerts/alerts2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" ox="true" src="http://dl.dropbox.com/u/2624328/Android%20Pro/2010/September/Alerts/alerts2.png" width="226" /></a></div><br />notice that we do not have to specify any buttons because when the user clicks on any item the alert will be dismissed.<br /><br />if the list items are in an <b>Adapter</b> we can achieve the same result using <b>builder.setAdapter(Adapter ad,OnClickListener listner)</b> method:<br /><pre class="brush:java">final String [] items=new String []{"Item 1","Item 2","Item 3","Item 4"};<br /> ArrayAdapter<string> arr=new ArrayAdapter<string>(this, android.R.layout.select_dialog_item,items);<br /> <br /> AlertDialog.Builder builder=new AlertDialog.Builder(this);<br /> builder.setTitle("Adapter alert");<br /> <br /> builder.setAdapter(arr, new OnClickListener() {<br /> <br /> @Override<br /> public void onClick(DialogInterface dialog, int which) {<br /> // TODO Auto-generated method stub<br /> TextView txt=(TextView)findViewById(R.id.txt);<br /> txt.setText(items[which]);<br /> }<br /> });<br /></pre><br />or if the items are returned from a database in a cursor we can use<br /><b>builder.setCursor(Cursor cursor, OnClickListener listner, String labelColumn)</b><br /><br /><strong><span style="font-size: large;">Displaying alerts with items with choices:</span></strong><br /><br />we can add items to the alert with choices whether they are single choice (Radio buttons) or multiple choices (Check boxes).<br /><br />to display single choice items:<br /><pre class="brush:java">final String [] items=new String []{"Item 1","Item 2","Item 3","Item 4"};<br /> AlertDialog.Builder builder=new AlertDialog.Builder(this);<br /> builder.setTitle("List alert");<br /> builder.setSingleChoiceItems(items, 0, new OnClickListener() {<br /> <br /> @Override<br /> public void onClick(DialogInterface dialog, int which) {<br /> // TODO Auto-generated method stub<br /> TextView txt=(TextView)findViewById(R.id.txt);<br /> txt.setText(items[which]);<br /> }<br /> });<br /> builder.setPositiveButton("OK", new OnClickListener() {<br /> <br /> @Override<br /> public void onClick(DialogInterface dialog, int which) {<br /> // TODO Auto-generated method stub<br /> <br /> }<br /> });<br /> builder.show();<br /></pre><br />the second parameter of <b>setSingleChoiceItems</b> is an integer specifying the index of the selected item<br /><br />notice that we added a postive button that when clicked dismisses the alert cause unlike the regular items list the alert won't be dismissed when an item is selected.<br /><br />the <b>builder.setSingleChoiceItems</b> method has other overloads that can accept an <b>Adapter</b> or a <b>Cursor</b> as parameters that hold the items to be displayed<br /><br />to display multiple choice items:<br /><pre class="brush:java">final String [] items=new String []{"Item 1","Item 2","Item 3","Item 4"};<br /> AlertDialog.Builder builder=new AlertDialog.Builder(this);<br /> builder.setTitle("List alert");<br /> builder.setMultiChoiceItems(items, null, new OnMultiChoiceClickListener() {<br /> <br /> @Override<br /> public void onClick(DialogInterface dialog, int which, boolean isChecked) {<br /> // TODO Auto-generated method stub<br /> TextView txt=(TextView)findViewById(R.id.txt);<br /> txt.setText(txt.getText()+" "+items[which]);<br /> }<br /> });<br /> builder.setPositiveButton("OK", new OnClickListener() {<br /> <br /> @Override<br /> public void onClick(DialogInterface dialog, int which) {<br /> // TODO Auto-generated method stub<br /> <br /> }<br /> });<br /> builder.show();<br /></pre><br />the second parameter of <b>setMultiChoiceItems</b> is an array of boolean values specifying which items are set selected. if you want no items to be selected then set it to <b>null</b>, otherwise specify an array with the same length of the items with boolean values indicating which item is selected and which is not like this:<br /><pre class="brush:java">new boolean[] {true,false,...}<br /></pre><br />works in the fashion as single items choice except that the selection here is multiple.<br /><br />download a demo applications on alerts from <a href="http://uploading.com/files/787127a9/Alerts%2BDemo.rar/">here</a>

In a previuos post we saw how to display a popup message using Toasts . Toasts are just notification messages involving no interaction from ...