KetikanMD kembali lagi dengan tutorial membuat backdrop layout pada android studio.....seperti judulnya kali ini kita akan mencoba untuk mengimplementasikan material design android yaitu Backdrop Layout....backDrop layout terdiri dari dua permukaan yaitu lapisan belakang dan lapisan depan. Lapisan belakang menampilkan tindakan dan konteks, dan lapisan depan mengontrol dan menginformasikan konten.untuk lebih jelas nya bisa baca artikel di link berikut
https://material.io/components/backdrop/
ok tidak perlu lama.....pertama tama buatlah project baru dan disini kita asumsikan teman teman sudah bisa membuat project baru di Android Studio...kalau belum bisa,silahkan cari tutorialnya di google hehe
contoh tampilan yang akan kita buat seperti ini:
pertama kita akan masukkan kebutuhan icon untuk menu item dengan cara klik kanan pada drawable lalu pilih New->Vektor Asset dan pilih icon sesuai keinginan...disini kita membutuhkan dua asset,masing masing diberi nama ic_close dan ic_pilih.
seperti kita ketahui backDrop Layout terdiri dari 2 lapisan yaitu lapisan depan dan belakang,maka dari itu kita akan buat 2 layout untuk lapisan depan dan belakang,dengan cara klik kanan pada folder layout lalu pilih New->Layout resource file,untuk layout pertama kita kasih nama back_layout.xml dan untuk layout kedua kasih nama front_layout.xml.
adapun isi layout back_layout.xml seperti code dibawah
<?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"
android:background="@color/colorPrimary">
<RadioGroup
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingHorizontal="20dp"
android:paddingVertical="10dp">
<RadioButton
android:id="@+id/rb_ya"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:buttonTint="@android:color/white"
android:textColor="@android:color/white"
android:text="YA" />
<RadioButton
android:id="@+id/rb_tidak"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:buttonTint="@android:color/white"
android:textColor="@android:color/white"
android:text="TIDAK"/>
</RadioGroup>
</LinearLayout>
agar front_layout.xml memiliki corner radius pada sudut kiri dan kanan atas kita buat backgroundnya dengan cara kilik kanan pada drawable lalu pilih New->Drawble resource file dan berikan nama layout_bg.xml dan masukkan kode dibawah ini kedalam file drawalbe yang kita buat tadi.
| <?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFF" />
<corners
android:topLeftRadius="35dp"
android:topRightRadius="35dp" />
</shape>
|
adapun isi layout front_layout.xml seperti code dibawah
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:id="@+id/front_layout"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/layout_bg">
<TextView
android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ketikan MD"
android:textColor="@android:color/black"
android:textSize="24dp"
android:layout_centerInParent="true"/>
</RelativeLayout>
untuk code layout activity_main.xml seperti dibawah
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
android:background="@color/colorPrimary"
tools:context=".MainActivity">
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimary"
android:fitsSystemWindows="false"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:contentInsetStartWithNavigation="0dp"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="@layout/back_layout"/>
<include layout="@layout/front_layout"/>
</RelativeLayout>
</LinearLayout>
Selanjutnya buat menu item didalam Directory menu (jika directory menu belum ada pada directory res, silahakan buat directory nya dengan cara klik kanan pada directory res lalu pilih new-> Directory lalu masukkan nama direktorinya) klik kanan directory menu lalu pilih new->Menu resource file dan berikan nama menu_item.xml. Masukkan kode dibawah kedalam menu_item.xml
<?xml version="1.0" encoding="utf-8"?>
<menu 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"
tools:context=".MainActivity">
<item
android:id="@+id/action_pilih"
android:orderInCategory="300"
android:title="Pilih"
android:icon="@drawable/ic_pilih"
app:showAsAction="ifRoom"/>
</menu>
lanjut ke file java MainActivity.java masukkan kode dibawah
package com.ketikanmd.backdrop;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import androidx.core.content.ContextCompat;
import android.animation.ValueAnimator;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.animation.TranslateAnimation;
import android.widget.LinearLayout;
import android.widget.RadioButton;
import android.widget.RelativeLayout;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
private Toolbar toolbar;
private RelativeLayout frontLayout;
private LinearLayout backLayout;
private TextView textView;
private RadioButton rbYa,rbTidak;
private RelativeLayout.LayoutParams lp;
MenuItem itemCheck;
boolean showBackLayout = false;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar=findViewById(R.id.toolbar);
frontLayout = findViewById(R.id.front_layout);
backLayout = findViewById(R.id.back_layout);
textView = findViewById(R.id.text);
rbYa = findViewById(R.id.rb_ya);
rbTidak = findViewById(R.id.rb_tidak);
setSupportActionBar(toolbar);
initListener();
}
private void initListener(){
rbYa.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
textView.setText("Anda pilih ya");
}
});
rbTidak.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
textView.setText("Anda pilih tidak");
}
});
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_item, menu);
itemCheck=menu.findItem(R.id.action_pilih);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
if (id == R.id.action_pilih) {
dropLayout();
return true;
}
return super.onOptionsItemSelected(item);
}
private void dropLayout() {
showBackLayout = !showBackLayout;
itemCheck.setIcon(ContextCompat.getDrawable(MainActivity.this, showBackLayout ? R.drawable.ic_close : R.drawable.ic_pilih));
lp = (RelativeLayout.LayoutParams) frontLayout.getLayoutParams();
if (showBackLayout) {
ValueAnimator varl =ValueAnimator.ofInt(backLayout.getHeight());
varl.setDuration(100);
varl.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
lp.setMargins(0, (Integer) animation.getAnimatedValue(), 0, 0);
frontLayout.setLayoutParams(lp);
}
});
varl.start();
}else {
lp.setMargins(0, 0, 0, 0);
frontLayout.setLayoutParams(lp);
TranslateAnimation anim = new TranslateAnimation(0, 0, backLayout.getHeight(), 0);
anim.setStartOffset(0);
anim.setDuration(200);
frontLayout.startAnimation(anim);
}
}
}
terakhir masuk ke directory values->styles.xml dan pastikan codenya seperti dibawah:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
</resources>
jika semua langkah sudah diikuti,jalankan aplikasi dan lihat hasilnya........
untuk lebih lajut silahkan ambil source code nya di github
klik disini
Sekian tutorial cara membuat backDrop layout pada android studio,cukup mudah kan teman teman......silahkan dikembangkan sesuai kebutuhan
![download[4]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTjZWlrnTT40NYgU5ucxBcWq4Db0jd3Z_Qu0b1sVVUgCPCBfnHdqNMlt5-L3bxn9E33wx5tPnVvzHs0GIV-89ia608LkxlSBgMJJRlZ7ov1XpIMz4tSTcbXwbqKmsAxS15YFFOifxfYa4/w1274-h428-o-k/download+button+ungu+.png)
