如何在Android中为mp3文件实现弹出式媒体播放器？

Question

I have made an app that has 20 or so mp3 files in the res\\raw folder, and when a button is pressed, the media is played, the button can then be pressed again and the media is stopped.

This works well, but it does not look very nice, ideally, what I would like is a little popup player that appears in the centre of the screen with a seek bar, a pause button, and the name of the song that plays. (Very much like the Google Play Music app works when opening an mp3 file from a file browser). I know I could just get the button to open an intent to use Google Play Music, but I would like my app to have it's own colour scheme of a very similar looking version of the same popup.

The current Java code that I have for one of the songs is as follows:

package com.lmarshall1995.scoutsongs;

import com.lmarshall1995.scoutsongs.R;
import android.app.Activity;
import android.content.Intent;
import android.media.AudioManager;
import android.media.MediaPlayer;
import android.os.Bundle;
import android.view.Gravity;
import android.view.View;
import android.view.WindowManager;
import android.widget.Button;
import android.widget.ImageButton;
import android.widget.Toast;

public class Song_AliceTheCamel_Activity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState){
        super.onCreate(savedInstanceState);
        this.setVolumeControlStream(AudioManager.STREAM_MUSIC);
        getWindow().addFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON);
        setContentView(R.layout.song_alicethecamel);
        setupNavigationButton();

        Toast toast = Toast.makeText(this, "To be sung in the tune of \n . . .", Toast.LENGTH_LONG);
        toast.setGravity(Gravity.CENTER, 0, 0);
        toast.show();

        final Button back = (Button) findViewById(R.id.back_button);
        back.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                finish();
            }
        });

        final Button previous = (Button) findViewById(R.id.previous_button);
        previous.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                Intent previousIntent = new Intent(Song_AliceTheCamel_Activity.this, Song_ZipADeeDooDah_Activity.class);
                Song_AliceTheCamel_Activity.this.startActivity(previousIntent);
                finish();
            }
        });

        final Button next = (Button) findViewById(R.id.next_button);
        next.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                Intent nextIntent = new Intent(Song_AliceTheCamel_Activity.this, Song_Bingo_Activity.class);
                Song_AliceTheCamel_Activity.this.startActivity(nextIntent);
                finish();
            }
        });

        final ImageButton play_tune = (ImageButton) findViewById(R.id.play_tune);
        play_tune.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                ImageButton play_tune = (ImageButton) findViewById(R.id.play_tune);
                play_tune.setOnClickListener(new View.OnClickListener() {
                    MediaPlayer mp = MediaPlayer.create(Song_AliceTheCamel_Activity.this, R.raw.tune_alicethecamel);
                    public void onClick(View arg0) {
                        if (mp.isPlaying()) {
                            mp.stop();
                            mp.prepareAsync();
                            mp.seekTo(0);
                        } else {
                            mp.start();
                        }
                    }
                });
            }
        });

    }
    private void setupNavigationButton() {}
}

And the current xml code that I have for one of the songs is as follows:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/song_alicethecamel"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000000"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".ScoutSongs" >

    <TextView
        android:id="@+id/Song_AliceTheCamel_Title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:text="@string/Song_AliceTheCamel_Title"
        android:textSize="20sp"
        android:textColor="#FFFFFF" />

    <ImageButton
        android:id="@+id/play_tune"
        android:src="@drawable/play_tune"
        android:contentDescription="@string/play_tune"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@+id/Song_AliceTheCamel_Title"
        android:layout_alignTop="@+id/Song_AliceTheCamel_Title" />

    <ScrollView 
        android:id="@+id/Song_AliceTheCamel_Lyrics"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/back_button"
        android:layout_alignLeft="@+id/Song_AliceTheCamel_Title"
        android:layout_alignRight="@+id/play_tune"
        android:layout_below="@+id/play_tune"> 

        <TextView 
            android:id="@+id/Song_A_Lyrics1" 
            android:layout_height="wrap_content" 
            android:layout_width="wrap_content" 
            android:text="@string/Song_AliceTheCamel_Lyrics"
            android:textColor="#FFFFFF" /> 

    </ScrollView>

    <Button
        android:id="@+id/back_button"
        android:layout_width="65dp"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignRight="@+id/Song_AliceTheCamel_Lyrics"
        android:text="@string/back"
        android:textColor="#FFFFFF" />

    <Button
        android:id="@+id/previous_button"
        android:layout_width="95dp"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/back_button"
        android:layout_alignBottom="@+id/back_button"
        android:layout_alignLeft="@+id/Song_AliceTheCamel_Lyrics"
        android:text="@string/previous"
        android:textColor="#FFFFFF" />

    <Button
        android:id="@+id/next_button"
        android:layout_width="95dp"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/previous_button"
        android:layout_alignBottom="@+id/previous_button"
        android:layout_toRightOf="@+id/previous_button"
        android:text="@string/next"
        android:textColor="#FFFFFF" />

</RelativeLayout>

but I would rather have it looking more like this:

Any help would be much appreciated as I know the source code for this is obviously going to be protected, At the moment, all I know is I need to make an xml file for the layout, and I think that would be a good start to ask for guidance.

Once I have this information, I would like to change the background to black rather than white, the seek bar to purple rather than orange, and change what Text is displayed to the song Title, rather than the file name.

Answer 1

Implement the audio player as a fragment which communicates with a background service through a messaging tool like the LocalBroadcastReceiver or Otto. Then in the application when the user wants to play a song they can select it and you can create a DialogFragment with the new Fragment you created. Thats how I've done this before.