1. Android Camera
the making of
MarsJUG
Aix en Provence - Marseille
6 Décembre 2012
@cfalguiere
jeudi 6 décembre 12

2. Claude Falguière
Architecte Technique Valtech
http://cfalguiere.wordpress.com
Duchess France, Paris JUG, Devoxx4Kids
@cfalguiere
jeudi 6 décembre 12

3. Objectif
questions apprendre
gadget fun pour Devoxx
alimenter un hacker space Duchess
@cfalguiere
jeudi 6 décembre 12

4. IDE
ADT : Eclipse + Plugins ADT + SDK
Eclipse
http://developer.android.com
@cfalguiere
jeudi 6 décembre 12

5. IDE
ADT : Eclipse + Plugins ADT + SDK
Plugins
http://developer.android.com
@cfalguiere
jeudi 6 décembre 12

6. IDE
ADT : Eclipse + Plugins ADT + SDK
Platform Tools
http://developer.android.com
@cfalguiere
jeudi 6 décembre 12

7. IDE Android Virtual Device (AVD)
@cfalguiere
jeudi 6 décembre 12

8. Hello Hello World
onCreate
onPause
onResume
onDestroy
Activity GroupView Hello World
(layout)
TextView
@cfalguiere
jeudi 6 décembre 12

9. Hello
Activity GroupView Hello World
(layout)
Go
TextView ImageView
Button
@cfalguiere
jeudi 6 décembre 12

10. Camera SurfaceHolder
Camera
(layout)
Activity SurfaceView
@cfalguiere
jeudi 6 décembre 12

11. Camera SurfaceHolder
Camera
(layout)
Activity SurfaceView
@cfalguiere
jeudi 6 décembre 12

12. Camera open
release
Camera
Activity RelativeLayout
SurfaceView SurfaceHolder
surfaceCreated
surfaceDestroyed
surfaceChanged
CameraPreview
startPreview
stopPreview Camera
@cfalguiere
jeudi 6 décembre 12

13. Camera
Activity RelativeLayout
FrameLayout
SurfaceView
@cfalguiere CameraPreview
jeudi 6 décembre 12

14. Cameralayout/main_activity.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/
android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >
<FrameLayout
android:id="@+id/cameraPreviewFrame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" >
</FrameLayout>
<Button
android:id="@+id/saveButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:background="@drawable/camera_icon"
android:onClick="whenSave" />
</RelativeLayout>
@cfalguiere
jeudi 6 décembre 12

