Department of Information Technology Srilakshmi.Ch Lab Name :Mobile Computing Lab Code:IT6611 Index INDEX Dates for “A” Sec S.No Exercise Page No Date of Experiment Date of Submission Signature of faculty 1 Mobile Application using GUI components, Font and Colours 2 Mobile Application using Layout Managers and event listeners 3 Mobile Native calculator application 4 Mobile Application that draws basic graphical primitives 5 Mobile Application using database 6 Mobile Application using RSS Feed. 7 Mobile Multi threading Application 8 Mobile Application using Native GPS location information 9 Mobile Application that writes data to the SD card 10 Mobile Application that creates alarm clock Exercise : 1 GUI Components, fonts and colors Date: Aim: Develop an application that uses GUI components, Font and Colours. UI Elements (Layouts,Widgets, Text Fielsds ,Containers,Common Attributes) Layouts: Linear Layout o Horizontal o Vertical Relative Layout Table Layout Grid Layout Frame Layout Widgets: TextView Button RadioButton ToggleButton ImageView ImageButton CheckBox ProgressBar SeekBar RatingBar WebView Spinner Text Fields EditText o Plain text, Name, Number, Email etc. Containers ScrollView o Vertical o Horizontal ListView GridView SearchView TabHost Common Attributes Layout Width Layout Height o match_parent o fill_parent o wrap_content o <<pixel value>> in dp Gravity o centre o left o right etc. Style o uses drawable. background o color or drawable. id padding margin textColor o color value (Hex,Rgba etc.) o drawable o color resource textStyle typeface Changing attributes (text color, background, typeface) TextView <<variable>> = (TextView) findViewById(R.id.<<id>>); <<variable>>.setTextColor(getResources().getColor(R.color.<<name>>)); <<variable>>.setBackgroundColor(getResources().getColor(R.color.<<name>>)); The color resource is defined in a “color.xml” rescource file inside “values”resource directry <? xml version="1.0" encoding="utf - 8" ?> < resources > < color name="yellow" >#FFFF00</ color > </ resources > Changing Type Face Create an assets directry. Project new folder assetsfolder Create a new directory “font” Copy the fonts and paste in directory. TextView tF = (TextView) findViewById(R.id. theFont ); Typeface typeface = Typeface. createFromAsset (getAssets(), "font/unica_one_regular.ttf" ); tF.setTypeface(typeface); Code to add 2 numbers L ayout activity_main.xml There are two “Edit Text” Widget to get Number 1 and Number 2 There is one “Text View” Widget to view the result of addition operation There is one “Button” Widget when clicked does addition operation In properties window as shown below To change Color,font and text size To change the color of the text In the properties window select the text color box & type the hexacode of the color. To change the size of text In the properties window select the textSize with 25dp. To change the font In the properties window Select text Style and in its check box choose Bold or Italics DESIGN <?xml version="1.0" encoding="utf - 8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout _height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_mar gin" tools:context="com.example.admin.sum.MainActivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Result" android:id="@+id/textView" android:background="#e7d7d7" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="SUM" android:id="@+id/button" android:layout_below="@+id/editText2" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:onClick="OnButtonClick" /> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id /editText" android:layout_below="@+id/textView" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:hint="Num1" /> <EditText android:layout_width="match_parent" android:l ayout_height="wrap_content" android:id="@+id/editText2" android:layout_below="@+id/editText" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:hint="Num2" /> </RelativeLayout> M ain activity package com.example.admin.sum; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.EditText; import android.widget.TextView; public class MainActivity extends AppCompatActi vity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } public void OnButtonClick (View v) { EditText e1 = (EditText)findViewById(R .id.editText); EditText e2 = (EditText)findViewById(R.id.editText2); TextView t1 = (TextView)findViewById(R.id.textView); int num1 = Integer.parseInt(e1.getText().toString()); int num2 = Integer.parseInt(e2.getText().toString()); int su m = num1+num2; t1.setText(Integer.toString(sum)); } } Output Result : Hence the various GUI Components and changing colors and fonts are learned and implemented. Exercise : 2 Layout Managers and Event Listeners Date: Aim: Develop an Mobile application that uses Layout Managers and Event Listeners Layout Managers 1. Relative Layout 2. Linear Layout 3. Table Layout 4. Grid Layout Event Listeners 1.onClickEventListener() 2.onLongClickEventListener() PROCEDURE := 1.RELATIVE LAYOUT As in name this layout positions elements relative to the adjacent elements. It uses the following attributes for each element to position them: layout:alignEnd layout:alignStart layout:toEndOf layout:toStartOf layout:alignParent layout:c entreInParent Sample Design create a TextView (Large) inside the parent Relative layout by editing the xml code: < RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width= "match_parent" android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity" > < TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceLarge" android:text="Sample Program" android:id="@+id/txtSample" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" /> </ RelativeLayout > 2.LINEAR LAYOUT Linear layout are two types Horizontal and Vertical. Horizontal/Vertical is set using the orientation at tribute. In such layout the elements are arranged in order toptobottom or lefttoright. add a Linear Layout now. (Now you can use the drag and drop layout editor). Change orientation to Vertical. Now add an ImageView to the Linear Layout. Import an image to the drawable directory. Set the src attribute to the drawable we imported. (Click the browse button and select the file from Drawable directory). 3. TABLE LAYOUT Table layout uses rows and columns to position elements. Add table la yout inside the linear layout. Table layout uses TableRow layout to create rows. Add a TableRow to the TableLayout. Add two Buttons to the TableRow. Change the Id’s of the two Buttons to btnClick and btnLongClick respectively. these buttons are used to implement event listeners Also Change text to Click Me! and Long Click Me! Select one of the buttons from the component tree. Pay attention to Properties window. You can see layout:span and layout:column attributes. The table layout uses these attribut es to position elements. If the values are unset then uses default values (span=1 and column increments according to order of placement). 4, GRID LAYOUT This layout uses orderly grids with rows and columns , span and spaces. Add a GridLayout below the table layout. Now drag and drop a Button to the GridLayout. You’ll see a green grid with many blocks. Select this button and you can see that it uses attributes layout:column, layout:row, layout:rowSpan, layout:columnSpan. These are the attributes to position to items in GridLayout. Change the rowSpan to 3. resize the button Add one more button and a text field. Edit the xml file to position them correctly like below < GridLayout android:layout_width="match_parent" android:layout_height="fill_paren t" android:id="@+id/lytGrid" > < Button android:layout_width="202dp" android:layout_height="156dp" android:text="Click or Long CLick \ n Me" android:id="@+id/btnAll" android:layout_column="3" android:layout_row="0" android:layout_columnSpan="1" android:layout_rowSpan="2" /> < Button android:layout_width="143dp" android:layout_height="match_parent" android:text="Show \ nMy \ nName" android:id="@+id/btnShowName" android:layout_row="1" android:layout_column="2" android:layout_rowSpan="3" /> < EditText android:layout_width="match_parent" android:layout_height="62dp" android:id="@+id/txtName" android:layout_row="3" android:layout_column="3" android:hint="Enter your Name" android:layout_columnSpan="1" android:layout_rowSpan="1" /> </ GridLayout > Final XML: < RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity" > < TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceLarge" android:text="Sample Program" android:id="@+id/txtSample" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" /> < LinearLayout android: orientation="vertical" android:layout_width="match_parent" android:layout_height="fill_parent" android:layout_below="@+id/txtSample" android:layout_centerHorizontal="true" > < ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/imageView" android:layout_gravity="center_horizontal" android:src="@drawable/big_zero" /> < TableLayout android:layout_width="match_parent" android:layout_height="wrap_content" > < TableRow android:layout _width="match_parent" android:layout_height="match_parent" android:id="@+id/tableRow" android:orientation="horizontal" > < Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Click Me" android:id="@+id/btnClick" /> < Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Long Click Me" android:id="@+id/btnLongClick" /> </ TableRow > </ TableLayout > < GridLayout android:layout_width="match_parent" android:layout_height="fill_parent" android:id="@+id/lytGrid" > < Button android:layout_width="202dp" android:layout_height="156dp" android:text="Click or Long CLick \ n Me" android:id="@+id/btnAll" android:layout_column="3" android:layout_row="0" android:layout_columnSpan="1" android:layout_ro wSpan="2" /> < Button android:layout_width="143dp" android:layout_height="match_parent" android:text="Show \ nMy \ nName" android:id="@+id/btnShowName" android:layout_row="1" android:layout_column="2" android:layout_rowSpan="3" /> < EditText android:layout_width="match_parent" android:layout_height="62dp" android:id="@+id/txtName" android:layout_row="3" android:layout_column="3" android:hint="Enter your Name" android:layout_columnSpan="1" android:layout_rowSpan="1" /> </ GridLayout > </ LinearLayout > </ RelativeLayout > 6. IMPLEMENTATION OF TWO EVENT LISTENERS – ONCLICKEVENTLISTENER() AND ONLONGCLICKEVENTLISTENER(). Step 1:First define some variables for each items in the UI. Button clickBtn , longClickBtn , allBtn , btnShow ; TextView sample ; EditText nameTxt ; Step 2: Assign the UI elements to these variables using findViewById() clickBtn = (Button) findViewById(R.id. btnClick ); longClickBtn = (Button) findViewById(R.id. btnLongClick ); allBtn = (Button) findViewById(R.id. btnAll ); btnSho w = (Button) findViewById(R.id. btnShowName ); sample = (TextView) findViewById(R.id. txtSample ); nameTxt = (EditText) findViewById(R.id. txtName ); Step 3:Implementing the onClick Listener: /*Simple Click onClick Listener*/ clickBtn .setOnClickListener( new View.OnClickListener() { @Override public void onClick(View v) { Toast. makeText (getApplicationContext(), "Hai fella!" , Toast. LENGTH_SHORT ).show(); } }); Step 4:Implementing the onLongClick Listener /*Implement Long Click Listener*/ longClickBtn .setOnLongC lickListener( new View.OnLongClickListener() { @Override public boolean onLongClick(View v) { Toast. makeText (getApplicationContext(), "Hai there!" , Toast. LENGTH_SHORT ).show(); return false ; } }); This event listener toasts a message “Hai there!” when the “L ong Click Me!” button is clicked and held Step 5:Implementing onClick and onLongClick Event on the same button. allBtn .setOnClickListener( new View.OnClickListener() { @Override public void onClick(View v) { Toast. makeText (getApplicationContext(), "You Jus t Clicked Me!" , Toast. LENGTH_SHORT ).show(); } }); allBtn .setOnLongClickListener( new View.OnLongClickListener() { @Override public boolean onLongClick(View v) { Toast. makeText (getApplicationContext(), "You clicked me for so long!" , Toast. LENGTH_SHORT ).show(); return false ; } }); The button defined by the variable allBtn will toast two different messages when clicked and longclicked i.e, “You just Clicked Me!” when clicked and “You clicked me for so long!” when long clicked. Step 6:Reading a data fro m a text field and writing it to a text view using event listeners. btnShow .setOnClickListener( new View.OnClickListener() { @Override public void onClick(View v) { sample .setText( nameTxt .getText().toString()); } }); This event reads the value of the nameTx t text field and writes it to sample TextView. OUTPUT Result: Thus few of the important layout managers and event listeners are implemented. EXERCISE: 3 Calculator DATE : Aim: Develop a native Calculator Application Procedure: Step1: In Android Studio .Create a new Project with an empty activity. Step2:Edit the Activity_Main.xml to create a table layout and add widget Edit text to get result and several buttons for representing numbers and operators. Step3: Open the MainA ctivity.java and add functions to the Buttons by creating an Array of Id ’s. Step4: Set the Onclick functions to the Buttons, create a new function onButtonClick () and create mMath() and mResult() function Step 5: Run the application in an emulator or a device and test it. DESIGN <?xml version="1.0" encoding="utf - 8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBo ttom="@dimen/activity_vertical_margin" tools:context=".MainActivity"> <LinearLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="@+id/txtScreen" android:inputType="number|numberDecimal|numberSigned" /> <TableLayout android:layout_width="fill_parent" android:layout_height="fill_parent"> <TableRow android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center" android:orientation="horizontal"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="+" android:id="@+id/btnAdd" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content"