Custom pictures selector which indicates what pictures have been uploaded already

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

Relevant Skills

• Experience of Android Development in Kotlin / Java
• Github Workflow and Git Version Control
• Retrofit and OkHttp
• Android SDK
• Android UI design
• Basic Understanding of RxJava, Dagger2, Androidx
• Unit testing in Android (will use Robolectric Framework)

Profile Information

Name: Pratham Pahariya
IRC nickname on Freenode: Pratham2305
Web Profile/Linkedin: https://www.linkedin.com/in/pratham-pahariya-1aa208192/
Github Link: https://github.com/Pratham2305
Location (country or state): Gwalior, India (UTC +5:30)
Typical working hours (include your timezone): Between 4 pm to 1 am UTC +5:30

Synopsis

The Wikimedia Commons Android app allows users to upload pictures from their Android phone/tablet to Wikimedia Commons. Wikimedia Commons accepts only freely licensed media files (that are not subject to any copyright). Users can upload images and then add various tags specific to them such as category, title, description, and license.
Github link: https://github.com/commons-app/apps-android-commons/issues/175
Commons Android App Repository:https://github.com/commons-app/apps-android-commons/

Possible Mentor(s)

Mentor: @Nicolas_Raoul (Nicolas Raoul)
Mentor: @Madhurgupta10 (Madhur Gupta)

Participation

• What is the current state of the App/Project?

Commons App is used to upload pictures to the Wikimedia Commons and the main motive of the android app is to encourage people to contribute by reducing the inconvenience, but the current app uses an in-built gallery to choose image and upload and it is still a problem to remember and check an image before uploading that if it is already uploaded or not, to avoid uploading the same image.

• What is your goal for this GSoC Task and how will it benefit Wikimedia projects?

The goal of this project is to introduce a more efficient way of selecting pictures to upload, by creating a custom picture selector which will show the user whether each picture has been uploaded to Commons already or not. It will help the user in differentiating, which will be very much helpful for the active Commons users.

• Have you discussed this GSoC Task with your mentors already?

Yes, this idea is discussed with all the possible mentors and project members you may find the discussion on this link

• What does making this GSoC Task happen mean to you?

Working and Completing this project successfully means a lot to me, As the feature implemented by me will be useful for the thousands of app users across the globe.

Implementation

• What can be implemented?

Introduce a custom picture selector which will tell the user if the picture is already uploaded or not. This custom picture selector will fetch and show the images but fades out the already uploaded ones to help the user in differentiating.

Users should be able to switch to another folder and select pictures accordingly, with proper image Thumbnails. User will also be able to preview the image on fullscreen by long-pressing the image thumbnail

Scrolling must be smooth, allowing Users to pick pictures without much waiting while loading. For this API calls should be asynchronous for checking Images

To avoid calling API for checking each time the user opens the picture selector API results should be cached, as the whole process takes some time.

Improvements such as showing an overlay for the picture that does not have EXIF data and caching API results for 10 days can also be implemented.

• How can it be implemented?

• Implement PictureSelectorActivity that will both show the albums and photos, User can change albums or see all the album folders by clicking the dropdown icon on the toolbar. Use content resolver to query all the media and media folders.
• Create Model Class for Images and Albums, So that all the details such as date, latitude, longitude, etc, can easily be managed and fetched
• Use Universal Image Loader for loading images efficiently, using features such as multi-thread image loading and Listening loading process to handle errors.
• Implement asynchronous API calls for checking images, using Anko-kotlin library / Rxjava for performing tasks in the background thread.
• Perform API caching, We can cache the result for the already uploaded images.
• Add features such as long click preview and check EXIF-data.

• Basic Idea and Workflow of the implementation

There will be added a third button as suggested, which will initiate the custom picture selector, to the existing camera and gallery button to choose pictures for uploading. Now On Clicking that button, PictureSelectorActivity will start and do the gallery operations i.e, querying images and their details like photo URI, parent folder name, title, etc, and to handle these details model class will be created for Gallery Image and Album.

// querying the media and returns results

