Cara Menghilangkan Toolbar Pada Aplikasi Android Ketika di Scroll

Tutorial Cara Menghilangkan Toolbar Ketika Aplikasi di Scroll

Halo semuanya, bagaimana kabar kalian hari ini? Saya harap kalian semua dalam keadaan yang baik-baik saja. Pada kesempatan kali ini, Saya akan membagikan kepada kalian semua cara menghilangkan toolbar ketika aplikasi di scroll pada android studio.

Ada banyak aplikasi yang menerapkan toolbar menghilang ketika aplikasi di scroll. Terlebih lagi, ini adalah material design yang dibawa kan oleh google. Berarti, menggunakan sistem ini berarti kalian telah mengikuti trend yang di bawa kan oleh Google. Aplikasi yang menggunakan sistem seperti ini biasanya di pasang pada aplikasi berita, aplikasi tutorial dan aplikasi yang sejenisnya.

Jadi, dalam tutorial ini kalian akan belajar cara membuat aplikasi android menghilangkan toolbar ketika aplikasi di scroll pada android studio dengan kode yang sederhana.

- Advertisement -

Tutorial Cara Menghilangkan Toolbar Pada Aplikasi Android Ketika di Scroll

Buatlah projek android studio baru dengan informasi sebagai berikut:

Application Name:Toolbar Hide App
Package Name:com.androidrion.toolbarhideapp
Language:Java
Minimum SDK:API 15: Android 4.0.3 (IceCreamSandwich)

Daftar file xml layout yang digunakan dalam projek ini:

  • activity_main.xml

Daftar file java yang digunakan dalam projek ini:

  • MainActivity.java

Dependencies File

Menghilangkan toolbar pada aplikasi memerlukan dependensi google material design. Untuk itu, tambahkan kode dibawah ini pada build.gradle. Berikut adalah kode lengkap untuk file build.gradle (Module: app)

Gradle Scripts/build.gradle (Module: app)

    implementation 'com.google.android.material:material:1.0.0'

Ikuti tutorial pada link di bawah ini untuk menambahkan dependensi pada projek android studio.

CARA MENAMBAHKAN LIBRARY KEDALAM PROJEK ANDROID STUDIO

Styles File

Buka file styles.xml dalam folder values pada projek android studio kalian. Tambahkan kode di bawah ini untuk membuat Toolbar pada aplikasi menghilang. Berikut ini adalah kode lengkap untuk file styles.xml

app/res/values/styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

</resources>

Strings File

Dalam tutorial ini, kita memerlukan data yang cukup banyak agar aplikasi bisa di scroll. Untuk itu, tambahkan kode di bawah ini pada file strings.xml dalam folder values. Berikut ini adalah kode lengkap untuk file strings.xml

app/res/values/strings.xml

<resources>
    <string name="app_name">Toolbar Hide App</string>

    <string name="paragraph_1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sodales libero lorem. Vestibulum mauris ex, volutpat quis maximus vel, porttitor at leo. Sed aliquet euismod consequat. Sed hendrerit non arcu eget posuere. Sed quam massa, viverra nec risus vitae, feugiat cursus elit. Curabitur lobortis enim a sem hendrerit, ultrices egestas quam venenatis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tristique orci sed urna dignissim aliquam. Cras vestibulum velit eros, eleifend dignissim ligula vehicula at. Fusce non ornare risus. Nulla venenatis tempor massa, a eleifend metus volutpat et. Curabitur tempor justo ac rutrum semper. Duis volutpat efficitur sapien, quis bibendum tellus. Praesent euismod magna quis imperdiet semper. Nulla feugiat tincidunt dui, lacinia commodo augue placerat ac.</string>
    <string name="paragraph_2">Duis lectus eros, malesuada ut arcu sed, consequat gravida sapien. Nam dapibus justo sit amet magna sagittis, sit amet luctus purus accumsan. Mauris sit amet lorem id massa vestibulum maximus. Proin quis molestie sem. Nunc tempus ultricies venenatis. Sed condimentum turpis non tortor scelerisque bibendum. Nunc non ultricies nibh. Nulla facilisi. Proin magna urna, tristique in lobortis vel, vehicula sed libero. Sed quis accumsan libero.</string>
    <string name="paragraph_3">Phasellus lectus ex, fringilla nec nibh iaculis, fringilla pellentesque ante. Proin in lacus et nunc commodo rutrum. Ut lacinia varius sagittis. Phasellus elit elit, feugiat ac diam id, tincidunt scelerisque felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mollis volutpat massa, eget sodales ante iaculis ut. Phasellus nunc lectus, congue et mauris efficitur, varius iaculis quam.</string>
