Tutorial Membuat Aplikasi Mobile Dengan Camera dan Tab Bar

Tutorial kali ini akan membahas bagaimana membuat aplikasi mobile yang dapat memanfaatkan fungsi kamera dan memiliki tab bar...

BUAT MENU UTAMA

Konsep dari aplikasi ini adalah adanya 2 tombol di menu utama. Tombol pertama akan mengarahkan user ke halaman dengan tab bar. Tombol kedua  akan mengarahkan user ke halaman aplikasi camera. Maka, harus dibuat menu utamanya dahulu. Prosesnya adalah sebagai berikut....

1. Buat Android Application Project baru.

2. Buka file activity_main.xml dan ganti coding yang ada menjadi seperti berikut....

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent" >

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:orientation="vertical" >

        <Button

            android:id="@+id/TabMenuBtn"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:onClick="changeActivity"

            android:text="@string/Tab_Menu" />

        <Button

            android:id="@+id/CameraMenuBtn"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:onClick="changeActivity"

            android:text="@string/Camera_Menu" />

    </LinearLayout>

</ScrollView>

 3. Kembali pada file MainActivity.java, tambahkan coding berikut....

public void changeActivity(View v) {

Intent it = null;

if (findViewById(R.id.TabMenuBtn) == v) {

it = new Intent(this, TabMenu.class);

}

else{

it = new Intent(this, CameraMenu.class);

}

startActivity(it);

}

4. Buka file strings.xml yang terdapat di res\values\strings.xml. Tambahkan coding berikut....

<string name="Tab_Menu">Tab Menu</string>

<string name="Camera_Menu">Camera Menu</string>

5. Save semua file dan pastikan tidak ada error.





BUAT ACTIVITY TAB MENU

1. Setelah selesai dengan menu utama, berikutnya membuat activity tab menu. Klik kanan pada package yang terdapat di folder src, lalu pilih New -> Other...
Bila bingung, lihat contoh gambar dibawah ini...

2. Pilih Android Activity lalu klik Next.

3. Klik next 2x. Ganti "Activity Name" menjadi TabMenu. Lalu klik Finish.

4. Sebelumnya, persiapkan dulu file-file fragmentnya. Klik kanan pada folder src. Pilih New -> Package.

5. Ganti namenya menjadi com.example.fragments lalu klik Finish.

6. Konsep Tab Menu ini adalah pada satu halaman terdapat 3 tombol. Bila menekan tombol, content yang ditampilkan akan berubah-ubah sesuai dengan tombol yang ditekan. Content-content tersebut adalah fragment dan akan digabungkan ke dalam layout dari Tab Menu. Sebelumnya, perlu dibuat 3 tombol dahulu. Buka file activity_tab_menu.xml di folder res\layout\activity_tab_menu.xml. Ganti codingnya menjadi seperti berikut...

<RelativeLayout 

    xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:background="#fff">

      <LinearLayout

      android:id="@+id/btn"

      android:layout_width="match_parent"

      android:layout_height="wrap_content"

      android:layout_alignParentTop="true">          

<Button 

        android:id="@+id/btn1"

        android:layout_width="0dp"

        android:layout_height="wrap_content"

        android:layout_weight="1"

        android:text="@string/btn1"

        android:onClick="selectFragment"/>    

    <Button 

        android:id="@+id/btn2"

        android:layout_width="0dp"

        android:layout_height="wrap_content"

        android:layout_weight="1"

        android:text="@string/btn2"

        android:onClick="selectFragment"/>  

    <Button 

        android:id="@+id/btn3"

        android:layout_width="0dp"

        android:layout_height="wrap_content"

        android:layout_weight="1"

        android:text="@string/btn3"

        android:onClick="selectFragment"/>

    </LinearLayout>    

    <fragment

        android:id="@+id/fragment_content"

        android:name="com.example.fragments.ContentFragmentOne"

        android:layout_width="match_parent"

        android:layout_height="match_parent" 

        android:layout_below="@id/btn"/>

</RelativeLayout>

7. Klik kanan pada package com.example.fragments, lalu pilih New -> Class.

8. Ganti namenya menjadi ContentFragmentOne lalu klik Finish.

9. Kemudian buat file xml untuk layout dari ContentFragmentOne tersebut. Klik kanan pada folder layout di res\layout. Pilih New -> Other.

9. Pilih XML file lalu klik Next.

10. Ganti file namenya menjadi fragment_contentone.xml lalu klik Finish.

