S Pen adalah perangkat keras yang diperkenalkan serta diluncurkan pertama kali oleh Samsung pada peluncuran GalaxyNote. Alat ini adalah sebuah hardware untuk melakukan input. Fungsi dan Sensasi penggunaannya hampir sama dengan pena  sebenarnya. S Pen memberikan pengalaman yang lebih kepada pengguna karena memiliki beberapa fitur misalnya adalah keakuratan presisi, memiliki feel yang sama seperti menulis pada kertas, dan fitur editing lainnya seperti writing dan shapes. Cara kerja alat ini cukup sederhana yaitu dengan mendeteksi tekanan yang dibenamkan di dalam layar yang cukup lebar. Akurasi atau ketepatan yang ditanamkan juga mendekati sempurna.

Untuk mengembangkan aplikasi yang memanfaatkan S Pen, Samsung sendiri telah menyediakan Pen SDK. Penggunaan dari Pen SDK meliputi beberapa hal yaitu:

• Advanced editing (handwritings, drawing, dan shapes)
  Pen SDK dapat melakukan edit secara advance dengan menggunakan pen pada layar yang kecil. Advanced editing meliputi objek-objek dasar seperti handwritings, drawing, atau shapes dan bisa kita select menggunakan rectangle / box atau arbitary shape menggunakan laso. Setelah diselect kita bisa mengganti propertiesnya seperti group/ungroup, mengganti z-order, menggati warna, dll. Contoh ilustrasi dari advanced editing pada Pen SDK.

• Recognition based shape editing (Mengenali bentuk)
  Selain menggunakan editing shape kita bisa menggunakan fitur shape recognition yaitu dengan menginputkan suatu gambar menggunakan pen maka gambar itu akan di kenali dengan shape yang menyerupai gambar tersebut, misal kita ingin membuat lingkaran maka kita tinggal menggambarkan garis yang mirip lingkaran pada layar maka secara otomatis akan dikenali sebagai lingakaran dan di transform menjadi lingkaran yang sempurna. Setelah shapes bisa dikenali maka kita melakukan editing terhadap shapes dengan fitur-fitur editing. Ilustrasi dari shape recognition seperti berikut:

• General recognition (Mengenali Tulisan)
  Recogniton yang ini digunakan untuk mengenali tulisan yang kita inputkan dengan menggunakan pen. Seperti contohnya dibawah yaitu text yang dituliskan oleh user dapat dikenali sebagai kata sehingga kita bisa mengaplikasikan fungsi search ke dalam tulisan text yang kita inputkan dengan menggunakan pen.

Masih banyak lagi fitur-fitur lain yang tersedia di dalam Pen SDK. Pen SDK masih tetap bisa digunakan meskipun devices tidak support built-in S Pen, sebagai gantinya kita bisa menggunakan sensor sentuh yaitu jari tangan, tentunya masukan dari jari tangan memiliki limitasi seperti pressure (tekanan) yang hanya bisa aplikasikan pada S Pen.

Pemanfaatan S Pen

S Pen dapat digunakan dalam berbagai macam aplikasi. Berikut ini contoh pemanfaatan S Pen:

1. Gambar (Drawing)
   S Pen memberikan pengguna kemampuan untuk membuat corat-coret sederhana sampai sketsa rumit.
   
2. Menulis Pesan (Note Taking)
   Fleksibilitas dalam menulis catatan menggunakan perangkat elektronik. S Pen mampu memberikan kenyamanan dengan penggunaan notepad yang praktis kapan saja.
   
3. Mengedit Foto (Photo Editing)
   Untuk memodifikasi gambar di butuhkan alat yang akurat, S Pen dapat memberikan hal tersebut.
   
4. Mengatur Device (Device Control)
   Mengendalikan perangkat hampir seluruhnya menggunakan S Pen dari simulasi menekan tombol hingga mengambil screenshot.
   
5. Permainan (Gaming)
   Mendapatkan kemenangan dalam persaingan, S Pen menawarkan kontrol sentuh yang lebih tepat untuk game yang menuntut itu.

Penggunaan dan Fungsionalitas Pen SDK

Beberapa penggunaan dan fungsionalitas dari Pen SDK yang bisa kamu implementasikan untuk mengembangkan sebuah aplikasi adalah sebagai berikut:

