Redes Sociais
 Telegram  YouTube
Como fazer um tocador de música para android
21 de outubro de 2019
Android / Kotlin / XML

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

Autor: Rodrigo Leutz

Desenvolvedor Web e Android ( Kotlin e Java )


Começando a programar na linguagem Kotlin – Parte 5

Nesse tutorial Começando a programar na linguagem Kotlin – Parte 5 vamos ver strings e intervalos para que assim seja possível entrar em laços.[...]

7 de fevereiro de 2020

Vídeo 11: Pegar endereço com o CEP Kotlin

Nesse Vídeo 11: Pegar endereço com o CEP Kotlin vou descrever como fazer a parte da programação assim você vai imprimir o endereço na tela.[...]

4 de janeiro de 2020

Vídeo 10: Pegar endereço com o CEP Kotlin

Nesse Vídeo 10: Pegar endereço com o CEP Kotlin vou descrever como fazer o layout do aplicativo para assim poder fazer a programação. Vou[...]

4 de janeiro de 2020