forked from atroutt/android-beginners
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
1826 lines (1675 loc) · 84.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Android for Beginners - A practical introduction to app development on Android</title>
<meta name="description" content="Course materials for a practical introduction to app development on Android. Forked from Girl Develop It framework, which was forked from Hakim El Hattab's reveal.js">
<meta name="author" content="Audrey Troutt for Girl Develop It">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/gdidefault.css" id="theme">
<!-- For syntax highlighting -->
<!-- light editor<link rel="stylesheet" href="lib/css/light.css">-->
<!-- dark editor--><link rel="stylesheet" href="lib/css/dark.css">
<link rel="stylesheet" href="lib/css/zenburn.css">
<link rel="stylesheet" href="plugin/accessibility-helper/css/accessibility-helper.css">
<!-- If the query includes 'print-pdf', include the PDF print sheet -->
<script>
if( window.location.search.match( /print-pdf/gi ) ) {
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'css/print/pdf.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
}
</script>
<!-- If use the PDF print sheet so students can print slides-->
<link rel="stylesheet" href="css/print/pdf.css" type="text/css" media="print">
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<!-- Opening -->
<section data-transition="none">
<h1>Android for Beginners</h1>
<p>A practical introduction to app development on Android</p>
<p>
<small>Course source materials at <a href ="https://github.com/atroutt/android-beginners">on github</a>.</small>
</p>
<p>
<small>Taught by <a href="http://audreytroutt.com">Audrey Troutt</a> / <a href="http://twitter.com/auditty">@auditty</a></small>
</p>
</section>
<section data-transition="none">
<h2>Is this class for you?</h2>
<p>You should be..</p>
<ul>
<li class="fragment">curious and excited to learn about how apps are built.</li>
<li class="fragment">prepared to face challenges and have some fun along the way.</li>
<li class="fragment">already have some experience with programming concepts like variables, methods, classes, arrays, conditionals, and loops.</li>
</ul>
<aside class="notes">
You are not expected to have any previous Android or even Java experience for this class. However, to move things along it would help if this wasn't your very first introduction to programming in general.
I think it is just as important to build things from scratch as it is to understand existing code and take things apart. Therefore the coding exercises will be a combination of read and edit, build from pieces, and start from scratch.
</aside>
</section>
<!-- AHEAD OF TIME -->
<section data-transition="none">
<section data-transition="none">
<h2>Before the first class</h2>
<ul>
<li>Get a Google Account</li>
<li>Install Android Studio</li>
<li>Download the App Code</li>
<li>Optional: Prep your Android device</li>
<li>Bonus: learn about Java and Android</li>
</ul>
<p style="margin-top:20px;"><small class="green">
HINT: Press <strong>Down Arrow ↓</strong> to navigate to the sub-sections below.
</small></p>
</section>
<section data-transition="none">
<h2>Google Account</h2>
<p class="left-align">If you have one, <a href="https://accounts.google.com/signup" target="_blank">create one for free</a>.</p>
<p class="left-align">We are going to use this for logging in to the apps we will be creating.</p>
</section>
<section>
<h2>Android Studio</h2>
<p class="left-align">If you don't have it already, <a href="http://developer.android.com/sdk/index.html">download and install Android Studio</a>.</p>
<p class="left-align">This is the editor we will use to write our apps.</p>
</section>
<section>
<h2>Download Android SDKs</h2>
<p class="left-align">Once Android Studio is installed, go to the Android SDK Manager inside Android Studio (Tools -> Android -> SDK Manager) and check two things:</p>
<ol>
<li>Under the "SDK Platforms" tab check that Android 7.0 (Nougat) API 24 is installed or download if needed.</li>
<li>Then in the "SDK Tools" tab on that screen download the Support Repository / Android Support Repository if not already installed.</li>
</ol>
</section>
<section>
<h2>Get Code</h2>
<p class="left-align">Download the code for this class:</p>
<ol>
<img width="30%" style="float:right" src="img/first-download-zip.png" />
<li>Go to <a href="https://github.com/atroutt/android-beginners" target="_blank">GitHub atroutt/android-beginners</a></li>
<li>On the top right press "Clone or download" and click "Download ZIP"</li>
<li>On your computer, open the zip files with your favorite unzip program and put the 'android-beginners' folder somewhere you can find it later. This repo contains the source for the app we will be using in this class in addition to these slides.</li>
</ol>
</section>
<section>
<h2>Optional: Prep your Android device</h2>
<p class="left-align">If you have an an Android phone <a href"http://www.androidauthority.com/enable-developer-options-569223/">enable developer options</a> so that you can install and run your own apps.</p>
<p class="left-align">An Android phone is not required for this course.</p>
<aside class="notes">
<p>Your phone needs to be running Android Jellybean (4.1-4.3), KitKat (4.4), Lollipop (5.x), or Marshmallow (6.x).</p>
<p>An Android phone is not required for this course, but it is fun to have so you can show your friends what you've built. If you don't have a device you can use the Android emulator with Android Studio. Luckily for you the Android emulators have gotten faster and faster in recent years.</p>
</aside>
</section>
<section>
<h2>Bonus: Learn about Java and Android</h2>
<p class="left-align">If you just can't wait to get started, here's some resources to start learning now:</p>
<ul>
<li><a href="https://developer.android.com/training/index.html">Google's Android Training</a> specifically, <a href="https://developer.android.com/training/basics/firstapp/index.html">Building your First App</a> (free)</li>
<li><a href="https://www.udacity.com/course/developing-android-apps--ud853">Udacity's Developing Android Apps</a> (free)</li>
<li><a href="https://www.udacity.com/course/how-to-use-git-and-github--ud775">Udacity's How to use Git and Github</a> (free)</li>
<li><a href="http://amzn.com/0596009208">Head First Java, 2nd Edition</a> by Kathy Sierra and Bert Bates</li>
<li><a href="https://www.udemy.com/java-tutorial/">Udemy's Java Tutorial for Complete Beginners</a> (free)</li>
</ul>
<p class="left-align" style="margin-top:20px;"><small class="green">
HINT: This is the end of the section, press <strong>Right Arrow →</strong> to navigate to the next section.
</small></p>
</section>
</section>
<section>
<section>
<h2>Course Overview</h2>
<ol>
<li>Running your first app</li>
<li>Anatomy of an app</li>
<li>APIs and authentication</li>
<li>Cameras and photos</li>
<li>Testing and Refactoring</li>
</ol>
<p style="margin-top:20px;"><small class="green">
HINT: Press <strong>ESC</strong> to enter the slide overview.
</small></p>
<aside class="notes">
<p>I'm hoping that we will make it through the first two today and the second two tomorrow, but since this is the first time through I'm not sure how it will go. There's a little wiggle room to stretch and shrink the sections if needed.</p>
</aside>
</section>
<section>
<h2>Please do</h2>
<ul>
<li>Ask questions</li>
<li>Be brave</li>
<li>Take breaks</li>
<li>Help each other out</li>
</ul>
<aside class="notes">
<p>There are no dumb questions. I am here to help you learn what you want to learn, so anytime you have a question or get stuck, speak up. I'm happy to answer your questions.</p>
<p>Be brave when facing new challenges and boldly poke around in the code. Breaking things is one of my favorite ways to learn about something new. I promise we will all help you fix it if you get really stuck.</p>
<p>Also feel free to take a break anytime you need. We will have 30 minutes for lunch and at least one stretch break in the morning and the afternoon.</p>
<p>Help each other out if you can while we are discussing things or doing our projects. The best way to learn is to teach!</p>
</aside>
</section>
</section>
<!-- 1. RUNNING YOUR FIRST APP -->
<section>
<section>
<h2>Your first app</h2>
<p>In this section you will learn how to create or import a new project into Android Studio, and build and run it on your device or emulator.<p>
</section>
<section>
<h2>Tour of Android Studio</h2>
<p>There's a lot to see and do in Android Studio. Let's take a <a href="https://developer.android.com/studio/intro/index.html">brief tour</a> of the parts we will use in this course.</p>
<img src="img/first-run-android-studio.png"/>
<aside class="notes">
<p>Introduce these parts of Android Studio:</p>
<ol>
<li>The toolbar lets you carry out a wide range of actions, including running your app and launching Android tools.</li>
<li>The navigation bar helps you navigate through your project and open files for editing. It provides a more compact view of the structure visible in the Project window.</li>
<li>The editor window is where you create and modify code. Depending on the current file type, the editor can change. For example, when viewing a layout file, the editor displays the Layout Editor.</li>
<li>The tool window bar runs around the outside of the IDE window and contains the buttons that allow you to expand or collapse individual tool windows.</li>
<li>The tool windows give you access to specific tasks like project management, search, version control, and more. You can expand them and collapse them.</li>
<li>The status bar displays the status of your project and the IDE itself, as well as any warnings or messages.</li>
</ol>
</aside>
</section>
<section>
<h2>Create a New App</h2>
<p>Set the name and package for your app. Choose a project location or use the suggested directory.</p>
<img src="img/first-1.png" />
<aside class="notes">
Packages are how your app is uniquely identified on the device and in the app stores. Usually they look like backwards urls, but they don't actually have to match a real website.
</aside>
</section>
<section>
<h2>Create a New App</h2>
<p>Select Phone and Tablet and press Next</p>
<img src="img/first-2.png" />
</section>
<section>
<h2>Create a New App</h2>
<p>For now, select Empty Activity to start (it's the simplest) and press Next</p>
<img src="img/first-3.png" />
</section>
<section>
<h2>Create a New App</h2>
<p>Leave the default name and press Finish. Your app will be generated!</p>
<img src="img/first-4.png" />
</section>
<section>
<h2>Create a New App</h2>
<p>You should see this error-free code after Gradle, our build tool, finishes syncing.</p>
<img src="img/first-5.png" />
</section>
<section>
<h2>Run your App</h2>
<img style="float:right;" src="img/first-run-app.png"/>
<p class="left-align">In the top menu choose "Run 'app'"</p>
<p class="left-align">Android Studio is going to ask you to "Select Deployment Target" — this means choose the device you would like to run on</p>
<p class="left-align" style="margin-top:20px;"><small class="yellow">
PRO TIP: Check the box that says "Use same device for future launches."
</small></p>
</section>
<section>
<h2>Hello World!</h2>
<p>You should see this on your device!</p>
<img src="img/first-hello-world.png" />
</section>
</section>
<section>
<section>
<h2>Project 1: First Run</h2>
<p>Import and run our class app for the first time.</p>
<img src="img/first-run.png"/>
</section>
<section>
<h2>Download App Code</h2>
<p class="left-align">If you haven't already, <br><a href="https://github.com/atroutt/android-beginners/archive/gh-pages.zip">download the source code for the first app</a> (zip).</p>
<p class="left-align" style="margin-top:40px">Alternatively, download the repo using git:</p>
<pre><code class ="bash">https://github.com/atroutt/android-beginners.git</code></pre>
</section>
<section>
<h2>Import Project</h2>
<img class="right" src="img/first-android-studio-open-project.png" alt="From the main screen when you launch Android Studio, choose Open an existing Android Studio Project"/>
<p class="left-align">Launch Android studio</p>
<p class="left-align">Choose to open an existing Android Studio Project (File -> New -> Import Project)</p>
<p class="left-align">Choose the AndroidBeginnersFirstApp folder on your computer.<p>
</section>
<section>
<h2>Gradle Sync</h2>
<p class="left-align">Before you can run your first app, you need to make sure you have all the dependencies downloaded. To do that select "Sync Project with Gradle Files" from the top menu bar. This may take a minute.</p>
<img src="img/first-sync-gradle.png"/>
<aside class="notes">
If they haven't downloaded the SDKs that they need yet, there will be a lot of errors.
</aside>
</section>
<section>
<h2>Run your App (!)</h2>
<img style="float:right;" src="img/first-run-app.png"/>
<p class="left-align">In the top menu choose "Run 'app'"</p>
<p class="left-align">Android Studio is going to ask you to "Select Deployment Target" — this means choose the device you would like to run on</p>
<p class="left-align" style="margin-top:20px;"><small class="yellow">
PRO TIP: Check the box that says "Use same device for future launches."
</small></p>
</section>
<section>
<h2>Project 1: First Run</h2>
<p>If you can see this, then you are all set up!</p>
<p>Go ahead and snap a selfie!</p>
<img src="img/first-run.png"/>
<aside class="notes">
<p>If you have some people who finish early, teach them the "Find in Path" (cmd+shift+f) command in Android Studio and see if they can figure out how to change the text that appears on the MainActivity "Take a photo of yourself..."</p>
</aside>
</section>
</section>
<!-- 2. ANATOMY OF AN APP -->
<section>
<section>
<h2>Anatomy of an app</h2>
<p>Now that you have been introduced to Android Studio, let's dissect an app!</p>
<img src="img/anatomy-apps.png"/>
</section>
<section>
<h2>Application</h2>
<p>This is an app, also known as an Application</p>
<img src="img/anatomy-application-overlay.png"/>
</section>
<section>
<h2>Application</h2>
<p>Every app has one Application class</p>
<img src="img/anatomy-application.png"/>
</section>
<section>
<h2>Activity</h2>
<p>An app usually has many screens.</p>
<p>These are called Activities.</p>
<img src="img/anatomy-activities.png"/>
</section>
<section>
<h2>Activity</h2>
<p>Here's a screen from our app. It is defined by an Activity class you'll see later.</p>
<img src="img/anatomy-detail-activity.png"/>
</section>
<section>
<h2>View</h2>
<p>An Activity usually has many views</p>
<img src="img/anatomy-views-overlay.png"/>
</section>
<section>
<h2>View</h2>
<p>An Activity usually has many views</p>
<img src="img/anatomy-views.png"/>
</section>
</section>
<!-- Just Enough Java -->
<section>
<section>
<h2>But first</h2>
<h2>Just Enough Java</h2>
<aside class="notes">
Before I can start showing you the code that your apps are made of, you are going to need just a tiny bit of Java.
</aside>
</section>
<section>
<h2>Just Enough Java</h2>
<p>What does all this mean?</p>
<pre><code class ="java">package com.audreytroutt.androidbeginners.firstapp;
import android.app.Application;
public class MyFirstApplication extends Application {
int toastLength = Toast.LENGTH_LONG;
@Override
public void onCreate() {
super.onCreate();
showToast("I have been created!");
}
public void showToast(String message) {
Toast.makeText(this, message, Toast.LENGTH_LONG).show();
}
}
</code></pre>
<aside class="notes">
<p>What is all this (press next)</p>
</aside>
</section>
<section>
<h2>Just Enough Java</h2>
<p>What does all this mean?</p>
<pre><code class ="java">package com.audreytroutt.androidbeginners.firstapp;
import android.app.Application; // import
public class MyFirstApplication extends Application { // class
int toastLength = Toast.LENGTH_LONG; // field
@Override
public void onCreate() { // method
super.onCreate();
showToast("I have been created!");
}
public void showToast(String message) { // method
Toast.makeText(this, message, Toast.LENGTH_LONG).show();
}
}
</code></pre>
<aside class="notes">
Really quick, here's what I mean by class, field, method, and comment.
</aside>
</section>
<section>
<h2>Just Enough Java</h2>
<p>Anything after // is a <strong class="green">comment</strong> in Java.</p>
<pre><code contenteditable class ="java">// This is a comment</code></pre>
<aside class="notes">
Let's start with something easy: anything after double forward slashes is a comment. Comments should go BEFORE the thing you are talking about, but not on the same line!!
</aside>
</section>
<section>
<h2>Just Enough Java</h2>
<p>Every line of code must end with a <strong class="green">semi-colon</strong>;</p>
<pre><code contenteditable class ="java">int numberOfErrors = 0;</code></pre>
<aside class="notes">
Every line of code ends with a semi-colon. Android Studio will put a red error on your file if you forget your semi-colons--you can't compile your code without them.
</aside>
</section>
<section>
<h2>Just Enough Java</h2>
<p class="left-align">Most things in Java are object.</p>
<p class="left-align">A <strong class="green">class</strong> is the definition of an object in Java</p>
<pre><code contenteditable class ="java">// this is a class
public class MyFirstApplication extends Application {
// your fields and methods go in here
}</code></pre>
<p class="left-align">All of your code goes inside of classes.</p>
<aside class="notes">
Everything in Java is an object and objects are defined by classes. This is an Application class called MyFirstApplication.
<br>
All of your code goes inside of classes.
<br>
You can see here that this says MyFirstApplication extends Application. That means MFA *is an* Application--it has all the fields and methods of Application PLUS anything added here in this file. This is known as inheritance.
</aside>
</section>
<section>
<h2>Just Enough Java</h2>
<p class="left-align">A <strong class="green">method</strong> defines the behavior of your class.</p>
<p class="left-align">Everything your app does will be defined inside of methods inside of classes.</p>
<pre><code contenteditable class ="java">public void showToast(String message) { // this is a method
Toast.makeText(this, message, toastLength).show();
}
</code></pre>
<aside class="notes">
A method defines the behavior of your class. Your classes will have many methods. Everything your app does will be defined inside of methods inside of classes.
Methods have visibility (public, private), return type (String, void), name (showToast), and maybe parameters (inside the parens)
Here is a method called showToast that takes a message as a parameter. Inside the showToast method we call another method on a class called Toast to tell Android to display the little pop up message for the specified duration.
</aside>
</section>
<section>
<h2>Just Enough Java</h2>
<p class="left-align">A <strong class="green">field</strong> holds some data for your object.</p>
<pre><code contenteditable class ="java">public class MyFirstApplication extends Application {
int toastLength; // this is a field
public void showToast(String message) {
Toast.makeText(this, message, toastLength).show();
}
}
</code></pre>
<p class="left-align" style="margin-top:20px;"><small class="yellow">
PRO TIP: always put your fields at the top of your class, above any methods.
</small></p>
<aside class="notes">
A field is where you can hold data for your object.
<br>
Fields have a type (View, int, String, long) and a name (like toastLength).
<br>
In this case my Application has a field called toastLength. It's an integer.
<br>
In my showToast method I'm using the value of toastLength to determine how long the toast message is displayed on the screen.
</aside>
</section>
<section>
<h2>Just Enough Java</h2>
<p class="left-align">Up at the top above the class body there are two things you will see: the package and import declarations.</p>
<pre><code contenteditable class ="java">package com.audreytroutt.androidbeginners.firstapp;
import android.app.Application;
import android.widget.Toast;
import java.util.Date;
</code></pre>
<p class="left-align"><strong class="green">package</strong> is like a folder path to your class--it will be auto-generated for you.</p>
<p class="left-align"><strong class="green">import</strong> is used to include other code into your class.</p>
<aside class="notes">
Up at the top above the class body you will often see a lot of import statements. This is how you can make other code accessible to you in your class.
<br>
You usually don't have to type this yourself. I will show you how to automatically import based on Android Studio's suggestions.
<br>
On a mac the keyboard shortcut is option+return.
</aside>
</section>
</section>
<section>
<section>
<h2>Anatomy of an App (Continued)</h2>
<p>Let's dissect an app!</p>
<img src="img/anatomy-apps.png"/>
</section>
<section>
<h2>Application</h2>
<p>This is an app, also known as an Application</p>
<img src="img/anatomy-application-overlay.png"/>
</section>
<section>
<h2>Application</h2>
<p>Your application is always represented in your Application's Manifest, AndroidManifest.xml.</p>
<img src="img/anatomy-manifest.png"/>
</section>
<section>
<h2>Application</h2>
<p class="left-align">The Android Manifest is an XML file that declares things like the name of your Application, what Activities it includes, and which Activity should be displayed on launch.</p>
<pre><code contenteditable class="xml"><?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.audreytroutt.androidbeginners.firstapp">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:supportsRtl="true"
android:theme="@style/AppTheme"
android:name=".MyFirstApplication">
<activity
android:name=".MainActivity"
android:label="Welcome to the First App!"
android:theme="@style/AppTheme.NoActionBar">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity
android:name=".PaintingListActivity"
android:label="Paintings (List)"
android:parentActivityName=".MainActivity">
</activity>
<activity
android:name=".PaintingDetailActivity"
android:parentActivityName=".MainActivity">
</activity>
</application>
</manifest>
</code></pre>
</section>
<section>
<h2>Application</h2>
<p class="left-align">An instance of your Application class is created when your app launches and sticks around until your app is stopped.</p>
<p class="left-align">You are not required to create your own Application class implementation. There is a default that works well enough for simple use cases.</p>
</section>
<section>
<h2>Application</h2>
<p class="left-align">If you do create your own implementation it has to extend android.app.Application. It will look something like this:</p>
<pre><code contenteditable class="java">package com.audreytroutt.androidbeginners.firstapp;
import android.app.Application;
public class MyFirstApplication extends Application {
@Override
public void onCreate() {
super.onCreate();
// At this point my first application was just created
}
}
</code></pre>
<aside class="notes">
This is a super simple Application implememtation. It doesn't really do anything, but it is there. The one method here is onCreate, which is called by the Android operating system just after your application is first launched.
The name of this class "MyFirstApplication" could be anything we want. What makes it our application class is that it extends Application.
We might see later some examples where you can extend a class indirectly (extend a class that extends Application, etc.)
</aside>
</section>
<section>
<h2>Activity</h2>
<p>As we learned earlier, an app can have many Activities.</p>
<img src="img/anatomy-activities.png"/>
</section>
<section>
<h2>Activity</h2>
<p>Here's a screen from our app.</p>
<img src="img/anatomy-detail-activity.png"/>
</section>
<section>
<h2>Activity</h2>
<p class="left-align">Activities are registered in your Application Manifest</p>
<p class="left-align">Here you can see three Activities for my app.</p>
<pre><code contenteditable class="xml"><?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.audreytroutt.androidbeginners.firstapp">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:supportsRtl="true"
android:theme="@style/AppTheme"
android:name=".MyFirstApplication">
<!-- Here's the first Activity -->
<activity
android:name=".MainActivity"
android:label="Welcome to the First App!"
android:theme="@style/AppTheme.NoActionBar">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity
android:name=".PaintingListActivity"
android:label="Paintings (List)"
android:parentActivityName=".MainActivity">
</activity>
<activity
android:name=".PaintingDetailActivity"
android:parentActivityName=".MainActivity">
</activity>
</application>
</manifest>
</code></pre>
</section>
<section>
<h2>Activity</h2>
<p class="left-align">Let's take a look at our MainActivity.</p>
<img src="img/anatomy-as-activity.png"/>
<p class="left-align" style="margin-top:20px;"><small class="green">
HINT: The name MainActivity can be anything you want. It's only by convention that the name has "Activity" in it. The only requirement is that the class extends Activity.
</small></p>
</section>
<section>
<h2>MainActivity</h2>
<p class="left-align">Inside an Activity class you again see an onCreate method. This is often where you set up what is displayed on the screen.</p>
<pre><code contenteditable class="java">public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar.make(view, "Hello, Test!", Snackbar.LENGTH_LONG)
.setAction("Action", null).show();
}
});
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
drawer.setDrawerListener(toggle);
toggle.syncState();
NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
navigationView.setNavigationItemSelectedListener(this);
}
@Override
public void onBackPressed() {
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
if (drawer.isDrawerOpen(GravityCompat.START)) {
drawer.closeDrawer(GravityCompat.START);
} else {
super.onBackPressed();
}
}
@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();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
@Override
public boolean onNavigationItemSelected(MenuItem item) {
// Handle navigation view item clicks here.
int id = item.getItemId();
if (id == R.id.nav_camera) {
// Handle the camera action
} else if (id == R.id.nav_list) {
Intent listIntent = new Intent(this, PaintingListActivity.class);
startActivity(listIntent);
}
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
drawer.closeDrawer(GravityCompat.START);
return true;
}
}
</code></pre>
</section>
<section>
<h2>Activity Lifecycle</h2>
<img src="img/anatomy-activity-lifecycle.png" />
<p><small>
From <a href="https://developer.android.com/reference/android/app/Activity.html#ProcessLifecycle">developer.android.com/reference/android/app/Activity.html#ProcessLifecycle</a>
</small></p>
<aside class="notes">
onCreate is just the first of many standard Android Activity methods. Activities have a lifecycle from creation, through destruction. The android operating system will call each of these methods at the appropriate time, which makes it possible to set up your screen, like we saw in onCreate, or to save things off or pause expensive operations if the screen is about to disappear.
You do not have to define these methods in your activity because they are defined in the Activity class that all activities inherit from. That's why we always have to call super.onCreate(...) so that the underlying code gets called.
</aside>
</section>
<section>
<h2>MainActivity</h2>
<p class="left-align">There will also be methods for any of the actions that can be taken with the views (buttons, toggles, menus, etc.) on the screen.</p>
<pre><code contenteditable class="java">@Override
public void onBackPressed() {
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
if (drawer.isDrawerOpen(GravityCompat.START)) {
drawer.closeDrawer(GravityCompat.START);
} else {
super.onBackPressed();
}
}
@Override
public boolean onNavigationItemSelected(MenuItem item) {
int id = item.getItemId();
if (id == R.id.nav_camera) {
} else if (id == R.id.nav_list) {
Intent listIntent = new Intent(this, PaintingListActivity.class);
startActivity(listIntent);
}
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
drawer.closeDrawer(GravityCompat.START);
return true;
}</code></pre>
</section>
<section>
<h2>Intent</h2>
<p class="left-align">Now we can talk about how you navigate between Activities: <a href="https://developer.android.com/reference/android/content/Intent.html">Intents</a>!</p>
</section>
<section>
<h2>Intent</h2>
<p class="left-align">Navigating between Activities is done with the use of Intents, like this:</p>
<pre><code contenteditable class="java">Intent listIntent = new Intent(this, PaintingListActivity.class);
startActivity(listIntent);</code></pre>
<p class="left-align">An Intent is a message to the Android operating system that we'd like to start the Activity named in the Intent.</p>
<p class="left-align"class="left-align" style="margin-top:20px;"><small class="green">
HINT: Intents can only be created with a "context", which for us means an Activity. The startActivity method is defined for us in the Activity base class that we extend.
</small></p>
<aside class="notes">
Here is an intent being created from inside a method on my MainActivity (so this refers to the current MainActivity instance). When this code is executed a new PaintingListActivity will be created and presented to the user.
</aside>
</section>
<section>
<h2>Intent</h2>
<p class="left-align">Intents are useful for more than switching between screens. They are the way to kick off all sorts of actions from your app:</p>
<ul>
<li>making calls</li>
<li>viewing contacts</li>
<li>picking files/images</li>
<li>snapping images with the camera</li>
<li>social sharing</li>
<li>...and more!</li>
</ul>
<p class="left-align">Reference: <a href="https://developer.android.com/guide/components/intents-common.html">common intents</a></p>
</section>
<section>
<h2>Email Intent</h2>
<p class="left-align">Here's an example of a method that creates an intent to send an email:</p>
<pre><code contenteditable class="java">public void composeEmail(String[] addresses, String subject) {
Intent intent = new Intent(Intent.ACTION_SENDTO);
intent.setData(Uri.parse("mailto:")); // only email apps
intent.putExtra(Intent.EXTRA_EMAIL, addresses);
intent.putExtra(Intent.EXTRA_SUBJECT, subject);
if (intent.resolveActivity(getPackageManager()) != null) {
startActivity(intent);
}
}</code></pre>
</section>
<section>
<h2>Capture Photo Intent</h2>
<p class="left-align">Here's an example of a method that creates an intent to capture a photo with the camera app:</p>
<pre><code contenteditable class="java">static final int REQUEST_IMAGE_CAPTURE = 1;
private void dispatchTakePictureIntent() {
Intent takePictureIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
if (takePictureIntent.resolveActivity(getPackageManager()) != null) {
startActivityForResult(takePictureIntent, REQUEST_IMAGE_CAPTURE);
}
}</code></pre>
</section>
<section>
<h2>Capture Photo Intent Result</h2>
<p class="left-align">When you call startActivityForResult you have to pass a code that you can use to match the response with your request.</p>
<pre><code contenteditable class="java">@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
if (requestCode == CAPTURE_IMAGE_ACTIVITY_REQUEST_CODE && resultCode == RESULT_OK) {
// A picture was just taken, let's display that in our image view
editImage();
updateMainImageFromFile();
}
}</code></pre>
</section>
</section>
<section>
<section>
<h2>Project 2: Connect the Screens</h2>
<p>Head over to Android Studio for our second project.</p>
</section>
<section>
<h2>Project 2: Connect the Screens</h2>
<p class="left-align">For this project, your goal is to create intents so that each of the menu items in the drawer lead to the correct screens. Open MainActivity and find onNavigationItemSelected</p>
<ol class="left-align">
<li class="left-align">nav_camera should fire a Capture Photo Intent. <small>NOTE: I have already implemented the onActivityResult with the code CAPTURE_IMAGE_ACTIVITY_REQUEST_CODE</small></li>
<li class="left-align">nav_list should display the PaintingListActivity</li>
<li class="left-align">nav_grid should display the PaintingGridActivity</li>
<li class="left-align">nav_web should take you to this website</li>
<li class="left-align">nav_share should fire a social share Intent</li>
<li class="left-align">nav_send should open an email Intent</li>
</ol>
<p class="left-align" style="margin-top:20px;"><small class="green">
HINT: You can either try to figure those out from the previous lessons, or from <a href="https://developer.android.com/guide/components/intents-common.html">the Android docs</a>, or continue down for some copy and paste code snippets.
</small></p>
</section>
<section>
<h2>nav_camera</h2>
<p class="left-align">nav_camera should fire a Capture Photo Intent</p>
<pre><code contenteditable class="java">if (id == R.id.nav_camera) {
// TODO Project 2: create an intent for the MediaStore.ACTION_IMAGE_CAPTURE
Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
intent.putExtra(MediaStore.EXTRA_OUTPUT, getAndroidBeginnerImageUri()); // set the image file name
startActivityForResult(intent, CAPTURE_IMAGE_ACTIVITY_REQUEST_CODE);
}</code></pre>
</section>
<section>
<h2>nav_list</h2>
<p class="left-align">nav_list should display the PaintingListActivity</p>
<pre><code contenteditable class="java">} else if (id == R.id.nav_list) {
// TODO Project 2: create an intent for the PaintingListActivity
Intent listIntent = new Intent(this, PaintingListActivity.class);
startActivity(listIntent);
}</code></pre>
</section>
<section>
<h2>nav_grid</h2>
<p class="left-align">nav_grid should display the PaintingGridActivity. This is just like nav_list, but with a different class--see if you can figure this out!</p>
</section>
<section>
<h2>nav_web</h2>
<p class="left-align">nav_web should take you to this website</p>
<pre><code contenteditable class="java">} else if (id == R.id.nav_web) {
// TODO Project 2: create an intent to open a url
Uri webpage = Uri.parse("http://audreytroutt.com/android-beginners/");
Intent intent = new Intent(Intent.ACTION_VIEW, webpage);
if (intent.resolveActivity(getPackageManager()) != null) {
startActivity(intent);
}
}</code></pre>
</section>
<section>
<h2>nav_share</h2>
<p class="left-align">nav_share should fire a social share Intent</p>
<p class="left-align">I've already implemented a shareAction() method because I need it for the Floating Action Button (FAB).</p>
<pre><code contenteditable class="java">} else if (id == R.id.nav_share) {
// TODO Project 2: create an intent to social share about this app
shareAction();
}</code></pre>
</section>
<section>
<h2>nav_send</h2>
<p class="left-align">nav_send should open an email Intent</p>
<pre><code contenteditable class="java">} else if (id == R.id.nav_send) {
// TODO Project 2: create an intent to send an email
Intent intent = new Intent(Intent.ACTION_SENDTO);
intent.setData(Uri.parse("mailto:")); // only email apps should handle this
intent.putExtra(Intent.EXTRA_EMAIL, new String[] { "[email protected]"});
intent.putExtra(Intent.EXTRA_SUBJECT, "Testing out my Email Intent -- Success!");
if (intent.resolveActivity(getPackageManager()) != null) {
startActivity(intent);
}
}</code></pre>
</section>
</section>
<!-- 3. APIs and Authentication -->
<section>
<section>
<h2>APIs and Authentication</h2>
<p class="left-align">Most of the code that makes apps work isn't code you write yourself--instead we use libraries.</p>
<p class="left-align">A library will provide an API for implementing the features you need.</p>
<p class="left-align">API stands for Application Program Interface, and it means the classes and methods that you need to use to leverage all this code that other people wrote.</p>
<aside class="notes">
You've already learned a lot about the Android APIs when you learned about Application, Activity, and the Intent system.
</aside>
</section>
<section>
<h2>Dependencies</h2>
<p class="left-align">Dependencies are libraries that your project needs to work.</p>
<p class="left-align">You can add libraries manually by putting a copy of the library (usually a .jar or .aar file) in your project and instructing the gradle build script to include this file when it builds your app.</p>
<p class="left-align">Or, you can use a <strong>dependency management system</strong>, like gradle, to automatically download and include the required libraries into your app.</p>
</section>
<section>
<h2>build.gradle</h2>
<p class="left-align">Gradle is both our build tool and our dependency managment system. The build.gradle script gives instructions for how to build the app and which dependencies to download and include.</p>
<pre><code contenteditable class="java">apply plugin: 'com.android.application'
android {
compileSdkVersion 24
buildToolsVersion "24.0.3"
defaultConfig {
applicationId "com.audreytroutt.androidbeginners.firstapp"
minSdkVersion 16
targetSdkVersion 24
versionCode 1
versionName "1.0"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
testCompile 'junit:junit:4.12'
// Support libraries
compile 'com.android.support:appcompat-v7:24.2.1'
compile 'com.android.support:design:24.2.1'
compile 'com.android.support:cardview-v7:24.2.1'
compile 'com.android.support:support-v4:24.2.1'
// picasso
compile 'com.squareup.picasso:picasso:2.5.2'
// TODO Project 3: add the firebase auth dependencies here
}</code></pre>
</section>
<section>
<h2>Using Libraries</h2>
<p class="left-align">Once you've added a library to your project, you need to know how to use it. There are four kinds of documentation for most libraries:</p>
<ol>
<li>Getting Started Instructions</li>
<li>Formal API Documentation</li>
<li>Feature Usage Guides</li>
<li>Sample apps</li>
</ol>
</section>
<section>
<h2>Getting Started Instructions</h2>
<p class="left-align">Getting started instructions usually tell you how to get the library and maybe how to initialize the main class.</p>
<img src="img/auth-getting-started-instructions.png"/>
</section>
<section>
<h2>Formal API Documentation</h2>
<p class="left-align">Formal API documentation will list every class, method, and field in the API. Often these are in javadoc format.</p>
<img src="img/auth-formal-api-docs.png"/>
</section>
<section>
<h2>Feature Usage Guides</h2>
<p class="left-align">Feature usage guides give you step by step instructions for how to use a specific feature of the API.</p>
<img src="img/auth-feature-usage-docs.png"/>
</section>
<section>
<h2>Sample Apps</h2>
<p class="left-align">Sample apps are helpful because you can see a working example of the API.</p>
<img src="img/auth-sample-app.png"/>
</section>
<section>
<h2>How Authentication Works</h2>
<p class="left-align">When we use an authentication service there are typically three steps:</p>
<ol>
<li>Send request for authentication using API</li>
<li>Receive success token or failure response from auth service</li>
<li>(Optional) Request additional user info with success token</li>
</ol>
</section>
<section>
<h2>How Authentication Works</h2>
<img src="img/auth-how-it-works-blog-jachobsen-com.png"/>
<p><small>
By <a href="http://blog.jachobsen.com/2013/08/10/google-oauth2-in-android-with-rails-backend/">Henrik Jachobsen</a>