1. Youtube API를 이용한
안드로이드 App 개발
2013.05
컨버전스앱개발팀 장대희
Copyrightⓒ2013 zzang All rights reserved.

2. 우리가 만들 App 의 실행 화면
1. 로고화면
2. Youtube 채널의 재생목록
3. Youtube 재생목록
4. Youtube 동영상 실행
(Youtube 설치)
① ② ③
④

3. 1. Project 생성
New -> Android Application Project
○ App이름
○ Project 이름
○ Package 이름
○ Minimum Required SDK 지정
○ Target SDK 지정
○ Compile width 지정
○ Theme 지정

4. (1) Project properties 수정
Project 우클릭 > Properties
Resource > Text File encoding
UTF-8 !!
Java Compiler > 1.6 지정
1. Project 생성

5. ○YouTube 영상 플레이어
YouTubeAndroidPlayerApi.jar
○HttpAsyncTask ,
이미지다운로드,
Youtube API Data , Parser
Log 등
zzangLib.jar
(1) Jar 파일을 libs 폴더에 복사
(2) Build Path 에 추가
(1) Project properties 수정
1. Project 생성

6. 2. AndroidManifest.xml 수정
버전과 버전네임
각종 퍼미션을 정의한다.

7. 3. Application class 생성
Application Class란 어플리케이션 컴포넌트들 사이에서 공동으로 멤버들을 사
용할 수 있게 해주는 편리한 공유 클래스
AndroidManifest.xml 파일에 Application 이름 지정
sky_icon.png
72 x 72
App icon 생성
res/drawable-hdpi/

8. Root Package > SkyApplication.java
3. Application class 생성

9. res 는
편의를 위해
이와 같이 간소화
하기로 한다.
4. 공통 리소스 생성
App에서 사용될 Resource 를 위한 folder 정리, 리소스 파일 수정
(1) values/strings.xml
HTTP 에러 코드에 따른 Alert 메시지
Alert Dialog 용 제목과 확인버튼 Strings

10. 4. 공통 리소스 생성
(2) drawable-hdpi/progress_loading.png
(3) drawable/progress_loading.xml

11. 4. 공통 리소스 생성
(4) anim/rotate_loading.xml
(5) layout/layout_progress_loading.xml

12. 5. 공통 class 생성
App에서 사용될 Class 들을 위한 package 생성
Common : Activity간 이동을 위한 - NavigationUtil.class
Common.asynctask : HTTP 로 데이터를 가져오는
- SkyHttpAsyncTask.class
Common.dialog :
오류 알림 다이얼로그 - HttpErrorAlertDialog.class
로딩 다이얼로그 – LoadingDialog.class
텍스트 메시지 출력 다이얼로그 – MessageAlertDialog.class
Common.toast :
토스트 메시지 – ToastMessage.class

13. 5. 공통 class 생성
(1) SkyHttpAsyncTask.class
AsyncTask 를 상속받은 ZzangHttpAsyncTask 를 상속받음.

14. 5. 공통 class 생성
(2) MessageAlertDialog.class
타이틀과 내용을 받아서 화면에 메시지 얼럿 다이얼로그를 출력.

15. 5. 공통 class 생성
(3) LoadingDialog.class
로딩 다이얼로그 : 뺑글뺑글 돈다

16. 5. 공통 class 생성
(4) HttpErrorAlertDialog.class
HTTP 에러 코드에
따른 Alert 메시지
를 출력한다.

17. 5. 공통 class 생성
(5) ToastMessage.class
Toast Message 를 출력한다.

18. 6. App의 시작 Activity Resource 생성 및 수정
이미지 이름 추가
values / strings.xml 에 추가
sky_splash_480.png
sky_splash_480_land.png
480 x 768 이미지 추가
drawable-hdpi 에 시작 화면 이미지 추가
Layout , layout-land 에 각각 activity_splash.xml 추가
Land는 이미지 바꿈

19. 7. App의 시작 Activity class 생성
AndroidManifest.xml 수정
App의 시작 SplashActivity 는 로고를 보여주고, MainActivity 로 이동한다.

20. 7. App의 시작 Activity class 생성
2.5초 뒤에
NavigationUtil.goMainActivity(context)
실행됨. MainActivity 로 이동함.
※ 화면 이동을 위해 common 패키지 생성 후,
NavigationUtil class를 만들고 거기에 다 때려 넣는다.
관리하기 편하다. ^^
main Package > SplashActivity.java

