envi
Published on

Android View System: Practicing the Spotify App Interface

Authors

Building the Spotify UI

This is an application I have already built. In this blog, I will point out the key points and specifically analyze why the code is implemented that way.

Required knowledge: https://danhtran.dev/android-mastery-android-view-system-kien-thuc-co-ban/

Git Repository Link: https://github.com/dantech0xff/SpotifyKt

MainActivity

The Spotify application is mainly composed of 2 components: Bottom Navigation Bar and Feature Content.

In Android, to use the Bottom Navigation Bar, we will use com.google.android.material.bottomnavigation.BottomNavigationView in the XML layout. In addition, to easily navigate between Fragments inside the App, we need to combine it with Jetpack Navigation, you can refer to the project for details.

HomeFragment

Analyze the HomeFragment of the Spotify app before building

  • Spotify's HomeFragment is a vertical ScrollView.
  • This ScrollView contains many child Elements. Each Element has similar points: Title, Square Cells, Scrollable, Action Button...
  • Each Square Cell has equivalent Elements: Image, Title, Sub Title, ..

Based on the above 3 analyses, we can build the Layout of HomeFragment. Please refer to the HomeFragment.kt and fragment_home.xml files in the project.

FAQ

  1. Why use NestedScrollView for HomeFragment instead of RecyclerView?
  2. Why does each Element inside HomeFragment use RecyclerView instead of ScrollView?
  3. Why inject IDeeplinkHandler into MusicListAdapter?

SearchFragment

Analyze the SearchFragment of the Spotify application before proceeding with construction

  • The SearchFragment of the Spotify application is a vertical Scrollable View. Includes Title, Search Bar and a list of available topics.
  • The list of available topics is scrolled vertically, divided into 2 columns per row
  • SearchResultFragment is a vertical Scrollable View. Contains many different types of Views showing Search results.

Based on the above 3 analyses, please refer to the files SearchFragment.kt, SearchResultFragment.kt, search_result_fragment.xml, search_fragment.xml

FAQ:

  1. Why use RecyclerView for the list of search topics?
  2. Why navigate to the SearchResultFragment screen instead of updating directly on the SearchFragment screen?
  3. In the SearchResultFragment screen, why use RecyclerView to display?

FavoriteFragment

Analyze Spotify Android's FavoriteFragment before building the interface

  • FavoriteFragment is divided into several Tabs: Playlists, Artists, Albums, Podcasts
  • In each Tab, there is a vertically scrollable list
  • These lists have similarities in how they are handled and displayed.

Based on the above 3 analyses, please refer to the implementation in the files FavoriteFragment.kt, favorite_fragment.xml

FAQ:

  1. Why does each Tab in FavoriteFragment represent different data but is only coded once in ListFavAdapter. What are the advantages and disadvantages of this coding method?

Next development direction

In the example above, I have implemented the interface of the Spotify Android application. However, there is still a lot of space for you to fork and develop according to your own ideas. Here are some ideas.

  • Complete the screens in Setting to make a case study for yourself.
  • Continue to develop the PlayerFragment screen and integrate the Offline music listening feature in the application.
  • Customize the Deep-Link Navigation system in the app according to your wishes

Good luck. If you feel that self-study is too time-consuming, try referring to my Android application programming course!!