Membuat Background Tools Auto Show Ketika ScrollView di Scroll

https://codingrakitan.blogspot.com/2020/12/membuat-background-tools-auto-show.html

 

Pada postingan kali akan membahas bagaimana caranya membuat tools ataupun menu atas transparant yang mana apabila di scroll akan kembali memberikan background yang sudah di tentukan sebelumnya. Kurang lebih aplikasi akan tampak seperti pada gambar dibawah.

Penggunaan menu seperti ini akan memberikan tampilan yang menarik pada aplikasi. Tampilan yang menarik akan membuat pengguna aplikasi menjadi betah menggunakan aplikasi.

Langsung saja untuk cara pembuatannya silahkan ikuti langkah di bawah ini.

Tambahkan Gambar dan Icon ke Drawable

Untuk melengkapi tampilan layout yang akan dibuat, silahkan tambahkan 3 gambar format jpg dan 3 gambar icon ke res -> drawable. Gambar jpg bebas seusai keinginan. Untuk iconnya bisa di ambil melalui vector asset, baca Cara Menggunakan Icon Vector Asset bawahan Android Studio. Nantinya drawabel akan terisi beberapa file seperti berikut.

color.xml

Buka file color.xml di folder res -> values -> colors.xml kemudian buat edit kode menjadi seperti berikut :

	
<?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="transparan">#6D000000</color>
    <color name="abu_abu">#D6D6D6</color>
    <color name="putih">#FFFFFF</color>
    <color name="biru_tua">#0770cc</color>
    <color name="hijau">#00a651</color>
    <color name="biru">#00BCD4</color>
</resources>

	

activity_main.xml

Salin dan paste kode dibawah ke activity_main.xml.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">

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

        <ScrollView
            android:id="@+id/scrll_post"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scrollbars="none">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

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

                    <ImageView
                        android:id="@+id/imageView34"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:adjustViewBounds="true"
                        android:foreground="@color/transparan"
                        android:scaleType="centerCrop"
                        app:srcCompat="@drawable/img" />
                </LinearLayout>

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

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_marginTop="1dp"
                        android:orientation="horizontal">

                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="70dp"
                            android:layout_marginRight="0.5dp"
                            android:layout_weight="1"
                            android:orientation="vertical">

                            <ImageView
                                android:id="@+id/imageView38"
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:layout_weight="1"
                                android:adjustViewBounds="true"
                                android:scaleType="fitXY"
                                app:srcCompat="@drawable/bc" />
                        </LinearLayout>

                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="70dp"
                            android:layout_marginLeft="0.5dp"
                            android:layout_marginRight="0.5dp"
                            android:layout_weight="1"
                            android:orientation="vertical">

                            <ImageView
                                android:id="@+id/imageView37"
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:layout_weight="1"
                                android:adjustViewBounds="true"
                                android:scaleType="fitXY"
                                app:srcCompat="@drawable/bc" />
                        </LinearLayout>

                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="70dp"
                            android:layout_marginLeft="0.5dp"
                            android:layout_marginRight="0.5dp"
                            android:layout_weight="1"
                            android:orientation="vertical">

                            <ImageView
                                android:id="@+id/imageView36"
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:layout_weight="1"
                                android:adjustViewBounds="true"
                                android:scaleType="fitXY"
                                app:srcCompat="@drawable/bc" />
                        </LinearLayout>

                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="70dp"
                            android:layout_marginLeft="0.5dp"
                            android:layout_weight="1"
                            android:orientation="vertical">

                            <FrameLayout
                                android:layout_width="match_parent"
                                android:layout_height="match_parent">

                                <ImageView
                                    android:id="@+id/imageView35"
                                    android:layout_width="match_parent"
                                    android:layout_height="match_parent"
                                    android:layout_gravity="center"
                                    android:layout_weight="1"
                                    android:adjustViewBounds="true"
                                    android:foreground="@color/transparan"
                                    android:scaleType="fitXY"
                                    app:srcCompat="@drawable/bc" />

                                <TextView
                                    android:id="@+id/textView37"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_gravity="center"
                                    android:gravity="center"
                                    android:maxWidth="50dp"
                                    android:text="Lihat Semua"
                                    android:textColor="@android:color/white" />
                            </FrameLayout>

                        </LinearLayout>

                    </LinearLayout>
                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@color/abu_abu"
                    android:orientation="vertical"
                    android:paddingBottom="1dp">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:background="@color/putih"
                        android:orientation="vertical"
                        android:padding="20dp">

                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:orientation="horizontal">

                            <LinearLayout
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                android:layout_weight="1"
                                android:orientation="vertical">



                                <TextView
                                    android:id="@+id/textView39"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_marginTop="5dp"
                                    android:layout_marginBottom="5dp"
                                    android:text="Tiket Aquaria KLCC"
                                    android:textColor="@android:color/black"
                                    android:textSize="18sp"
                                    android:textStyle="bold" />

                                <LinearLayout
                                    android:layout_width="match_parent"
                                    android:layout_height="match_parent"
                                    android:orientation="horizontal">


                                    <TextView
                                        android:id="@+id/textView40"
                                        android:layout_width="wrap_content"
                                        android:layout_height="wrap_content"
                                        android:layout_marginLeft="10dp"
                                        android:text="8.3 Baik"
                                        android:textColor="@color/biru_tua"
                                        android:textSize="10sp" />

                                    <TextView
                                        android:id="@+id/textView41"
                                        android:layout_width="wrap_content"
                                        android:layout_height="wrap_content"
                                        android:layout_marginLeft="5dp"
                                        android:text="( dari 8632 review )"
                                        android:textSize="10sp"
                                        android:textStyle="bold" />
                                </LinearLayout>
                            </LinearLayout>


                        </LinearLayout>
                    </LinearLayout>

                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="1000dp"
                    android:background="@color/abu_abu"
                    android:orientation="vertical"
                    android:paddingBottom="1dp">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:background="@color/putih"
                        android:orientation="vertical"
                        android:padding="20dp">

                        <TextView
                            android:id="@+id/textView43"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="5dp"
                            android:layout_marginBottom="5dp"
                            android:text="Fitur"
                            android:textColor="@android:color/black"
                            android:textSize="14sp"
                            android:textStyle="bold" />

                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:layout_marginTop="5dp"
                            android:layout_marginBottom="5dp"
                            android:orientation="horizontal">

                            <LinearLayout
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                android:orientation="vertical">

                                <LinearLayout
                                    android:layout_width="match_parent"
                                    android:layout_height="wrap_content"
                                    android:orientation="horizontal">


                                    <TextView
                                        android:id="@+id/textView42"
                                        android:layout_width="wrap_content"
                                        android:layout_height="wrap_content"
                                        android:text="Konfirmasi Instan"
                                        android:textColor="@color/hijau"
                                        android:textSize="12sp" />
                                </LinearLayout>
                            </LinearLayout>

                        </LinearLayout>

                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="1dp"
                            android:background="@color/abu_abu"
                            android:orientation="vertical"></LinearLayout>

                    </LinearLayout>
                </LinearLayout>
            </LinearLayout>
        </ScrollView>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/tlbar4"
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:background="@color/biru"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_vertical"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/back"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="20dp"
                android:layout_marginRight="10dp"
                android:src="@drawable/ic_arrow_back_black"
                android:tint="@color/putih" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginLeft="7dp"
                android:layout_marginTop="7dp"
                android:layout_marginRight="20dp"
                android:layout_marginBottom="7dp"
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="vertical" />

            <ImageView
                android:id="@+id/imageView15"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginRight="20dp"
                android:tint="@color/putih"
                app:srcCompat="@drawable/ic_bookmark_border_black"
                tools:ignore="VectorDrawableCompat" />

            <ImageView
                android:id="@+id/imageView33"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginRight="20dp"
                android:tint="@color/putih"
                app:srcCompat="@drawable/ic_more_vert_black"
                tools:ignore="VectorDrawableCompat" />

        </LinearLayout>
    </LinearLayout>

