Halloo.. Ini kedua kalinya saya membuat postingan di blog ini mengenai aplikasi Android. Pada kesempatan ini saya ingin berbagi tips untuk membuat user interface Tab View yang berisi tiga fragment, dan aplikasi kamera sederhana. Berikut adalah langkah-langkahnya.
Pertama, buat project baru, misalnya dengan nama UIDemo. Jika teman-teman masih lupa bagaimana cara membuat project bisa lihat postingan saya yang Membuat Aplikasi Helloworld yang sudah pernah saya jelaskan sebelumnya.
Setelah selesai, kita buat beberapa string yang dibutuhkan dalam aplikasi yang akan kita buat. Buka folder res > values > strings.xml kemudian tambahkan beberapan string yang nantinya kita butuhkan.
Setelah itu, kita mulai mengatur tampilan awal dari aplikasi ini. Buka folder res > layout > activity_main.xml. Di dalam tampilan awal ini saya menambahkan sebuah textview yang berisi nama saya, dan dua buah button vertikal. Button pertama yang akan mengarah ke halaman Tab View, dan button kedua untuk yang mengarah ke aplikasi kamera.
Kemudian buka folder src > com.uidemo (sesuai nama package) > MainActivity.java untuk menambah / mengatur method-method apa yang diperlukan di halaman utama. Dalam method onCreate kita menggunakan activity_main untuk view-nya dengan menggunakan setContentView. Lalu kita tambahkan aksi untuk kedua button tadi. Button pertama yang mengarah ke id buttontab (untuk tab view) dan button kedua mengarah ke id buttoncam (untuk aplikasi kamera).
Selanjutnya kita buka file AndroidManifest.xml lalu kita tambahkan feature untuk kamera dan permission untuk mengakses kamera dan memori penyimpanan untuk menyimpan foto. Selain itu kita juga tambahkan activity untuk tab view dan aplikasi kamera.
Langkah selanjutnya adalah membuat activity untuk Tab View. Kita buat 4 class baru, yaitu ActivityTwo untuk halaman dasar tab view, dan 3 class baru untuk fragment-nya, yaitu FragmentOne, FragmentTwo, FragmentThree. Jadi nantinya kita akan ada 3 halaman tab dalam ActivityTwo. Caranya klik kanan pada com.uidemo (sesuai nama package) > New > Class.
Selain itu, kita juga perlu membuat sebuah layout baru untuk layout dari activity tersebur, saya beri nama main_two.xml. Cara membuatnya, buka folder res > layout > klik kanan > New > Android XML File. Selanjutnya saya tambahkan 3 gambar dalam folder res > drawable-hdpi yaitu :
 |
| naruto.jpg |
 |
| naruto2.jpg |
 |
