Session 4: Media

An Introduction to Multimedia Content in Android

Hi Hack Schoolers! Hope you guys are recovering from midterms, or finishing them up soon! Let's get back into some more Hack School, and do some more android development. Topics today include audio files, video files, and accessing the phone’s camera.

Announcements
  1. Hack on the Hill 2 (HOTH) is this Saturday (Feb 11)! If you’ve RSVPed, but aren’t sure whether to come (swamped with projects or midterms), you can come to HOTH and get some extra help. Also it's always more fun to work with other people and study with friends!
  2. In addition to help some of you guys catch up, all projects submitted by this weekend will be PENALTY FREE (yes, even for the one from session 1)!
  3. PRIZES FOR HACK SCHOOL: Did we mention there are prizes for the top three teams by the end of this quarter? Turn in those projects to win — and see you all soon!

If you missed today's session, here are the relevant sources: Slides, Screencast

Topics

The topics we'll be covering are as follows:

  • Activities/Lifecycle
  • Manifest/Permissions
  • Intents
  • Camera
  • Video/Audio
Activities

The Activity class serves as the entry point for your user interaction, and Main Activity is the first screen of your app. Generally there is one activity per screen, but most apps have multiple screens, hence multiple activities.

Lifecycle

All activities have a lifecycle.

onCreate()  

onCreate(): Can be considered the main() function of your activity, it is the first function that is called.

onStart()  

onStart(): As onCreate() exits, the activity enters the Started state.

onResume()  

onResume(): Invoked by the system just before the activity starts interacting with the user, usually when the app starts up again from the home screen

onPause()  

onPause(): Called when the activity loses focus and enters a Paused state. (i.e. the user taps the Back Button)

onStop()  

onStop(): Called when the activity is no longer visible to the user. This may happen because the activity is being destroyed, and a new activity is starting.

onRestart()  

onRestart(): The system invokes this callback when an activity in the Stopped state is about to restart. The state of the activity from the time that it was stopped is restored.

onDestroy()  

onDestroy(): The system invokes this callback before an activity is destroyed.This is usually used to deallocate resources, and perform other cleanup in the activity

Manifests

Configuring the Manifest:

To declare your activity, open your manifest file and add an element as a child of the element. For example:

<activity android:name=".MainActivity">  
   <intent-filter> 
      <action android:name="android.intent.action.MAIN"> 
      <category android:name="android.intent.category.LAUNCHER"> 
   </intent-filter> 
</activity>  
Intents

Intent filters are a very powerful feature of the Android platform. They can do a whole range of things, but are most commonly used to launch an activity, meaning transition from one screen in your app to another. There are explicit intents and implicit intents, meaning you can start a component by it’s name for the former, or describe a general action to perform for the latter.

Here is an example snippet that can be used to move from your current activity to NextActivity
This will only work if NextActivity is defined in the manifest

Intent i = new Intent(getApplicationContext(),NextActivity.class);  
startActivity(i);  

Camera

Permissions

<uses-sdk  
    android:minSdkVersion="21"
    android:targetSdkVersion="21" />
<uses-permission android:name="android.permission.CAMERA" />  
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />  
Camera working with Emulator

Create a new AVD (Android Virtual Device)

  • Click through some stuff
  • Show Advanced Settings
  • Camera
  • Front
  • Back
Displaying the Camera

Create a button and give it to the following attributes:

android:text="Take Picture"  
android:onClick="takePhoto"  

Create a function in MainActivity.java

public void takePhoto(View view) throws IOException {  
    Intent cameraIntent = new Intent();
    cameraIntent.setAction(MediaStore.ACTION_IMAGE_CAPTURE);
    //Photo filename, usually you’d specify it given a date or hash
    File photoFile = File.createTempFile("photo",".jpg", mGalleryFolder);
    cameraIntent.putExtra(MediaStore.EXTRA_OUTPUT, Uri.fromFile(photoFile));
    startActivityForResult(cameraIntent, ACTIVITY_START_CAMERA_APP);

}
Video

Note that videos don’t work wonderfully on emulators!

  • Create a new folder called raw
  • Do it in Res > Raw
  • Place your video files in Res > Raw
  • You can find them by googling “mp4 video sample”
  • http://www.sample-videos.com

Add your VideoView to activity_main.xml

  • Locate VideoView in the Containers tab
  • Add it to your activity_main.xml file
  • The default id is videoView
Add the Video

In onCreate function, add the following...

//The usual, link the videoView variable to your
//layout xml
VideoView videoView = (VideoView)findViewById(R.id.videoView);

