Android Platform Development Introduction

Day 3

Android 100

I work at Integrity as a Project and Engineering Lead

I've been doing mobile development for 5 years

iOS
Android
HTML5,CSS3,JS 

Log.i("Introduce Yourself",Person.info);

What is your name?

What do you do?

What kind of programming experience do you have? 

What is your favorite app?

Quiz Time!

Question 1

What is the AVD and how do we use it?

Load up the AVD Manager and startup an AVD

Question 2

What is an Activity?

Lets add a new Activity to our HelloWorld App

Question 3

What is the res/ folder and how do we use it?

Lets add a new layout to our app

Question 4

What are ViewGroups and Views?

Lets construct this view in XML

Layout Review

Turn this...

In to this...

Linear Layouts

Turn this...

In to this...

Relative Layouts

Turn this...

In to this...

Relative Layouts Cont.

Exercise 1

Handling Button Clicks

Lets  make a simple app...

android:onClick="buttonClicked"

By adding an "onClick" handler to our UI we can now programmatically trigger a function whenever a use clicks a button

Updating UI Programmatically

• The id of our label is textView1.
• The method that we’d like to use is available from the Activity class and is called findViewById.  
• The method will return a View object, which we can then cast to a TextView.  

public void buttonClicked(View view) {

    Log.i("LOG","Button was clicked!");

    TextView output = (TextView) findViewById(R.id.textView1);
    output.setText("You Pressed the button!");

}

Common Controls

ImageButton

<ImageButton
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/textView1"
        android:layout_below="@id/textView1"
        android:src="@drawable/abc_ic_go_search_api_mtrl_alpha"
        android:onClick="buttonClicked" />

• An ImageButton is a Button which allows an image to be shown as well.
• You can’t show text; if you need to show a text and an image, you should use a regular button but make the size larger and use an image for the button’s background.

ImageView

 <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher" />

• If an ImageButton shows an image on a button, the passive equivalent of it would be the ImageView, which just shows an Image.

EditText

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

    <EditText
        android:id="@+id/editText1"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/textView"
        android:hint="Enter name here..." />

• An EditText control allows the user to enter values.
• In the AVD, we can type in the values directly with the keyboard.  
• The hint attribute provides a text hint of what the user should enter in the control.

Challenge!

Setup Exercise 1 to collect a users information and print it to the screen when they hit the "Save" button

Checkbox

<CheckBox 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content"
        android:onClick="checkboxClicked"
        android:text="Check here"         
        />

    public void checkboxClicked(View view) {
    	CheckBox cb = (CheckBox) view;

    	TextView tv = (TextView) findViewById(R.id.textView1);
    	tv.setText("Checkbox is " + (cb.isChecked() ? "checked" : "not checked"));
    }

ToggleButton

    <ToggleButton 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:textOn="Yes"
        android:textOff="No"
        />

    public void toggleboxClicked(View view) {
    	ToggleButton tb = (ToggleButton) view;

        TextView tv = (TextView) findViewById(R.id.textView1);
        tv.setText("toggle is " + (tb.isChecked() ? "checked" : "not checked"));
}

RadioButton

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Which are better, Pirates or Ninjas?"
        />

    <RadioGroup
        android:id="@+id/radioGroup1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        >
        <RadioButton android:id="@+id/radio_pirates"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/pirates"
            android:onClick="favClicked"/>
        <RadioButton android:id="@+id/radio_ninjas"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/ninjas"
            android:onClick="favClicked"/>
    </RadioGroup>

RadioButton Continued

    public void favClicked(View view) {
        // Is the button now checked?
        boolean checked = ((RadioButton) view).isChecked();

        // Check which radio button was clicked
        switch (view.getId()) {
            case R.id.radio_pirates:
                if (checked)
                    Log.i("TEST", "Pirates are the best");
                    break;
            case R.id.radio_ninjas:
                if (checked)
                    Log.i("TEST", "Ninjas are the best");
                break;
        }
    }

Exercise 2

Step 1

Build the UI in XML

Step 2

Wire up your view in the Activity

Step 3

Add logic to handle use cases