Langsung ke konten utama

Membuat Background Tools Auto Show Ketika ScrollView di Scroll


 

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.

Komentar

Postingan populer dari blog ini

Inilah Kelebihan dan Kekurangan Ruby

Ruby merupakan salah satu bahasa pemrograman berorientasi objek berbasis skrip yang dikembangkan oleh Yukihiro Matsumoto yaitu seorang programer asal Jepang. Untuk mengetahui lebih jauh tentang bahasa Ruby silahkan baca postingan sebelumnya : Mengenal Bahasa Pemrograman Ruby  Sesuai judul postingan kali ini kita hanya akan membahas mengenai Kelebihan serta Kekurangan Bahasa Pemrograman Ruby. Berikut beberapa point yang telah kami jabarkan. Kelebihan Bahasa Pemrograman Ruby 1. Kode sederhana  Dibandingkan dengan bahasa pemrograman lainnya, yang kebanyakan untuk menulis kode dibutuhkan sekitar 10 baris, pada Ruby hanya butuh 1 atau 2 baris. Inilah kenapa Ruby dikatakan memiliki kode yang sederhana. Karena kesederhanaan dalam kodenya, akan mengurangi jam kerja programmer. 2. Multi-platform Ruby dapat berjalan di berbagai sistem operasi seperti Mac, Windows, hingga Linux. 3. Tingkat kebebasan yang tinggi Salah satu bentuk kebebasan programer dalam menuliska kode Ruby seperti tidak...

Cara Mengamankan Aplikasi Android dengan Proguard di Android Studio

Keamanan suatu aplikasi merupakan sebuah kebutuhan utama yang harus dipenuhi sebelum dapat dirilis ke public. Aplikasi dengan keamanan yang rendah akan mengundang banyak masalah dikemudian hari. Salah satu kelemahan aplikasi android yang dibangun menggunakan Android Studio adalah proses decompile atau bahasa kasarnya membongkar apk yang sudah jadi sangat mudah. Bahkan orang awam dalam pemrograman sekalipun dapat melakukannya dikarenakan adanya tools yang menyediakan fitur decompile ini. Salah satu tools yang biasa digunakan adalah jadx (Harap tidak menggunakannya untuk merugikan orang lain). Membuat aplikasi bebas dari proses decompile tidak bisa dihindari akan tetapi kita bisa melindungi kode hasil decompile agar tidak mudah dibaca oleh orang lain. Meskipun orang lain bisa membongkar aplikasi tersebut, mereka tidak akan mudah untuk melakukan modifikasi ataupun menemukan apa yang mereka cari. Alih alih menemukan apa yang dicari mereka akan merasa pusing dan membatalkan niatnya. Tetapi ...

Apa Sih Itu Svelte Js? Bagaimana Cara Menjalankannya? Yuks Simak Pembahasan Berikut Ini

(Sumber : Website https://svelte.dev/)   Hallo Sahabat Coders, Semoga kita semua selalu diberikan Kesehatan dan keberlimpahan dalam pekerjaan atau usaha kita. Perkembangan dunia pemrograman semakin hari semakin menjadi-jadi. Banyak Bahasa pemrograman maupun framework baru bermunculan akhir-akhir ini. Terutama framework JavaScript yang yang banyak bermunculan. Dan semuanya sangat menarik untuk dicoba.  Framework JavaScript yang terkenal saat ini contohnya Angular JS, Vue JS, React JS dan lain sebagainya dan mungkin banyak orang sudah tahu tentang framework- framework ini. Namun, akhir-akhir ini, ada framework yang baru terkenal yaitu Svelte JS (Website : https://svelte.dev/ ). Framework ini Admin tahu dari seorang JavaScript Developer terkenal di Indonesia yaitu Mas Riza Fahmi ( Curriculum Director di Hacktiv8 Indonesia ). Svelte Js merupakan sebuah framework JavaScript untuk menulis komponen antarmuka ( user interface) yang dibuat oleh Rich Harris . Namun menurut penulisn...