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><?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.
