Como fazer um tocador de música para android
Android Kotlin XML

Como fazer um tocador de música para android





Nesse tutorial vou descrever como fazer um tocador de música para android em kotlin esse vai ser o primeiro tutorial de uma série.

Primeiramente vamos criar um projeto vazio(Empty).

A princípio vamos programar o layout do aplicativo e para isso vamos utilizar vários botões, então vou mostrar como fazer para a criação de um deles os botões seguintes vão utilizar do mesmo método apenas vão mudar o nome e seu respectivo ícone.

Então para adicionar um ícone você deve clicar com o botão direito do mouse na pasta drawable em New->Vector Asset como na imagem a seguir.

Como fazer um tocador de música para android
Adicionando ícone.

Logo depois de clicar em Vector Asset deve abrir uma uma janela como mostrado na seguinte imagem.

Como fazer um tocador de música para android
Inserindo ícone.




Se você clicar no ícone ao lado do escrito Clip Art: vai abrir uma janela que mostrará os clip arts disponíveis, e assim você vai escolher todos os ícones para seu player e também vai ter que modificar o nome modificando a linha ao lado do Name:, então dessa maneira deve ser feita para todos os ícones do tocador de músicas com seus respectivos botões.

Sendo assim vamos utilizar os ícones descritos na imagem a seguir e o seu diretório drawable deve ficar como na imagem.

Como fazer um tocador de música para android
Ícones do tocador de músicas.

Logo depois de ter inserido os ícones vamos fazer um novo drawable resource file clicando com o botão direito em cima da pasta drawable selecionando New->Drawable resource file e inserindo o nome de background_control para fazer o background de onde vai ficar os controles do tocador.

Como fazer um tocador de música para android
Inserindo Drawable resource file.

Nesse momento vamos editar esse arquivo para então obter nosso background com o seguinte código.

background_control

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape>
            <solid android:color="#FFFFFF"/>
            <corners android:radius="10dp"/>
            <stroke android:width="1px"
                    android:color="#000000"/>
        </shape>
    </item>
</selector>

Logo após fazer o background do nosso controle vamos então colocar no layout de nosso tocador de músicas.

Então nosso código da activity_main deve ficar como o seguinte.





activity_main

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#333333"
    tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginBottom="10dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/layControls"/>
    <LinearLayout
        android:id="@+id/layControls"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_margin="20dp"
        android:background="@drawable/background_control"
        app:layout_constraintBottom_toBottomOf="parent">
        <TextView
            android:id="@+id/tvFilename"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="uware MP3 Player"
            android:paddingTop="@dimen/default_margin"
            android:paddingBottom="@dimen/default_margin"
            android:textColor="#000000"
            android:background="@drawable/background_filename"/>
        <TextView
            android:id="@+id/tvTime"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="00:00"
            android:gravity="center"/>
        <SeekBar
            android:id="@+id/seekBar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:gravity="center">
            <ImageButton
                android:id="@+id/btnSkipPrevious"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_skip_previous"/>
            <ImageButton
                android:id="@+id/btnFastRewind"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_fast_rewind"/>
            <ImageButton
                android:id="@+id/btnPlay"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_play"/>
            <ImageButton
                android:id="@+id/btnPause"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_pause"/>
            <ImageButton
                android:id="@+id/btnStop"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_stop"/>
            <ImageButton
                android:id="@+id/btnFastForward"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_fast_forward"/>
            <ImageButton
                android:id="@+id/btnSkipNext"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_skip_next"/>
        </LinearLayout>
    </LinearLayout>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fabAddFile"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:src="@drawable/ic_file"
        app:backgroundTint="@color/colorPrimaryDark"
        app:layout_constraintBottom_toTopOf="@id/fabClear"
        app:layout_constraintStart_toStartOf="@id/fabClear"/>
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fabClear"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:src="@drawable/ic_clear"
        app:backgroundTint="#000"
        app:layout_constraintBottom_toTopOf="@id/fabAdd"
        app:layout_constraintStart_toStartOf="@id/fabAdd"/>
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fabAdd"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_add"
        android:layout_marginEnd="8dp"
        android:layout_marginTop="10dp"
        app:layout_constraintTop_toBottomOf="@id/recycler"
        app:layout_constraintBottom_toTopOf="@id/layControls"
        app:layout_constraintEnd_toEndOf="parent"/>
    <SeekBar
        android:id="@+id/seekVolume"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:rotation="270"
        android:background="@drawable/background_control"
        android:layout_marginBottom="70dp"
        app:layout_constraintBottom_toTopOf="@id/fabVolume"
        app:layout_constraintStart_toStartOf="@id/fabVolume"
        app:layout_constraintEnd_toEndOf="@id/fabVolume"/>
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fabVolume"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_volume"
        android:layout_marginStart="8dp"
        android:layout_marginTop="10dp"
        app:layout_constraintTop_toBottomOf="@+id/recycler"
        app:layout_constraintBottom_toTopOf="@id/layControls"
        app:layout_constraintStart_toStartOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

Assim termino essa primeira parte de Como fazer um tocador de música para android.

Veja também Como usar Shared Preferences em Kotlin.

Visite e siga nosso canal no YouTube para ajudar no crescimento do site.





Parte 2 ->

Rodrigo Leutz
Desenvolvedor Web e Android ( Kotlin e Java )
https://uware.com.br