11. Kembali ke file ContentFragmentOne.java lalu ganti codingnya menjadi seperti berikut....

package com.example.fragments;

import android.app.Fragment;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import com.example.tugas2_a11201106018.R;

public class ContentFragmentOne extends Fragment{

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

// TODO Auto-generated method stub

return inflater.inflate(R.layout.fragment_contentone, container, false);

}

}

12. Buka file fragment_contentone.xml dan ganti codingnya menjadi seperti berikut...

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical"

    android:background="#fff" >

    <TextView

        android:id="@+id/TextView1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_weight="1"

        android:text="@string/content1" />

</LinearLayout>

13.  Karena kita menambahkan id string baru, maka perlu ditambahkan coding pada strings.xml. Tambahkan coding berikut...

<string name="content1">Content Pertama</string>

14. Buat 2 class lagi, yaitu ContentFragmentTwo dan ContentFragmentThree. Caranya sesuai dengan no7 sampai dengan no13. Namun perlu ada penyesuaian nama sedikit, misalnya fragment_contentone.xml diganti menjadi fragment_contenttwo.xml dan fragment_contentthree.xml. Lalu   android:id="@+id/TextView1" menjadi  android:id="@+id/TextView2" dan  android:id="@+id/TextView3". Begitu seterusnya....

15. Sekarang kita sudah memiliki 3 buah fragments yang masing-masing digunakan sebagai content. Kembali lagi pada file TabMenu.java. Tambahkan coding berikut...

public void selectFragment(View v){

Fragment fr;

if(v == findViewById(R.id.btn1)){

fr = new ContentFragmentOne();

} else if(v == findViewById(R.id.btn2)){

fr = new ContentFragmentTwo();

} else {

fr = new ContentFragmentThree();

}

FragmentManager fm = getFragmentManager();

FragmentTransaction ft = fm.beginTransaction();

ft.replace(R.id.fragment_content, fr);

ft.commit();

}

16. Save semua file dan pastikan tidak ada error.




BUAT ACTIVITY CAMERA MENU

1. Ulangi langkah 1-3 pada bagian BUAT ACTIVITY TAB MENU diatas, namun activity namenya diganti menjadi CameraMenu.

2. Konsep pada Camera Menu ini adalah pada satu halaman terdapat tombol di sebelah kiri yang berfungsi untuk membuka camera. Sebelah kanan digunakan untuk menampilkan gambar capture camera tersebut. Buka file activity_camera_menu.xml lalu ganti codingnya menjadi seperti berikut...

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:baselineAligned="false"

    android:orientation="horizontal"

    tools:context=".CameraMenu" > 

    <LinearLayout

        android:layout_width="0dp"

        android:layout_height="fill_parent"

        android:layout_weight="1"

        android:gravity="center"

        android:orientation="vertical" > 

        <!-- Capture picture button -->

        <Button

            android:id="@+id/btnCapturePicture"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="Take a Picture"

            android:layout_marginBottom="10dp"/>

    </LinearLayout> 

    <LinearLayout

        android:layout_width="0dp"

        android:layout_height="fill_parent"

        android:layout_weight="1"

        android:orientation="vertical"

        android:padding="10dp"> 

        <TextView

            android:layout_width="fill_parent"

            android:layout_height="wrap_content"

            android:text="Preview"

            android:padding="10dp"

            android:textSize="15dp"/> 

        <ImageView

            android:id="@+id/imgPreview"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:visibility="gone" />

    </LinearLayout> 

</LinearLayout>

3. Buka file CameraMenu.java dan ubah codingnya menjadi seperti berikut...

package com.example.tugas2_a11201106018;

import java.io.File;

import java.text.SimpleDateFormat;

import java.util.Date;

import java.util.Locale;

import android.net.Uri;

import android.os.Bundle;

import android.os.Environment;

import android.provider.MediaStore;

import android.app.Activity;

import android.content.Intent;

import android.graphics.Bitmap;

import android.graphics.BitmapFactory;

import android.util.Log;

import android.view.Menu;

import android.view.View;

import android.widget.Button;

import android.widget.ImageView;

import android.widget.Toast;

public class CameraMenu extends Activity {

    private static final int CAMERA_CAPTURE_IMAGE_REQUEST_CODE = 100;

    public static final int MEDIA_TYPE_IMAGE = 1; 

    private static final String IMAGE_DIRECTORY_NAME = "Hello Camera"; 

