[SOLVED] data structure android Java XML graph CS184 Homework Assignment 3

CS184 Homework Assignment 3
Posted: Fri, Oct. 25Due: Mon, Nov. 4 (23:59:59)
Change Log: Thu, Oct. 31: Deadline extended to Monday, Nov. 4th
A Navigation-Drawer-based Multimedia Medley
Objectives:
Practice Android application development, specifically fragments, the navigation drawer widget, multimedia features, and orientation changes with saving and restoring state.Also, learn and (voluntarily!) practice the Android Jetpack design and coding philosophy.
Instructions:
Program a MMMedley app that allows a user to draw lines with multi-touch, trigger a simple custom animation, play video, convert text to speech, and enter text via speech.
The main structure that you should follow is that of a Navigation Drawer skeleton, and five different fragments that are started from entries in the navigation drawer. The five fragments will implement the abovementioned functionalities, and they can be tested individually, and need not interact with each other, other than being started from the same framework.
We demonstrated a simple navigation drawer framework in Class/Discussion. You should start with Creating a new Project in Android Studio. Select the Phone and Tablet form factor, use API 24 (Android Nougat) as your minimum API (unless you need to go lower because of the physical device you are using) and then choose the Navigation Drawer Activity template. If you use the latest version of Android Studio, this will generate a code skeleton with autogenerated Jetpack-compatible code for 6 repurposable generic fragments, labeled home, gallery, send, share, slideshow, and tools. It also includes a Floating Action Button (FAB), which will play a role in some but not all of the fragments you will implement. You should hide the FAB when it is not needed.
Your task is to replace all of these but the home fragment with the 5 fragments described below, all demonstrating various Android multimedia features.
You may program these 5 fragments in conventional Android style, or in adherence to the Android Jetpack philosophy, or in a mix-and-match approach where only a subset of your fragments is done in full Jetpack style. You will receive 2% extra credit, if you follow the Jetpack approach throughout.
The app should correctly handle orientation switches from Portrait to Landscape and back. State should be saved in all cases.
When the app is opened for the first time it should display an empty home screen and a navigation drawer with the following layout, using appropriate icons for Multitouch Drawing, Fireworks, Movie, Text to Speech, and Speech to Text. Read up on icons in developer.android.com, and check out Material Design Icon examples.
When the user taps one of the navigation bar entries, the respective action is executed, as a new content fragment. One single fragment layout per each of the five sub-demos should be referenced in both the Portrait and Landscape views, so that when any changes in interface are to be made they have to be made in only one place.

1) Multitouch Drawing

The FAB here will clear the canvas when tapped.
Read up on Canvas and Drawables. We suggest the use of a SurfaceView in the following way:
Create a new class that extends SurfaceView and implements SurfaceHolder.Callback
Create a constructor with the right signature and dont forget to call super.
At the end of the constructor, add the instance as a callback to the holder with getHolder().addCallback(this)
Override onTouchEvent(MotionEvent event) and return true at the end. This is where you will handle all (multi-) touch events
Create a public function to clear the canvas, and a private function to refresh the view (the latter should get called whenever you want to make sure that drawing updates get flushed out (e.g. in the surfaceChanged callback function, in your clear function, and in your onTouchEvent(MotionEvent event))
Set up your fragment layout to contain your new class (you can go into XML and create a new tag with your classs fully qualified name e.g. edu.ucsb.cs.cs184.uname.MyClass) inside a placeholder LinearLayout or ConstraintLayout (you can retrieve your class instance the same way as any other view with findViewById and casting).
Pre-set color palette: Use a Typed Array of color values, that you define in res/values/colors.xml to use as paint for the finger strokes. Different fingers in a multi-touch event should have different colors. Subsequent single-finger strokes should be of different color. Here is the set of (chosen to be harmonic) colors we used for the above screenshots: #1abc9c, #2ecc71, #3498db, #9b59b6, #34495e
Create a Bitmap to keep a record of the current state of the drawing: Maintain a Canvas and a Bitmap member variable, and a data structure to keep track of the last positions of every finger. Make your Bitmap of square size using the larger of width and height, which you get from the surfaceChanged(SurfaceHolder holder, int width, int height, int format) callback. You can draw the bitmap by using the canvass setBitmap and drawBitmap methods. To clear it, just fill it with white in your clear method. In onTouchEvent, add the position on finger press to the data structure and remove the position on finger release. When a finger moves, for each finger, draw a line segment from the current position to the last position (from the data structure) onto your Bitmap, then store the current position into the data structure to serve as the last position for the next touch event. Refreshing would involve clearing the SurfaceHolders Canvas and then drawing your Bitmap onto it.

2) Custom Animation
You will program a custom animation consisting of red circles making an explosion animation on touch. No FAB functionality is needed here, so the FAB should be hidden.
As discussed in class, please use this helper class to set up a thread that updates a given view at a requested fps frame rate: DrawingThread.java.

There should be some random ball movements to start with, which has to be slow enough to test orientation changes while the particles are moving.
3) Video Playback
Video playback simply plays back a short video clip, but instead of retrieving it from the web, you will include it as a resouce. Start playing the short video clip directly on tapping the Video entry in the navigation drawer. Here is the video file that should be put into the raw folder: bigbuck.mp4. Use a VideoView widget to play this snippet. This StackOverflow discussion tells you how. There could possibly be problems with this approach when media files are too big, but the size of the audio and video file linked here should not cause any problems.

4) Text to Speech
For the TextToSpeech demo, we display a layout that uses an EditText widget (Plain Text component in Text Field section of the AndroidStudio UI Builder Palette). The FAB will trigger the speech output of the current sentence. The EditText widget is pre-populated with the text hint phrase Type something you want me to say!, to be defined in strings.xml. The EditText should be multi-line. This is what it should look like:

When the FAB is tapped, Androids speech engine will read out loud whatever has been entered in the EditText widget.
5) Speech to Text

The SpeechToText layout consists of a TextView (initially empty) above a text prompt asking the user to tap the FAB (which should show a mic icon in this fragment).
When the FAB is pressed, the built-in Android activity for capturing speech into text is triggered:

and on Activity result, the spoken text is displayed in the TextView.

Extra credit: You will receive an extra 2% of the assignment points if all of your fragments adhere to Jetpack coding principles, and use the respective ViewModel to retain state throughout the Fragment lifecycle (orientation changes!).

Have fun with this assignment!
Please look at the following concepts, which are critical to a successful solution to this programming exercise:
Fragments API Guide (see also handout H9, and slides S7).
State Saving (slides S6 and handout H7). Note that if you follow a complete Android Jetpack approach correctly, you wont need specific state saving the ViewModel will retain the state while the fragments get regenerated in their lifecycle.
Speech handling (slides S10)
Multitouch Gestures (handout H11)
2D Graphics (slides S9)
Android Jetpack components, including ViewModel, LiveData (and working knowledge of the Navigation principles used in the Android Studio template code) (handout H10a/b)
Hand in:
A folder containing
An Android code base solving the assignment.
A README.txt file that briefly documents your programming solutionand if you tackled any extra credit.
Please use Gauchospace to submit. Note the naming conventions for your app ( MMMedley).