21. 8. 메인 MainActivity Resource 추가 (1)
drawable-hdpi 에 타이틀 Background 이미지 추가
values / strings.xml 에 추가
bg_title.png
layout 에 activity_main.xml 수정
타이틀Bar와 Android ListView를 갖고 있음
layout 에 main_list_row.xml 생성
이미지, 제목, 동영상개수를 위한 View들을 갖고 있음
drawable 에 row 클릭 때 색 변경을 위한
selector_list_row_color.xml 추가

22. 8. 메인 MainActivity Resource 추가 (2)
layout 에 activity_main.xml 수정
화면 구성과
View 들의 id는
자기 맘대로 해도 된다.
이건 예제일 뿐이다.
Android는 ListView를 제공
한다.
목록을 쉽게 뿌려준다.
※ ListView의 ID 주목!!
※ ListView의 weight 주목!!
수치
values/dimens.xml
컬러
values/colors.xml

23. 8. 메인 MainActivity
Resource 추가 (3)
layout 에
main_list_row.xml 생성
수치
values/dimens.xml
컬러
values/colors.xml
Integer
values/integer.xml
Thumbnail 이미지
재생 목록 이름
영상 개수
Listview 에서
이용할 row.
Root는 Linearlayout !

24. 8. 메인 MainActivity Resource 추가 (4)
res/values/colors.xml
res/values/dimens.xml
res/values/integer.xml

25. 9. 메인 MainActivity class 의 부속 class 생성 (1)
MainActivity 에서 이용할 class 들이다.
(1) MainListItemViewHolder.class 생성
각 view들을 한번만 findviewById 하여 읽어 놓고 쓰기 위해…
※ ListView 에서 성능 향상을 얻을 수 있다.

26. 9. 메인 MainActivity class 의 부속 class 생성 (2)
(2) MainListAdapter.class 생성
LayoutInflater :
Activity 가 아닌 특정
뷰에서 xml 에 정의되어
있는 각종 view들을
inflate 하기 위한 api
계속
데이터 count
데이터 get
데이터 id

27. 9. 메인 MainActivity class 의 부속 class 생성 (3)
(2) MainListAdapter.class 생성
계속
convertView는 null 또는 바로 전에 생성했던 View 객체
// 데이터 세팅
// setTag (Object를 저장) ViewHolder를 테깅.
// ※ convertView가 null이면 새로운 View를 inflation하고 그렇지 않으면 그전에 inflation된 View를 재활용하여 불필요한
View의 생성과 XML 파싱을 방지한다.
// ConvertView가 매번 findViewByID를 하지 않고 저장, getView의 속도를 높임
※ 최적화된 ListView 이다!!!

28. 10. 메인 MainActivity class 수정
AndroidManifest.xml 파일에 Activity 추가

29. 10. 메인 MainActivity class 수정 (1)
Youtube Channel API 로
데이터를 가져와 화면에
목록으로 뿌려준다.
계속

30. 10. 메인 MainActivity class 수정 (2)
계속
계속

31. 10. 메인 MainActivity class 수정 (3)
계속
계속

32. 계속
계속
10. 메인 MainActivity class 수정 (4)

33. 계속
10. 메인 MainActivity class 수정 (5)

34. 11. 재생목록 PlaylistActivity Resource 추가 (1)
drawable-hdpi 에 전체재생 버튼 이미지 추가
values / strings.xml 에 추가
btn_press.9.png , btn.9.png
layout 에 activity_playlist.xml 추가
타이틀Bar, 전체재생버튼,
Android ListView를 갖고 있음
layout 에 playlist_list_row.xml 생성
이미지, 제목, 재생시간을 위한 View들을 갖고 있음
drawable 에 전체재생 버튼 클릭 때 이미지 변경을
위한 selector_btn.xml 추가

35. 11. 재생목록 PlaylistActivity Resource 추가 (2)
layout 에 activity_playlist.xml 추가
…
타이틀과 listview 는 activity_main.xml 과 동일
레이아웃 하단에 전체재생 버튼 추가

36. 11. 재생목록 PlaylistActivity Resource 추가 (3)
layout 에 playlist_list_row.xml 추가
…
모두 main_list_row.xml 과 동일
재생 시간 string 만 다름.

