Improvement on the custom picture selector - Make it easier for contributors to choose pictures for upload on the Commons Android app

Project Repository: https://github.com/commons-app/apps-android-commons

GSoC Idea Link: https://github.com/commons-app/apps-android-commons/issues/4764

Profile:

Name: Ayan Sarkar

Email: ayansarkar1810@gmail.com

Linkedin Profile: ayan-sarkar-44728a1a7

GitHub Profile: Ayan-10

Other Communication Method: Google Hangouts, Zulip

Blogs on GeeksforGeeks: Articles

Location during GSoC: West Bengal, India (UTC +5:30)

Education: B.TECH In Information Technology at Haldia Institute of Technology

Typical working hours (include your timezone) during GSoC: Between IST 5 pm to IST 2 am (UTC +5:30)

Relevant Skills

• Experience in Android Development in Kotlin / Java
• GitHub Workflow and Git Version Control
• Retrofit and OkHttp
• Android UI design
• Experience in working with MVVM, MVP, MVC architecture
• Experience in working with Android Architecture Components
• Basic Understanding of RxJava, Dagger2
• Unit testing in Android (Robolectric and Mockito)
• Understanding of REST APIs
• Basic knowledge of Wikimedia APIs

Synopsis

The Wikimedia Commons Android app allows users to upload pictures from their Android phone/tablet to Wikimedia Commons. Commons is not only the image repository for Wikipedia but an independent project that seeks to document the world with photos, videos, and recordings.

GitHub link of the idea: https://github.com/commons-app/apps-android-commons/issues/4764

Commons Android App Repo: https://github.com/commons-app/apps-android-commons/

The goal of this GSoC project is to make it easier for contributors to choose pictures for upload. The feature will include UI to mark some pictures as "not for upload" (for instance family pictures), hide/unhide marked pictures, minor changes to the selection indicator, gestures, and indicator when previewing a picture full-screen, efficient and fast scrolling.

Possible Mentor(s)

Mentor: @Nicolas_Raoul (Nicolas Raoul)

Mentor: @AdityaSrivastav2009 (Aditya Srivastav)

Deliverables

To be implemented

• Mark images as not for upload Lots of images can be present on a device that is not for uploading in the Commons app like family pictures, personal images, images with copyrights. Users will try to avoid those images while uploading some images to Commons app. It will be beneficial to user if user can manually mark those as not for upload. For that purpose, two buttons will be implemented at the bottom of the custom image picker.
  1. Upload button: to start the Upload Wizard with the selected pictures (replacing the already implemented ✔️ button currently available at the top-right).
  2. Mark as not for upload button: After selecting some images user can tap this button to mark these pictures as not for upload. Not for upload images will show with a 🚫 overlay icon and greyed out. This state will be remembered even after restarting the app. Tapping "Mark as not for upload" when all selected pictures are already marked as "Mark as not for upload" has the opposite effect, which means those images will be shown as normal images.

• Option for hide/unhide pictures Users may not want to see those images which are marked as "Not for upload" or have been uploaded already while uploading images to Commons. A switch will be implemented to hide/unhide pictures that are either marked as "Not for upload" or have been uploaded already. Hiding them allows the contributor to more easily spot pictures they might want to upload. After turning on/off the switch the images will adjust their position, and the transition will be in-place.

• Marked images numbering Currently, when selecting 3 pictures, they are numbered "1", "2", "3". Instead, please make all numbers always show the number of selected pictures, for instance, if 3 pictures are selected, they will all have the number "3", and be uploaded in the same order as their thumbnails are shown. Limit on number of images uploaded at once Issue: 3101

• Add a bubble scroll bar Bubble scrollbar will be added so that users can easily locate the picture they are scrolling for. The bubble will show the date on which the pictures were taken.

• Enhanced full-screen mode For a good user experience full-screen mode will be enhanced such that the user can do all operations while staying in the full-screen mode. It will make the app more convenient for the user. A small overlay will be shown indicating whether the picture is selected or not, showing the number of selected pictures.
  • Gestures:
    • Left/right swipe to go from one picture to another.
    • Swipe up to select the picture (the equivalent of tapping it in non-fullscreen mode) and show the next picture (the picture that follows in the folder view, skipping pictures that have either already been uploaded or ignored).
    • Swipe down to immediately mark that picture as "Not for upload" (the equivalent of selecting it then tapping "Mark as not for upload" in non-fullscreen mode), and show the next picture.

How can it be implemented?

• Mark images as not for upload Room Database will be used for handling database operations. A new entity class ex. NotForUploadStatus will be created for storing "not for upload" marked images which will create a table in the database to store all information about "not for upload" marked images. A new Dao ex. NotForUploadDao will be created to handle database operations.
  
  Two buttons will be implemented one is for marking images as not for upload another one is for uploading those images. After selecting some images if user clicks the Mark as not for upload button, CustomSelectorViewModel will be updated with the new selected images and the database table will be updated with selected images. While showing images on the ImageFragment by observing from viewmodel each image will be checked with the database if it's present in the not for upload database or not. If the image is present in the database the image will be shown with a 🚫 overlay icon and greyed out.