| background.jpg |
Gambar backgroud.jpg saya gunakan untuk background-nya, gambar naruto.jpg untuk tab yang kedua, naruto2.jpg untuk tab yang ketiga.
Sekarang kita akan mengisi layout main_two.xml. Disini saya beri nama id main_two_layout dan background-nya dengan gambar background.jpg yang sudah ditambahkan tadi.
Selanjutnya kita edit file FragmentOne.java. Dalam fragment ini saya membuat tampilan berupa list view.
Kemudian kita edit file Fragment kedua. Dalam fragment ini saya membuat tampilan berupa grid view. Untuk itu kita perlu membuat layout grid view terlebih dahulu. Dalam grid view yang saya buat mempunyai horizontal dan vertikal spacing 5dp, jumlah kolom 4, dan saya beri nama id mainGrid.
Setelah itu baru kita edit FragmentTwo.java. Dalam fragment ini saya menggunakan tampilan grid view untuk gambar naruto.jpg dengan jumlah gambar yang saya tampilkan adalah 40 gambar.
Selanjutnya kita edit FragmentThree.java. Dalam fragment ini saya
menggunakan tampilan gambar ukuran asli untuk gambar naruto2.jpg.
Sekarang kita tinggal menjadikan ketiga fragment tersebut kedalam tampilan tab pada file ActivityTwo.java.
Nah sekarang bagian halaman fragment tab sudah selesai. sekarang kita buat aplikasi kameranya. Buat class baru dengan nama CaptureImage.java dan CameraPreview.java, kemudian buat sebuah layout baru dengan nama camera.xml.
Class CaptureImage.java digunakan untuk menjalankan aplikasi kamera buatan kita sendiri (bukan aplikasi bawaan dari smartphone).
package com.uidemo;
import java.io.File;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import android.app.Activity;
import android.hardware.Camera;
import android.hardware.Camera.PictureCallback;
import android.os.Bundle;
import android.os.Environment;
import android.provider.MediaStore;
import android.view.View;
import android.widget.Button;
import android.widget.FrameLayout;
public class CaptureImage extends Activity {
private Camera mCamera;
private CameraPreview mPreview;
public static final int MEDIA_TYPE_IMAGE = 1;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.camera);
Button captureButton = (Button) findViewById(R.id.btn_capture);
System.out.println("Starting!");
// Create an instance of Camera
mCamera = getCameraInstance();
// Create our Preview view and set it as the content of our activity.
mPreview = new CameraPreview(this, mCamera);
FrameLayout preview = (FrameLayout) findViewById(R.id.preview_cam);
preview.addView(mPreview);
final PictureCallback mPicture = new PictureCallback() {
public void onPictureTaken(byte[] data, Camera camera) {
File pictureFile = getOutputMediaFile(MEDIA_TYPE_IMAGE);
if (pictureFile == null){
return;
}
try {
FileOutputStream fos = new FileOutputStream(pictureFile);
fos.write(data);
fos.close();
MediaStore.Images.Media.insertImage(getContentResolver(),
pictureFile.getAbsolutePath(), pictureFile.getName(),
pictureFile.getName());
} catch (FileNotFoundException e) {
} catch (IOException e) {
}
}
};
// Add a listener to the Capture button
captureButton.setOnClickListener(
new View.OnClickListener() {
public void onClick(View v) {
// get an image from the camera
System.out.println("Photo Taking!");
mCamera.takePicture(null, null, mPicture);
}
}
);
}
/** A safe way to get an instance of the Camera object. */
public static Camera getCameraInstance(){
Camera c = null;
try {
c = Camera.open(); // attempt to get a Camera instance
}
catch (Exception e){
// Camera is not available (in use or does not exist)
}
return c; // returns null if camera is unavailable
}
@Override
protected void onPause() {
super.onPause();
releaseCamera();
}
private void releaseCamera(){
if (mCamera != null){
mCamera.release();
mCamera = null;
}
}
/** Create a File for saving an image or video */
private File getOutputMediaFile(int type){
// To be safe, you should check that the SDCard is mounted
// using Environment.getExternalStorageState() before doing this.
File mediaStorageDir = new File(Environment.getExternalStoragePublicDirectory(
Environment.DIRECTORY_PICTURES), "kamera UIDemo");
if (! mediaStorageDir.exists()){
if (! mediaStorageDir.mkdirs()){
return null;
}
}
// Create a media file name
String timeStamp = new SimpleDateFormat("yyyyMMdd_HHmmss").format(new Date());
File mediaFile;
if (type == MEDIA_TYPE_IMAGE){
mediaFile = new File(mediaStorageDir.getPath() + File.separator ita edit
"IMG_"+ timeStamp + ".jpg");
} else {
return null;
}
return mediaFile;
}
}
Selanjutnya kita edit class CameraPreview.java untuk melihat preview dari hasil fotonya.
package com.uidemo;
import java.io.IOException;
import android.content.Context;
import android.hardware.Camera;
import android.util.Log;
import android.view.SurfaceHolder;
import android.view.SurfaceView;
public class CameraPreview extends SurfaceView implements SurfaceHolder.Callback {
private SurfaceHolder mHolder;
private Camera mCamera;
public CameraPreview(Context context, Camera camera) {
super(context);
mCamera = camera;
mHolder = getHolder();
mHolder.addCallback(this);
}
public void surfaceCreated(SurfaceHolder holder) {
try {
mCamera.setPreviewDisplay(holder);
mCamera.startPreview();
} catch (IOException e) {
Log.d("CameraPreview", "Error setting camera preview: " + e.getMessage());
}
}
public void surfaceDestroyed(SurfaceHolder holder) {
// empty. Take care of releasing the Camera preview in your activity.
}
public void surfaceChanged(SurfaceHolder holder, int format, int w, int h) {
if (mHolder.getSurface() == null){
// preview surface does not exist
return;
}
// stop preview before making changes
try {
mCamera.stopPreview();
} catch (Exception e){
// ignore: tried to stop a non-existent preview
}
try {
mCamera.setPreviewDisplay(mHolder);
mCamera.startPreview();
} catch (Exception e){
Log.d("CaameraPreview", "Error starting camera preview: " + e.getMessage());
}
}
}
Langkah terakhir adalah mengedit camera.xml untuk layout kameranya.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<FrameLayout
android:id="@+id/preview_cam"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
/>
<Button
android:id="@+id/btn_capture"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/btn_cam"
android:layout_gravity="center"
/>
</LinearLayout>
Nah sekarang aplikasi kita sudah jadi. Sekarang kita coba jalankan. Untuk hasil yang lebih optimal sebaiknya langsung dicoba jalankan di smartphone teman-teman. Saya coba jalankan di tablet saya hasilnya seperti ini.
gan, minta source code lengkapnya dong. ana mau pelajarin
BalasHapus