Como usar o ScrollView no Android Studio
XML

Como usar o ScrollView no Android Studio





Neste tutorial vamos ver como usar o ScrollView no Android Studio para fazer barra de rolagem na tela adicionando arquivos de layout.

Vou mostrar como fazer um simples cardápio com arquivos de layout XML para usarmos o ScrollView, podem existir formas melhores de se fazer um cardápio, mas resolvi fazer dessa forma poque achei que seria simples de explicar a sua utilização.

Primeiramente vamos criar um novo projeto vazio(Empty) com o nome de br.com.uware.scrollview para utilizar em nossa aplicação.

Base do projeto

Então com nosso projeto criado vamos começar a fazer a base do projeto editando o arquivo de strings.xml que irá conter as palavras utilizadas no projeto.

<resources>
    <string name="app_name">ScrollView</string>

    <string name="cardapio">Cardápio</string>
    <string name="footer">Este é o texto do footer</string>
    <string name="bebidas">Bebidas</string>
    <string name="comidas">Comidas</string>
    <string name="preco">R$ 0.00</string>
    
    <string name="agua">Água</string>
    <string name="suco">Suco</string>
    <string name="refrigerante">Refrigerante</string>
    <string name="cerveja">Cerveja</string>
    <string name="wisky">Wisky</string>
    <string name="vodka">Vodka</string>
    <string name="rum">Rum</string>

    <string name="feijao">Feijão</string>
    <string name="arroz">Arroz</string>
    <string name="batata_frita">Batata Frita</string>
    <string name="batata_assada">Batata Assada</string>
    <string name="farofa">Farofa</string>
    <string name="bife">Bife</string>
    <string name="ovo_frito">Ovo Frito</string>
    <string name="ovo_cozido">Ovo Cozido</string>
    <string name="pao">Pão</string>
    <string name="salada">Salada</string>
    <string name="peixe">Peixe</string>
    
</resources>

Logo depois com a nossas strings inseridas vamos adicionar uma imagem para ser utilizada como logo com o nome de logo.png.





Layouts

Então agora chegou a hora de criar os arquivos de layout que vamos utilizar na ScrollView.

Vamos criar 4(quatro) arquivos de layout.

Primeiro nosso arquivo de header(parte do topo) do nosso ScrollView.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_marginBottom="50dp">

    <ImageView
        android:id="@+id/ivLogo"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/logo"
        app:layout_constraintTop_toTopOf="parent"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/cardapio"
        android:textSize="40dp"
        android:gravity="center"
        app:layout_constraintTop_toBottomOf="@id/ivLogo"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Agora vamos criar o nosso arquivo que será o footer(parte de baixo) de nosso ScrolView.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_marginTop="50dp">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/footer"
        android:gravity="center"
        app:layout_constraintTop_toTopOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>




Então vamos utilizar 2(dois) arquivos de layout para ser o nosso menu, um arquivo será de bebidas e outro de comidas com o seguinte conteúdo.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/bebidas"
        android:textSize="35dp"
        android:gravity="center"
        android:layout_marginBottom="50dp"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/agua"
            android:textSize="25dp"
            android:layout_weight="1"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/preco"
            android:textSize="25dp"
            android:gravity="end"
            android:layout_weight="1"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/suco"
            android:textSize="25dp"
            android:layout_weight="1"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/preco"
            android:textSize="25dp"
            android:gravity="end"
            android:layout_weight="1"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/refrigerante"
            android:textSize="25dp"
            android:layout_weight="1"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/preco"
            android:textSize="25dp"
            android:gravity="end"
            android:layout_weight="1"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/cerveja"
            android:textSize="25dp"
            android:layout_weight="1"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/preco"
            android:textSize="25dp"
            android:gravity="end"
            android:layout_weight="1"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/wisky"
            android:textSize="25dp"
            android:layout_weight="1"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/preco"
            android:textSize="25dp"
            android:gravity="end"
            android:layout_weight="1"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/vodka"
            android:textSize="25dp"
            android:layout_weight="1"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/preco"
            android:textSize="25dp"
            android:gravity="end"
            android:layout_weight="1"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/rum"
            android:textSize="25dp"
            android:layout_weight="1"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/preco"
            android:textSize="25dp"
            android:gravity="end"
            android:layout_weight="1"/>
    </LinearLayout>
</LinearLayout>




<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/comidas"
        android:textSize="35dp"
        android:gravity="center"
        android:layout_marginBottom="50dp"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/feijao"
            android:textSize="25dp"
            android:layout_weight="1"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/preco"
            android:textSize="25dp"
            android:gravity="end"
            android:layout_weight="1"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/arroz"
            android:textSize="25dp"
            android:layout_weight="1"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/preco"
            android:textSize="25dp"
            android:gravity="end"
            android:layout_weight="1"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/batata_frita"
            android:textSize="25dp"
            android:layout_weight="1"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/preco"
            android:textSize="25dp"
            android:gravity="end"
            android:layout_weight="1"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/batata_assada"
            android:textSize="25dp"
            android:layout_weight="1"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/preco"
            android:textSize="25dp"
            android:gravity="end"
            android:layout_weight="1"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/farofa"
            android:textSize="25dp"
            android:layout_weight="1"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/preco"
            android:textSize="25dp"
            android:gravity="end"
            android:layout_weight="1"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/bife"
            android:textSize="25dp"
            android:layout_weight="1"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/preco"
            android:textSize="25dp"
            android:gravity="end"
            android:layout_weight="1"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/ovo_cozido"
            android:textSize="25dp"
            android:layout_weight="1"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/preco"
            android:textSize="25dp"
            android:gravity="end"
            android:layout_weight="1"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/ovo_frito"
            android:textSize="25dp"
            android:layout_weight="1"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/preco"
            android:textSize="25dp"
            android:gravity="end"
            android:layout_weight="1"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/pao"
            android:textSize="25dp"
            android:layout_weight="1"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/preco"
            android:textSize="25dp"
            android:gravity="end"
            android:layout_weight="1"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/salada"
            android:textSize="25dp"
            android:layout_weight="1"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/preco"
            android:textSize="25dp"
            android:gravity="end"
            android:layout_weight="1"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/peixe"
            android:textSize="25dp"
            android:layout_weight="1"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/preco"
            android:textSize="25dp"
            android:gravity="end"
            android:layout_weight="1"/>
    </LinearLayout>
</LinearLayout>




Como usar o ScrollView no Android Studio

Logo após ter criado todos os arquivos de layout vamos então ver como vamos utilizar o ScrollView.

Vamos ver no seguinte código que temos em nosso layout como base um ScrollView e dentro dele temos um LinearLayout com orientação vertical para que seja incluído os nossos layouts na ordem certa.

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
    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">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <include layout="@layout/content_header"/>
        <include layout="@layout/content_bebidas"/>
        <include layout="@layout/content_comidas"/>
        <include layout="@layout/content_footer"/>
    </LinearLayout>
</ScrollView>

Podemos perceber também em nossos layouts que eles estão com a opção de layout_height=”wrap_content” para que seja ajustado ao tamanho do layout que será incluído e assim vai inserir cada layout com a altura de seus componentes.

Agora vamos compilar e executar o projeto para então ver como funciona.

Se você precisar saber mais opções sobre ScrollView veja no site do Android Developer.

Enfim espero poder ter ajudado com mais este tutorial sobre como usar o ScrollView no Android Studio.





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