</resources>

XML Layout File

Buka file activity_main.xml dalam folder layout. Gunakan layout CoordinatorLayout untuk dasar dari aplikasi. Lalu di dalamnya tambahkan AppBarLayout dan di dalam AppBar Layout tambahkan Toolbar. Berikut ini adalah kode lengkap untuk file activity_main.xml

app/res/layout/activity_main.xml


<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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"
    tools:context=".MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways" />
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:padding="12dp">

            <TextView
                style="@style/TextAppearance.AppCompat.Medium"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="@string/paragraph_1" />

            <View
                android:layout_width="match_parent"
                android:layout_height="12dp" />

            <TextView
                style="@style/TextAppearance.AppCompat.Medium"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="@string/paragraph_2" />

            <View
                android:layout_width="match_parent"
                android:layout_height="12dp" />

            <TextView
                style="@style/TextAppearance.AppCompat.Medium"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="@string/paragraph_3" />
        </LinearLayout>
    </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Colors File

Buatlah code warna baru untuk membuat title pada Toolbar menjadi warna putih. Berikut adalah kode lengkap untuk file colors.xml

app/res/values/colors.xml

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

Java Activity File

Dalam folder java, buka file MainActivity dan tambahkan kode dibawah ini untuk membuat toolbar menampilkan title dari nama aplikasi. Berikut adalah kode lengkap untuk file MainActivity.java

app/java/com.androidrion.hidetoolbarapp/MainActivity.java

package com.androidrion.toolbarhideapp;

import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;

import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    Toolbar toolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        toolbar = findViewById(R.id.toolbar);
        toolbar.setTitle(R.string.app_name);
        toolbar.setTitleTextColor(getResources().getColor(R.color.colorToolbar));
        setSupportActionBar(toolbar);
    }
}

Run ‘app’

Sekarang jalankan projek android studio kalian. Kalian bisa melihat banyak teks yang ditampilkan pada aplikasi ketika aplikasi di jalankan. Kalian bisa men-scroll aplikasi tersebut ke bawah. Ketika kalian scroll aplikasi tersebut ke arah atas maka toolbar secara perlahan menghilang (hide) dan akan muncul ketika kalian scroll ke arah bawah. Jika kode diatas tidak terjadi masalah, maka aplikasi akan terlihat seperti pada gambar di bawah ini.

AKHIR KATA

Itulah tadi tutorial mudah cara menghilangkan toolbar ketika aplikasi di scroll. Tutorial di atas begitu banyak langkah-langkahnya tetapi sebenarnya tutorial diatas sangatlah mudah di kerjakan karena kita tidak memerlukan kode pada file java untuk bisa menghilangkan toolbar di aplikasi ketika di scroll.

Jika kalian mengalami kendala saat melakukan tutorial di atas, silahkan komentar di bawah artikel ini. Jangan lupa untuk like dan subscribe Channel YouTube Android Rion. Semoga artikel ini membantu kalian. Terima Kasih.

- Advertisement -

Get real time updates directly on you device, subscribe now.

You might also like

- Advertisement -

Leave A Reply

Your email address will not be published.