</RelativeLayout>

MainActivity.java

Salin dan paste kode dibawah ke MainActivity.java.

package id.kanre.toolbartransparent;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Build;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ScrollView;

public class MainActivity extends AppCompatActivity {

    private ImageView back;
    private ScrollView scrll;
    private LinearLayout tol;
    private int nl = 0;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        getSupportActionBar().hide();
        setContentView(R.layout.activity_main);

        back = findViewById(R.id.back);
        scrll = findViewById(R.id.scrll_post);
        tol = findViewById(R.id.tlbar4);
        tol.getBackground().setAlpha(0);

        AksiScroll();
    }
    private void AksiScroll() {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            scrll.setOnScrollChangeListener(new View.OnScrollChangeListener() {
                @Override
                public void onScrollChange(View v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
                    int op = NilaiAksiScroll(scrollY, 500);
                    tol.getBackground().setAlpha(op);
                }
            });
        }
    }

    public int Bulatkan(double f) {
        int c = (int) ((f) + 0.5f);
        double n = f + 0.5f;
        return (n - c) % 2 == 0 ? (int) f : c;
    }
    public double CariPersen(double b, double a) {
        double hasil = (a/b)*100;
        return hasil;

    }

    public int NilaiAksiScroll(int scrollY, double batas){
        if (scrollY> 0&&scrollY<batas) {
            double c = CariPersen(batas, scrollY);
            int aa = Bulatkan(c);
            double y = (aa/100.0) * 255.0;
            int op = Bulatkan(y);
            nl = op;
        }else if (scrollY>batas){
            nl = 255;
        }else{
            nl = 0;
        }
        return nl;
    }

}

Jalankan Aplikasi

Jalankan dan lihat bagaimana tampilan aplikasi akan tampak seperti pada gambar di bawah.

Penjelasan Kode

private void AksiScroll() {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            scrll.setOnScrollChangeListener(new View.OnScrollChangeListener() {
                @Override
                public void onScrollChange(View v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
                    int op = NilaiAksiScroll(scrollY, 500);
                    tol.getBackground().setAlpha(op);
                }
            });
        }
    }

Kode di atas akan berfungsi ketika aplikasi menjalankan class MainActivity.java, dimana dalam kode tersebut menginstruksikan program apabila scrll melakukan aksi scroll maka ambil nilai scroll dari scrollY dan tentukan kemudia masukkan kedalam method "NilaiAksiScroll()" ditambah batas dari scroll view akan mencapai nilai 100% dalam hal ini "500" sehingga menjadi NilaiAksiScroll(scrollY, 500);. Method "NilaiAksiScroll" kemudian mengembalikan nilai yang di masukkan kedalam variabel op (dalam hal ini tingkat transparansi).

Variabel op inilah yang kemudian digunakan untuk mengatur tingkat transparansi dari tool atau menu, dengan code tol.getBackground().setAlpha(op);. Perlu diperhatikan bahwa sebelumnya tool telah dibuat menjadi transparan dengan menggunakan kode "tol.getBackground().setAlpha(0);".

Perhatian

Kode if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) { menandakan bahwa fungsi tersebut hanya bisa berjalan di android Marshmallow (6.0) atau yang paling terbaru.

Bagikan artikel ke:

Facebook Google+ Twitter