Cara Membuat Aplikasi Kamera Bagian Ketiga - Flash Light - Coding Rakitan


Pada postingan kali ini kita akan melanjutkan postingan sebelumnya Cara Membuat Aplikasi Kamera Bagian Kedua - Capture Image. Postingan sebelumnya kita sudah menambahkan fitur capture image yang membuat kamera dapat menangkap gambar ketika tombol di pencet.

Fitur yang akan kita tambahkan selanjutnya adalah Flash Light atau lampu blitz kamera. Dimana ketika tombol blitz dalam keadaan hidup atau auto maka ketika tangkapan kamera dilakukan, blitz akan menyala.

Langkah pertama :

Pertama-tama izinkan aplikasi untuk mengakses Flash light dengan menambahkan kode berikut kedalam AndroidManifest.xml
 
<uses-permission android:name="android.permission.FLASHLIGHT"/>

Langkah kedua :

Tambahkan ikon Vector Asset berikut kedalam drawable anda dan sesuaikan dengan nama yang ada di gambar. Tidak tahu cara menambahkannya ? silahkan baca postingan Cara Menggunakan Icon Vector Asset bawahan Android Studio



Langkah ketiga :

Edit activity_main.xml seperti berikut.
 
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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/fr_kamera"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/black">

</FrameLayout>

<ImageView
android:id="@+id/img"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="bottom|center_horizontal"
android:layout_marginBottom="30dp"
android:adjustViewBounds="true"
android:onClick="onClick"
android:tint="@android:color/white"
app:srcCompat="@drawable/camera"
tools:ignore="VectorDrawableCompat" />

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:orientation="vertical"
android:padding="5dp">

<ImageView
android:id="@+id/flash"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:onClick="onClick"
android:tag="off"
android:tint="@android:color/white"
app:srcCompat="@drawable/flash_off"
tools:ignore="VectorDrawableCompat" />
</LinearLayout>

<LinearLayout
android:id="@+id/ly"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/black"
android:orientation="vertical"
android:visibility="gone">

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

<ImageView
android:id="@+id/tampil"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="false"
app:srcCompat="@drawable/ic_launcher_background"
tools:ignore="VectorDrawableCompat" />

<ImageView
android:id="@+id/hapus"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_gravity="bottom"
android:layout_margin="20dp"
android:adjustViewBounds="true"
android:onClick="onClick"
android:tint="@android:color/white"
app:srcCompat="@drawable/delete"
tools:ignore="VectorDrawableCompat" />

<TextView
android:id="@+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/transparent"
android:padding="10dp"
android:text="codingrakitan.blogspot.com"
android:textColor="@android:color/white"
android:textSize="12sp" />

</FrameLayout>

</LinearLayout>

</FrameLayout>


Langkah keempat :

Edit class MainActivity.java seperti berikut.
 
public class MainActivity extends AppCompatActivity implements View.OnClickListener {

private FrameLayout fr_kamera;
private SurfaceView sv;
private SurfaceHolder sh;
private Camera cm;
private ImageView tampil;
private LinearLayout ly;
private int HOME = 1;
int flash = 1;
String aksi_flash = "mati";
Camera.Parameters pr;
ImageView iv_flash;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);

fr_kamera = findViewById(R.id.fr_kamera);
tampil = findViewById(R.id.tampil);
iv_flash = findViewById(R.id.flash);
ly = findViewById(R.id.ly);


kameraAktif();


}
@Override
public boolean onKeyDown(int keyCode, KeyEvent event){
if (event.getAction() == KeyEvent.ACTION_DOWN) {
switch (keyCode) {
case KeyEvent.KEYCODE_BACK:
if (HOME==0){
kembaliCamera();
}else{
finish();
}
return true;
}
}
return super.onKeyDown(keyCode, event);
}
public void kembaliCamera(){
ly.setVisibility(View.GONE);
HOME=1;
if (aksi_flash=="hidup"){
flashAktif();
}
cm.startPreview();
}


@Override
public void onClick(View v) {
switch (v.getId()){
case R.id.hapus:
kembaliCamera();
break;
case R.id.img:
ambilGambar();
break;
case R.id.flash:
flash++;
if (flash==1){
iv_flash.setImageResource(R.drawable.flash_off);
flashMati();
aksi_flash = "mati";
}else
if (flash==2){
iv_flash.setImageResource(R.drawable.flash_on);
flashAktif();
aksi_flash = "hidup";
}else
if (flash==3){
iv_flash.setImageResource(R.drawable.flash_auto);
flashAuto();
aksi_flash = "auto";
flash = 0;
}
break;
}

}



private void flashAktif() {
pr = cm.getParameters();
pr.setFlashMode(Camera.Parameters.FLASH_MODE_TORCH);
cm.setParameters(pr);
cm.startPreview();
}

