Description
(a) Main Screen (b) Menu buttons ( c) Add Expense
(d) Date Picker (e) Date selected (f) Implicit Intent for Choosing an
Image (Receipt)
Figure 1: App wireframes
We will develop a new expense manager application in this assignment. Here, we will
be using RecyclerView, Firebase, Date Picker, and several System apps, such as
Camera and Gallery.
Main Screen (30 Points):
Please follow the instructions:
1. There should be a Floating Action button for adding a new expense, see Figure 1(a).
2. Below the Add button, your app should display a RecyclerView with Expense items.
3. Each of the item contains Expense Name, Cost, Date, and an Edit icon, see figure
1(a).
4. Your app should have a menu having three options: Sort by Cost, Sort by Date, and
Reset All.
5. The default sorting sequence should be Sort by Date. (The most recent at first).
6. If you click on the Sorting options, it should sort the list of expenses accordingly.
7. If you click on the Reset All option, it should ask you if you really want to reset
the expenses or not. Use an alert dialog to do that. If you confirm, it should delete
all the expenses and refresh.
8. At the bottom of the main screen, there should be a textview to display the total
expense amount, see figure 1(b).
9. All the expenses should be saved to Firebase, and retrieved from there.
10. If you click on the Floating Action button, it should start the Add Expense screen.
11. If you click on any of the Edit Image Button in one of the items in the list, it should
start Edit Screen to let you edit the expense.
Add Expense (30 points):
Please follow the instructions:
1. The Add screen should include two Input Texts for Name of the expense and Cost.
2. It should display a button that says, “Pick a Date.” Clicking on this button should
open a date picker. Please read https://developer.android.com/guide/topics/ui/
controls/pickers.html for details. See figure 1(d).
3. After selecting the date, you should display the date in a TextView, see figure 1(e).
4. Now, you need to add a receipt for the expense. You can either get an image from
Camera or Gallery.
5. If you click on the button named “Choose an Image”, it should ask you to select the
system app to choose an image (Camera, or Gallery) and upload. See figure 1(f).
Use implicit intent here.
6. After you select an image either from camera or Gallery, you should display it in a
ImageView just below the “Choose an Image” button.
7. At the bottom of this screen, there is a button named, “Add Expense.” Clicking on
the button should save the expense in Firebase, and upload the image in Firebase
storage. After you upload the image to Firebase, you should get a downloadable
URL. Save it to Firebase too for future use. After all these, it should take you to the
main screen, with refreshed list. Always use the default sorting option after
refreshing.
Page 3 of 4
Edit Expense (30 points):
The GUI for this screen is identical to Add Expense screen. Preload the saved values
for the particular expense item, and provide edit functionalities. It should display the
saved date, and receipt image along with the other elements. Use Picasso to load the
image. There should be a button named “Save Changes” instead of “Add Expense”
button. Clicking on this button should update everything in Firebase. Then it should take
you to the main screen.
Display Expense (10 points):
Clicking on any item in the list from the Main Screen should take you to the Display
Expense Screen. Include Name, Cost, Date, and Image of the receipt in this Screen.
Finishing this screen takes you to the main screen.
Happy Coding!
Page 4 of 4
