BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC KINH TẾ - TÀI CHÍNH TP. HCM

---------------------------

MID-TERM APPLICATION

MID-TERM COURSE PROJECT

Course name: Mobile-programming
Course ID: ITE1221E

TP. HỒ CHÍ MINH, tháng 10 năm 2023

TABLE OF CONTENT
DANH MỤC CÁC HÌNH
Requirement of project:
1. Develop a native app with the following features:
a. "Add image" functionality: Users can click the "Add image" button to select
a jpeg, gif, or png image file.
b. Image loading: The selected image should be loaded and displayed on the
screen.
c. Drag and drop images: Users can drag the loaded image into one of the 3x3
grid cells on the screen.
d. Highlight effect when touching a cell: When an image is dragged and
touches a cell, the background of that cell should change color.
e. Drag images across cells: Users can drag the image across different cells on
the screen.
f. Revert to original state: If a user drags an image out of a cell, the old cell
should return to its original color (e.g., blue), and the new cell should change
color (e.g., green).
g. Delete images: Users can drag an image into a trash bin to delete it from the
screen.
2. Horizontal interface: The app should have a horizontal interface that utilizes the
entire screen space efficiently.
Main feature:
1. Main interface:

Figure 1Main interface

This is main interface when user start the application. The first is play layout with
3x3 grid grid cells. The second is control layout with add image button, delete
layout and image view. The last is change background button.
2. Add image to image view:

Figure 2 Choose image

User click on add image button, it’ll open the gallery of this device. User can
choose image to display in application into image view.
Image which user choosed in the gallery, displayed into image view. Button add

Figure 3 Upload image

image will be disable after image was uploaded.

3. Drag and Drop image:

a. Drag image:

Figure 4 Drag image

User can drap image view which is uploaded from gallery into play layout.
This layout have nine squares, if image view drag in this square, background
color of this square will change to green color.
b. Drag out of play layout:

Figure 5 Drag out of play layout

User drag image out of play layout, squares will change background color
return to grey color as it when user first start application.
 c. Drop image:

Figure 6 Drop image

After user drop image into square of play layout, This image will display
into this square and background color of square change to red color to
confirm that it have image view inside.
4. Delete image:

Figure 7 Delete image

User drop image into the delete layout, image view will re turn to the init position
when start the application, image into image view return to null and button add
image will be enable.
 5. Landscape interface:

Figure 8 Landscape interface

This is interface when user rolate the device.

Advance feature:
1. Change background:

Figure 9 Change backgroud grey Figure 10 Change background pink

Click on button change backgroud, application’s background can change to another
colors.
 2. Rotation handling:

Figure 11 Before roltate

Figure 12 After rotate

When user roltate the screen, application auto save the image on image view, game
point and background color to display in landscape interface.

Division of works:
 Name Work
Lê Anh Design, coding application
Hồ Quốc Khang Make report, analysis requirements