Android Platform Development Introduction
Day 3
Android 100
Hello World!
I am Alex Rodriguez
![](https://s3.amazonaws.com/media-p.slid.es/uploads/alexrodriguez/images/263690/317676_2184328364956_165838763_n.jpg)
I work at Integrity as a Project and Engineering Lead
I've been doing mobile development for 5 years
iOS
Android
HTML5,CSS3,JS
I Love Rock Climbing
And this guy...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/alexrodriguez/images/263681/Screen_Shot_2014-02-23_at_11.19.56_AM.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/alexrodriguez/images/1122084/Screen_Shot_2015-03-01_at_4.02.12_PM.png)
Layout Review
Turn this...
In to this...
Linear Layouts
Turn this...
In to this...
Relative Layouts
Turn this...
In to this...
Relative Layouts Cont.
Handling Button Clicks
Lets make a simple app...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/alexrodriguez/images/1122803/layout-2015-03-01-205242.png)
android:onClick="buttonClicked"
![](https://s3.amazonaws.com/media-p.slid.es/uploads/alexrodriguez/images/1122822/Screen_Shot_2015-03-01_at_8.59.38_PM.png)
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;
}
}
Step 1
Build the UI in XML
Step 2
Wire up your view in the Activity
Step 3
Add logic to handle use cases
AND100 Day 3
By Alex Rodriguez
AND100 Day 3
- 2,055