For this project, you will be creating a multi page app. The first page will allow the user to import images and list them by name. The second will allow the user to view and edit details of a single image (these are details that you choose and do not need to be permanent). The third will allow the user to view the selected image in full screen.
This will encompass many of the skills you have developed over the Intro to Android course. We'll give you a few tips on how to process.
- Create a new Android Studio project
- Name the project "Image Viewer"
- Make sure that the target API level is below that of your testing environment.
- Open the app's activity_main.xml file.
- Change the parent viewgroup to a linear layout
Set the
orientation
attribute tovertical
to best utilize the screen real estate
- Add a
ScrollView
to list all previously viewed images. Give it a linear layout child. - Add a
Button
so the user select an image to add to the list - Add IDs to all the views that will need to be accessed in the code.
- Create a class to store desired data from a retreived image.
The only required data is a name and a
Uri
stored as a String. Convert aUri
to a string with.toString()
method and back withUri.parse(stringUri)
.
- Class must contain
: Serializable
at the end of the class signature
This provides the necessary methods to the
Intent.putExtra
method can store the class's data
- Make all the data members private and create getters and setters for them
The
Uri
setter should convert theUri
to aString
and the getter should convert it back. This is because aUri
object can't be serialized.
- Add a
TextView
to your layout xml file. - Manipulate its attributes until you find a design that you like.
- Write a method that will create a
TextView
object and add those attributes to it programatically. - The method must accept a
String
to be the view's text attribute and anint
which is the index where the element is stored in theList
. - Return the
TextView
from the method. - To add the
TextView
to the ui, pass it to yourScrollView
'sLinearLayout
child's.addView()
method.
Look at the code in this file for a reminder on how to do this. https://github.com/ChancePayne/MattsList/blob/master/app/src/main/java/com/lambdaschool/mattslist/MainActivity.kt
- Create a listener and event handler for the add button in MainActivity.java
- In the click event method, write a Get Content Implicit Event that retreives an image from the system.
- Broadcast that intent with a
startActivityForResult
method call. - Override the
onActivityResult
method to create theImageData
object, add it to anArrayList
class data memeber have aTextView
generated and added to your UI.
- Thoroughly test this activity before moving on.
- In your
TextView
generator give theTextView
object a listener that will get the tag from the element, use that to pull theImageData
object from theList
. - Use
intent.putExtra()
to add the object to the intent
- Design a layout that will display details about the file.
- Display the image somewhere in the layout.
- Use
getIntent()
to get the intent used to launch this activity. - Use the
intent.getSerializableExtra()
method to retreive the serialized data and then cast it toImageData
.
- the final line of code should look something like this
val myObject = intent.getSerializableExtra("KEY") as ImageData
- Show the desired data in the UI.
- Use
.setImageURI()
to get the image for yourImageView
to the one in ourImageData
- Thoroughly test these two activities before moving on.
- Add an activity
You can pick a Fullscreen activity from the new activity wizard and adapt it to your needs, or build an empty activity with full screen imageview element
- Adapt generated layout to fit your needs
- Build an intent to go to the next activity, but instead of passing the whole object, just pass the
String
value for the Uri.
- Use the
intent.getStringExtra()
method to retreive theString
Uri
from theIntent
- Use
.setImageURI()
to update theUri
Send your completed app to your Project Manager.