demo.mp4

Task: Create a Crop Image Screen

Objective

Develop an Android application using Kotlin & Jetpack Compose or Kotlin Multiplatform (Bonus)

with two screens:

1. A main screen where users can select an image from the gallery, preview it, and initiate cropping.
2. A crop screen where users can adjust the crop area, apply changes, or cancel (rotation is not required).

---

Functional Requirements

Main Screen

1. Layout

   • The main screen should contain:
     • Two buttons: "Pick Image" and "Crop".
     • An image preview area to display:
       • The selected image (after picking from the gallery).
       • The cropped image (if cropping has been applied).

2. Pick Image Button

   • When the "Pick Image" button is pressed, allow the user to select an image from the device's gallery.
   • Once an image is selected, display it in the image preview area on the main screen.

3. Crop Button

   • The "Crop" button should only be enabled when an image is selected in the image preview.
   • Pressing the "Crop" button should present the crop screen with:
     • The currently selected image.
     • The current crop state (if any previous cropping has been applied).

4. Image Preview

   • Display the selected image in the image preview area after it is picked from the gallery.
   • If the user crops the image, update the image preview to show the cropped result.
   • Allow the user to crop the image multiple times, with each crop being reflected in the image preview.

---

Crop Screen

1. Crop Area

   • Display a rectangular grid overlay on top of the selected image.
   • The grid should be resizable only by dragging any of the four corners of the grid.
   • Restrict the grid from exceeding the boundaries of the image.

2. Grid Manipulation

   • Allow the user to resize the crop area by dragging any of the four corners of the grid.
   • Ensure smooth and responsive interaction when resizing the grid.
   • Restrict the grid from exceeding the boundaries of the image.

3. Aspect Ratio Adjustment

   • Provide predefined aspect ratio options (e.g., 1:1, 4:3, 16:9) for the crop area.
   • Allow the user to lock the aspect ratio while resizing the grid.
   • Include a "Free" mode where the user can define a custom aspect ratio.

4. Image Scaling

   • Enable zooming in and out of the image using pinch gestures and respect the pinch cetroid.
   • Ensure the image scales smoothly and remains centered within the crop area.
   • Set a maximum scale limit of 7x to prevent excessive scaling.

5. Save and Cancel Options

   • Include a "Save" button that:
     • Crops the image based on the current crop area.
     • Closes the crop screen and returns to the main screen.
     • Updates the image preview on the main screen to display the cropped image.
   • Add a "Cancel" button to discard changes and return to the main screen without applying the crop.
   • Prompt the user for confirmation before discarding unsaved changes.

6. Reapplying Crop

   • If the user presses the "Crop" button again after a previous crop, the crop screen should open with the previously cropped image and the last applied crop state.
   • Allow the user to modify the crop area further and apply additional changes.

---

Non-Functional Requirements 💥

1. Performance

   • Ensure the application runs smoothly on devices with varying hardware capabilities.
   • Optimize image rendering and manipulation to avoid lag or stuttering.

2. User Experience

   • Design an intuitive and visually appealing interface.
   • Use consistent UI/UX patterns and follow Material Design guidelines.
   • Provide visual feedback for user actions (e.g., highlighting the active corner of the grid).

3. Compatibility

   • Test the application on multiple Android versions (e.g., API 21+).
   • Ensure compatibility with different screen sizes and orientations.

4. Code Quality

   • Write clean, modular, and well-documented code.
   • Follow best practices for Android development, such as MVVM architecture, data binding, and dependency injection.
   • Include unit tests and UI tests to validate functionality.

---

Submission Guidelines

1. Deliverables

   • Invite us to your private GitHub repository.
   • Include a README file explaining the project structure, dependencies, and instructions for running the application.

2. Evaluation Criteria

   • Functionality: Does the application meet all the specified requirements?
   • Performance: Is the application efficient and responsive?
   • Code Quality: Is the code clean, maintainable, and well-structured?
   • User Experience: Is the interface intuitive and visually appealing?

3. Timeframe

   • Candidates should complete the task within 2 weeks, submitting earlier is a bonus.

---