private void flashAuto() {
pr = cm.getParameters();
pr.setFlashMode(Camera.Parameters.FLASH_MODE_AUTO);
cm.setParameters(pr);
cm.startPreview();
}

private void flashMati() {
pr = cm.getParameters();
pr.setFlashMode(Camera.Parameters.FLASH_MODE_OFF);
cm.setParameters(pr);
cm.startPreview();
}

private void kameraAktif() {
sv = new SurfaceView(this);
sh = sv.getHolder();
sh.addCallback(new SurfaceHolderCallback());
fr_kamera.addView(sv);

}

private void ambilGambar() {
if (aksi_flash=="auto"){
flashAuto();
}
cm.takePicture(null, null, jpegCallback);
HOME = 0;

}



Camera.PictureCallback jpegCallback = new Camera.PictureCallback() {
@Override
public void onPictureTaken(byte[] data, Camera camera) {
Bitmap bitmap = BitmapFactory.decodeByteArray(data, 0, data.length);
Matrix matrix = new Matrix();
matrix.postRotate(90);
Bitmap rotateBitmap = Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(), bitmap.getHeight()
, matrix, true);
tampil.setImageBitmap(rotateBitmap);
ly.setVisibility(View.VISIBLE);

}
};



private class SurfaceHolderCallback implements SurfaceHolder.Callback {
@Override
public void surfaceCreated(SurfaceHolder holder) {
cm = Camera.open();
pr = cm.getParameters();
List<Camera.Size> ss = pr.getSupportedPreviewSizes();
Camera.Size pictSize = ss.get(0);
pr.setPictureSize(pictSize.width, pictSize.height);
cm.setParameters(pr);
}

@Override
public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
try {
cm.setDisplayOrientation(90);
cm.setPreviewDisplay(sv.getHolder());
Camera.Parameters parameters = cm.getParameters();
List<Camera.Size> previewSize = cm.getParameters().getSupportedPreviewSizes();
Camera.Size pre = previewSize.get(0);
parameters.setPreviewSize(pre.width, pre.height);

ViewGroup.LayoutParams lp = new FrameLayout.LayoutParams(
ViewGroup.LayoutParams.FILL_PARENT,
ViewGroup.LayoutParams.FILL_PARENT);

sv.setLayoutParams(lp);
cm.setParameters(parameters);
cm.startPreview();
}catch (Exception e){}

}

@Override
public void surfaceDestroyed(SurfaceHolder holder) {
cm.stopPreview();
cm.release();
}
}
}


Pada class di atas kita menambahkan 3 method yang berfungsi untuk mengatur blitz yaitu flashAktif(), flashAuto(), dan flashMati(). Kode yang berfungsi untuk menyalakan flash light adalah "pr.setFlashMode(Camera.Parameters.FLASH_MODE_TORCH);" dimana kode ini menginstruksikan untuk membuat Flash Mode Torch ketika dilakukan tangkapan kamera.


Cara Mengambil data JSON dengan Volley di Android Studio


Volley merupakan sebuah library atau pustaka yang dikembangkan oleh Google untuk membantu para developer Android Studio. Volley ini berfungsi untuk melakukan transaksi HTTP. Transaksi berupa mengirim data POST dan GET dapat dilakukan menggunakan Volley.

Ini tentunya akan memudahkan pengguna dalam mengambil data dari sebuah web service. Untuk dapat menggunakan library ini developer terlebih dahulu harus mengidentifikasikan dependecies untuk mengunduh libarary ini. Caranya dengan menambahkan kode di bawah ini kedalam build.grandle.
 
dependencies{
...
implementation 'eu.the4thfloor.volley:com.android.volley:2015.05.28'
...

}

Karena dalam hal bertransaksi ke halam web diperlukan akses Internet maka, kita perlu menuliskan kode di bawah kedalam AndroidManifest.xml
 
<uses-permission android:name="android.permission.INTERNET"/>

Setiap transaksi yang dilakukan baik itu pengiriman data berupa GET atau POST nantinya akan memberikan respon berupa String.

Data GET

 
String url = "http://codingrakitan.blogspot.com/";

RequestQueue rq = Volley.newRequestQueue(this);
StringRequest sr = new StringRequest(Request.Method.GET, url, new Response.Listener<String>() {
@Override
public void onResponse(String response) {
Log.d("respon", "hasil : "+response);
}
}, new Response.ErrorListener() {
@Override
public void onErrorResponse(VolleyError error) {
Log.d("respon", "error : "+error);
}
});
rq.add(sr);


