membuat backdrop layout menggunakan android studio (material Design)

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 demonya silahkan klik disini 

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