GSOC 2023: Profile and explore section in android app

Profile and Explore Section in Android App

Contact Details

Github rishuriya
IRC Username rishav_a2z
Profession Profiles Profile, Linkedin,
Country India
Time Zone IST(UTC +5:30)
Expected working hours 38 hours/week
Preferred Method of Contact & Details Email:

Code Contributions

Project Proposal

The objective of this project is to develop a comprehensive profile page for the Listen-Brainz Mobile application that allows users to view their listening history, musical preferences, and connections with other users in the ListenBrainz community. The profile page will display the user’s recent listens, tastes, and playlists, and provide a centralized location for users to keep track of their musical activity.

In addition to developing the features of the profile page, the project will involve designing and developing the user-friendly interface of the “Explore” page to display YIM, recommended music, and similar users. Users will also have the ability to follow other users from their Profile pages and Explore pages. The profile page will display the total number of followers and following.

The development process will include the implementation of personalized recommendations, efficient data retrieval, and seamless integration with ListenBrainz’s existing infrastructure. The project aims to make the Listen-Brainz Mobile application more accessible and intuitive for users while contributing to the growth and development of the open-source community.


  • Incorporation of a “Profile” page for the user:
    • A user-friendly interface for the profile page.
    • A fully functional profile page that displays similar genres, and playlists.
    • The ability to follow other users from their profile pages and display the total number of followers and following.
    • Personalized recommendations based on the user’s listening history and preferences.
  • Incorporation of “Explore” section in the app to show:
    • User’s listening activity in a year
    • Similar users
    • Recently played tracks
  • Introduction of Community Connection with a dynamic user search feature.
  • Additional Support:
    • Adding a “Re-order” feature in Queue.
    • Refurbishing the “Share” feature to share songs on social media platforms.

Goals & Objectives

  1. Profile Page

Problem Overview:

Many audiophiles want to flaunt their taste in music. More importantly, it helps you to get found. Users can’t just follow other users based on username. If the user wants to follow someone else’s taste in music, there should be a page for their activity, which helps the user decide whether the persons taste matches the users taste or not.

In that regard, the “Profile” page gives us the following benefits:

  • Higher interactions in the app.
  • More organized data for users.
    • User-created playlists
    • Total songs listened to (Listenbrainz + Spotify + Youtube Music)
    • Recently played songs
  • Helpful to incorporate the feature of follow and following as it will help the user to find other users and also to get found


Creation of a profile page that displays information about the user such as their favorite music genre, the total number of songs listened to, public playlists created by the user, recommendations and similar songs, total followers and following, with the help of ListenBrainz APIs. As of now, the ListenBrainz server can not store images as profile pictures for which the API can be used to keep the username’s initials as the profile picture. The link to the API.



On the profile page, two types of playlists will be shown: personal playlists and collaborative playlists. When a user views their profile, all playlists will be displayed, but for other users, only public playlists will be shown. On the long press of a playlist, a dialog box will appear with options such as duplicate, edit, and delete. When the user selects the edit option, a box will appear allowing them to edit the name, description, visibility, and type of the playlist. The playlist can be deleted using the delete option, and a copy can be made using the duplicate option.

In the recently played section, each music card will have various options, including love, hate, pin, share, and review. Users will be able to use these options after connecting their accounts with ListenBrainz APIs. Users will also be able to see which of their friends/followers have interacted with the same tracks.

In the taste section, the playlist will be replaced by taste. There will be three types of taste: loved, hated, and pinned. By default, users will be able to see their loved tastes, but they can choose to view other types by clicking on the pill button. Users will be able to change their loved and hated tastes by clicking on the icon on the lower card, and for additional options, they can long press the card.

On the top of the profile page, the album art for the most recently pinned track will be displayed. The background will be a gradient from the edge of the image to either white or black, depending on the selected dark or light mode.

For the UI development test-driven approach will be followed, so we will write a test along with components that will be developed

Fig 1 shows how the UI will look after it is developed, and figma design is here



Fig 1: Mockup for Profile

  1. Explore Page

Problem Overview:

The ListenBrainz mobile app currently lacks a dedicated space for users to explore the history of the music they listened to in a year, their taste in music, and the ability to connect with other music enthusiasts beyond their immediate network. This limits a user’s ability to discover new music and interact with others who share similar music preferences.

Moreover, users do not wish to simply follow any other user based on their username; a way to explore and evaluate other users’ inclination in musical genres is preferred before following them. This is where the “Explore” page comes in handy, as it provides a curated selection of recommended content, including similar genres, similar users, and a Year in the Music section.


Creation of a centralized page for users to explore musical choices, similar users, and Years in Music using APIs provided by the ListenBrainz Server. For starting on the page it is necessary to create an Explore button at the bottom of the navigation bar, after which the horizontal button for YIM and horizontal scroll for a similar user can be assembled in the UI. It is better to have vertical Infinite Scrolling for recommended songs.