Data POST

 
String url = "http://codingrakitan.blogspot.com/";
RequestQueue rq = Volley.newRequestQueue(this);
StringRequest sr = new StringRequest(Request.Method.POST, Constants.URL_INSERT, new Response.Listener<String>() {
@Override
public void onResponse(String response) {
Log.d("respon", "hasil : "+response);

}
}, new Response.ErrorListener() {
@Override
public void onErrorResponse(VolleyError error) {
Log.d("error", "isi = "+error.getMessage());
}
}){
@Override
protected Map<String, String> getParams() {
Map<String, String> params = new HashMap<String, String>();
params.put("username", "admin");
params.put("password", "admin");
return params;
}
};
rq.add(sr);

Pada kode di atas di buat untuk mengirimkan data berupa post dengan name "username" dan "password" dengan masing-masing field, valuenya adalah "admin".

Catatan ganti url dengan alamat url web service anda.


Cara Membuat Image View Bulat (Circle Image) dengan Glide di Android Studio


Hai sobat Coding Rakitan ! kali ini kami ingin memberikan sebuah tutorial untu membuat Image View berbentuk bulat atau lebih dikenal dengan nama Circle Image. Untuk membuat Circle Image ada banyak cara yang bisa di tempuh mulai dari manipulasi bitmap menggunakan canvas, menggunakan shape drawable, hingga menggunakan library. Cara yang akan kita gunakan disini yaitu menggunakan library, sebab lebih mudah dan praktis. Bagi pemula juga tidak akan ribet menggunakannya.

Library yang akan kita gunakan adalah Glide, library ini tidak hanya untuk menampilkan image tetapi bisa pula membuat Circle Image. Kelebihan lainnya anda bisa menampilkan image online ataupun offline (langsung dari directory project).

Sebelum kita memulai saya akan memberikan beberapa contoh aplikasi yang menerapkan Circle Image.



Selain aplikasi-aplikasi di atas masih banyak lagi yang menggunakan Circle Image. Untuk hasil dari project yang dibuat pada postingan ini nantinya akan sangat sederhana, bisa anda lihat seperti gambar di bawah.



Langkah 1 : Buat project baru.



Langkah 2 : Import libarary glide dengan memasukkan code berikut ke dalam build.grandle (app module).
 
dependencies {
...
implementation 'com.github.bumptech.glide:glide:4.2.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.2.0'
}

Langkah 3 : Masukkan gambar percobaan kedalam directory drawable dengan nama gambar.jpg (seuai keinginan anda). Berikut adalah contoh gambar yang akan di tampilkan



Langkah 4 : Edit activity_main.xml 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">

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

<ImageView
android:id="@+id/gambar"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginTop="20dp" />
</LinearLayout>

</RelativeLayout>

Langkah 5 : Edit class MainActivity seperti berikut.

 
public class MainActivity extends AppCompatActivity {

private ImageView gambar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
gambar = findViewById(R.id.gambar);
Glide.with(this)
.load(R.drawable.gambar)
.apply(RequestOptions.circleCropTransform())
.into(gambar);

}
}


Penjelasan :

Bagian yang menjadi instruksi untuk menggunakan glide terdapat pada kode :

 
Glide.with(this)
.load(R.drawable.gambar)
.apply(RequestOptions.circleCropTransform())
.into(gambar);

Kode tersebut menginstruksikan gambar yang terdapada di "R.drawable.gambar" untuk di tampilkan kedalam image view dengan bentuk circle dengan menggunakan method "circleCropTransform()". Selain gambar dari directori anda juga bisa menggunakan gambar online dengan cara menuliskan ".load(URL_GAMBAR)", contohnya :

 
Glide.with(this)
.load("http://codingrakitan.blogspot.com/")
.apply(RequestOptions.circleCropTransform())
.into(gambar);




Cara Membuat Aplikasi Kamera Bagian Kedua - Capture Image


Pada postingan pertama dari Cara Membuat Aplikasi Kamera kita sudah membuat aplikasi dan menampilkan kamera preview. Lanjutan dari postingan tersebuat, kita akan membuat tangkapan atau Capture Image.

Aksi yang akan kita masukkan sebagai tambahan adalah Capture Image (tanpa menyimpan gambar), tombol back press yaitu ketika tombol kembali di tekan pada tampilan Capture Image maka camera kembali menampilkan preview, serta tombol Hapus yang fungsinya sama dengan back press.

Selain itu kita akan membuat agar aplikasi nantinya tampil full screen tanpa toolbar.

Tampilan nantinya akan tampak seperti barikut :



Langsung saja ikuti langkah-langkah di bawah ini :

Langkah 1 : Buat dua ikon drawable dengan nama camera dan hapus, anda bisa menggunakan Vector Asset yang disediakan oleh Android Studio. Baca : Cara Menggunakan Icon Vector Asset bawahan Android Studio  

 


Langkah 2 : Edit AndroidManifest.xml dengan kode seperti berikut.
 
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="codingrakitan.blogspot.com.aplikasikamera">

<uses-permission android:name="android.permission.CAMERA"/>

<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/Theme.AppCompat.Light.NoActionBar">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>

