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

Como fazer um tocador de música para android 3



Nesse tutorial vou dar continuidade em Como fazer um tocador de música para android 3, portanto é a terceira parte de como criar um tocador de música para android.

Primeiramente vamos adicionar a biblioteca do Material Design para poder utilizar o floating action button.

Se você não sabe como adicionar a biblioteca então veja o tutorial Como usar o material design em kotlin.

Nessa parte do tutorial vamos então arrumar o layout do nosso projeto inserindo o recyclerview e os botões para adicionar músicas nele e controle de volume.

Vamos então modificar nosso arquivo activity_main e deixar igual ao ao nosso código a seguir.

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="10dp"
       android:background="@drawable/background_control"
       app:layout_constraintBottom_toBottomOf="parent">
        <TextView
           android:id="@+id/tvControlTitle"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:gravity="center"/>
        <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>

Logo depois de ter modificado o arquivo de layout activity_main vamos também modificar nosso arquivo de colors.xml modificando a cor colorAccent.

O arquivo colors.xml deve ficar com o código de acordo com o a seguir.

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#008577</color>
    <color name="colorPrimaryDark">#00574B</color>
    <color name="colorAccent">#008577</color>
</resources>

Então com os nossos códigos de layout prontos, vamos criar os ícones, você pode usar os de sua preferencia.

Se você não sabe como incluir ícones no projeto então veja o tutorial Como adicionar um Ícone para ImageButton.

Assim como nosso projeto já tem os nomes dos ícones, vou descrever o nome utilizado e sua função.

  • ic_add = Abre menu de arquivos
  • ic_file = Adiciona arquivo
  • ic_clear = Limpa a lista
  • ic_volume = Abre controle de volume

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

Foi criado um gist do nosso projeto para facilitar nossa continuidade do projeto, então se sovê quiser clonar nosso projeto você pode utilizar a seguinte lina para isso.

[[email protected] ~]$ git clone https://github.com/uware-com-br/MusicPlayer

Assim você vai precisar digitar o seguinte comando quando for atualizar seu repositório.

[[email protected] ~]$ git pull

E assim seu repositório será atualizado.

Enfim espero poder ter ajudado com mais esta parte do tutorial de Como fazer um tocador de música para android 3.





<- Parte 2 Parte 4 ->

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