The proposed flow for the Android app involves the following steps:

  • First create a navigation Button in the button navigation bar.
  • Create the UI for the explore page.
  • In the Explore page we use the APIs as listed in the image. For recommendation API, we only get mbid and with help of the API of MusicBrainz, we get the track and artists’ names.
  • Access loved and hated songs using the API from the ListenBrainz - server.
  • Access the YIM, similar users using the year-in-music and similar-users API respectively.

After we collect all the data we will integrate it with the page.

  1. Search option

Problem Overview:

If users have a profile page, and they need to search for other users of that we need to implement a search feature in the search bar. With the help of that, users and their music will be found.


To solve this problem, you can implement the following steps:

  1. We can implement a search bar in the App top bar.
  2. Using ListenBrainz API, Users can search for another user
  3. on clicking the user we got the username with this, open profile page and got all information using the API of the user.


  • Getting real-time API results on changes in the value of the search bar.

override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {
// make API call with the search query

private fun searchUsers(searchTerm: String) {
val url = HttpUrl.Builder()
.addQueryParameter("search_term", searchTerm)

val request = Request.Builder()

val client = OkHttpClient()
client.newCall(request).enqueue(object : Callback {
override fun onResponse(call: Call, response: Response) {
val responseBody = response.body?.string()
// do something with the response data

override fun onFailure(call: Call, e: IOException) {
println("API call failed: ${e.message}")

From the above we get the User names list which user is searching. Using Recycle View we can show that result with a user name and image on left, The image will be the initials of the username.

  1. Additional Features

  • Change in Queue: Right now the queue system is rigid, users are only able to remove the song from the list. By using a draggable modifier I can implement a feature that releases the card and accordingly change the queue. I already added a feature to add, and remove the song from the queue. For changing the order of the queue we need to use a draggable modifier and change the index of items together.
  • Share songs on social media: Users can flaunt the song they are listening to on their social media with this feature. This also helps in advertising the ListenBrainz app. We can achieve this using the intent and share the song with help of the URI/URL of the song.


Every Week

Status Updates:

- Discuss the status of the project with my mentors and the community members and get their suggestions and make sure everything is going well from all aspects.

Pre-Community bonding period
7 Apr - 3 May

- Implement the Additional Features.

 - Add the feature to change the queue.

 - Incorporate a feature to share songs.

- Create the Model and APIs for the favorite artists in ListenBrainz-Server

Community bonding period
4 May- 28 May

- Get to know more about the community by exploring project documentation, forums, and online events.

- Interact with Mentors and other community members, This can help establish relationships and build trust with the community and get to know about their coding standards.

- Fix or implement a feature to get to know more about the codebase

- Research and gather requirements for the profile page

- Create a Figma design for the profile page

- Get feedback and review on the Figma design

- Get feedback and review on the Figma design of remote Player

Official coding period begins

29 May- 18 June

(Week 1 - Week 3)

- Implement the static version of the profile page

- Write the unit tests and UI tests for the profile page of playlists and user details card sections

- My mids will be in 1st week of coding period which affects the working hour.

19 June - 2 July

(Week 4- Week 5)

- Write all the test for the recently played and taste section component

- Integrate all components with dynamic data

- Implement the feature of the playlists and taste to show according to the pill button, and to make all options of the dialog box work.

- Implement the ability to follow/unfollow other users.

3 July - 9 July

(Week 6)

- Finish the pending work (if any)

- Refactor code as necessary

10 July - 23 July

(Week 7 - Week 8)

- Implement the static version of the explore page

- Write the unit tests and UI tests for the recommended and similar user components.

First evaluation period(10 July - 14 July)

24 July -30 July

(Week 9)

- Make all the API calls, and collect the data.

- Add the dynamic data to the component.

31 July - 06 August

(Week 10)

- Implement the search option for the user.

- Finish the pending work (If any)

07 August - 13 August

(Week 9)

- Get the UI of Profile, Explore page, and Local remote player reviewed, make changes (if recommended)

14 August - 20 August

(Week 12)

- To Complete the Pending Work (If any)

- Test all the implemented feature and fix bugs (if any)

- Refactor code as necessary

21 August - 28 August

(Week 13)

- Work on the blog submission.

- Get it reviewed

Final Evaluation Period


Future Goals

The Future goals for the project will be:-

  • Implement the stats page with the profile page.
    • Show top listened to artists, songs, and albums of the week
    • Graphs, and heat maps, to show data and compare it with the previous month, weekly, and country-wise.

Detailed Information About Yourself

My name is Rishav Kumar and I am a student from Bihar, one of the states in the eastern part of India. Currently, I am pursuing a Bachelor’s degree in Technology in Electrical and Electronic Engineering from Amrita Vishwa Vidyapeetham, Amritapuri, located in the state of Kerala in the southern part of India.

Apart from my academic pursuits, I am also a member of the amFOSS community, a renowned open-source student community at Amrita Vishwa Vidyapeetham. amFOSS is known for promoting the spirit of open-source software and fostering a culture of collaboration and innovation among students. As a member of amFOSS, I get to work on exciting projects, participate in hackathons and coding competitions, and attend workshops and talks on emerging technologies.

Tell us about the computer(s) you have available for working on your SoC project!

I have got HP pavilion 14, intel core i5 11th gen, 8GB ram with 16GB swap memory. I am currently working on Manjaro-Linux.

When did you first start programming?

I started programming in class 9 with basic C programming and later learned Java and Python till class 12. After that, during the lockdown period, I started with software development. I have the basic knowledge of HTML from class 8 and also won a prize for making a static website for my school. In lockdown, I learned PHP and applied it to a school website whose link is provided below. After joining amFOSS, I learned a lot of stuff over the past 1.5 years due to club projects and client projects. I was introduced to Django, React, and Flutter which enabled me to contribute to the club’s CMS mobile app which has a huge code base and has been maintained since 2018.

What type of music do you listen to? (Please list a series of MBIDs as examples.)

I mostly listen to old Bollywood songs of artists like Lata Mangeshkar, Mukesh, and Kishore Kumar, and my current favorite is Ankhiyon ke jharokhon se

What aspects of the project you’re applying for that interest you the most?

I am highly passionate about Android Development. As a member of the open-source community amFOSS and an advocate of free and open data, my interests are aligned with Metabrainz to make music free and accessible. The ListenBrainz is an opportunity for me to contribute to this purpose.

Have you contributed to other Open Source projects? If so, which projects, and can we see some of your code?

I contributed to the Wikimedia Foundation and created a new project for them and maintain it. The project is a statistical tool for Wikimedia that scraps the raw data from the dataset, filters, and generates data every month using a cron job according to need as the data is not accurate due to security reasons. For this project, I worked with one of my colleagues from my community. The project has the tech stack of Django as the backend, and RestApi and React as the frontend.

What sorts of programming projects have you done on your own time?

When I started development, I started web development with PHP

  • I worked on a school website which is still in use. It is made with the tech stack of PHP.
  • The repo of the School website
  • I also made a social media website that has features to post images, and blogs and make friends online(follow each other).
  • This is the Repo of social media platform,

After that, I dive into the realm of mobile development Flutter.

  • I made a fully functional app that solves the problem of courier handling in the college and the courier department can use it to reduce the loss of packages. The repo of mail delivery app, This app has an inbuilt feature to notify the student based on their roll no that their parcel is collected by the courier department and generate a ticket on the student side by which he will be able to collect the parcel by showing it to mail department.
  • We hosted a mega event for Hacktoberfest and also a workshop on open source. For that huge event, I came up with a solution to keep track of the attendance of attendees. In this, we have all the data of attendees in the Django backend, with the help of data we made the dynamic QR code using React and sent an email as the pass to all attendees. The app enables us to verify the QR code and keep track of all attendees in each event based on the time. The repo of Attendance Tracker
  • I also worked with India`s Best Hacking Team, BI0S. I made a flutter app for them as a question for their CTF. The repo is here

After that, I dived into the projects of web development based on React and Django

  • Along with 2 other team members, I made a webpage for one of the departments of our college CIR whose main focus is to ease the work of students in getting leave applications and permission to go for an internship. The site is hosted on this and the repo is here.
  • I worked with Amrita Hospitals at Faridabad to create a system to manage and maintain their inventory. It automatically raises tickets for the maintenance of items after a specific period and assigns the ticket to a specific department. Apart from that, with the help of an app made by the APIs of this system, it provides accessibility to patients, and their families to complain about any non-working component just by scanning the specific QR code in the room, which they can keep track of the status of the complaint. The System is in the Testing phase by the hospital and the project is not open source, so I can’t provide the code for that.

I also participated in a few hackathons. One of them was the NASA space challenge. For that, I worked with my team to create a web application tool for scientific image editing. We have the dataset of JUNO cam which we need to refactor and get scientific data and also clear the image. For that, we worked with PyQt for the front end, and using the openCV package we did the image processing. The repo of the project is this.

How much time are you available, and how would you plan to use it?

I will commit to providing 35-40 hours of work per week. I have made a detailed timeline of how I am going to utilize this time efficiently.

Some points to note:

  • First week of the coding period i.e 29 May to 2nd June, I have my mid-semester exams, which will decrease the working hour to 18 - 20 hours that week.
  • My End Semester exam will start on the 12th of July and ends on the 26th of July which reduce the working work to 18 - 20 hour/per week.

@aerozol Could you please review the designs being proposed here and come to common terms with @rishav ?

Thanks for the proposal @rishav !

I have a few pointers and open questions for you:

  1. You don’t need to write a blog every two weeks. We can have a final blog at the end of the gsoc period which summarizes the work you have done.

  2. The coding period starts on May 29th and ends on Aug 28th. You need to rework your week by week timeline because they don’t fit accordingly. For example, the blog submission will be done around Aug 21-28th and not before that.

  3. I would suggest we write unit and UI tests as we are working on sections. You have mentioned them later on, which keeps us in a position of missing them.

  4. The feature to play the listens and taste feature should be inclusive of the remote playing functionality and not come in stretch goals.

  5. Please discard the idea of storing profile pictures. We will not be taking that up. For more information on this, you can ping us on the IRC channel.

  6. Some urls in your personal intro section are broken. Please look into also. Along with this, please check the proposal for grammatical errors because I can find many.

  7. You say that you have contributed to the Wikimedia Foundation. Can you please share your PR links and the repo link for the same?

  8. I do not understand the localRemotePlayerActivity idea you have in mind. Please elaborate more on that. It looks complicated and wrong to me.

Hi @rishav! Note that my feedback is based mainly on your mockups, I have not spent much time looking through this brief, which is managed by @akshaaatt. Some of this feedback is detail that you might only want to tackle once the proposal has been accepted.

Overall I would like to see it align more with the ListenBrainz website design and UX (beta implementation/figma mockup). The ListenBrainz website profile page is a bit empty at the moment, so improvements and feature additions are very welcome for the app. But the app and the website have been taking very different visual directions lately, which I don’t think is ideal - it makes long-term maintenance harder, as well as feeling unfamiliar to our users.

  • The yellow top part looks nice, but we don’t use a diagonal element in any of our MeB branding. Consider a gradient or flat colour instead. If you think that looks boring you could use a slightly transparent album cover instead (e.g. last one pinned by the user), or something like that. There is still room for creativity, within the design guidelines.
  • I like the summary at the top. It’s quite similar to what we display on the website, but more compact (excellent). The LB logo isn’t needed there, and we wouldn’t display email addresses.
  • I like how you’ve put the Taste and Playlist buttons under the summary, and that gives us room to put more elements there in a sidewards scroll (for instance, the LB website has the tabs ‘Listens, Stats, Taste, Playlists, Recommendations’, and some these may be added later)
  • I’m not sure how Taste and Playlist will look?
    Taste on desktop has three elements to display: Loved tracks, hated tracks, pinned tracks. How will we get them all into a narrow horizontal band? I think it is possible to do, but your mockup hasn’t made it clear what’s what.
    Playlists: Definitely possible to do, but again the mockups don’t really show how.
  • The Recently Played items/songs panels should be lifted pretty much directly from the existing website ‘Recent Listens’ panel. That has all the features that are missing here - like, dislike, pin, etc. Or, if we don’t implement them yet, they will have room when we add them later. You may want to make them more compact, or find mobile-specific room for improvement (e.g. using long presses and swipes), but your starting point should be the same.

Your timeline should also include some time for us to look at the design, at the end of the project, and for you to refine based on that feedback. It’s very uncommon for someone to perfectly implement a figma design - I usually have to go back with them and tidy up, fix spacing, and address things that have come up that aren’t in the figma.

Overall I think the user page mockup is great, it’s compact, makes sense, and has room for quite a lot of information. There’s no mockup for the explore page - it’s up to @akshaaatt if he requires one from you, but again, don’t underestimate the time it will take to get the UI and UX right.


The idea is to play a mp3 file from outside of the app. when the user clicks on a mp3 file from the file manager, it should play the mp3 file from the file manager, and a screen will come like an overlay on the manager, and play the song. This will not affect the currently playing and queue, for this we can get the URI of a song in the activity and convert it using content resolver and mediaStore. With this, we get the Song and then we can play it and show details on the overlay.

I rework on the timeline, can you check again

For this, indic wikimedia team gave me work to make the tool and also access tool forge of Wikimedia to host it, as of now the server is hosted. so there is no PR link. but repo link is given and the page server link is here

can you point? it will help me a little, I checked all, but I didn’t get any broken link.

i fixed the grammatical error, I think so. :cold_face:

@aerozol can you review this design,

I removed the Yellow color, we can show the art of top track of user, which we get from the API.

for taste there is the filter type card so the user can click on it and see the taste, also for a playlist it will look as it is now in the app. for options the playlist to edit, make private, and delete, all these come from dialog box on long press.

Added that in the timeline