</manifest>

Langkah 3 : Edit activity_main.xml dengan kode seperti berikut.
 
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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/fr_kamera"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/black">

</FrameLayout>

<ImageView
android:id="@+id/img"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="bottom|center_horizontal"
android:layout_marginBottom="30dp"
android:adjustViewBounds="true"
android:onClick="onClick"
android:tint="@android:color/white"
app:srcCompat="@drawable/camera"
tools:ignore="VectorDrawableCompat" />

<LinearLayout
android:id="@+id/ly"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/black"
android:orientation="vertical"
android:visibility="gone">

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

<ImageView
android:id="@+id/tampil"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="false"
app:srcCompat="@drawable/ic_launcher_background"
tools:ignore="VectorDrawableCompat" />

<ImageView
android:id="@+id/hapus"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_gravity="bottom"
android:layout_margin="20dp"
android:adjustViewBounds="true"
android:onClick="onClick"
android:tint="@android:color/white"
app:srcCompat="@drawable/delete"
tools:ignore="VectorDrawableCompat" />

<TextView
android:id="@+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/transparent"
android:padding="10dp"
android:text="codingrakitan.blogspot.com"
android:textColor="@android:color/white"
android:textSize="12sp" />

</FrameLayout>

</LinearLayout>

</FrameLayout>

Langkah 4 : Edit class MainActivity dengan kode seperti berikut.

 
public class MainActivity extends AppCompatActivity implements View.OnClickListener {

private FrameLayout fr_kamera;
private SurfaceView sv;
private SurfaceHolder sh;
private Camera cm;
private ImageView tampil;
private LinearLayout ly;
private int HOME = 1;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);

fr_kamera = findViewById(R.id.fr_kamera);
tampil = findViewById(R.id.tampil);
ly = findViewById(R.id.ly);


kameraAktif();

}
@Override
public boolean onKeyDown(int keyCode, KeyEvent event){
if (event.getAction() == KeyEvent.ACTION_DOWN) {
switch (keyCode) {
case KeyEvent.KEYCODE_BACK:
if (HOME==0){
ly.setVisibility(View.GONE);
HOME=1;
}else{
finish();
}
return true;
}
}
return super.onKeyDown(keyCode, event);
}

@Override
public void onClick(View v) {
switch (v.getId()){
case R.id.hapus:
ly.setVisibility(View.GONE);
break;
case R.id.img:
ambilGambar();
break;
}

}

private void kameraAktif() {
sv = new SurfaceView(this);
sh = sv.getHolder();
sh.addCallback(new SurfaceHolderCallback());
fr_kamera.addView(sv);

}

private void ambilGambar() {
cm.takePicture(null, null, jpegCallback);
HOME = 0;
}
Camera.PictureCallback jpegCallback = new Camera.PictureCallback() {
@Override
public void onPictureTaken(byte[] data, Camera camera) {
Bitmap bitmap = BitmapFactory.decodeByteArray(data, 0, data.length);
Matrix matrix = new Matrix();
matrix.postRotate(90);
Bitmap rotateBitmap = Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(), bitmap.getHeight()
, matrix, true);
tampil.setImageBitmap(rotateBitmap);
ly.setVisibility(View.VISIBLE);
cm.startPreview();
}
};



private class SurfaceHolderCallback implements SurfaceHolder.Callback {
@Override
public void surfaceCreated(SurfaceHolder holder) {
cm = Camera.open();
Camera.Parameters parameters = cm.getParameters();
List<Camera.Size> ss = parameters.getSupportedPreviewSizes();
Camera.Size pictSize = ss.get(0);
parameters.setPictureSize(pictSize.width, pictSize.height);
cm.setParameters(parameters);
}

@Override
public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
try {
cm.setDisplayOrientation(90);
cm.setPreviewDisplay(sv.getHolder());
Camera.Parameters parameters = cm.getParameters();
List<Camera.Size> previewSize = cm.getParameters().getSupportedPreviewSizes();
Camera.Size pre = previewSize.get(0);
parameters.setPreviewSize(pre.width, pre.height);

ViewGroup.LayoutParams lp = new FrameLayout.LayoutParams(
ViewGroup.LayoutParams.FILL_PARENT,
ViewGroup.LayoutParams.FILL_PARENT);

sv.setLayoutParams(lp);
cm.setParameters(parameters);
cm.startPreview();
}catch (Exception e){}

}

@Override
public void surfaceDestroyed(SurfaceHolder holder) {
cm.stopPreview();
cm.release();
}
}
}




Sekarang anda tinggal melakukan pengetesan menggunakan emulator atau lebih baiknya menggunakan HP Smartphone langsung, sebab lebih leluasa dalam mengambil gambar.

Lanjut :  Cara Membuat Aplikasi Kamera Bagian Ketiga - Flash Light


