Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

Project directory

  • One, the introduction
  • Ii. Project Overview
    • 1. Demand analysis
    • 2. Design analysis
    • 3. Resource file analysis
  • Development environment
  • Fourth, optimization design
    • 1, the previous one, the next one
    • 2. Personalization button
  • Five, the operation effect
  • Vi. Project Summary
  • Seven, source code acquisition

One, the introduction

A year ago I posted a tutorial on implementing a music player on Android:How to implement music Player with Android Studio. At that time, the function was also very simple, that is, play music, pause music, continue to play, quit playing, display music list and album cover functions. As shown below:

During this period, many students asked me whether I could add the next function. Indeed, I could add the function as long as I obtained the subscript position of the song file, which was not difficult. But because I didn’t feel that way after writing the original version, I think everyone will feel that way.

Although I was very busy recently, I still made a review of my music player project and found many shortcomings. Then I optimized and upgraded it, mainly including three points:

  1. Added the previous song and the next song function
  2. Button styles have been replaced with more personalized buttons
  3. Added most code comments, do not overuse

So, this blog post is a refinement of the original version (version 1.0), version 2.0. Without further ado, let’s begin.

Ii. Project Overview

1. Demand analysis

Integrated use of UI interface design, data storage, Activity(Activity), Service (Service), MusicPlayer (MusicPlayer class), ListView (list) and other knowledge, design and development of a MusicPlayer with a music list.

2. Design analysis

The whole project contains five Java files and five layout files. Because it is a relatively simple project, it is not implemented by engineering structure. Here is the relationship between them.

3. Resource file analysis

All the music files in this project are stored locally, without a server, of course you can also use, refer to my multimedia player: Android Studio implementation of multimedia player.

I created a “RAW” folder in the “RES” folder for the music file, and I named the music file “music0”.

In the drawable folder, you can store bg.jpg, music_bg.jpg, music0.png, music1.png, play.png, pause.png, etc.

Development environment

Fourth, optimization design

1, the previous one, the next one

To jump to the previous and next songs, you must modify the MusicActivity file.

1.1. Think about it this way: If each jump is performed with the intent of the corresponding song, it becomes more complicated to implement. So you can see in the onCreate method intent1 is the intent of getting the song list screen to jump to the music player screen. Let’s do it a little bit more subtly, using this intent1.

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // Bind the layout file
        setContentView(R.layout.activity_music);
        // Get the intent
        intent1=getIntent();
        / / initialization
        init();
    }
Copy the code

1.2, we first define the previous button, the next button, and then bind the control, set the listener, modify the layout file, these must be familiar, so I will not repeat here.

		// Bind the controls in sequence
        tv_progress=(TextView)findViewById(R.id.tv_progress);
        tv_total=(TextView)findViewById(R.id.tv_total);
        sb=(SeekBar)findViewById(R.id.sb);
        name_song=(TextView)findViewById(R.id.song_name);

        play=findViewById(R.id.btn_play);
        pause=findViewById(R.id.btn_pause);
        con=findViewById(R.id.btn_continue_play);

        // Set the listeners in sequence
        findViewById(R.id.btn_play).setOnClickListener(this);
        findViewById(R.id.btn_pause).setOnClickListener(this);
        findViewById(R.id.btn_continue_play).setOnClickListener(this);
        findViewById(R.id.btn_exit).setOnClickListener(this);

        findViewById(R.id.btn_next).setOnClickListener(this);
        findViewById(R.id.btn_pre).setOnClickListener(this);
Copy the code

Intent1 is intended to jump from the songlist interface to the onClick() method. It can be interpreted as a student, who walks back to the dormitory after a class in the classroom. It stores the information of the class. In this case, the classroom is the song list, and the dormitory is the playing interface. Position is the student’s student number, and since getStringExtra() is a string, parseInt () is converted to the integer I, which gets the song’s subscript.

1.4 music_pic is the picture box, showing the round picture of the singer, name_song is the text box of the song name, showing the song name.

1.5, at this time we will get the previous song, that is, the student before the current student id of the student, just need i-1, but the problem is that this can only be done once, continue the next song will not respond, because the onClick method is called every time it is clicked. The position inside is initialized each time to the student walking back to the dorm, so you can only change the subscript once.

1.6. How to update the index every time you call onClick()? We can define a change variable to record the index by incrementing or subtracting it by one.

public int change=0;// Record the subscript change value
Copy the code

1.7, in this way, either the previous i-1 or the next I +1 can be directly added to the change line, the code is as follows:

			case R.id.btn_pre:// Play the previous song
                if((i+change)<1) {
                    Toast.makeText(MusicActivity.this."It's already the first one.", Toast.LENGTH_SHORT).show();
                    return;
                }
                else {
                    change--;
                    music_pic.setImageResource(frag1.icons[i+change]);
                    name_song.setText(musicName[i+change]);
                    musicControl.play(i+change);
                    animator.start();
                    break;
                }
            case R.id.btn_next:// Play the next track
                if((i+change)==musicName.length-1) {// here musicName.length-1 represents the subscript of the last song
                    Toast.makeText(MusicActivity.this."This is the last one.", Toast.LENGTH_SHORT).show();
                    return;
                }
                else {
                    change++;
                    music_pic.setImageResource(frag1.icons[i+change]);
                    name_song.setText(musicName[i+change]);
                    musicControl.play(i+change);
                    animator.start();
                    break;
                }
