Cohort+Problem+1+-+First+Android+App

=Get Familiar and Setting Up=

=The parts of an android app=

Start a new project by accepting all the defaults. You can change the name of the project.

At the "Add Activity to Mobile" window, select Empty Activity.

This is the equivalent of "Hello World" in android apps.

You should explore the folder tree and look for the following:
 * Android Manifest
 * Java files
 * Res folder - layout folder, drawable folder and values folder
 * Gradle configuration file

These four parts work together to produce your android app.

Virtual Device
Set up your android virtual device at the AVD manager.

My own practice is to have two, one at API level 25 and one at API level 26.

Android Phone
Also set up your android mobile phone by following the instructions to enable USB Debugging.

You are now ready for your first android app.

=Create A Layout=

Launch android studio and create a new project with an Empty Activity (call it "MainActivity").

Put a SUTD logo (or any image you like) in the res/drawables folder.

The layout can be created by editing the XML file or by the Design view
Create the layout as shown (ignore the fact that it says "Cohort Question 2" ....) The instructor will demonstrate this in class.

If you're trying it out on your own:
 * Ensure that the base layout is **LinearLayout,** and the orientation attribute is vertical.
 * You'll need an **ImageView** widget to display an image file.
 * A **TextView** widget to display text,
 * A **Button** widget.

Since we are going to make the Button have a callback, pay particular attention to the XML tag for the button within **activity_main.xml**. Among other things, we are specifying that the method whenClick will be called when the button is clicked. We are also using best practices by putting in a reference to a string.

code format="xml"  code Lastly, ensure that the **TextView** widget containing the SUTD address has the id "@+id/sutdaddress".

Explaining the Code
The "+id" part tells android to create a new id if it does not already exist.

The value "match_parent" specifies that the widget's dimension will follow that of its parent element.

Hence in this case, we want the widget's width to follow the width of the layout.

The value "wrap_content" specifies that the widget's dimension will follow that of its contents.

Detailed documentation in Layout Resources.

Strings commonly used in the app go in the strings.xml file in res folder
All references to @string go to what is stored in the **strings.xml** file. My own implementation looks like this: code format="xml" Cohort Question 1 Singapore University Of Technology and Design 8 Somapah Road\nSingapore 487372 Show Address code

=Editing MainActivity.java to implement callbacks=

How the code looks like
Now you are ready to edit **MainActivity.java**.

The method that is always called when loading is onCreate. This is where most of the work goes. Here, we obtain references to the widgets created by using the R class, which stores the IDs of all app resources.

Following which, since you had specified that the callback to the button widget is a method called whenClick, you can then define it here as well. Callbacks always take in one parameter, an object of the View class. Explanation of the code is given in the comment statements below.

code format="java" public class MainActivity extends AppCompatActivity  {

//Declare some fields for the widget Button myButton; TextView myTextView;

@Override protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

// inflate the layout specified in activity_main.xml setContentView(R.layout.activity_main);

// get a reference to the sutd address widget and make it invisible myTextView = (TextView) findViewById(R.id.sutdaddress); myTextView.setVisibility(View.INVISIBLE);

//do the same thing to the button. myButton = (Button) findViewById(R.id.button);

}

//callback when button is clicked public void whenClick(View v){

//TODO (1) if the address is invisible, make address visible and change the button text

//TODO (2) if the address is visible, make address invisible and change the button text

} }

code

Explaining the code
All widgets classes inherit the **View** class. Question From the documentation, how are the Button, TextView and View classes related?

The **AppCompatActivity** class is the newest class for activities that support compatibility with older versions, hence our MainActivity inherits from this. A discussion on StackOverflow gives more details.

Within the AppCompatActivity class, we find the findViewById method, which returns an object of type View, hence we need to cast the object that is returned by this method.


 * onSavedInstanceState** is a Bundle object that allows you to save the Activity's state, to allow it to be recreated e.g. upon an orientation change. We'll come to this in the next example.

Using Anonymous Classes for callbacks
Within the **onCreate** method, the button callback could have been implemented using anonymous classes instead. If you do this, you do not need to specify the callback in the XML tag. code format="java" myButton.setOnClickListener(

new View.OnClickListener{

public void onClick(View v){ //your code here }               }        ); code The setOnClickListener method expects an object of the OnClickListener interface as input. Within the method argument, you create an anonymous instance of this interface and define the onClick method straightaway.

Think about it.
There's a third way to implement callbacks. How? Which method you use is up to you and depends on the situation.

And ... there also lambda functions in Java 8 (but this is optional and only if you're interested. I won't use this feature in lessons. ).

=Try on your own=

Change the default app icon
If you test this app on your phone, you'll see the app on your phone using the default green icon. You may not like the default green app icon provided, so do change to one you like using the clip art available. As usual, stackoverflow has a good resource.

Make your own Tally Counter app
You may have seen people standing in the street using devices to count the number of people walking by. Make an android app that does the same.

You could watch this youtube video for more details, but it uses an outdated version of Android Studio.

Long Click
Now within the onCreate method, now implement a callback that reacts to a long click (the button is pressed and held before being released). You decide what happens after the long click - you can make a [|Toast] appear or an AlertDialog. Choose the correct listener method for the button, and look for the appropriate interface (documentation of the [|View class]).