    private Uri fileUri; 

    private ImageView imgPreview;

    private Button btnCapturePicture;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_camera_menu);

imgPreview = (ImageView) findViewById(R.id.imgPreview);

        btnCapturePicture = (Button) findViewById(R.id.btnCapturePicture);

        btnCapturePicture.setOnClickListener(new View.OnClickListener() { 

            @Override

            public void onClick(View v) {

                // capture picture

                captureImage();

            }

        });

}

private void captureImage() {

   Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);  

   fileUri = getOutputMediaFileUri(MEDIA_TYPE_IMAGE);  

   intent.putExtra(MediaStore.EXTRA_OUTPUT, fileUri);  

   startActivityForResult(intent, CAMERA_CAPTURE_IMAGE_REQUEST_CODE);

}

@Override

protected void onActivityResult(int requestCode, int resultCode, Intent data) {

   // if the result is capturing Image

   if (requestCode == CAMERA_CAPTURE_IMAGE_REQUEST_CODE) {

       if (resultCode == RESULT_OK) {

           // successfully captured the image

           // display it in image view

           previewCapturedImage();

       } else if (resultCode == RESULT_CANCELED) {

           // user cancelled Image capture

           Toast.makeText(getApplicationContext(),

                   "User cancelled image capture", Toast.LENGTH_SHORT)

                   .show();

       } else {

           // failed to capture image

           Toast.makeText(getApplicationContext(),

                   "Sorry! Failed to capture image", Toast.LENGTH_SHORT)

                   .show();

       }

   }

}

    private void previewCapturedImage() {

        try {         

            imgPreview.setVisibility(View.VISIBLE); 

            BitmapFactory.Options options = new BitmapFactory.Options();

            options.inSampleSize = 8; 

            final Bitmap bitmap = BitmapFactory.decodeFile(fileUri.getPath(),

                    options); 

            imgPreview.setImageBitmap(bitmap);

        } catch (NullPointerException e) {

            e.printStackTrace();

        }

    }

    @Override

    protected void onSaveInstanceState(Bundle outState) {

        super.onSaveInstanceState(outState);

        outState.putParcelable("file_uri", fileUri);

    }

     

    @Override

    protected void onRestoreInstanceState(Bundle savedInstanceState) {

        super.onRestoreInstanceState(savedInstanceState);

        fileUri = savedInstanceState.getParcelable("file_uri");

    }

    

    public Uri getOutputMediaFileUri(int type) {

        return Uri.fromFile(getOutputMediaFile(type));

    }

    

    private static File getOutputMediaFile(int type) {     

        File mediaStorageDir = new File(

                Environment

                        .getExternalStoragePublicDirectory(Environment.DIRECTORY_PICTURES),

                IMAGE_DIRECTORY_NAME);

     

        if (!mediaStorageDir.exists()) {

            if (!mediaStorageDir.mkdirs()) {

                Log.d(IMAGE_DIRECTORY_NAME, "Oops! Failed create "

                        + IMAGE_DIRECTORY_NAME + " directory");

                return null;

            }

        }

        

        String timeStamp = new SimpleDateFormat("yyyyMMdd_HHmmss",

                Locale.getDefault()).format(new Date());

        File mediaFile;

        if (type == MEDIA_TYPE_IMAGE) {

            mediaFile = new File(mediaStorageDir.getPath() + File.separator

                    + "IMG_" + timeStamp + ".jpg");

        } else {

            return null;

        }     

        return mediaFile;

    }

@Override

public boolean onCreateOptionsMenu(Menu menu) {

getMenuInflater().inflate(R.menu.camera_tes, menu);

return true;

}

}

4. Buka file AndroidManifest.xml lalu tambahkan beberapa coding berikut...

<uses-feature android:name="android.hardware.camera" />

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

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

Pada bagian activity untuk CameraMenu, ganti codingnya menjadi seperti berikut...

<activity

            android:name="com.example.tugas2_a11201106018.CameraMenu"

            android:label="@string/title_activity_camera_menu"

            android:screenOrientation="landscape" >

            <!-- configure this activity to use landscape orientation -->

            <intent-filter>

                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />

            </intent-filter>

        </activity>

5. Save semua file dan pastikan tidak ada yang error.

6. Cobalah untuk menjalankan aplikasi ini pada real device atau virtual device.


========================================================================

Semoga tutorial ini dapat bermanfaat bagi yang membacanya...