Copy the code

1.8. On the basis of the first edition, the effect of the previous one and the next one can be successfully achieved:

2. Personalization button

2.1. Music player buttons look awkward with this kind of frame, so I spent a few hours looking for a UI image that I liked from various icon sites.



2.2. Cut WPS images and cut them into vector images, as shown below:



2.3. Then modify the layout file to overlap the play button, pause button and continue to play button. I use Android :layout_centerHorizontal=”true” to center all three of them so that they overlap each other, but in a different order, the top is the bTN_play button, the second is the bTN_pause button, The third layer is

Continue play button (btn_continue_play).

S: Why is the play button on the top? Because the play button is clicked to make it disappear, it must play the first one. S: Why is the pause button on the second floor? Because you must be able to pause the song after playing it, you need to be able to display the pause button, and when the pause button is clicked, it will disappear and show the continue button at the bottom. Student C: If I press the continue button, does the song continue to play, the continue button disappears, and then the pause button appears? You’re right, that’s the logic.

Here is the complete layout code:

<? xml version="1.0" encoding="utf-8"? > <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/music_bg"
    tools:context=".MusicActivity"
    android:gravity="center"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/iv_music"
        android:layout_width="240dp"
        android:layout_height="240dp"
        android:layout_gravity="center_horizontal"
        android:layout_margin="15dp"
        android:src="@drawable/music0"/>
    <TextView
        android:id="@+id/song_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Song Title"
        android:textSize="20sp"/>
    <SeekBar
        android:id="@+id/sb"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="8dp"
        android:paddingRight="8dp">
        <TextView
            android:id="@+id/tv_progress"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Prefer"/>
        <TextView
            android:id="@+id/tv_total"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:text="Prefer"/>
    </RelativeLayout>
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <Button
            android:id="@+id/btn_continue_play"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:layout_centerHorizontal="true"
            android:background="@drawable/play"/>
        <Button
            android:id="@+id/btn_pause"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:layout_centerHorizontal="true"
            android:background="@drawable/pause"/>
        <Button
            android:id="@+id/btn_play"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:layout_centerHorizontal="true"
            android:background="@drawable/play" />
        <Button
            android:id="@+id/btn_pre"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:background="@drawable/pre"
            android:layout_centerVertical="true"
            android:layout_marginRight="10dp"
            android:layout_toLeftOf="@id/btn_play"/>

        <Button
            android:id="@+id/btn_next"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:background="@drawable/next"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10dp"
            android:layout_toRightOf="@id/btn_play"/>
        <Button
            android:id="@+id/btn_exit"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:background="@drawable/exit"
            android:layout_centerVertical="true"
            android:layout_marginLeft="30dp"
            android:layout_toRightOf="@id/btn_next"/>

    </RelativeLayout>


</LinearLayout>
Copy the code

Five, the operation effect

Android Studio starts the emulator with Starting AVD, builds the emulator with Gradle Build, installs and installs the app, and launches the app. First comes the song list interface:



2. We choose “Ordinary Road” to play and jump to the music playing interface:



3. Click the “Play” button, the music starts to play and the picture starts to rotate:



4. Drag the progress bar to fast-forward the music directly to the specified position:



5. Click “Next” button to play “Little Luck” :



5, click “next” button again, playing “Qilixiang” :



6. Click the “Previous song” button and play “Little Luck” again:



7. Click the “Pause” button, the song stops playing and the picture stops rotating:



8. Click continue to play button, the song continues to play, the picture continues to rotate:



9. Click the “Exit” button to return to the song list interface:



10, click the “Album” option to enter the album interface, still selected is Taylor swift’s “Red” album cover

Vi. Project Summary

This project is mainly to optimize the functions and UI of the music player of the last version. It is not complicated but tedious to implement, but it is ok if you have patience. In fact, no matter what problems you encounter, you should be patient to analyze the problem, and then come up with solutions, and then solve the problem. This process may be short or long, but we have to believe that if you put your mind to it, it will work out.

Seven, source code acquisition

Students who need to learn source code can pay attention to my wechat public number “the old whale underground castle”, reply:Music Player 2.0, you can get the source code, there are many Android projects waiting for you to learn.

🚀 Here’s something you missed

Before you consider whether to read bo, first stable read master’s degree, and then see if they are writing articles, to that time you will naturally want to clear this problem, master and doctor even read and then graduation is far from a lot of a lot of, first walk the road at the foot of a good foot.