Header Ads Widget

Responsive Advertisement

How to Create music player with a rotating image art in Android Studio

Creating a music player with a rotating image art in Android Studio involves designing the user interface, integrating a media player, and handling the rotation animation. Below is a step-by-step guide to help you build a simple music player with this feature.



1. Set Up a New Project:

Open Android Studio and create a new project. Choose an appropriate project template and set the project details.


2. Design the User Interface:

Open the res/layout/activity_main.xml file and design the layout. For simplicity, create a layout with basic elements like ImageView for the rotating image, TextView for song information, and Button for play/pause functionality.


xml

Copy code

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout 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"

    tools:context=".MainActivity">


    <ImageView

        android:id="@+id/albumArt"

        android:layout_width="200dp"

        android:layout_height="200dp"

        android:src="@drawable/default_album_art"

        android:layout_centerInParent="true"

        android:rotation="0"/>


    <TextView

        android:id="@+id/songInfo"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Song Title - Artist"

        android:layout_below="@id/albumArt"

        android:layout_marginTop="16dp"

        android:layout_centerHorizontal="true"/>


    <Button

        android:id="@+id/playPauseButton"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Play"

        android:layout_below="@id/songInfo"

        android:layout_marginTop="16dp"

        android:layout_centerHorizontal="true"

        android:onClick="onPlayPauseClick"/>

</RelativeLayout>

3. Add Images to the Res Directory:

Place your album artwork images in the res/drawable directory. Ensure you have images named appropriately (e.g., default_album_art.jpg).


4. Implement the Media Player:

Open the MainActivity.java file and add the necessary code for initializing the MediaPlayer and handling play/pause functionality.


java

Copy code

import android.media.MediaPlayer;

import android.os.Bundle;

import android.view.View;

import android.widget.Button;

import android.widget.ImageView;

import android.widget.TextView;


public class MainActivity extends AppCompatActivity {


    private MediaPlayer mediaPlayer;

    private ImageView albumArt;

    private TextView songInfo;

    private Button playPauseButton;


    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);


        mediaPlayer = MediaPlayer.create(this, R.raw.sample_song); // Replace with your audio file

        albumArt = findViewById(R.id.albumArt);

        songInfo = findViewById(R.id.songInfo);

        playPauseButton = findViewById(R.id.playPauseButton);

    }


    public void onPlayPauseClick(View view) {

        if (mediaPlayer.isPlaying()) {

            mediaPlayer.pause();

            playPauseButton.setText("Play");

        } else {

            mediaPlayer.start();

            playPauseButton.setText("Pause");

        }

    }

}

Make sure to replace sample_song with the actual audio file in the res/raw directory.


5. Implement Image Rotation Animation:

To achieve the rotating image effect, you can use the ObjectAnimator class in Android.


java

Copy code

import android.animation.ObjectAnimator;

import android.os.Bundle;

import android.view.View;

import android.view.animation.LinearInterpolator;

import android.widget.Button;

import android.widget.ImageView;

import android.widget.TextView;

import androidx.appcompat.app.AppCompatActivity;


public class MainActivity extends AppCompatActivity {


    private ObjectAnimator rotationAnimator;


    // ... (previous code)


    @Override

    protected void onCreate(Bundle savedInstanceState) {

        // ... (previous code)


        rotationAnimator = ObjectAnimator.ofFloat(albumArt, "rotation", 0f, 360f);

        rotationAnimator.setInterpolator(new LinearInterpolator());

        rotationAnimator.setDuration(3000); // Adjust duration as needed

        rotationAnimator.setRepeatCount(ObjectAnimator.INFINITE);

    }


    public void onPlayPauseClick(View view) {

        if (mediaPlayer.isPlaying()) {

            mediaPlayer.pause();

            playPauseButton.setText("Play");

            rotationAnimator.pause();

        } else {

            mediaPlayer.start();

            playPauseButton.setText("Pause");

            rotationAnimator.resume();

        }

    }

}

6. Run Your App:

Connect your Android device or use an emulator and run the app. Test the play/pause functionality and observe the rotating image effect.


7. Additional Features (Optional):


Implement a seek bar to allow users to navigate through the song.

Add a playlist functionality.

Enhance the UI with more details, such as the current time and total duration.

Remember to customize the code according to your specific requirements and handle potential exceptions for a more robust application. This example provides a foundation for a simple music player with a rotating image art feature in Android Studio.

Post a Comment

0 Comments