37. 12. 재생목록 PlaylistActivity class 의 부속 class 생성 (1)
PlaylistActivity 에서 이용할 class 들이다.
(1) PlayListItemViewHolder.class 생성
MainListItemViewHolder 와 동일하다. (row에 표현하는 내용이 같다. ^^)

38. 12. 재생목록 PlaylistActivity class 의 부속 class 생성 (2)
(2) PlayListAdapter.class 생성
MainListAdapter
와 나머지 동일.
getview 부분 다름.

39. 13. 재생목록 PlaylistActivity class 생성
AndroidManifest.xml 파일에 Activity 추가

40. 13. 재생목록 PlaylistActivity class 생성 (1)
계속

41. 13. 재생목록 PlaylistActivity class 생성 (2)
계속
계속

42. 13. 재생목록 PlaylistActivity class 생성 (3)
계속
계속

43. 13. 재생목록 PlaylistActivity class 생성 (4)
계속
계속

44. 13. 재생목록 PlaylistActivity class 생성 (5)
계속
계속

45. 13. 재생목록 PlaylistActivity class 생성 (6)
계속
계속

46. 13. 재생목록 PlaylistActivity class 생성 (7)
계속
계속

47. 13. 재생목록 PlaylistActivity class 생성 (8)
계속
Youtube 플레이어 상세는
YouTubeAndroidAPIDemo 를 참조하세요.

48. 14. 광고 붙이기
http://kr.admob.com 에 가입 및 App 등록과 key를 받는다.
<activity
android:name="com.google.ads.AdActivity"
android:configChanges="keyboard|keyboardHidden|
orientation|screenLayout|uiMode|screenSize|smallestScreenSize" />
<string name="admob_my_id">XXXXXXXXXX</string>
AndroidManifest.xml 에 광고용 Activity 추가
values/string.xml 에 App의 key 값 추가
values/attrs.xml 에 광고용 style 추가
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="com.google.ads.AdView">
<attr name="adUnitId" format="string"/>
<attr name="backgroundColor" format="color" />
<attr name="primaryTextColor" format="color" />
<attr name="secondaryTextColor" format="color" />
<attr name="keywords" format="string" />
<attr name="refreshInterval" format="integer" />
</declare-styleable>
</resources>

49. <LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center">
<com.google.ads.AdView
android:id="@+id/ADMobAD"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
ads:adSize="BANNER"
ads:adUnitId="@string/admob_my_id"
ads:loadAdOnCreate="true" />
</LinearLayout>
14. 광고 붙이기
광고 노출하고 싶은 Layout 에 광고 추가
onCreate 에서 처리
mAdView = (AdView) findViewById(R.id.ADMobAD);
if(mAdView != null) {
AdRequest request = new AdRequest();
mAdView.loadAd(request);
}
해당 Layout 을 사용하는 Activity 에 광고 요청 코드 추가
protected AdView mAdView = null; // 변수 추가

50. 추가 1. SkyAsyncTask
ZzangHttpAsyncTask 를 이용한 데이터 요청

51. 추가 2. ZzangAsyncTask
계속
각종 사전작업,
완료처리는
Callback 으로 처리
AsyncTask 를 이용
AsyncTask의
doInBackground
를 위한 abstract
AsyncTask의
PreExcute 및
url , htt method
Header, parameter
를 받음.

52. 추가 2. ZzangAsyncTask
계속
계속

53. 추가 2. ZzangAsyncTask
계속
계속

54. 추가 2. ZzangAsyncTask
계속

55. 추가 3. ZzangAsyncTask Callback
계속

56. 계속
추가 3. ZzangAsyncTask Callback

57. 추가 4. ZzangHttpManager

58. 추가 4. ZzangHttpManager

59. 추가 4. ZzangHttpManager

60. 추가 4. ZzangHttpManager

61. 추가 4. ZzangHttpManager

62. 추가 5. ZzangHttpRequest

63. 추가 5. ZzangHttpRequest

64. 추가 5. ZzangHttpRequest

65. 추가 5. ZzangHttpRequest

66. 추가 6. ZzangHttpResponse

67. 추가 6. ZzangHttpResponse

68. 추가 6. ZzangHttpResponse

69. 추가 6. ZzangHttpResponse

70. 추가 6. ZzangHttpResponse

71. 추가 6. ZzangHttpResponse

72. 추가 6. ZzangHttpResponse