1. SDK View
   SpenSurfaceView, yang mewarisi dari Android SurfaceView, memproses gerakan jari atau masukan S Pen di area viewport. SpenSurfaceView juga mengubah masukan tulisan tangan ke teks atau memasukkan kembali masukan pengguna. SpenSurfaceView adalah komponen tampilan dalam paradigma model-view-controller, dan ini menghasilkan representasi data obyek pada viewport. SpenSurfaceView menyediakan kontrol untuk penskalaan, putaran, pergerakan, dan control untuk memilih objek.
   SpenSurfaceView dan SpenSettingPenLayout di gabungkan untuk menyediakan metode untuk mengelola preferensi pengguna perihal font, ukuran font, dan warna font; Ukuran, warna, atau jenis alat pena; Ukuran alat penghapus; dan pilihan untuk objek.
   Apa saja yang bisa di gunakan Pen SDK Views adalah sebagai berikut:
   • Menggambar di layar dengan menggunakan S Pen
     Kamu dapat menggunakan S Pen dengan beberapa tools yang tersedia untuk menggambar di layar.
   • Menambahkan Setting Pen SDK
     Kamu dapat menambahkan tombol pengaturan pena ke aplikasi Anda untuk menyetel preferensi pengguna untuk ukuran pena, warna dan jenis.
   • Menambahkan Setting Eraser
     Anda dapat menambahkan tombol pengaturan penghapus ke aplikasi Anda untuk mengkonfigurasi pengaturan penghapus dan menyimpan konfigurasinya ke SpenSurfaceView dengan kelas SpenSettingEraserLayout.
   • Menambahkan fungsi Undo dan Redo
     Pen SDK menghasilkan riwayat untuk setiap aksi yang di lakukan oleh pengguna. Pengelolaan riwayat memungkinkan Anda menambahkan fitur undo atau redo ke dalam aplikasi.
   • Mengatur Background
     Anda dapat memilih gambar dari galeri dan menggunakannya sebagai latar belakang aplikasi Anda dengan menggunakan SpenPageDoc.setBackgroundImage().
   • Replay Animations
     SDK Pen memungkinkan Anda memutar ulang gambar atau pengeditan teks di dalam aplikasi. Anda dapat menambahkan fitur animasi replay ke aplikasi Anda dengan menggunakan SpenPageDoc.startRecord(), SpenPageDoc.stopRecord(), SpenSurfaceView.startReplay(), SpenSurfaceView.stopReplay (), dan metode terkait replay lainnya.
   • Menangkap Screenshot
     PenSDK memungkinkan Anda mengambil screen shot dan menyimpannya sebagai file gambar. Anda dapat menerapkan fungsi ini di aplikasi Anda dengan menggunakan penSurfaceView.captureCurrentView(), yang membuat bitmap dari SpenSurfaceView.
   • Menggunakan Custom Drawing
     Pen SDK juga menawarkan fitur Custom Drawing. Gunakan SpenSurfaceView.setPreDrawListener() dan SpenView.setPostDrawListener() untuk menambahkan beberapa gambar khusus pada instance SpenSurfaceView.

    

2. SDK Documents
   SDK Documents adalah komponen Pen SDK yang bisa digunakan untuk menambahkan dan menghapus sebuah objek, menyimpan dan membuka file, dan mengelola riwayat (history). Dengan menggunakan methods documents, aplikasi Anda dapat menawarkan beberapa fitur berikut:
   • Menambah, menghapus, atau menyimpan goresan, gambar, dan objek teks sebagai file
   • Menambahkan data tambahan atau file saat menyimpan objek
   • Membuka dan mengedit file yang disimpan
   • Mengatur riwayat untuk perintah undo dan redo
   • Satu hal yang harus di perhatikan, riwayat states tidak bisa di simpan sebagai file.
3. SDK Select Object
   Pen SDK memungkinkan Anda mengubah ukuran, merelokasi, atau memutar objek yang ditambahkan ke instance SpenSurfaceView, dan group maupun ungroup beberapa objek. Anda dapat menggunakan SpenPageDoc.moveObjectIndex() untuk mengedit urutan objek di instance SpenPageDoc.
4. S Pen Object Runtime
   S Pen Object Runtime (SOR) adalah plug-in untuk memperluas kemampuan default preloadedobjects seperti SpenObjectStroke, SpenObjectText, SpenObjectImage, dan SpenObjectContainer yang secara native di pasok oleh Pen SDK secara real-time. Anda dapat membuat SOR dengan SpenObjectRuntimeManager dengan memanggil SpenObjectRuntimeManager.createObjectRuntime(). Pen SDK mengembalikan instance SpenObjectRuntime yang Anda buat. Anda memerlukan objek SpenObjectRuntimeInfo atau nilai nama kelas SOR untuk memanggil createObjectRuntime(). Jika SOR memiliki private key, private key harus di kirim.
5. Advance Pen SDK Features
   SDK Pen juga menawarkan fitur lanjutan untuk aplikasi Anda:
   • Smart Scroll
     Anda dapat menggunakan Smart Scroll untuk mengaktifkan pengguliran horizontal atau vertikal secara otomatis saat S Pen melayang di dekat tepi layar.
   • Smart Zoom
     Untuk mendefinisikan ulang area Smart Scroll saat orientasi halaman (landscape dan portrait) berubah, override methods onConfigurationChanged().
   • Translucent View
     Anda dapat menggunakan Pen SDK untuk menyajikan Simple View di aplikasi Anda. Simple View menciptakan memo dengan SpenObjectStroke dengan memasukkan contoh SpenSimpleView di atas instance SpenSurfaceView utama.

Perbedaan Pen Light SDK dan Pen SDK

Ada 2 macam SDK yang bisa kita gunakan untuk untuk mengembangkan Pen, yaitu Pen Light SDK dan Pen SDK. Perbedaan fungsionalitas antara keduanya bisa di lihat di tabel berikut:

Dari tabel di atas dapat di lihat bahwa semua fungsi pada SDK Light ada pada SDK Pen full. SDK Light dapat kita gunakan jika aplikasi kita hanya membutuhkan sedikit fitur dari Pen SDK dan ingin menjaga ukuran file APK agar sekecil mungkin.

Device Support

Untuk menggunakan Pen SDK, devices yang digunakan adalah minimal Android 4.0 (Ice Cream Sandwich API level 14). Seperti yang telah di jelaskan sebelumnya beberapa fungsi seperti pressure atau hover akan terlimitasi pada device tanpa built-in S Pen.

Latihan

Untuk lebih mengenal bagaimana penerapan Pen SDK, kita akan coba membuat aplikasi Paint sederhana dengan menggunakan beberap fitur dari Pen SDK. Kali ini kita menggunakan Pen SDK.

1. Buat Project baru dan beri nama PenSample.
   Pastikan kamu telah memasukkan library Pen SDK ke dalam project kamu. Pada latihan kali ini kita akan menggunakan Pen SDK full version. Untuk instalasi Samsung SDK dan cara memasukkan library SDK terkait ke dalam project telah kita bahas di artikel sebelumnya (https://www.dicoding.com/blog/tutorial-samsung-galaxy-sdk-instalasi/)
   
   
2. Pada build.gradle(App) tambahkan baris code berikut:
   
   1 2 3 4 5 6 7 8 9

   repositories{    flatDir {       dirs 'libs'    } } dependencies {    compile files('libs/sdk-v1.0.0.jar')    compile(name: 'pen-v4.1.2_full', ext: 'aar'); }

   
   Jangan lupa untuk sync gradle nya.
3. Tambahkan beberapa permission ke dalam android manifest, codenya seperti berikut:
   
   1 2 3

   <uses-permission android:name="android.permission.CAMERA"/> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> <uses-permission android:name="com.samsung.android.providers.context.permission.WRITE_USE_APP_FEATURE_SURVEY"/>

   
   Permission WRITE_USE_APP_FEATURE_SURVEY adalah permission wajib yang harus ada ketika menggunakan Samsung SDK.
4. Tambahkan juga beberapa string ke dalam res->value->strings.xml. String ini nantinya akan di gunakan dalam layout tampilan projek ini.
   
   1 2 3 4 5 6 7 8 9

   <string name="save" translatable="false">save</string> <string name="load" translatable="false">load</string> <string name="pen" translatable="false">pen</string> <string name="eraser" translatable="false">eraser</string> <string name="stroke" translatable="false">stroke</string> <string name="hintText" translatable="false">hintText</string> <string name="spd" translatable="false">.spd</string> <string name="png" translatable="false">.png</string> <string name="srecog" translatable="false">shape recognition</string>

5. Untuk tampilan layout xml, bisa kita kondisikan menjadi seperti berikut ini :
   
   
   
   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75

   <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/activity_main"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    tools:context="com.dicoding.pensample.MainActivity">    <HorizontalScrollView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:fillViewport="true">        <LinearLayout            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:orientation="horizontal"            android:background="@android:color/holo_blue_bright">            <Button                android:layout_height="wrap_content"                android:layout_width="wrap_content"                android:text="@string/save"                android:textSize="12sp"                android:id="@+id/btn_save"                />            <Button                android:layout_height="wrap_content"                android:layout_width="wrap_content"                android:text="@string/load"                android:textSize="12sp"                android:id="@+id/btn_load" />        </LinearLayout>    </HorizontalScrollView>    <HorizontalScrollView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:fillViewport="true">        <LinearLayout            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:orientation="horizontal"            android:background="@android:color/holo_blue_light">            <Button                android:layout_height="wrap_content"                android:layout_width="wrap_content"                android:text="@string/pen"                android:textSize="12sp"                android:id="@+id/btn_pen"                />            <Button                android:layout_height="wrap_content"                android:layout_width="wrap_content"                android:text="@string/eraser"                android:textSize="12sp"                android:id="@+id/btn_eraser"                />        </LinearLayout>    </HorizontalScrollView>    <FrameLayout        android:layout_width="match_parent"        android:layout_height="match_parent”        android:id="@+id/frame_canvas"        >        <RelativeLayout            android:layout_width="match_parent"            android:layout_height="match_parent">            <RelativeLayout                android:layout_width="match_parent"                android:layout_height="match_parent"                android:id="@+id/layout_canvas"                android:layout_alignParentTop="true"                android:layout_alignParentStart="true">            </RelativeLayout>        </RelativeLayout>    </FrameLayout> </LinearLayout>

6. Selanjutnya kita kondisikan kelas MainActivity.java, kita mulai dengan menambahkan variable global di dalamnya.
   
   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

   . . . private SpenNoteDoc mSpenNoteDoc; private SpenPageDoc mSpenPageDoc; private SpenSurfaceView mSpenSurfaceView;   private SpenSettingPenLayout mPenSettingView; private SpenSettingEraserLayout mEraserSettingView;   private FrameLayout mSettingView;   private Button mPenBtn; private Button meraserBtn; private Button mSaveFileBtn; private Button mLoadFileBtn;     private File mFilePath;   private final int MODE_PEN = 0; private final int MODE_ERASER = 1;   private int mMode = MODE_PEN;   private static final int SDK_VERSION = Build.VERSION.SDK_INT; private static final int ADD_BACKGROUND_REQUEST = 1; private final int REQUEST_CODE_SELECT_IMAGE_BACKGROUND = 999;   private static final int PERMISSION_REQUEST_CODE = 1;   Rect mScreenRect; private int mToolType = SpenSurfaceView.TOOL_SPEN; private boolean mIsDiscard = false; ...

   Selanjutnya pada method onCreate(), ada beberapa baris code yang harus kita tambahkan. Code ini digunakan untuk menginisialisasi kelas Spen, fungsinya untuk mengecek apakah device yang akan di gunakan support dengan Pen SDK atau tidak.

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

   . . . // Initialize Spen boolean isSpenFeatureEnabled = false; Spen spenPackage = new Spen();   try {     spenPackage.initialize(this);     isSpenFeatureEnabled = spenPackage.isFeatureEnabled(Spen.DEVICE_PEN); } catch (SsdkUnsupportedException e){     Toast.makeText(this, "This device does not support Spen.",Toast.LENGTH_SHORT).show();     e.printStackTrace();     finish(); } catch (Exception el){     Toast.makeText(this, "Can not Initialize Pen .",Toast.LENGTH_SHORT).show();     el.printStackTrace();     finish(); } . . .

   Inisialisasi komponen-komponen layout seperti FrameLayout, MPenSettingView, MSpenSurfaceView, dan MSpenPageDoc dengan menambahkan beberapa baris code berikut:

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51

   ... // Create Spen View FrameLayout spenViewContainer = (FrameLayout) findViewById(R.id.frame_canvas); RelativeLayout spenViewLayout = (RelativeLayout) findViewById(R.id.layout_canvas);   // Create PenSettingView mPenSettingView = new SpenSettingPenLayout(this, "", spenViewLayout);   // Create EraserSettingView mEraserSettingView = new SpenSettingEraserLayout(this, "", spenViewLayout);   // Add SettingView to the Container spenViewContainer.addView(mPenSettingView); spenViewContainer.addView(mEraserSettingView);   // Create SpenSurfaceView mSpenSurfaceView = new SpenSurfaceView(this); if (mSpenSurfaceView == null) {     Toast.makeText(this, "Cannot create new SpenSurfaceView.", Toast.LENGTH_SHORT).show();     finish(); } mSpenSurfaceView.setToolTipEnabled(true); spenViewLayout.addView(mSpenSurfaceView); mPenSettingView.setCanvasView(mSpenSurfaceView); mEraserSettingView.setCanvasView(mSpenSurfaceView);   // Get the dimension of the device screen. Display display = getWindowManager().getDefaultDisplay(); mScreenRect = new Rect(); display.getRectSize(mScreenRect);   //  Create SpenNoteDoc try{     mSpenNoteDoc = new SpenNoteDoc(this, mScreenRect.width(), mScreenRect.height()); } catch (IOException e){     Toast.makeText(this, "Cannot create new NoteDoc.", Toast.LENGTH_SHORT).show();     e.printStackTrace();     finish(); } catch (Exception e) {     e.printStackTrace();     finish(); }   // Add a Page to NOteDoc, get an instance, and set it to the member variable mSpenPageDoc = mSpenNoteDoc.appendPage(); mSpenPageDoc.setBackgroundColor(0xFFD6E6F5); mSpenPageDoc.clearHistory();   // Set PageDoc to View mSpenSurfaceView.setPageDoc(mSpenPageDoc, true); ...

   Terakhir di dalam method onCreate yang harus di tambahkan adalah mengatur default setting dari pen dan erase, register setiap listener, inisialisasi button, dan set default ke pen ketika pertama kali di jalankan.

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

   . . . initSettingInfo();   // Init FilePath String filePath = Environment.getExternalStorageDirectory().getAbsolutePath() + "/SPen/"; mFilePath = new File(filePath);   // Register the Listener mSpenSurfaceView.setColorPickerListener(mColorPickerListener); mEraserSettingView.setEraserListener(mEraserListener); mSpenSurfaceView.setPreTouchListener(onPreTouchSurfaceViewListener);   // Set a button // Pen and Eraser mPenBtn = (Button) findViewById(R.id.btn_pen); mPenBtn.setOnClickListener(mPenBtnClickListener);   meraserBtn = (Button) findViewById(R.id.btn_eraser); meraserBtn.setOnClickListener(mEraserBtnClickListener);   selectButton(mPenBtn);       // First time run set to pen if (isSpenFeatureEnabled == false){         mToolType = SpenSurfaceView.TOOL_FINGER;         Toast.makeText(this, "Device doesn't support Spen. \n You can drow stroke by finger.", Toast.LENGTH_SHORT).show();     } else {         mToolType = SpenSurfaceView.TOOL_SPEN;     }     mSpenSurfaceView.setToolTypeAction(mToolType, SpenSurfaceView.ACTION_STROKE);   } . . .

   Tambahkan method baru initSettingInfo() fungsinya untuk menginialisasikan atau men-setting default setting dari Pen dan Eraser, kodenya dapat di sesuaikan sebagai berikut:

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

   . . . private void initSettingInfo(){     int mCanvasWidth = mScreenRect.width();       if (mSpenSurfaceView != null){         if (mSpenSurfaceView.getCanvasWidth() < mSpenSurfaceView.getCanvasHeight()){             mCanvasWidth = mSpenSurfaceView.getCanvasWidth();         } else {             mCanvasWidth = mSpenSurfaceView.getCanvasHeight();         }         if (mCanvasWidth == 0){             mCanvasWidth = mScreenRect.width();         }     }       // Initialize Pen Setting     SpenSettingPenInfo penInfo = new SpenSettingPenInfo();     penInfo.color = Color.BLUE;     penInfo.size = 10;     mSpenSurfaceView.setPenSettingInfo(penInfo);     mPenSettingView.setInfo(penInfo);       // Initialize Eraser Setting     SpenSettingEraserInfo eraserInfo = new SpenSettingEraserInfo();     eraserInfo.size = 30;     mSpenSurfaceView.setEraserSettingInfo(eraserInfo);     mEraserSettingView.setInfo(eraserInfo); } . . .

7. Setelah mengatur default awal Pen dan Eraser, sekarang tambahkan listener untuk Pen dan Eraser.
   
   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96

   . . . /* Listener Pen */ private final View.OnClickListener mPenBtnClickListener = new View.OnClickListener() {     @Override     public void onClick(View v) {         // When Spen is in stroke (pen) mode         if (mSpenSurfaceView.getToolTypeAction(mToolType) == SpenSurfaceView.ACTION_STROKE){             // If PenSettingView is open, close it.             if (mPenSettingView.isShown()){                 mPenSettingView.setVisibility(View.GONE);             } else {                 // If PenSettingView isn't open, open it.                 mPenSettingView.setViewMode(SpenSettingPenLayout.VIEW_MODE_NORMAL);                 mPenSettingView.setVisibility(View.VISIBLE);             }             // If Span isn't in stroke (pen) mode, change it to stroke mode.         } else {             int curAction = mSpenSurfaceView.getToolTypeAction(SpenSurfaceView.TOOL_FINGER);             mSpenSurfaceView.setToolTypeAction(mToolType, SpenSurfaceView.ACTION_STROKE);             int newAction = mSpenSurfaceView.getToolTypeAction(SpenSurfaceView.TOOL_FINGER);             if (mToolType == SpenSurfaceView.TOOL_FINGER){                 if (curAction != newAction){                     mMode = MODE_PEN;                     selectButton(mPenBtn);                 }             } else {                 mMode = MODE_PEN;                 selectButton(mPenBtn);             }         }     } };   /* Listener Eraser */ private final View.OnClickListener mEraserBtnClickListener = new View.OnClickListener() {     @Override     public void onClick(View v) {         // When Spen is in eraser mode         if (mSpenSurfaceView.getToolTypeAction(mToolType) == SpenSurfaceView.ACTION_ERASER){             // If EraserSettingView is open, close it.             if (mEraserSettingView.isShown()){                 mEraserSettingView.setVisibility(View.GONE);             } else{                 // If EraserSettingView is not open, open it.                 mEraserSettingView.setVisibility(View.VISIBLE);             }             // If Spen is not in Eraser mode, change it to eraser mode.         } else {             mMode = MODE_ERASER;             selectButton(meraserBtn);             mSpenSurfaceView.setToolTypeAction(mToolType, SpenSurfaceView.ACTION_ERASER);         }     } };   /* Listener pen setting color picker */ private final SpenColorPickerListener mColorPickerListener = new SpenColorPickerListener() {     @Override     public void onChanged(int color, int x, int y) {         // Set the color from ColorPicker to the Setting View.         if (mPenSettingView != null){             SpenSettingPenInfo penInfo = mPenSettingView.getInfo();             penInfo.color = color;             mPenSettingView.setInfo(penInfo);         }     } };   /* Listener eraser setting erase all */ private final SpenSettingEraserLayout.EventListener mEraserListener = new SpenSettingEraserLayout.EventListener() {     @Override     public void onClearAll() {         // ClearAll button action routines of EraserSettingView         mSpenPageDoc.removeAllObject();         mSpenSurfaceView.update();     } };   /* Listener Canvas OnTouch */ private SpenTouchListener onPreTouchSurfaceViewListener = new SpenTouchListener() {     @Override     public boolean onTouch(View view, MotionEvent motionEvent) {         switch(motionEvent.getAction()){             case MotionEvent.ACTION_DOWN:             case MotionEvent.ACTION_POINTER_DOWN:                 enableButton(false);                 break;             case MotionEvent.ACTION_CANCEL:             case MotionEvent.ACTION_UP:                 enableButton(true);                 break;         }         return false;     } }; . . .

8. Sekarang tambahkan beberapa method untuk mengatur aktif dan tidaknya button ketika sedang melakukan drawing dengan menambahkan method-method di bawah ini:
   
   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

   . . . // ENABLE DISABLE private void enableButton(boolean isEnable){     mPenBtn.setEnabled(isEnable);     meraserBtn.setEnabled(isEnable); }   private void selectButton(View v){     // Enable or Disable the button according to the current mode.     mPenBtn.setSelected(false);     meraserBtn.setSelected(false);     v.setSelected(true);     closeSettingView(); }   private void closeSettingView(){     // Close All the settingt views.     mEraserSettingView.setVisibility(SpenSurfaceView.GONE);     mPenSettingView.setVisibility(SpenSurfaceView.GONE); } . . .

9. Agar tidak terjadi memory over leaks maka kita perlu membebaskan memory yang kita pakai ketika aplikasi sudah tidak berjalan. Tambahkan beberapa baris kode ke dalam override method onDestroy seperti ini:
   
   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

   . . . @Override protected void onDestroy() {     super.onDestroy();       if (mPenSettingView != null){         mPenSettingView.close();     }     if (mEraserSettingView != null){         mEraserSettingView.close();     }     if (mSpenSurfaceView != null){         mSpenSurfaceView.close();         mSpenSurfaceView = null;     }     if (mSpenNoteDoc != null){         try {             if (mIsDiscard){                 mSpenNoteDoc.discard();             } else {                 mSpenNoteDoc.close();             }         } catch (IOException e) {             e.printStackTrace();         }         mSpenNoteDoc = null;     } }; . . .

10. Konfigurasi untuk Pen dan Eraser selesai, sekarang coba jalankan aplikasinya !
    
    Ketika menekan button Pen atau double klik pada button Eraser, maka akan muncul tampilan setting seperti di bawah ini:
     
    
11. sini Anda telah berhasil menggunakan fitur Pen dan Eraser, sekarang bagaimana cara untuk menyimpan (Save) dan menampilkan kembali apa yang telah kita simpan (Load) akan di jelaskan di point berikutnya. Ketika menyimpan file di butuhkan layout baru untuk menampilkan dialog, maka dari itu buat layout baru dan beri nama save_file_dialog.xml, sesuaikan codenya menjadi seperti berikut:
    
    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/layout_root"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:orientation="horizontal"    android:padding="10dp" >    <EditText        android:id="@+id/input_path"        android:layout_width="200dip"        android:layout_height="50dip"        android:layout_gravity="center_vertical"        android:layout_marginRight="10dp"        android:hint="@string/hintText" />    <RadioGroup        android:id="@+id/radioGroup"        android:layout_width="wrap_content"        android:layout_height="wrap_content" >        <RadioButton            android:id="@+id/radioNote"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:checked="true"            android:text="@string/spd" />        <RadioButton            android:id="@+id/radioImage"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="@string/png" />    </RadioGroup> </LinearLayout>

12. Ketika melakukan penyimpanan maupun pemanggilan, yang harus dilakukan pertama kali adalah melakukan pengecekan untuk mengakses permission pada device, maka dari itu kita akan menambahkan method checkPermission(). Sesuaikan kodenya seperti berikut:
    
    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

    . . . @TargetApi(Build.VERSION_CODES.M) public boolean checkPermission(){     if (SDK_VERSION < 23){         return false;     }       List<String> permissionList = new ArrayList<>(Arrays.asList(Manifest.permission.WRITE_EXTERNAL_STORAGE, Manifest.permission.READ_EXTERNAL_STORAGE));     if (PackageManager.PERMISSION_GRANTED == checkSelfPermission(Manifest.permission.WRITE_EXTERNAL_STORAGE)){         permissionList.remove(Manifest.permission.WRITE_EXTERNAL_STORAGE);     }     if (PackageManager.PERMISSION_GRANTED == checkSelfPermission(Manifest.permission.READ_EXTERNAL_STORAGE)){         permissionList.remove(Manifest.permission.READ_EXTERNAL_STORAGE);     }     if (permissionList.size() > 0){         requestPermissions(permissionList.toArray(new String[permissionList.size()]), PERMISSION_REQUEST_CODE);         return true;     }     return false; } . . .

13. Tambahkan override method onRequestPermissionResult() yang berfungsi sebagai callback ketika pengguna menekan “allow” saat dialog permission muncul.
    
    1 2 3 4 5 6 7 8 9 10 11 12 13

    @Override public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) {     super.onRequestPermissionsResult(requestCode, permissions, grantResults);     if (requestCode == PERMISSION_REQUEST_CODE){         if (grantResults != null){             for (int i = 0; i < grantResults.length; i++){                 if (grantResults[i] != PackageManager.PERMISSION_GRANTED){                         Toast.makeText(this, "Permission " + permissions[i] + " is denied", Toast.LENGTH_SHORT).show();                 }             }         }     } }

14. Sekarang kita akan menambahkan listener untuk button save dan load. Untuk listener save sesuaikan kodenya seperti berikut:
    
    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127

    /* Listener Save */ private final View.OnClickListener mSaveFileBtnClickListener = new View.OnClickListener() {     @Override     public void onClick(View v) {         if (checkPermission()){             return;         }         mSpenSurfaceView.closeControl();         closeSettingView();         saveNoteFile(false);     } };   private boolean saveNoteFile(final boolean isClose){     if (!mFilePath.exists()){         if (!mFilePath.mkdirs()){             Toast.makeText(this, "Save Pth Creation Error", Toast.LENGTH_SHORT).show();             return false;         }     }       // Prompt Save File dialog to get the file name     // and get its save format option (note file or image).     LayoutInflater inflater = (LayoutInflater) this.getSystemService(LAYOUT_INFLATER_SERVICE);     final View layout = inflater.inflate(R.layout.save_file_dialog, (ViewGroup) findViewById(R.id.layout_root));       AlertDialog.Builder builderSave = new AlertDialog.Builder(this);     builderSave.setTitle("Enter file Name");     builderSave.setView(layout);       final EditText inputPath = (EditText) layout.findViewById(R.id.input_path);     inputPath.setText("Note");       builderSave.setPositiveButton("OK", new DialogInterface.OnClickListener() {         @Override         public void onClick(DialogInterface dialog, int which) {             final RadioGroup selectFileExt = (RadioGroup) layout.findViewById(R.id.radioGroup);               // Set the Save Directory for file.             String saveFilePath = mFilePath.getPath() + '/';             String fileName = inputPath.getText().toString();             if (!fileName.equals("")){                 saveFilePath += fileName;                 int checkedRadioButtonId = selectFileExt.getCheckedRadioButtonId();                 if (checkedRadioButtonId == R.id.radioNote){                     saveFilePath += ".spd";                     saveNoteFile(saveFilePath);                 } else if (checkedRadioButtonId == R.id.radioImage){                     saveFilePath += ".png";                     captureSpenSurfceView(saveFilePath);                 } else {                   }                 if (isClose){                     finish();                 }             } else {                 Toast.makeText(MainActivity.this, "Invalid filename !!", Toast.LENGTH_LONG).show();             }         }     });       builderSave.setNegativeButton("Cancel", new DialogInterface.OnClickListener() {         @Override         public void onClick(DialogInterface dialog, int which) {             if (isClose){                 finish();             }         }     });       AlertDialog dlgSave = builderSave.create();     dlgSave.show();       return true; }   private boolean saveNoteFile(String strFileName){     try {         // Save NoteDoc         mSpenNoteDoc.save(strFileName, false);         Toast.makeText(this, "Save success to " + strFileName, Toast.LENGTH_SHORT).show();     } catch (IOException e){         Toast.makeText(this, "Can not save NoteDoc file.", Toast.LENGTH_SHORT).show();         e.printStackTrace();         return false;     } catch (Exception e){         e.printStackTrace();         return false;     }     return true; }   private void captureSpenSurfceView(String strFileName){     // Capture the view     Bitmap imgBitmap = mSpenSurfaceView.captureCurrentView(true);     if (imgBitmap == null){         Toast.makeText(this, "Capture failed." + strFileName, Toast.LENGTH_SHORT).show();         return;     }       OutputStream out = null;     try {         // Create FileOutputStream and Save the Captured Image.]         out = new FileOutputStream(strFileName);         imgBitmap.compress(Bitmap.CompressFormat.PNG, 100, out);         // Save the Note Information.         mSpenNoteDoc.save(out, false);         out.close();         Toast.makeText(this, "Captured images were stored in the file" + strFileName, Toast.LENGTH_SHORT).show();     } catch (IOException e){         File tmpFile = new File(strFileName);         if (tmpFile.exists()){             tmpFile.delete();         }         Toast.makeText(this, "Failed to save the File." + strFileName, Toast.LENGTH_SHORT).show();         e.printStackTrace();     } catch (Exception  e){         File tmpFile = new File(strFileName);         if (tmpFile.exists()){             tmpFile.delete();         }         Toast.makeText(this, "Failed to save the File." + strFileName, Toast.LENGTH_SHORT).show();         e.printStackTrace();     }     imgBitmap.recycle(); }

    
    Kemudian untuk load, sesuaikan kodenya adalah seperti berikut:
    
    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89

    /* Listener LOAD */ private final View.OnClickListener mLoadFileBtnClickListener = new View.OnClickListener() {     @Override     public void onClick(View v) {         if (checkPermission()){             return;         }         mSpenSurfaceView.closeControl();         closeSettingView();         loadNoteFile();     } };   private void loadNoteFile(){     // Load the file list.     final String fileList[] = setFileList();     if (fileList == null){         return;     }       // Prompt Load File Dialog     new AlertDialog.Builder(this).setTitle("Select File").setItems(fileList, new DialogInterface.OnClickListener() {         @Override         public void onClick(DialogInterface dialog, int which) {             String strFilePath = mFilePath.getPath() + '/' + fileList[which];             try {                 SpenObjectTextBox.setInitialCursorPos(SpenObjectTextBox.CURSOR_POS_END);                 // Create NoteDoc with the selected file.                 SpenNoteDoc tmpSpenNoteDoc = new SpenNoteDoc(MainActivity.this, strFilePath, mScreenRect.width(), SpenNoteDoc.MODE_WRITABLE, true);                 mSpenNoteDoc.close();                 mSpenNoteDoc = tmpSpenNoteDoc;                 if (mSpenNoteDoc.getPageCount() == 0){                     mSpenPageDoc = mSpenNoteDoc.appendPage();                 } else {                     mSpenPageDoc = mSpenNoteDoc.getPage(mSpenNoteDoc.getLastEditedPageIndex());                 }                 mSpenSurfaceView.setPageDoc(mSpenPageDoc, true);                 mSpenSurfaceView.update();                 Toast.makeText(MainActivity.this, "Successfully loaded NoteFile.", Toast.LENGTH_SHORT).show();             } catch (IOException e){                 Toast.makeText(MainActivity.this, "Can not open this file.", Toast.LENGTH_LONG).show();                 e.printStackTrace();             } catch (SpenUnsupportedTypeException e){                 Toast.makeText(MainActivity.this, "This file is not supported.", Toast.LENGTH_LONG).show();                 e.printStackTrace();             } catch (SpenInvalidPasswordException e){                 Toast.makeText(MainActivity.this, "This file is locked by a password.", Toast.LENGTH_LONG).show();                 e.printStackTrace();             } catch (SpenUnsupportedVersionException e){                 Toast.makeText(MainActivity.this, "This file is the version that does not support.", Toast.LENGTH_LONG).show();                 e.printStackTrace();             } catch (Exception e){                 Toast.makeText(MainActivity.this, "Failed to Load noteDoc.", Toast.LENGTH_LONG).show();                 e.printStackTrace();             }         }     }).show(); }   private String[] setFileList(){     // Call the file list under the directory in mFilePath.     if (!mFilePath.exists()){         if (!mFilePath.mkdirs()){             Toast.makeText(this, "Save Path Creation Error", Toast.LENGTH_SHORT).show();             return null;         }     }       // Filter in spd and png files     File[] fileList = mFilePath.listFiles(new txtFileFilter());     if (fileList == null){         Toast.makeText(this, "File doesn't exist.", Toast.LENGTH_SHORT).show();         return null;     }     int i = 0;     String[] strFileList = new String [fileList.length];     for (File file : fileList){         strFileList[i++] = file.getName();     }     return strFileList; }   static class txtFileFilter implements FilenameFilter{       @Override     public boolean accept(File dir, String name) {         return (name.endsWith(".spd") || name.endsWith(".png"));     } }

15. Pada method onCreate, jangan lupa daftarkan inisialisasi button save dan load yang akan kita gunakan beserta listenernya.
    
    1 2 3 4 5 6 7 8

    . . . // Save Load mSaveFileBtn = (Button) findViewById(R.id.btn_save); mSaveFileBtn.setOnClickListener(mSaveFileBtnClickListener);   mLoadFileBtn = (Button) findViewById(R.id.btn_load); mLoadFileBtn.setOnClickListener(mLoadFileBtnClickListener); . . .

    
     
16. Kita juga akan memanfaatkan method dari activity onBackPressed yang digunakan untuk konfirmasi ketika pengguna akan menutup aplikasi, akan muncul dialog apakah data akan di save terlebih dahulu.
    
    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

    @Override public void onBackPressed() {     if (mSpenPageDoc.getObjectCount(true) > 0 && mSpenPageDoc.isChanged()){         AlertDialog.Builder dlg = new AlertDialog.Builder(this);         dlg.setIcon(this.getResources().getDrawable(android.R.drawable.ic_dialog_alert));         dlg.setTitle(this.getResources().getString(R.string.app_name))                 .setMessage("Do you wnat exit after save?")                 .setPositiveButton("Yes", new DialogInterface.OnClickListener() {                     @Override                     public void onClick(DialogInterface dialog, int which) {                         if (checkPermission()){                             return;                         }                         saveNoteFile(true);                         dialog.dismiss();                     }                 }).setNeutralButton("No", new DialogInterface.OnClickListener() {             @Override             public void onClick(DialogInterface dialog, int which) {                 dialog.dismiss();                 mIsDiscard = true;                 finish();             }         }).setNegativeButton("Cancel", new DialogInterface.OnClickListener() {             @Override             public void onClick(DialogInterface dialog, int which) {                 dialog.dismiss();             }         }).show();         dlg = null;     } else {         super.onBackPressed();     } }

17. Sekarang kita coba jalankan lagi aplikasinya. Coba gunakan tombol save dan load yang telah kita buat. Tampilan aplikasi ketika ingin save data:
    
    Kita bisa memilih format atau tipe file yang ingin kita simpan. Sementara itu, tampilan aplikasi ketika load data:
     

Masih banyak fitur menarik di Pen SDK yang belum kita bahas di sini, untuk pembahasan lebih jauh silakan kunjungi akademi Samsung Galaxy SDK (https://www.dicoding.com/academies/37). Jika ada pertanyaan, saran atau masukan jangan sungkan untuk menuliskannya di kolom komentar.

Selamat belajar, semoga bermanfaat, dan nantikan tutorial Samsung Galaxy SDK selanjutnya.

Also on Dicoding Blog

Implementasi Node.js: Mulai dari Web sampai Machine Learning

Software Engineer dan Software Developer, Serupa tapi Tak Sama

Suka Duka Menjadi Software Engineer