Adding a flowchart to describe the tentative workflow.

• Option for hide/unhide pictures A switch will be implemented to hide/unhide "not for upload" and "already uploaded" images. If user turns on the switch to hide all "not for upload" and "already uploaded" images, those images will be removed from the ImageAdapter and only uploadable images will be shown and removed images will be stored in a list with their previous indices. If user turns the switch off those removed images will be added with the adapter in their actual positions. Thus these hide/unhide images transformation will be in-place.

Adding a flowchart to describe the tentative workflow

• Marked images numbering Unlike the current state of the app where selected images are numbered as their marking index, the images will be numbered as the total number of images selected. Every time a new image will be marked, all previous marked images numbering will be changed with the total number of images selected. So all times will be updated every time after marking/unmarking an image. Adding a limitation on the number of images uploaded at once.

• Add a bubble scroll bar A date object will be added in the Image class as a field that will depict when the image was taken. The bubble will show that date in it. The scroll will happen on the basis of dates. I will use some open-source libraries to implement bubble scroll such as
  • https://github.com/FutureMind/recycler-fast-scroll
  • https://github.com/timusus/RecyclerView-FastScroll

• Enhanced full-screen mode To handle the swipe gestures(left, right, up, down) a gesture listener class will be implemented which will extend SimpleOnGestureListener, and inside the onFling() method all swipe gestures will be detected. To act on those detections a new event listener class will be implemented which will implement OnTouchListener inside that method onSwipeLeft(), onSwipeRight(), onSwipeUp(), and onSwipeDown() will be added which will act on those detections, also the event listener class will be initialized with the gesture detector class. At last the ZoomableDraweeView will be edited such that onSwipeLeft(), onSwipeRight(), onSwipeUp(), and onSwipeDown() will be overridden in the ZoomableActivity like this

photo.setOnTouchListener{
    fun onSwipeTop() {}
    fun onSwipeRight() {}
    fun onSwipeLeft() {}
    fun onSwipeBottom() {}
}

On onSwipeLeft() and onSwipeRight() it will fetch the next and previous images respectively from ImageFragment and onSwipeUp() the image will be listed in selected images. After returning to ImageFragment the UI will be changed with full-screen mode edits. Also to indicate the full-screen image is selected the number of marked images will be shown in the top left corner. onSwipeDown() the single image will be inserted in the database as a "not for upload' image. After returning to ImageFragment the UI will be changed with full-screen mode edits

Mockups

Mockup 1 - UI with two buttons and some not for upload images

Mockup 2(A) - UI for Switch is turned off, already uploaded, and not for upload images are visible

Mockup 2(B) - UI for Switch is turned on, already uploaded, and not for upload images are removed. Only uploadable images are visible, also new UI for numbering of marked images

Mockup 3 - UI for bubble scrollbar with date

Mockup 4 - small overlay on the top left corner of full-screen mode to show the image is selected, it will be removed if the image is not selected

Timeline

Contributions For Commons App

Bug fixes:

Here you can see all the PRs that I made.

• Total: 38
• Merged: 37
• Open: 1

Code Reviews:

Issues:

Here you can see all the issues that I created.

Helping Fellow Contributors

About Me

I am a second-year Information Technology undergraduate student at Haldia Institute of Technology.

I am passionate about Android development and I have been doing it for almost more than 2 years. I am an enthusiast of open source and love to learn and share. I have developed several apps. One of my apps is in Playstore also with 15k+ downloads. Playstore Link

Since I get to know about open source I have been contributing to various open-source projects regularly. Thanks to GSOC and Wikimedia that I found this project and I found it very interesting. I have been contributing to the Commons Android app since April 2020. I have been a very consistent contributor to Commons app since I get know about the Commons app. I think this project will be a great platform for me to learn a lot. Other than the Wikimedia Commons Android app I have also contributed to the other open-source organizations like FossAsia, Amahi, Study Partner, etc.

Past Experience

Personal Projects

• Vaccine Slot Alert App: Covid vaccine notifier for India - This app solves a real problem of India. Getting an appointment for the Covid-19 vaccination is really difficult in India during the pandemic. So this app will notify users when the vaccine gets available. The app will show notification only if the vaccine increased with all information about the vaccination center.
  • 15k+ downloads in Playstore
  • The app fetches vaccine data from govt. APIs in a period of 15 min using Work Manager and I made an in-app algorithm which compares the new vaccine data with the previous one stored in the database and shows a notification if some vaccine increased.
  • Used Retrofit and Gson for API calls, Used Junit for tests.
