Cara Membuat Pop Up View Seperti Whatsapp di Android Studio

Berita Anda on

Tuesday, October 15, 2019

Berita Anda, Halo Pengunjung blog dimanapun anda berada semoga kalian tetap dalam keadaan sehat, saat ini anda sedang membaca Artikel dengan judul Cara Membuat Pop Up View Seperti Whatsapp di Android Studio, semoga bermanfaat dan selamat membaca

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.

Labels: Android_Studio

Thanks for reading Cara Membuat Pop Up View Seperti Whatsapp di Android Studio. Please share...!