Android IU, Rotations, Persistence

CS175

Chris Pollett

Oct. 6, 2014

Outline

Android UI, Rotations
Quiz
File Persistence
Database Persistence
Local Storage
Scheduling Tasks Android

Introduction

Last week, we talked about handling rotations from portrait to landscape mode and vice versa for HTML 5 and iPhone apps.
We talked about logging on iPhone. For Javascript in HTML 5 you can use console.log('some message'); and then view the message under your web developer tools. Here is a console writing example.
We also talked about how to get an app onto an actual device.
So far only two people have given me their UDIDs so I can make a provisioning profile for them for iPhone.
Since last Wednesday was shortened by a fire alarm I said you can have till this Friday to do your HW2
For Hw2 you need to show me you can get an app on a device, you can either show me today in after class or office hours or Wednesday.
At the end of Wednesday the Cinequest team will visit to say what issues they want solved for HW3.
Today, we look at how to handle rotations for Android and at a few more controls for Android.
Then we are going to talk about persistence for all platforms.
In terms of the model-view-controller paradigm often used to create GUI applications, persistence techniques will correspond to models.
Model objects often provide methods for controllers to access persistence data and responsible for packing/unpacking this data.
We can often test a model independent of any controller by writing unit tests of its functionality.
Since we already know how to do logging we could use logging to provide the output of such tests.

Handling Rotations in Android

We can change between Portrait or Landscape mode using CTRL-F12 (FN CTRL-F12 on a Mac) in the emulator.
We've already seen that we can switch between two views in Android by calling the Activities: setContentView(R.layout.nameOfLayout) method.
So if we want our app to look good in both Portrait and Landscape orientation we could create two views -- one for each orientation.
This just leaves the problem of getting some code to run, when the orientation changes.
When the orientation changes, recall the system goes through the process of saving instance state, pausing, stopping and destroying, then creating a new instance of the activity.
So we can just check for the orientation change in onCreate.

Handling Rotations in Android - cont'd

So we merely have to override this method with our code:

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if(getResources().getConfiguration().orientation == Configuration.ORIENTATION_PORTRAIT) 
        {
        	 setContentView(R.layout.main_portrait);
        }
        else
        {
       	     setContentView(R.layout.main_landscape);       	
        }
    //other code of onCreate
    }

Alternatively, one could try to override the onConfigurationChanged(Configuration) method of Activity. However, for this to work we'd need to also change the AndroidManifest file's <activity>'s android:configChanges attribute ORing (take the | of the different config properties you want to be notified on) in orientation.

Rotation Example

We make a small app with a bunch of controls to show how to set up controls and also how to handle rotations.
We will have two layouts: portrait_layout.xml (for portrait layout), and landscape_layout.xml (for landscape)
We will show these on the next two slides followed by some simple code to hook up events to them.

portrait_layout.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >

<ImageView
    android:id ="@+id/my_photo"  
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:src="@drawable/myphoto"
	/>

<TextView
    android:id="@+id/textView" 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="50"
    />

<SeekBar
    android:id="@+id/seekBar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    style="@android:style/Widget.ProgressBar.Horizontal"
    android:max="100"
    android:layout_marginRight="5dp" />

<!--  Dummy LinearLayout to prevent EditText from immediately hogging
      focus -->

<LinearLayout android:focusable="true"
 android:focusableInTouchMode="true" android:layout_width="0px"
 android:layout_height="0px" />

<EditText
    android:id="@+id/editText"
    android:layout_width="200px"
    android:layout_height="wrap_content"
    android:inputType="number" >

</EditText>


<CheckBox
    android:id="@+id/checkBox"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Disable Edit Text" />


<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Toast Me" />


    
</LinearLayout>

landscape_layout.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<ImageView
    android:id ="@+id/my_photo"  
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:src="@drawable/myphoto"
	/>
<!--  notice the outer layout is horizontal and then we
have a vertical one next to the image, this shows we are
doing something different than the portrait layout case -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    >
<TextView
    android:id="@+id/textView" 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="50"
    />