15. Camera MainActivity.java
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mCamera = Camera.open();
CameraPreview cameraPreview = new CameraPreview(this, mCamera);
FrameLayout previewFrame =
(FrameLayout) findViewById(R.id.cameraPreviewFrame);
previewFrame.addView(cameraPreview);
...
CameraPreview.java
public CameraPreview(Context context, Camera camera) {
super(context);
mCamera = camera;
mHolder = getHolder();
mHolder.addCallback(this);
...
@cfalguiere
jeudi 6 décembre 12

16. Camera manifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.duchescamera"
android:versionCode="1"
android:versionName="1.0" >
<uses-sdk
android:minSdkVersion="8"
android:targetSdkVersion="17" />
<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:screenOrientation="landscape">
<activity
android:name="com.example.duchescamera.MainActivity"
android:label="@string/app_name" >
...
@cfalguiere
jeudi 6 décembre 12

17. Camera manifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.duchescameramini2"
android:versionCode="1"
android:versionName="1.0" >
<uses-sdk
android:minSdkVersion="8"
android:targetSdkVersion="17" />
<!-- will make use of camera -->
<uses-feature android:name="android.hardware.camera"
android:required="true" />
<uses-permission android:name="android.permission.CAMERA" />
@cfalguiere
jeudi 6 décembre 12

18. Camera
SurfaceView
RelativeLayout
Orientation par Orientation par
défaut du device défaut de la camera
@cfalguiere
jeudi 6 décembre 12

19. open
setCameraDisplay (holder)
startPreview
takePicture
stopPreview
release
@cfalguiere
jeudi 6 décembre 12

20. Photo
layout/main_activity.xml
<Button
android:id="@+id/saveButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:background="@drawable/camera_icon"
android:onClick="whenSave" />
@cfalguiere
jeudi 6 décembre 12

21. Photo whenSave
takePicture
Activity Camera
onPictureTaken
onShutter
ShutterCallback RawCallback PictureCallback
«Click» générer le fichier
MainActivity.java
public void whenSave(View view) {
mCamera.takePicture(shutterCallback,
null,
jpegPictureCallback);
}
@cfalguiere
jeudi 6 décembre 12

22. Photo MainActivity.java
private SoundPool mSoundPool;
private int mShutterSoundId;
private float mShutterSoundVolume = 0.5f;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mSoundPool = new SoundPool(1, AudioManager.STREAM_NOTIFICATION, 0);
mShutterSoundId = mSoundPool.load(this, R.raw.camera_click, 1);
...
public void whenSave(View view) {
Camera.ShutterCallback shutterCallback = new Camera.ShutterCallback(
public void onShutter() {
mSoundPool.play(mShutterSoundId, mShutterSoundVolume,
mShutterSoundVolume, 1, 0, 1);
}
};
mCamera.takePicture(shutterCallback, null, mJpegPictureCallback);
...
@cfalguiere
jeudi 6 décembre 12

23. Photo PictureCallback
public void onPictureTaken(byte[] data, Camera camera) {
try {
Bitmap photo = BitmapFactory.decodeByteArray(data, 0,data.length);
// Create a new, empty bitmap with the original size.
Bitmap bitmap = Bitmap.createBitmap(photo.getWidth(),
photo.getHeight(),
photo.getConfig());
Canvas canvas = new Canvas(bitmap);
canvas.drawBitmap(photo, 0, 0, null);
// save file
File pictureFile = getOutputMediaFile();
FileOutputStream fos = new FileOutputStream(pictureFile);
bitmap.compress(Bitmap.CompressFormat.JPEG, 90, fos);
addPictureToGalery(pictureFile.getPath());
} catch (Exception e) {
Log.d(TAG, "ERROR Could not save picture: " + e.getMessage());
}
}
@cfalguiere
jeudi 6 décembre 12

24. Photo PictureCallback
private void addPictureToGalery(String path) {
Intent mediaScanIntent =
new Intent(Intent.ACTION_MEDIA_SCANNER_SCAN_FILE);
Uri contentUri = Uri.fromFile(new File(path));
mediaScanIntent.setData(contentUri);
mActivity.sendBroadcast(mediaScanIntent);
}
@cfalguiere
jeudi 6 décembre 12

25. Incrustation
Activity RelativeLayout
FrameLayout
ImageView SurfaceView
onDraw
DrawView CameraPreview
@cfalguiere
jeudi 6 décembre 12

26. Incrustation
onDraw DuchessSprite
Canvas
DrawPreview draw y
x
@cfalguiere
jeudi 6 décembre 12

27. Incrustation
onDraw DuchessSprite
draw
DrawPreview Canvas
draw
MoveFeedbackSprite
draw
RotationFeedbackSprite
@cfalguiere
jeudi 6 décembre 12

28. Incrustation DuchessSprite.java
private Bitmap bitmap; // the actual bitmap
public void draw(Canvas canvas, float ratio) {
Matrix matrix = new Matrix();
float s = 1 / bitmapScale;
int cw = Math.round(bitmap.getWidth() / 2);
int ch = Math.round(bitmap.getHeight() / 2);
canvas.drawBitmap(bitmap, matrix, null);
}
@cfalguiere
jeudi 6 décembre 12

29. Incrustation DuchessSprite.java
private Bitmap bitmap; // the actual bitmap
public void draw(Canvas canvas, float ratio) {
Matrix matrix = new Matrix();
float s = 1 / bitmapScale;
int cw = Math.round(bitmap.getWidth() / 2);
int ch = Math.round(bitmap.getHeight() / 2);
matrix.setScale(s, s, cw, ch);
canvas.drawBitmap(bitmap, matrix, null);
}
@cfalguiere
jeudi 6 décembre 12

30. Incrustation DuchessSprite.java
private Bitmap bitmap; // the actual bitmap
public void draw(Canvas canvas, float ratio) {
Matrix matrix = new Matrix();
float s = 1 / bitmapScale;
int cw = Math.round(bitmap.getWidth() / 2);
int ch = Math.round(bitmap.getHeight() / 2);
matrix.setScale(s, s, cw, ch);
matrix.postTranslate(centerX - cw, centerY - ch);
canvas.drawBitmap(bitmap, matrix, null);
}
@cfalguiere
jeudi 6 décembre 12

31. Incrustation DuchessSprite.java
private Bitmap bitmap; // the actual bitmap
public void draw(Canvas canvas, float ratio) {
Matrix matrix = new Matrix();
float s = 1 / bitmapScale;
int cw = Math.round(bitmap.getWidth() / 2);
int ch = Math.round(bitmap.getHeight() / 2);
matrix.setScale(s, s, cw, ch);
matrix.postTranslate(centerX - cw, centerY - ch);
matrix.postScale(ratio, ratio);
canvas.drawBitmap(bitmap, matrix, null);
}
@cfalguiere
jeudi 6 décembre 12

32. DrawView.java
public boolean onTouchEvent(MotionEvent event) {
final int action = event.getAction();
switch (action & MotionEvent.ACTION_MASK) {
case MotionEvent.ACTION_DOWN: {
mDuchess.handleActionDown((int)event.getX(),
(int)event.getY()); // update touched
break;
}
case MotionEvent.ACTION_MOVE: {
if (mDuchess.isTouched()) {
mDuchess.setCenterX((int)event.getX());
mDuchess.setCenterY((int)event.getY());
invalidate();
}
break;
}
case MotionEvent.ACTION_UP: {
if (mDuchess.isTouched()) {
mDuchess.setTouched(false);
}
reak;
}
}
return true;
}
@cfalguiere
jeudi 6 décembre 12

33. Incrustation
onTouchEvent
DrawView
public DrawView(Context context, DuchessSprite duchess) {
super(context);
...
// make the Panel focusable so it can handle events
setFocusable(true);
setFocusableInTouchMode(true);
}
@cfalguiere
jeudi 6 décembre 12

34. Merci
Questions Claude Falguière
@cfalguiere
goo.gl/4mmJQ
@cfalguiere
jeudi 6 décembre 12

35. @cfalguiere
jeudi 6 décembre 12

36. Lab 0
Installer ADT
http://developer.android.com/sdk/index.html
Installer git (préférable)
http://developer.android.com
@cfalguiere
jeudi 6 décembre 12

37. Lab 1 Créez un repo Git (git init)
Créez un workspace Eclipse sur la racine
du repo
Créez un projet dans Eclipse
• New «Android Application Project»
• (Facultatif) choisissez l’icone Photo dans Clipart
• une activité MainActivity par défaut
Lancez l’application dans le simulateur
• Créez un AVD Galaxy Nexus
• Exécutez dans le simulateur
Lancez l’application sur un device connecté
@cfalguiere
jeudi 6 décembre 12

38. Lab 2
Affichez la caméra dans votre application
vous aurez besoin
• de modifier le layout (RelativeLayout et
FrameLayout)
• d’implémenter un SurfaceView
• de la feature android.hardware.camera
• de la permission android.permission.CAMERA
• de corriger l’orientation
@cfalguiere
jeudi 6 décembre 12

39. Lab 3 Ajoutez le bouton et prennez une photo
(Facultatif) ajoutez le son
vous aurez besoin
• du composant graphique Button
• de l’icône du bouton : drawable/camera_icon.png
• de l’implémentation du PictureCallback
• de la permission
android.permission.WRITE_EXTERNAL_STORAGE
• du fichier son camera_click.ogg (Facultatif)
• de la classe SoundPool (Facultatif)
@cfalguiere
jeudi 6 décembre 12

40. Lab 4 Ajoutez une vue ImageView custom et
affichez Duchess
vous aurez besoin
• de l’image du sprite : drawable/
duchessfr_shadow.png
• de l’implémentation du Sprite DuchessSprite
@cfalguiere
jeudi 6 décembre 12

41. Lab 5
Ajoutez la possibilité de déplacer le sprite
(Facultatif) affichez un feedback visuel
vous aurez besoin
• de l’implémentation du Sprite DragFeedbackSprite
(Facultatif)
@cfalguiere
jeudi 6 décembre 12