Kamis, 10 April 2014

Tutorial Membuat Navigasi Tab dan Kamera Pada Mobile Apps


Navigasi Tab digunakan untuk memudahkan user dalam mencari kategori yang diinginkan. Contoh mudahnya adalah navigasi pada blog yang sering kita lihat adalah contact, home, about, dll. Sedangkan kamera ini sama seperti kamera lainnya, tapi kita coba buat sendiri dari awal tanpa menggunakan intent.
Nah, sekarang kita akan buat navigasi dan kamera di mobile apps kita. Yuuuk langsung cusss hehe
NAVIGASI TAB
  • Buat class baru pada package yang sama dengan cara klik kanan pada project -> new -> class. Maka akan muncul tampilan dibawah ini, kemudian isi kan kolom package dengan package Anda misal : com.maya.tab. Dan nama package, nama package harus dimulai dengan huruf besar. kemudian Finish
  • Buat layout baru (klik kanan pada project -> new -> Android XML file


  • Isikan nama layout dimulai dengan huruf kecil, misal : fragment_a
  • Tulis script dibawah ini pada fragment_a.xml
<?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" >
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Ini Fragment A"
        android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
  • Kemudian pada class FragmentA.class isikan script dibawah ini
package com.maya.tab;
 
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.os.Bundle;
import com.maya.tab.R;
import android.support.v4.app.Fragment;

public class FragmentA extends Fragment {
// TODO Auto-generated constructor stub

    public View onCreateView(LayoutInflater inflater, ViewGroup container, 
Bundle savedInstanceState) {
      View rootView = inflater.inflate(R.layout.fragment_a, container, false);
        return rootView;
    }
 }
  • Buat class lagi dan beri nama FragmentB dan FragmentC, dan buat layout lagi beri nama fragment_b dan fragment_c.
  • Isikan script yang sama dengan FragmentA.java dan fragment_a.xml , hanya ganti isi sesuai fragment (fragment_a diganti fragment_b atau fragment_c)
  • Pada activity_main isikan script dibawah ini
<RelativeLayout 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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >
    
    <android.support.v4.view.ViewPager 
xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    </android.support.v4.view.ViewPager>

</RelativeLayout> 
  • Buat package baru 
  • Beri nama package, misal : com.maya.tab.adapter
  • Buat class baru pada package adapet dengan nama TabsPagerAdapter
  • Kemudian isikan class TabsPagerAdapet dengan script dibawah ini
package com.maya.tab.adapter;

import com.maya.tab.FragmentA;
import com.maya.tab.FragmentB;
import com.maya.tab.FragmentC;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;


public class TabsPagerAdapter extends FragmentPagerAdapter {

 public TabsPagerAdapter(FragmentManager fm) {
  // TODO Auto-generated constructor stub
  super(fm);
 }
 
 public Fragment getItem(int index) {
  switch (index){
  case 0:
   return new FragmentA();
  case 1:
   return new FragmentB();
  case 2:
   return new FragmentC();
  }
  return null;
 }
 
 public int getCount() {
  return 3;
 }
 
}


  • Tambahkan script dibawah ini pada MainActivity.java
package com.maya.tab;

import com.maya.tab.adapter.TabsPagerAdapter;
import com.maya.tab.R;

import android.os.Bundle;
import android.app.ActionBar;
import android.app.ActionBar.Tab;
import android.app.Activity;
import android.app.FragmentTransaction;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.view.Menu;

public class MainActivity extends FragmentActivity 
implements ActionBar.TabListener {
 
 private ViewPager viewPager;
 private TabsPagerAdapter mAdapter;
 private ActionBar actionBar;
 private String[] tabs = {"A","B","C"};
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  //inisialisasi
  viewPager = (ViewPager)findViewById(R.id.pager);
  actionBar = getActionBar();
  mAdapter = new TabsPagerAdapter(getSupportFragmentManager());
  
  viewPager.setAdapter(mAdapter);
  actionBar.setHomeButtonEnabled(false);
  actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
  
  //menambah tabs
  for (String tab_name : tabs) {
   actionBar.addTab(actionBar.newTab().setText
                        (tab_name).setTabListener(this));
  }
  
  viewPager.setOnPageChangeListener
                (new ViewPager.OnPageChangeListener() {
   @Override
   public void onPageSelected(int position) {
    // TODO Auto-generated method stub
    actionBar.setSelectedNavigationItem(position);
   }
   
   @Override
   public void onPageScrolled(int arg0,float arg1,int arg2) {
    // TODO Auto-generated method stub
   }
   
   @Override
   public void onPageScrollStateChanged(int arg0) {
    // TODO Auto-generated method stub
   }
  });
 }

 @Override
 public boolean onCreateOptionsMenu(Menu menu) {
  getMenuInflater().inflate(R.menu.main, menu);
  return true;
 }
 
 public void onTabReselected(Tab tab, FragmentTransaction ft) {
 }
 
 public void onTabSelected(Tab tab, FragmentTransaction ft) {
  viewPager.setCurrentItem(tab.getPosition());
 }
 
 public void onTabUnselected(Tab tab, FragmentTransaction ft) {
 } 
}  
  • Script sudah jadi, silahkan jalankan mobile apps, untuk lebih cepatnya, silahkan gunakan device.
CAMERA
  • Buat class baru dengan nama CameraActivity

  • Buat layout baru dengan nama activity_camera
  • Isikan CameraActivity.java dengan script dibawah ini
package com.maya.tabcamera;

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 CameraActivity 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);
  imgPreview = (ImageView)findViewById(R.id.btnCapturePicture);
  
  btnCapturePicture.setOnClickListener(new View.OnClickListener() {
   
   @Override
   public void onClick(View v) {
    // ambil gambar
    captureImage();
   }
  });
 }
 
 public 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) {
  // TODO Auto-generated method stub
  //super.onActivityResult(requestCode, resultCode, data);
       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) {
     // TODO Auto-generated method stub
     super.onSaveInstanceState(outState);
     outState.putParcelable("file_uri", fileUri);
    }
    
    @Override
    protected void onRestoreInstanceState(Bundle savedInstanceState) {
     // TODO Auto-generated method stub
     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) {
  // Inflate the menu; this adds items to the action bar if it is present.
  getMenuInflater().inflate(R.menu.camera, menu);
  return true;
 }
}

  • Pada activity_camera.xml isikan script dibawah ini.
<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" > 

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



  • Pada AndroidManifest.xml tambahkan script berikut.
<uses-permission 
        android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
    
<uses-feature 
        android:name="android.hardware.camera"/>
    
<uses-permission 
        android:name="android.permission.ACCESS_FINE_LOCATION"/>
<activity
            android:name="com.maya.tk.CameraActivity"
            android:label="@string/title_activity_camera" 
            android:screenOrientation="landscape" >
            <intent-filter >
                <action  android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
</activity>

Tidak ada komentar:

Posting Komentar