<SeekBar
    android:id="@+id/seekBar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    style="@android:style/Widget.ProgressBar.Horizontal"
    android:max="100"
    android:layout_marginRight="5dp" />
<!--  Dummy LinearLayout to prevent EditText from immediately hogging
      focus -->
<LinearLayout android:focusable="true"
 android:focusableInTouchMode="true" android:layout_width="0px"
 android:layout_height="0px" />

<EditText
    android:id="@+id/editText"
    android:layout_width="200px"
    android:layout_height="wrap_content"
    android:inputType="number" >
</EditText>
<CheckBox
    android:id="@+id/checkBox"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Disable Edit Text" />

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Toast Me" />
</LinearLayout>
    
</LinearLayout>

RotationActivity.java

package org.pollett.rotationcontrols;

import android.app.Activity;
import android.content.res.Configuration;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnKeyListener;
import android.widget.CheckBox;
import android.widget.EditText;
import android.widget.SeekBar;
import android.widget.SeekBar.OnSeekBarChangeListener;
import android.widget.TextView;
import android.widget.Toast;

public class RotationActivity extends Activity 
    implements OnKeyListener, OnClickListener, OnSeekBarChangeListener 
{

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //Here is where we detect orientation and switch between them
        if(getResources().getConfiguration().orientation == 
        	Configuration.ORIENTATION_PORTRAIT) 
        {
        	 setContentView(R.layout.portrait_layout);
        }
        else
        {
       	     setContentView(R.layout.landscape_layout);       	
        }
        //Set programmatically the initial value of the TextView
        TextView textView = (TextView) this.findViewById( R.id.textView );
        textView.setText("25");

        /*
           To implement SeekBarChangeListener you have to implement three methods:
           onProgressChanged, onStartTrackingTouch, and onStopTrackingTouch
           We only care about the first
         */
        SeekBar seekBar = (SeekBar) this.findViewById(R.id.seekBar);
        seekBar.setOnSeekBarChangeListener(this);
        seekBar.setProgress(25);
 
        //our key listener is used to get the keyboard to go away
        EditText editText = (EditText) this.findViewById( R.id.editText );
        editText.setOnKeyListener(this);

        //Set up a listener to handle when the CheckBox is checked/unchecked
        CheckBox checkBox = (CheckBox)this.findViewById( R.id.checkBox );
        checkBox.setOnClickListener(this);
        
        View clickMeButton = this.findViewById( R.id.button );
        /* Clicking on the button displays a toast message.
           These messages can be useful for debugging.
         */
        clickMeButton.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
            	Toast.makeText( getApplicationContext(), 
            			"This is an Informational Toast Message", 
            			Toast.LENGTH_LONG).show();
            }
        });
    }
    @Override
    /** 
       The code below is used to get rid of the keyboard when entered clicked
    */
    public boolean onKey(View v, int keyCode, KeyEvent event)
    {
        // If the event is a key-down event on the "enter" button
        if ((event.getAction() == KeyEvent.ACTION_DOWN)
                && (keyCode == KeyEvent.KEYCODE_ENTER)) {
            return true;
        }
        return false;
    }
    @Override
    /**
       Handles changes to the CheckBox. If checked we disable the
       EditText area; otherwise, we enable it

       @param v - view that event is coming from
    */
    public void onClick(View v)
    {
        EditText editText = (EditText) this.findViewById( R.id.editText );
        CheckBox checkBox = (CheckBox)this.findViewById( R.id.checkBox );
        if(checkBox.isChecked()) {
        	editText.setEnabled(false);
            TextView textView = (TextView) this.findViewById( R.id.textView );
            textView.setText(editText.getText());
            int num = Integer.parseInt(editText.getText().toString());
            if(num > 100) {
            	num = 100;
            } else if (num < 0) {
            	num = 0;
            }
            SeekBar seekBar= (SeekBar) this.findViewById( R.id.seekBar) ;
            seekBar.setProgress(num);
        } else {
        	editText.setEnabled(true);
        }
    } 
    @Override
    /** 
       Here where we handle SeekBar events. Changes to the SeekBar are
       converted to a number and displayed in the TextView
     */
    public void onProgressChanged (SeekBar seekBar, int progress, boolean fromUser) {
    	TextView textView = (TextView) this.findViewById( R.id.textView );    	
    	textView.setText("" + progress);
    }
    @Override
    public void onStartTrackingTouch (SeekBar seekBar) 
    {
    }
    @Override    
    public void onStopTrackingTouch (SeekBar seekBar) {
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
        if (id == R.id.action_settings) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

AndroidManifest.xml

Since we are using a different activity name than the default, I thought I'd include this so that people remember they would need to modify it:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="org.pollett.rotationcontrols"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="20" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".RotationActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Android Rotation App Screenshots

Quiz

Which of the following is true?

Every Javascript Object has a prototype property which can be used to detect the screen orientation of the enclosing scope.
Storyboard constraints for rotations are always specified programmatically outside of Interface Builder.
To change the screen's controls when the UI changes orientation in iPhone we can override willAnimateRotationToInterfaceOrientation and given rectangle coordinates for the new control sizes and locations.

Logging

As with the iPhone, Android supports logging events.
To use logging you need to import android.util.Log .
To see a list of log messages one can use LogCat by going to Window > Show View > Other... > Android > LogCat .
There are several types of log messages you can write:
- Log.e(): Errors
- Log.w(): Warnings
- Log.i(): Information
- Log.d(): Debugging
- Log.v(): Verbose

Logging Example

Each of these logging methods takes either two or three arguments. The first is the tag, which is usually String name of the Activity; the second parameter is the message you want. If there is a third parameter it is a Throwable object which might be caught be some enclosing code.
```
Log.i("Hw1", "Main ViewCreated");
```

Storing and Retrieving Data

Like the iPhone, Android has a mechanism for storing application information persistently.
The three main ways to do this are: using a SharedPreferences object, through the Android filesystem, or using SQLite.
We will look at each of these in turn.

Using Preferences

You access a android.content.SharedPreferences object through the Context you are working in.
Many Android classes have a reference to, or themselves extend from Context.
For example, both Activity and Service extend Context.
A Context object includes a getSharedPreferences(String prefname, int accessmode); method.
prefname will correspond to a file prefname.xml that is stored in /data/data/PACKAGE_NAME/shared_prefs in the Android phone's filesystem.
accessmode - corresponds to one a list of predefined static constants in Content. This in turn corresponds to Unix filesystem modes: Context.MODE_WORLD_READABLE, Context.MODE_WORLD_WRITEABLE, etc. You can OR these together using +.
If you want to browse the emulator's filesystem one can, in Eclipse, go to: Window > Show View > Other... > Android > File Explorer.

More on Using Preferences

You typically would write preferences, either when the activity starts in onCreate, or when you are just about to switch activities.

Here is an example of some code to open a SharedPreferences and write to it:

SharedPreferences myPref = getSharedPreferences("MY_APP_PREFS", 
   Context.MODE_WORLD_WRITEABLE + Context.MODE_WORLD_READABLE);

Log.i("My_Activity", 
   "Old Some_Key" + myPref.getString("Some_Key","Key did not exist") );
//second arg is returned if key did not exist

Editor myPrefEditor = myPref.edit();
myPrefEditor.putString("Some_Key", "Some Value");
myPrefEditor.commit();

Our Story So Far...

For both platforms, we said that there is a Unix-like filesystem we can access.
We saw we could view the contents of the iPhone Simulator filesystem by using Finder and going to:
```
~/Library/Application Support/iPhoneSimulator/User/
```

For Android, we can open in Eclipse

Window > Show View > Other... > Android > File Explorer.

We also showed in Android how SharedPreferences get stored in /data/data/PACKAGE_NAME/shared_prefs.

iPhone Filesystem Test

We could put the following code in some method that gets called during the start-up of our application:

NSArray *paths = NSSearchPathForDirectoriesInDomains(
    NSDocumentDirectory, NSUserDomainMask, YES); //look for Documents directories in user home folder 
                                                 //YES means expand tilde directories 

NSString *documentsDirectory = [paths objectAtIndex:0]; //Will only be one such dir so same

//For temporary dir could have done
//NSString *tempPath = NSTemporaryDirectory
	
NSString *filename = [documentsDirectory stringByAppendingPathComponent:@"theFile.txt"];
	
if([[NSFileManager defaultManager] fileExistsAtPath:filename])
{
   NSArray *readArray = [[NSArray alloc] initWithContentsOfFile:filename];
   NSLog(@"I read from the file: %@", [readArray objectAtIndex:0]);
   [readArray release];
}
NSMutableArray *storeArray = [[NSMutableArray alloc] init];
[storeArray addObject:@"Some interesting Data"];
[storeArray writeToFile:filename atomically:YES ];
  // writing such an array stores the data as XML much like a plist
NSLog(@"I wrote some data");
[storeArray release];

Android FileSystem Test (Read Part)

This could be put in your Activity's onCreate method:

File testFile = new File("data/data/org.pollett/files/filename.txt");
//another useful directory is /sdcard for the sd card in the device
//if it exists. res/raw is also a useful directory for resource files 

FileInputStream fis = null;
if(testFile.exists())
{
   try
   {
      fis = this.openFileInput("filename.txt");
      byte[] reader = new byte[fis.available()];
      while(fis.read(reader) != -1){}
      Log.i("AndroidPersistence", "I just read:\n" +
         new String(reader) );
   }
   catch (IOException ie)
   {
       Log.e("AndroidPersistence", "File Read Error");
   }
   finally
   {
       if(fis !=null) 
        {
           try {fis.close();} catch(Exception e) {}
         }
   }
}

Android FileSystem Test (Write Part)

FileOutputStream fos = null;
try
{
   fos = this.openFileOutput("filename.txt", Context.MODE_PRIVATE);
   fos.write("hi there\n".getBytes());
   Log.i("AndroidPersistence", "I just wrote stuff\n");
}
catch (IOException ie)
{
   Log.e("AndroidPersistence", "File Write Error");
}
finally
{
   if(fos !=null) 
   {
      try {fos.close();} catch(Exception e) {}
   }
}

SQLite

Both iPhone and Android have a very simple database system (SQLite) built-in.
To use SQLite on the iPhone you import the header "/usr/include/sqlite3.h". You also should add the libsqlite3.dylib framework to the project.
On Android, you import android.database.sqlite.*
You should think of a database as a collection of tables.
Each table consists of a set of rows, and each row is in turn split into columns.
In Android databases are stored in /data/data/[PACKAGE_NAME]/database/

Database Commands

Commands in SQLite are written in SQL, a language for manipulating databases.

Some common commands are:

CREATE -- create a table

CREATE TABLE IF NOT EXISTS 
  EMPLOYEE (ID INTEGER PRIMARY KEY, NAME TEXT, AGE INTEGER)

DROP -- get rid of a table
```
DROP TABLE IF EXISTS MY_TABLE
```

INSERT -- add rows to a table


INSERT OR REPLACE INTO EMPLOYEE (ID, NAME, AGE) VALUES (5, 'Bob', 30)

DELETE -- delete rows
```
DELETE FROM tablename
WHERE cond
```
An example condition might be age: > 25
SELECT -- returns rows and columns from a cartesian product of tables according to some criteria
```
SELECT col_name1, col_name2, ..., col_name_n /*to empahsize what table do: table_name.col_name */
FROM table_name_1, table_name_2, ..., table_name_m
WHERE cond
```
an example condition might be: EMPLOYEE.ID = PROJECT.directorID AND PROJECT.budget = 1000000

SQLite on the iPhone

To open an SQLite database on the iPhone you use the syntax:

sqlite3 *database;
int result = sqlite3_open("/path/to/database", &database);

If the database does not exist, this will create it.
result will equal SQLITE_OK if this command succeeds.
SQLite is written in C so its arguments are C-strings not NSStrings.
To convert to an NSString to a C string we can use:
```
char *cStringPath = [someStringObj UTF8String];
```
When we are done with the database, we should close the database:
```
sqlite3_close(database);
```

Executing Commands on an SQLite Database on the iPhone

The way to issue CREATE, DROP, INSERT, DELETE statements is generally similar:

char *errorMsg;
const char *createSQL ="CREATE TABLE IF NOT EXISTS PEOPLE (ID INTEGER PRIMARY KEY, HOBBY TEXT)";
int result = sqlite3_exec(database, createSQL, NULL, NULL, &errorMsg);

If an SQLite command returns data, like a SELECT you have to be a little more clever:

NSString *query = @"SELECT * FROM PEOPLE";
sqlite3_stmt *statement;
int result = sqlite3_prepare_v2(database, [query UTF8String], -1, &statement, nil);
//could check if result is SQLITE_OK

while(sqlite3_step(statement) == SQLITE_ROW){
  // for the current row let's get out some columns
  int id = sqlite3_column_int(statement, 0); //0th column's data
  char *hobby = (char*)sqlite3_column_text(statement, 1);
  // do something with the data for this row
}
sqlite3_finalize(statement);

Android Database Persistence

To test out our database code we need to import the following packages:

import android.database.sqlite.*;
import android.database.*;
import android.content.*;
import android.util.*;

We will make use of two important classes:
- SQLiteOpenHelper - an abstract class whose onCreate and onUpgrade methods need to be implemented. Objects of this class are used to open/create the database
- SQLiteDatabase - objects of this class encapsulate a particular database and allow us to manipulate it.

On Testing Code

The following code just writes to the log file based on our SQL test.
We put it in the onCreate method of a dummy testing activity.

dbOpenHelper and db were private instance variables of our class.

dbOpenHelper = new DBOpenHelper(this, "My_Database", 3);
        
db = dbOpenHelper.getWritableDatabase();
        
//insert into database

db.execSQL("INSERT OR REPLACE INTO PEOPLE VALUES (5, 'test')");
db.close();
        
dbOpenHelper = new DBOpenHelper(this, "My_Database", 3);
        
db = dbOpenHelper.getReadableDatabase();
Cursor c = db.rawQuery("SELECT * FROM PEOPLE", null);

    	
for(int i=0; i< c.getCount(); i++)
{
   c.moveToNext();
   Log.i("SqliteAndroid", "Id="+c.getInt(0));
   Log.i("SqliteAndroid", "Hobby="+c.getString(1));        	
}
        
        
db.close();

Subclassing SQLiteOpenHelper

We subclass SQLiteOpenHelper as an inner class of our test activity

Here is the code:

    private static class DBOpenHelper extends SQLiteOpenHelper
    {
       public DBOpenHelper(Context context, String dbName, int version )
       {
    	  // third argument id to a cursor factory -- we don't care about
    	  super(context, dbName, null, version);
       }
       
       @Override
       public void onCreate(SQLiteDatabase db)
       {
    	   try
    	   {
    		  db.execSQL("CREATE TABLE IF NOT EXISTS PEOPLE (ID INTEGER PRIMARY KEY, HOBBY TEXT)"); 
    	   }
    	   catch(SQLException e)
    	   {
    		  Log.e("SqliteAndroid", "DBOpenHelper", e);
    	   }
       }
       
       @Override
       public void onUpgrade(SQLiteDatabase db, int oldVersion, int newVersion)
       {
    	  db.execSQL("DROP TABLE IF EXISTS PEOPLE");
    	  this.onCreate(db);
       }
    }