//Set your video path to Res > raw > video_name
videoView.setVideoPath("android.resource://" + getPackageName() + "/" + R.raw.my_video);  
Add (controls to) the Video

Right after what we just added...

//Create a media controller which lets you control (pause, skip)
MediaController mediaController = new MediaController(this); 

//Link media controller to video
mediaController.setAnchorView(videoView);

//Link video to media controller
videoView.setMediaController(mediaController);

videoView.start()    //All comes just before this function right here
Audio

Audio can be added through (for example) mp3 files

Add the Audio:
//Create your media player
MediaPlayer mplayer = MediaPlayer.create(this, R.raw.my_sounds);  
//Play the sound
mplayer.start();
Add (controls to) the Audio:

Create two buttons, one with the id “startButton” and another with the id “pauseButton”

startButton = (Button)findViewById(R.id.startButton);  
pauseButton = (Button)findViewById(R.id.pauseButton);  

Create two on click listeners for these
In the onClick function you can add start and pause:

mPlayer.start();  
mPlayer.pause();  
Audio for later:

There’s other things you can add in the future

  • Scrollbar
  • Volume control

Let's get some points!

For beginners you can solve all of the exercises and receive points for completing those. For intermediate/advanced students you can work on the weekly project with your team, and receive points for completing that. You can only get credit for one or the other, but not for both so choose the one most appropriate for your skill level. Please only submit one .zip file per team. Include the contents of your entire android project, and also provide your team access code in a text file. Otherwise you will not receive credit!

Grading

Submissions will be due 1 week from the session, but we will accept late submissions taking some points for each day it is late. The lateness penalty for an assignment that is submitted between N and N+1 full days late (where N is nonnegative) is 2^N % of the assignment's value. That is, the penalty is 1% for being up to 1 day late, 2% for being from 1 to 2 days late, 4% for being from 2 to 3 days late, and so forth.

Exercises

Exercise 1:

For the first part your goal is build a very basic audio player

  • Choose a random audio clip
  • Create a one page app with three buttons
  • The first button should be for play/pause, meaning the image of the button should change when pressed from a play icon to a pause icon
  • The second button should be a start button that begins playing the audio file
  • The third button should be a stop button that stops playing the audio file.

Extra Credit:

  • For more points add a edittext, and have the audio player play a song based off the text provided. For example if you have audio1.mp3 and audio2.mp3, then typing in audio1 and hitting play should start the first audio file.
Exercise 2:

For the second part your goal is build a very basic video player

  • Choose a random video clip
  • Create a one page app with three buttons
  • The first button should be for play/pause, meaning the image of the button should change when pressed from a play icon to a pause icon
  • The second button should be a start button that begins playing the video file
  • The third button should be a stop button that stops playing the video file.

Extra Credit:

  • For more points add a edittext, and have the video player play a clip based off the text provided. For example if you have video1.mkv and video2.mkv, then typing in video1 and hitting play should start the first video file.
Exercise 3:

Add a button to the screen in exercise 1 that when pressed, causes the app to transition to the screen in exercise 2.

Note: Put all of your exercises into the same android project when submitting

Project 4

For the fourth project we will be building out a basic camera application using the media skills you learned today. The goal is to build out this project with your team based off some of the knowledge gained from this section. If you are feeling confident you can attempt to complete the project without the skeleton, but it will be a lot easier if you use it. We will be uploading the project solution towards the end of the week, so if you haven't cracked it by then look at the solution to learn the correct implementation.

Instructions

The goal is to build a basic camera application with as little guidance as possible, so try to come up with unique solutions when you run into problems. You're being given lots of flexibility so come up with your own implementation: grading will be very generous. For this project you've been only provided with the main menu ui, so the goal is to create the rest of the application your self. Here are instruction for each specific screen:

  • Create two intents that will trigger when each of the respective buttons is pressed.
  • The "Take Picture" button should take you to a CameraActivity, and the "View Gallery" button should take you to the GalleryActivity.
Camera Screen
  • This is the camera screen of your application, meaning the upper portion of this should act as the camera. So the above portion should update in realtime as you move your phone's camera around.
  • The big capture button should take a picture, and store it on your phones memory when pressed.

Extra Credit:

  • For additional points you can also implement the reverse direction button to switch between front and back cameras, and the flash button to toggle the flash on/off.
Gallery Screen
  • Should show the three most recent images that a user has captured using the camera screen

Extra Credit:

  • You can try implementing a dynamic screen which displays all of the images you have captured instead of the three most recent. This should be a scrollable view.

Here is the link to the project skeleton: https://github.com/uclaacm/Hack-School-Winter-Session-4

Main Menu
Camera
Gallery