• Conduit App: Medium Website Clone - Make a clone of the renowned blog app Medium. To build this project used a backed API called realworld.io. In the app, you can log in/sign up and write a blog, and read others' blogs.
  • Used Retrofit and Gson for API calls
  • Used Junit for tests
  • Used LiveData and ViewModel
  • Used Navigation Architecture
• Sun Shine: Weather App - This app helps you see the weather forecast of your favorite cities.
  • API calls using volley library.
  • Notification
  • Used content provider.
• Emojify App - This app can detect your face and then classify it. According to your mood, the app can cover an emoji on your face.
  • used mobile vision library for face recognization

Work Experience

• GIRLSCRIPT SUMMER OF CODE 2021
  • Study Partner App: Fixed Sign in the failed state. The user did not get any response if sign-in failed for API 10 exception. Responsible for handling that state using StyleableToast. ( Merged )
  • Solved many programming problems related to Graph and other DS Algo. ( Merged )

• WINNER OF HACKTOBERFEST 2020
  • Got merged 4 Pull requests. Contributed to various projects mentioned in other contributions ( Merged )

• OTHER OPEN-SOURCE CONTRIBUTIONS
  • Fossasia Neurolab: In an activity Cardviews are hardcoded, I generated the Cardviews with Recyclerview and maintain a header image that the header image can be scrollable with Cardviews. ( Not reviewed yet )
  • Amahi Android: Give localization support for the Hindi language. ( Merged )
  • Amahi Android: Give localization support for the Bengali language. ( Merged )

• GEEKSFORGEEKS INTERN ( TECHNICAL CONTENT WRITER )
  • Responsible for writing technical blogs on various technical topics.

Activities

• Microsoft Learn Student Ambassador (MLSA''21): learn basics of Azure fundamentals, Learn and host a WordPress website in Azure Developing a Web App using Azure with Java

• MEMBER OF GOOGLE DEVELOPER CLUB ( KOLKATA )

Availability

• Are you eligible for Google Summer of Code?
  
  Yes, I am eligible for Google Summer of Code.

• Do you plan to submit any other proposal apart from this one?
  
  No, I am only submitting this proposal.

• Do you have any other plans during the period of GSoC?
  
  No, I don’t have any other plans during the period of GSoC. Google Summer of Code is the topmost priority for me.

• How many hours per week can you dedicate to this?
  
  I will dedicate as much as needed. Minimum 30-40 hours each week I will definitely give but I am willing to dedicate more if needed.

• Have you been accepted to GSoC before?
  
  No, I applied to this project under the Wikimedia Foundation last year but was not selected.

Why should I be selected for the project

Since I get to know about the project I was very frequent with it throughout the year. From April 2020 I am contributing to Commons very frequently, solved a lot of bugs, and worked on a lot of issues, had a good amount of meaningful code addition to the codebase. I applied to last year's GSoC but was not selected however I completed 50% of my tasks from my previous year's proposal. I also reported many issues, helped maintainers in review and helped fellow contributors with bug fixes and contributions, involved in many discussions. As I have worked on various types of issues the codebase is very familiar to me now.

Moreover, I learned a lot from this organization and project while contributing. This project gave me the confidence to work on any issue no matter how difficult it is, it gave me the confidence to build an app from scratch which solves a real-world problem. I want to learn more from this organization and help others, want to get more involved with the organization. Even after GSoC, I will stay with the organization. This year GSoC will help me to get to know a bigger aspect of not only overall learning but also the beautiful work culture of the organization.

Also, I am very interested in this year's task idea. I already worked with MVVM and Room Database on many medium to small projects. I already did some research on the bubble scrollbar. I am familiar with Wikimedia APIs. I think things will help me while implementing the task ideas. Thus, I believe I have the perfect set of skills required for these tasks.

Involvement

• Why do you want to contribute to this project?
  
  After I found the organization I absolutely loved the way this community works. Community members are so helpful and generous to everyone. I am going to learn and gain experience so much from this project and can come up with new ideas. Other than that I found this project very interesting. So I want to mention that I have already gone through the codebase and project structure in which I want to contribute related to what I want to contribute to this project as you can see in the implementation section in the proposal.

• What does open-source mean to you?
  
  Open Source is a platform for learning. People say "learning while doing" is the best way to learn and Open Source is the way to do so. It helps to challenge yourself and helps to get that potential out of you. It gives a lot of exposure to a student. It also helps to build a great community and helps to promote diversity. It's a way to learn and give it back to the community by contributing and helping others.

• What does GSoC mean to you?
  
  For me, GSoC is a platform to learn and gain experience and also give something to the community, and also GSoC is not just about selection. It's more than that. It's about staying with the organization even after GSoC ends and giving my 100% to complete tasks that I committed to do and also I can get to learn new things so much here.