Cara Membuat Aplikasi Kamera dengan Android Studio


Pada postingan Cara Membuat Aplikasi Kamera dengan Android Studio ini kita akan membuat aplikasi yang nantinya dapat mengakses perangkat keras android yaitu kamera. Hasil dari aplikasi yang dibuat nantinya akan tampak seperti gambar di bawah.



Aplikasi kamera yang akan dibuat akan sangat sederhana. Hanya akan menampilkan tampilan kamera, dan belum bisa melakukan jepretan gambar. Fungsi jepretan gambar akan di tambahkan pada postingan selanjutnya.

Buat terlebih dahulu project baru dengan format seperti dibawah.



Baca : Cara Membuat Project Baru di Android Studio

Langsung saja untuk membuat aplikasi kamera silahkan ikuti langkah-langkah di bawah ini:

Langkah 1 : Tambah izin menggunakan camera di AndroidManifest.xml

...
<uses-permission android:name="android.permission.CAMERA"/>
...
Langkah 2 : Edit activity_main.xml seperti berikut.
 
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:id="@+id/fr_kamera"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" />

Langkah 3 : Edit class MainActivity seperti berikut.

 
public class MainActivity extends AppCompatActivity {

private FrameLayout fr_kamera;
private SurfaceView sv;
private SurfaceHolder sh;
private Camera cm;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);



fr_kamera = findViewById(R.id.fr_kamera);
sv = new SurfaceView(this);
sh = sv.getHolder();
sh.addCallback(new SurfaceHolderCallback());
fr_kamera.addView(sv);
}

private class SurfaceHolderCallback implements SurfaceHolder.Callback {
@Override
public void surfaceCreated(SurfaceHolder holder) {
cm = Camera.open();
Camera.Parameters parameters = cm.getParameters();
List<Camera.Size> ss = parameters.getSupportedPreviewSizes();
Camera.Size pictSize = ss.get(0);
parameters.setPictureSize(pictSize.width, pictSize.height);
cm.setParameters(parameters);
}

@Override
public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
try {
cm.setDisplayOrientation(90);
cm.setPreviewDisplay(sv.getHolder());
Camera.Parameters parameters = cm.getParameters();
List<Camera.Size> previewSize = cm.getParameters().getSupportedPreviewSizes();
Camera.Size pre = previewSize.get(0);
parameters.setPreviewSize(pre.width, pre.height);

ViewGroup.LayoutParams lp = new FrameLayout.LayoutParams(
ViewGroup.LayoutParams.FILL_PARENT,
ViewGroup.LayoutParams.FILL_PARENT);

sv.setLayoutParams(lp);
cm.setParameters(parameters);
cm.startPreview();
}catch (Exception e){}

}

@Override
public void surfaceDestroyed(SurfaceHolder holder) {
cm.stopPreview();
cm.release();
}
}
}


Jika camera anda orientasinya tidak sesuai dengan yang diharapkan silahkan rubah pada bagian cm.setDisplayOrientation(90); anda bisa menggantinya misalnya 0, 90, 180. Pada bagian tersebut jika tidak sesuai bisa jadi hp anda tegakkan ke atas, tetapi gambar yang tampil malah memanjang ke samping.

Selanjutka kita akan membuat tombol untuk menangkap tangkapan kamera, lanjut di postingan Cara Membuat Aplikasi Kamera Bagian Kedua - Capture Image.


Belajar Dasar C++ - Membuat Input dan Output



Input merupakan proses memasukkan data, sedangkan output adalah proses menampilkan data. Dalam pemrograman input dan output inilah yang menjadi aktivitas utama selain dari proses data.

Dalam C++ kita bisa menggunakan perintah "cout" untuk menampilkan data (output). Sedangkan untuk menampilkan data digunakan perintah "cin". Agar dapat digunakan baik cin ataupun cout diperlukan file header yaitu "<iostream>".

Agar anda tidak pusing ada baiknya kita lakukan langsung dengan cara Praktek.

Pertama : Buat project baru dengan nama coba.cpp  


Kedua : Isi dengan kode seperti berikut.

 


#include <iostream>
using namespace std;

int main() {

string nama;
string alamat;
int stambuk;
string nomor_hp;

cout << "Input Nama : ";
cin >> nama;

cout << "Input Alamat : ";
cin >> alamat;


cout << "Input Stambuk : ";
cin >> stambuk;

cout << "Input Nomor HP : ";
cin >> nomor_hp;

cout << endl;

cout << "Nama : " << nama << endl;
cout << "Alamat : " << alamat << endl;
cout << "Stambuk : " << stambuk << endl;
cout << "Nomor HP : " << nomor_hp << endl;

return 0;
}
Penjelasan Kode :

Pada bagian atas akan di panggil terlebih dahulu file heade yaitu "  #include <iostream>" agar fungsi cout dan cin dapat dijalankan dalam program.