cursor = contentResolver.query(
        MediaStore.Images.Media.EXTERNAL_CONTENT_URI,   // The content URI
        projection,                        // The columns to return for each row
        selectionClause,                   // Selection criteria
        selectionArgs.toTypedArray(),      // Selection criteria
        sortOrder                          // The sort order for the returned rows
)
`

Albums will be created based on parent folder names of the media. Fetched media and album lists will be passed to ImageAdapter and AlbumAdapter to populate the recycler view. API class will be created that will take the required query parameters and build the request, and based on that response image will be loaded using Universal Image Loader.

// UploadAPI class will create the API request and returns the single<boolean> which will enable or disable the image thumbnail
try {
            uploadApi.request(FileUtils.getSHA1(new FileInputStream(filename)))
                .subscribeOn(Schedulers.io())
                .observeOn(AndroidSchedulers.mainThread()))
                .subscribe(this::enableImageView, Timber::e);
        } catch (FileNotFoundException e) {
            e.printStackTrace();
        }

// Method to set and handle the loading of the thumbnail image using image URI

public static void setImage(String imgURI, ImageView image){
    ImageLoader imageLoader = ImageLoader.getInstance();
    imageLoader.displayImage(imgURI, image, new ImageLoadingListener() {
      @Override
      public void onLoadingStarted(String imageUri, View view) {
      }

      @Override
      public void onLoadingFailed(String imageUri, View view, FailReason    failReason) {
      }

      @Override
      public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage){
      }

      @Override
      public void onLoadingCancelled(String imageUri, View view) {
      }
    });
  }

API result caching will be performed for the already uploaded images by creating a custom interceptor and client. Already Uploaded Pictures will be shown as disabled whereas Selected Pictures will be highlighted by a tick mark and with the touch effect on clicking, there will be a drop-down icon to choose images from different album folders and it will save the location of the last opened folder to show that folder as the default next time. And User can proceed to the Upload Wizard by clicking the done button, after selecting one or more images, which will return the media list as intent data then it will be converted to the uploadable file that can be passed to the UploadActivity.

UI Mockups(Under Discussion)

• The first screen after selecting the custom selector button, will show the “All Photos” Album i.e, all the recent images, or any album images which has been selected last time.
• A grid view of the images in that folder/ Album arranged by the last modified date.
• Drop-down icon on the toolbar to change the current folder/Album, will show the list of all the albums i.e, the album selector screen.
• On clicking any image thumbnail, it will be changed as selected and will appear with the tick mark, whereas the already uploaded one will be disabled with a commons logo at the bottom right, as shown in the mock.
• On long pressing any enabled image thumbnail, a full-screen preview of the image will be shown.
• And with the help of the done/Tick button on the toolbar, the User will be able to proceed with uploading the images.

• A list view of all the albums on the device.
• Each Album item will be displayed with the name and the count of media inside the respective folder, also the thumbnail will show the most recent image.

Timeline

Community Bonding Period

[18 May - 7 June]

• Make sample apps to build and implement functionalities that I will work on in the main project
• Discuss with mentors and put out together precisely components of my proposal, and include the necessary changes
• Enhance my understanding of the commons app, and the community

Week 1

[June 7 - June 14]

• Start with creating the basic UI for custom Image selector
  • Design PictureSelectorActivity layout
  • Design layouts for image and album thumbnail
  • Create a custom square layout for thumbnail
• set up the PictureSelectorActivity: which will fetch the albums and their photo lists by querying the content provider on the background thread, initially it will show the “All Photos” album

Week 2

[June 14 - June 21]

• Create custom Adapter classes for albums and images
• Implement a method for changing the album from the dropdown icon on the toolbar
• Create Model classes for the gallery data.
• Organize all the added code, by creating different classes based on MVP Architecture

Week 3

[June 21 - June 28]

• Return to UI Thread and set up Adapter classes with a fetched list
• Complete the Adapter classes code
  • Setup the viewholder, and Display the fetched list
  • Implement onClick Method on the item which will set the thumbnail as selected and in case of AlbumAdapter will setup the ImageAdapter
• Write Unit tests for the PictureSelectorActivity.

Week 4

[June 28 - July 5]

• Implement the long click to preview feature and save the location of the last opened folder for the next time.
• Create UploadImageApi class that will use the Okhttp library to implement calls to the Commons MediaWiki API to check if the image is already uploaded or not
• Made changes, by creating a method to send image details to the API Class

Week 5

[July 5 - July 12]

• Improve the loading of images in ImageAdapter by performing them in a background thread
• Create a separate class for handling image loading using UniversalImageLoader
• Handle the API response and then load the image based on the response received
• Perform some manual testing before proceeding further

Mid Evaluation

[July 12 - July 16]

Week 6

[July 16 - July 26]

• Implement a method that will be called after pressing the done button, which will return the selected images
• Returned images will be passed to the UploadActivity for uploading, this will be implemented in the similar way that currently used in the app
  • Selected images will be returned as intent data
  • Implement a method that will convert it to the list of Uploadable File then passed to UploadActivity.
• Write unit tests for the recently added code.

Week 7

[July 26 - August 2]

• Will study about the caching of API result and implement it
• Make sure to complete all the above tasks, if in case some work is pending for some reason, before proceeding further.

Week 8

[August 2 - August 9]

• Implement feature to show a “GPS” overlay icon for the pictures that do not have EXIF latitude/longitude
• Perform debugging and manual testing to improve the functionality and UI.
• Write unit tests for the feature.

Week 9 & Week 10

[August 9 - August 16] & [August 16 - August 23]

• Improve code quality and fix bugs, if any
• Improvement based on feedback received from mentors
• Add unit tests if anything left to cover
• And if time permits then will implement bonus features as suggested previously i.e, cache API results for 10 days only, showing selected pictures thumbnail similar to the one in UploadActivity.

Final Evaluation

[August 23 - August 30]

Additional Deliverables

• Each week, I will be writing blogs regarding the
  • Work that was done
  • Problem faced
  • The target for next week
  • What (if something) is preventing me from reaching my goals

Motivation

Google Summer of Code is an excellent platform to get acquainted with the open-source community and their skillful mentors. It gives one a professional work experience in their college years where they collaboratively build a product for the welfare of the society. In this process, both the individual and the community progress and flourish. Contributing to Commons has been an enriching experience, the mentors and the community have been really friendly and helpful in giving me constructive criticism making me learn new stuff, and improving my coding skills. The pride in the feeling that my code will cause an impact in the lives of thousands of people who will use it is unparalleled. Moreover, it allows me to grow as an individual and learn how to work in a team with such a big community.

About Me

• Personal Background

I am a second-year undergraduate student at the Indian Institute of Technology(IIT) Dhanbad pursuing Integrated Master of Technology in Mathematics and Computing. I am an active member of the Cyber society at our institute which organizes weekly Android Development Workshops headed by society and I have also mentored various projects assigned to our club. Apart from this, I am also a member of Team Mailer Daemon which is a Student-run Newsletter for IIT(ISM) Dhanbad.

I have participated and represented my College in the "Tech-Led Innovation for Rural Innovation" Event at Inter-IIT-Tech-Meet-9.0, and also Recently I have participated in the Rakathon 2021 - Hackathon conducted by Rakuten, India, where our team “VizHelp” finished at 4th position overall.

• How did you hear about this program?

I heard about GSOC from my Seniors in my freshman year, where they have conducted a session on Open Source and related development programs such as GSOC. Then I have also participated in a one-month hackathon Winter of Code organized by the college's coding club which boosted my interest and knowledge about Open Source.

• Will you have any other time commitments, such as school work, another job, planned vacation, etc, during the duration of the program?

No, I don’t have any other internship or plans for this summer. I have my summer break from 27 April to 12 August 2021.

• Eligible for Google Summer of Code and Outreachy?

I am only 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.

• How many hours per week can you dedicate to this?

I will be able to dedicate 40 or more hours of weekly effort to this project, and also if something comes up in between then I will make sure to keep mentors in the loop and try to complete the work in advance.

• Have you been accepted to GSoC before?

I have not participated in GSoC previously and this is my first attempt at GSoC. Also, I am not
mentoring any other project during this period so I am completely available for this project
throughout the coding period.

• Why should I be selected for the project?

I am keenly interested in open-source projects and have been passionately working on them. I am a quick learner and can easily adapt myself to situations. I have been involved in Android Development for more than a year now and I believe that I have all the required skills to finish the project successfully. I have been contributing to the Commons App for a few months now and will also continue to contribute even after the GSOC period. As of now I have created about 19 PR (16 of them are merged) and have a good knowledge of app architecture.

Past Experience

I have been programming in Java Since the early days of high school and have excellent problem-solving skills. And For the last year or more, I have been doing Android Development and have worked on some group and self-projects, also have completed an internship as an Android Developer.

These are the few projects that I have worked on:

• DS Dairy System
  • It consists of three different apps, designed especially for customers, milkmen, and dairy owners, which are interconnected with each other
  • These Apps maintain all the sales, order, distribution, bills, etc
  • I have worked on this project as an intern under a startup in my first year and was Responsible for creating the apps from scratch with different features like order placing, live notifications, bill invoices, etc.

Playstore: DS Customer, DS Milkmen, DS Dairy Shop
Intern LOR: link

• Mailer Daemon
  • The official App of Mailer Daemon - Student-Run Newsletter of IIT ISM Dhanbad.
  • Easiest Way to stay updated on the latest events of IIT ISM Dhanbad.
  • Through this App students can check all placement details, latest notices, contact details of all officials, and much more.
    
    PlayStore: Mailer Daemon Github: link

• Chatting App
  • A simple and easy-to-use chatting App to send text and images, based on firebase.
  • A User can connect to other users by finding their profile, then by sending them a friend request.
    
    Github: link

• BudgetManager App
  • Developed this app during a one-month-long Hackathon - Winter of code conducted by Cyber Labs.
  • It is basically a day-to-day expense recorder. Through which users can track his/her income and expenses in a categorized way.
    
    Gihub: link

Previous Contributions

I have been contributing to the project For the last few months, These are the PRs that I have submitted for the assigned issues.

All PRs Link: Link

And These are the few issues that I have noticed and reported -

All issues: Link