Cara Membuat Pop Up View Seperti Whatsapp di Android Studio

Hai sobat Coding Rakitan, kali ini saya ingin berbagi Cara Membuat Pop Up View Seperti Whatsapp di Android Studio. Hasil dari pembuatan nantinya akan tampak seperti gambar di bawah.

Cara kerjanya, ketika button di klik maka muncul pop up. Terlebih dahulu silahkan buat project baru atau buka project lama yang sudah pernah dibuat.

Setelah project terbuka, langkah pertama adalah menyiapkan ikon vector yang nantinya akan digunakan silahkan lihat gambar dibawah. Bagi yang belum tahu cara menambah ikon vector silahkan baca Cara Menggunakan Icon Vector Asset bawahan Android Studio.

Anda bisa menyesuaikan dengan ikon yang ingin anda tampilkan. Selain ikon vector, masukkan pula gambar yang akan di uji coba pada pop up ke directory drawable. Nantinya directory drawable akan menampung gambar dan icon seperti berikut.

Langkah-langkah Membuat Pop Up View Seperti Whatsapp

Isi value -> colors.xml seperti kode 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">#9C000000</color>
    <color name="transparan2">#81000000</color>
    <color name="hijau">#009022</color>
    <color name="biru">#0A016A</color>
</resources>

Edit layout activity_main.xml dengan code seperti berikut.

<?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"
    tools:context=".MainActivity">

    <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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

            <TextView
                android:id="@+id/textView2"
                android:layout_width="300dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginBottom="20dp"
                android:gravity="center"
                android:text="Silahkan klik tombol di bawah ini untuk menampilkan pop up view"
                android:textColor="@android:color/holo_green_dark" />

            <Button
                android:id="@+id/button"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="Pop Up" />
        </LinearLayout>

    </FrameLayout>
</RelativeLayout>

Buat layout baru dengan nama pop_up_view.xml lalu copy kode dibawah ini kedalam file tersebut.

<?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:background="@color/transparan">

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

        <LinearLayout
            android:id="@+id/ly_batal"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"></LinearLayout>

        <LinearLayout
            android:id="@+id/ly_pop_up"
            android:layout_width="310dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal|top"
            android:layout_margin="30dp"
            android:orientation="vertical">

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

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

                    <ImageView
                        android:id="@+id/imageView5"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:scaleType="fitXY"
                        app:srcCompat="@drawable/gambar_coba" />

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:background="@color/transparan2"
                        android:orientation="vertical"
                        android:paddingLeft="5dp"
                        android:paddingTop="10dp"
                        android:paddingBottom="10dp">

                        <TextView
                            android:id="@+id/textView"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:text="Coding Rakitan"
                            android:textColor="@android:color/white" />
                    </LinearLayout>
                </FrameLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@android:color/white"
                    android:orientation="horizontal"
                    android:padding="10dp">

                    <ImageView
                        android:id="@+id/chat"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:tint="@color/hijau"
                        app:srcCompat="@drawable/chat"
                        tools:ignore="VectorDrawableCompat" />

                    <ImageView
                        android:id="@+id/call"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:tint="@color/hijau"
                        app:srcCompat="@drawable/phone"
                        tools:ignore="VectorDrawableCompat" />

                    <ImageView
                        android:id="@+id/video"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:tint="@color/hijau"
                        app:srcCompat="@drawable/video"
                        tools:ignore="VectorDrawableCompat" />

                    <ImageView
                        android:id="@+id/info"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:tint="@color/hijau"
                        app:srcCompat="@drawable/info"
                        tools:ignore="VectorDrawableCompat" />

                </LinearLayout>
            </LinearLayout>
        </LinearLayout>
    </FrameLayout>

</LinearLayout>

Buat Class baru dengan nama PopUp.java. Lalu isi dengan kode di bawah ini.

class PopUp implements View.OnClickListener {
    private LayoutInflater inf;
    private Context context;
    private Boolean POP_BATAL = true;

    public PopUp(Context context, LayoutInflater inf) {
        this.context = context;
        this.inf = inf;
    }

    public void tampilPopUp(final FrameLayout content) {
        final View v = inf.inflate(R.layout.pop_up_view, null);
        content.addView(v);
        LinearLayout batal = v.findViewById(R.id.ly_batal);
        LinearLayout ly = v.findViewById(R.id.ly_pop_up);

        ImageView chat = v.findViewById(R.id.chat);
        ImageView call = v.findViewById(R.id.call);
        ImageView video = v.findViewById(R.id.video);
        ImageView info = v.findViewById(R.id.info);

        batal.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View vv) {
                if (POP_BATAL == true){
                    Log.d("batal", "klik");
                    content.removeView(v);
                }else{
                    POP_BATAL = true;
                }
            }
        });
        ly.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View vv) {
                POP_BATAL = false;
            }
        });
        chat.setOnClickListener(this);

    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.chat:
//              aksi ketika tombol chat di klik
                Log.d("klik", "chat");
                break;
            case R.id.call:
//              aksi ketika tombol call di klik
                Log.d("klik", "call");
                break;
            case R.id.video:
//              aksi ketika tombol video di klik
                Log.d("klik", "video");
                break;
            case R.id.info:
//              aksi ketika tombol info di klik
                Log.d("klik", "info");
                break;
        }
    }
}

Lanjut ke tahap menampilkan Pop Up ketika tombol button di klik. Caranya edit class MainActivity anda seperti berikut.

public class MainActivity extends AppCompatActivity {

    private FrameLayout content;
    private Button bt;
    private Context context;
    private LayoutInflater inf;
    private PopUp popUp;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        content = findViewById(R.id.content);
        bt = findViewById(R.id.button);
        context = this;
        inf = (LayoutInflater) getSystemService(this.LAYOUT_INFLATER_SERVICE);
         popUp = new PopUp(context, inf);

        bt.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                popUp.tampilPopUp(content);
            }
        });


    }

}

Terakhir silahkan jalankan dengan emulator atau USB debug untuk melihat hasilnya.

Panduan Rinci Cara Membuat Website

Website adalah suatu kumpulan halaman berbentuk digital yang dapat diakses menggunakan perangkat lunak yang disebut Browser, dengan bantuan jaringan Internet. Penjelasan mengenai apa itu website telah dijelaskan sebelumnya di dalam postingan : Mengenal Apa Itu Web dan Hal yang Perlu di Perhatikan dalam Membangun Web . Didalam postingan tersebut sudah dijelaskan apa saja yang perlu diperhatikan dalam pembuatan web atau website. Selanjutnya pada postingan ini akan dijelaskan secara rinci bagaimana cara membuat sebuah website. Sebelum membuat sebuah website anda harus memutuskan terlebih dahulu akan membuat website seperti apa. Jika anda sudah menentukan tema web anda sekarang anda perlu menentukan aplikasi apa yang ingin anda gunakan. Apakah anda akan membuatnya secara native, menggunakan framework, atau menggunakan CMS. Pada postingan ini yang dijelaskan adalah langkah-langkah membuat sebuah website baik secara native, framework, ataupun menggunkan CMS. Silahkan anda simak langkah demi ...

Baca selengkapnya

technotechno

Cari Blog Ini