Kemudian di dalam kode main pertama-tama yang harus di lakukan adalah mendeklarasikan variabel seperti di bawah ini :
 
string nama;
string alamat;
int stambuk;
string nomor_hp;

Variabel-variabel tersebut ditujukan untuk menampung data yang di input nantinya, misalnya inputan nama yang anda masukkan akan di tampung kedalam variabel nama bertipe data String.

Kode selanjutnya yaitu :
 
cout << "Input Nama : ";
cin >> nama;

cout << "Input Alamat : ";
cin >> alamat;


cout << "Input Stambuk : ";
cin >> stambuk;

cout << "Input Nomor HP : ";
cin >> nomor_hp;


Kode ini berfungsi menampilkan kata kemudian di ikuti fungsi menginput data sehingga nantinya akan tampak seperti gambar di bawah ini :


Kemudian terdapat kode cout << endl; dimana kode ini berfungsi untuk melakukan enter.

Kode terakhir yaitu :
 
cout << "Nama : " << nama << endl;
cout << "Alamat : " << alamat << endl;
cout << "Stambuk : " << stambuk << endl;
cout << "Nomor HP : " << nomor_hp << endl;

Berfungi untuk menampilkan semua inputan yang telah di input kedalam variabel tadi. Sehingga akhirnya di dapatkan tampilan seperti berikut.





Apa itu Data GET dan POST dalam Dunia WEB

Didalam dunia pemrograman WEB dikenal dua jenis data yang dapat dikirim dari client ke server. Kedua data tersebut adalah GET dan POST.

Perbedaan keduanya cukup mencolok. Jika data GET dikirim dengan mendeklarasikannya kedalam URL seperti "http://codingrakitan.blogspot.com/?data=GET" sedangkan untuk data POST dapat dikirim dengan menggunakan TAG "<form action="url_aksi" method="POST"><input name="data_post" type="input" /></form> " dalam html.

Pengiriman data menggunakan POST inilah yang seringkali di jumpai pada halaman Login. Sedangkan data komunikasi GET biasanya digunakan untuk berpindah alamat.

Untuk mengambil data ini pada bagian server, juga berbeda-beda tergantung bahasa server yang digunakan. Pada PHP instruksi yang digunakan seperti berikut.

POST
 
$data = $_POST['data_post'];

GET
 
$data = $_GET['data'];



Sedangkan pada server menggunakan Node js dengan Express seperti berikut.
POST
 
app.post('url', function (req, res){
var data = req.body.data_post;
})

GET
 
app.get('url', function (req, res){
var data = req.query.data;
})


Cara Menampilkan Gambar dari URL Menggunakan FAN (Fast Android Networking) di Android Studio


FAN sigkatan dari Fast Android Networking merupakan sebuah library yang memungkinkan untuk melakukan aktifitas jaringan dalam Aplikasi Android. FAN di buat di atas lapisan Jaringan OkHttp, dimana library ini bisa melakukan hal seperti mengirim data berupa "GET", "POST", atau bahkan gambar ke Internet. Tidak hanya mengirim FAN juga dapat mengambil data dari Internet.

Jika kalian pernah menggunakan library Volley maka kurang lebih fungsi FAN seperti itu. Hanya saja menurut saya FAN lebih unggul dalam hal mengirim gambar ke Internet atau Web.

Pada postingan kali ini kita akan belajar Cara Menampilkan Gambar dari URL Menggunakan FAN (Fast Android Network) di Android Studio.

Langkah 1 : Tambah library FAN kedalam dependencies build.grandle (Module:app).
 
dependencies {
...
implementasi ' com.amitshekhar.android:android-networking:1.0.2 '
}



Langkah 2 : Tambahkan widget ANImageView di layout anda, kode widgetnya seperti di bawah.

 
<com.androidnetworking.widget.ANImageView
android:id="@+id/gambar"
android:layout_width="match_parent"
android:layout_height="match_parent"/>



Langkah 3 : Buat deklarasi string url dan widget ANImageView pada class anda.
 
public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

String url_gambar = "http://URL_GAMBAR_YANG_AKAN_DITAMPILKAN";
ANImageView img = ly.findViewById(R.id.gambar);
}




Langkah 4 : Tampilkan gambar pada widget.
 
img.setImageUrl(url_gambar);

Langkah 5 : Pastikan izin menggunakan Internet di AndroidManifest.xml.
 
<uses-permission android:name="android.permission.INTERNET"/>


Untuk contoh penerapan FAN ini pada aplikasi dapat anda lihat pada postingan Membuat Card View Seperti Facebook dengan Android Studio

Membuat Tampilan Notifikasi Toolbar di Android Studio


Pada postingan kali ini kita akan membuat ikon vector asset akan menampilkan jumlah notifikasi pada sudut kanannya. Hasil dari tampilan yang akan kita buat nantinya akan tampak seperti gambar di bawah ini.



Untuk membuat tampilan seperti di atas bisa dilakukan dengan memanipulasi layout. Terdapat layout atau widget nantinya yang akan tumpah tindi.

Silahkan buat project baru atau buka project lama yang ingin anda tambahkan notifikasi pada toolbarnya. Saya sendiri membuat project baru dengan konfigurasi seperti pada gambar di bawah ini.



Sebelum membuat tampilan dan koding pada MainActivity terlebih dahulu silahkan buat 2 icon Vector Asset yaitu more, dan notif. Bagi yang belum tahu caranya silahkan baca Cara Menggunakan Icon Vector Asset bawahan Android Studio



 
Setelah itu lanjut ke tahap pengkodean. Silahkan edit file-file dibawah ini sesuai dengan kode di bawahnya.

1. AndroidManifest.xml
 
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="codingrakitan.blogspot.com.notifikasitoolbar">

<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/Theme.AppCompat.Light.NoActionBar">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>

</manifest>


Pada kode di atas yang diganti adalah tema dari AppTheme menjadi Theme.AppCompat.Light.NoActionBar. Hal ini di maksudkan agar nantinya tidak akan muncul toolbar bawahan dari tema.

2. activity_main.xml

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

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/toolbar"
android:minHeight="?attr/actionBarSize"
android:theme="?attr/actionBarTheme"
app:contentInsetStart="0dp">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:padding="10dp">

<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Coding Rakitan"
android:textColor="@android:color/white"
android:textSize="18sp" />

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">

<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:minWidth="35dp">

<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:tint="@android:color/white"
app:srcCompat="@drawable/notif"
tools:ignore="VectorDrawableCompat" />

<LinearLayout
android:id="@+id/ly_notif"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@android:color/holo_red_dark"
android:orientation="vertical"
android:paddingLeft="5dp"
android:paddingTop="3dp"
android:paddingRight="5dp"
android:paddingBottom="3dp"
android:visibility="gone">

<TextView
android:id="@+id/tv_notif"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:textColor="@android:color/white"
android:textSize="10sp"
android:textStyle="bold" />
</LinearLayout>
</FrameLayout>

</LinearLayout>

<ImageView
android:id="@+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:tint="@android:color/white"
app:srcCompat="@drawable/more"
tools:ignore="VectorDrawableCompat" />

</LinearLayout>
</android.support.v7.widget.Toolbar>

</LinearLayout>


3. MainActivity.java


 
public class MainActivity extends AppCompatActivity {

private LinearLayout ly_notif;
private TextView tv_notif;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// jumlah notifikasi
int jumlah = 0;
// tmpilkan jumlah kedalam notifikasi
tampilNotif(jumlah);
}

private void tampilNotif(int i) {
ly_notif = findViewById(R.id.ly_notif);
tv_notif = findViewById(R.id.tv_notif);
if (i>0){
ly_notif.setVisibility(View.VISIBLE);
tv_notif.setText(""+i);
}else{
ly_notif.setVisibility(View.GONE);
tv_notif.setText(""+i);
}
}
}


Pada bagian tampilNotif(jumlah); berfungsi untuk menjalankan method dan mengirim jumlah angka yang akan di tampilkan pada notifikasi. Jika anda mengisinya dengan angka 0 maka notifikasi tidak akan tampil.

4. color.xml
 
<?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="toolbar">#080064</color>
</resources>



Jika sudah selesai melakukan pengeditan silahkan jalankan aplikasi menggunakan emulator atau build langsung ke Smartphone anda menggunakan USB, bila sukses maka anda bisa melihat tampilannya seperti berikut.

Mengenal Apa itu Front End Development, Back End Development, dan Full Stack Development


Bekerja di dunia pemrograman memang sangat menjanjikan. Tidak hanya karena banyaknya perusahaan yang membutuhkan jasa programer, akan tetapi seorang programer juga bisa membangun startup sendiri.

Sebagai seorang pemula dalam dunia pemrograman ada baiknya anda mengetahui 3 jenis pembagian berdasarkan spesialisnya.

Apa saja itu ?

Tiga spesialis yang dimaksud tersebut adalah Front End Development, Back End Development, dan Full Stack Development. Anda bisa memilih spesialis mana yang ingin digeluti.

Front End Development

Front End Development merupakan sebutan bagi mereka yang spesialisnya membangun aplikasi bagian depan atau tampilan yang nantinya akan di lihat oleh User. Bagian ini sangat sensitif dikarenakan user sekarang ini kebanyakan menilai aplikasi dari tampilannya saja.

Semakin cantik tampilan depan maka semakin banyak pula pelanggan yang akan memakai aplikasi anda. Apalagi jika aplikasi yang dibuat ditujukan untuk konsumen yang tidak mengerti pemrograman.

Seorang Front End Development juga harus menguasai bahasa pemrograman. Contohnya dalam dunia pemrograman web, Front End Development harus bisa mengusai html (bahasa untuk membuat kerangka), css (untuk membuat tema tampilan), serta Javascript (untuk membuat tampilan makin hidup).

Back End Development

Back End Development adalah sebutan untuk mereka yang spesialis pada bagian belakang aplikasi. Bagian ini mungkin tidak bisa di nampakkan seperti Front End Development namun menjadi bagian utama untuk menjalankan aplikasi.

Contohnya sederhananya adalah ketika anda melakukan proses login kedalam halaman website, kita tidak akan melihat proses apa yang terjadi hingga kita bisa sampai pada halaman Profile. Di bagian belakang tersebut ada kode dari Back End Development yang menentukan apakah akun kita terdaftar atau tidak, serta mengambil data-data yang akan di tampilkan pada halaman profile.

Seorang Back End Development dalam pemrograman berbasis web harus mampu menguasai bahasa yang berjalan di sisi server contohnya PHP (Hypertext Preprocessor), Javascript. Selain itu mereka haru bisa menguasai database seperti MySQL, MariaDB, MongoDB, dll.

Perusahaan-perusahaan sekarang ini juga menuntut para Back End Development untuk mampu menguasai Framework, hal ini sudah menjadi standar di banyak perusahaan. Salah satu alasannya dikarenakan perkembangan Framework yang terus-menerus, serta unggul dalam segi keamanan.

Full Stack Development

Full Stack Development, dari namanya mungkin kita sudah tahu artinya. Full Stack Development merupakan istilah untuk meraka yang membangun aplikasi dari bagian depan (Front End Development) ataupun bagian belakang (Back End Development).

Jadi Full Stack Development ini bisa di katakan sebagai gabungan dari Front End Development dan Back End Development. Salah satu keuntungan menjadi Full Stack Development adalah anda dapat memabangun aplikasi sendiri tanpa bantuan tim meskipun ini tentunya akan lebih berat untuk sebagian orang.

Mengenal Apa itu Android Studio


Android Studio merupakan tools IDE (Integrated Development Environment) yang digunakan untuk membuat aplikasi android. Fungsi utamanya adalah sebagai editor yang menyediakan berbagai kebutuhan dalam membangun aplikasi android seperti widget, library, dll.

Android Studio versi terbaru telah mendukung 2 bahasa pemrograman yaitu Java dan Kotlin. Sebelumnya hanya mendukung bahasa Java.

Android Studio hadir sebagai pengganti Eclipse ADT (Android Development Tools) yaitu tools utama sebelumnya. Tools Android Studio ini dibangun di atas aplikasi yang sudah populer sebagai editor programer yaitu JetBrains IntelliJ IDE. Selain itu Android Studio di lengkapi dengan Emulator sendiri.

Sama halnya seperti Eclipse, Android Studio juga memerlukan SDK (Software Development Kit) untuk membangun aplikasi android. Bedanya Android Studio didukung penuh oleh Google sebagai pengembangnya serta menggunakan grandle dalam melakukan build.

Baca juga : Perbedaan Membuat Aplikasi Android Menggunakan Eclipse dengan Android Studio

Tools ini di umumkan pertama kali pada tanggal 16 Mei 2013 di Google I/O conference, dimana pada saat itu masih dalam tahap review versi 0.1. Sedangkan versi betanya yaitu versi 0.8 baru dirilis pada Juni 2014.

Untuk versi stabilnya sendiri yaitu versi 1.0 dirilis pada Desember 2014. Google bersama dengan JetBrains sebagai pengembang Android Studio tidak hentinya melakukan update pada Android Studio, semua itu untuk semakin mempermudah para development android studio dalam membuat aplikasi android. Terbukti dengan rajinnya update pada Android Studio baik pada komponen-komponen pendukung, hingga pada tools itu sendiri. Sampai tulisan ini dibuat versi terbaru dari Android Studio adalah versi 3.5.1.


Struktur Android Studio

Android Studio memiliki 3 struktur utama yang harus diketahui oleh pengguna baru. Tiga struktur utama itu adalah manifests, java, dan res.

Manifests : Berisi file AndroidManifest.xml dimana dalam file ini diataur perizinan untuk mengakses perangkat pada android seperti camera, internet, memory, dan lain-lain. Selain itu manifets juga mengatur class activity mana yang pertama kali akan di eksekusi saat aplikasi di buka.

Java : Berisi file java yang merupakan kode sumber yang akan di eksekusi oleh program android. Disinilah diatur layout apa yang akan di tampilkan, serta activity apa yang akan dijalankan.

Res: Berisi semua source non-kode seperti layout, ikon, color, dan gambar bitmap.

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.