Samsung Mobile SDK Tutorial 6

Samsung S Pen TutoriaIn this part of my Samsung Mobile SDK tutorial I will focus in on the S Pen. I’ll cover how to use the S Pen settings popup. We’ll also look into how to change the look of buttons depending upon their state changes. After I cover the basics of buttons in the next tutorial we’ll make a tool bar.

In general we are putting together all of the pieces that would be required to create a professional Android paint app. All of the code follows the video below.

If you like videos like this, it helps to tell Google+ with a click here

Donโ€™t forget to check out the Samsung Smart App Challenge and if it is still November 2013, donโ€™t forget to sign up to win a Samsung Galaxy Note 3, or Samsung Galaxy Gear Smart Watch on my site.

Code and Transcript from the Video

<LinearLayout 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:orientation="vertical"
    tools:context=".PenSample1_2_PenSetting" >
    
    <!-- tools:context defines which activity the layout
    is associated with when the app loads since multiple 
    Activitys can use one layout. It also allows the 
    layout editor to know what theme is being used. -->

    <LinearLayout
        android:id="@+id/tool_menu"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <ImageView
            android:id="@+id/penBtn"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="1dip"
            android:background="@drawable/selector_tool_bg"
            android:src="@drawable/selector_pen" />
    </LinearLayout>
    
    <FrameLayout
        android:id="@+id/spenViewContainer"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <RelativeLayout
            android:id="@+id/spenViewLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent" >
        </RelativeLayout>
    </FrameLayout>    
</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>
<selector android:id="@+id/myselector" xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tool_ic_area_center_02"/>
<item android:state_selected="false" android:state_pressed="true"  android:drawable="@drawable/tool_ic_area_bg_press"/>
<item android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/tool_ic_area_select_02"/>
<item android:state_selected="true"  android:state_pressed="true"  android:drawable="@drawable/tool_ic_area_bg_press"/>
</selector>

<?xml version="1.0" encoding="utf-8"?>
<selector android:id="@+id/myselector" xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_enabled="true" android:state_pressed="false" android:drawable="@drawable/tool_ic_pen"/>
<item android:state_enabled="true" android:state_pressed="true" android:drawable="@drawable/tool_ic_pen_press"/>
<item android:state_enabled="true" android:state_selected="true" android:drawable="@drawable/tool_ic_pen_press"/>
<item android:state_enabled="false" android:drawable="@drawable/tool_ic_pen_dim"/>
</selector>

package com.samsung.android.sdk.pen.pg.example1_2;

import java.io.IOException;

import android.app.Activity;
import android.content.Context;
import android.graphics.Color;
import android.graphics.Rect;
import android.os.Bundle;
import android.view.Display;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.Toast;

//Used to make sure the device supports the Samsung Mobile SDK
import com.samsung.android.sdk.SsdkUnsupportedException;

//Initializes and verifies that the S Pen is available
import com.samsung.android.sdk.pen.Spen;

//Allows you to manage SPD (S Pen Data Files)
//Loads and saves SPD files
//Adds and removes PageDocs from NoteDocs and attaches external files
import com.samsung.android.sdk.pen.document.SpenNoteDoc;

//Contains all the data and objects in a page
//Adds, deletes, retrieves and changes layers, objects and general
//settings for the page document.
import com.samsung.android.sdk.pen.document.SpenPageDoc;

// Listener used when a color is picked in the View
import com.samsung.android.sdk.pen.engine.SpenColorPickerListener;

//Allows for editing of the drawing surface with both a finger or the SPen
import com.samsung.android.sdk.pen.engine.SpenSurfaceView;

// Stores Pen settings like color, Pen class name, thickness
import com.samsung.android.sdk.pen.SpenSettingPenInfo;

// Reference to SDKUtils in this package
// Handles creating the Alert Dialogs for when the device
// can't run the app, the S Pen isn't available, the app
// needs upgraded, etc.
import com.samsung.android.sdk.pen.pg.tool.SDKUtils;

// Provides methods for working with the Pen settings layout
import com.samsung.android.sdk.pen.settingui.SpenSettingPenLayout;
import com.samsung.spensdk3.example.R;

public class PenSample1_2_PenSetting extends Activity {

	// A Context provides access to application resources
    private Context mContext;
    
    // Covered above
    private SpenNoteDoc mSpenNoteDoc;
    private SpenPageDoc mSpenPageDoc;
    private SpenSurfaceView mSpenSurfaceView;
    
 // Provides methods for working with the Pen settings layout
    private SpenSettingPenLayout mPenSettingView;

    // Image loaded into the tool bar. When clicked it will
    // open the Pen settings window
    private ImageView mPenBtn;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_pen_setting);
        mContext = this;

        // Value will track whether the S Pen is enabled or not
        boolean isSpenFeatureEnabled = false;
        
        // Create an SPen object
        Spen spenPackage = new Spen();
        
        // Try to initialize the Spen and if it doesn't exist
        // trigger an exception that is handled below
        try {
            spenPackage.initialize(this);
            
            // Is the SPen available for use
            isSpenFeatureEnabled = spenPackage.isFeatureEnabled(Spen.DEVICE_PEN);
            
        } 
        
        catch (SsdkUnsupportedException e) {
            if( SDKUtils.processUnsupportedException(this, e) == true) {
                return;
            }
        } 
        
        // If the S Pen can't be used open an Error Toast
        catch (Exception e1) {
            Toast.makeText(mContext, "Cannot initialize Spen.",
                Toast.LENGTH_SHORT).show();
            e1.printStackTrace();
            
            // Drop the Activity from memory
            finish();
        }

        // initialize the layouts
        FrameLayout spenViewContainer =
            (FrameLayout) findViewById(R.id.spenViewContainer);
        RelativeLayout spenViewLayout =
            (RelativeLayout) findViewById(R.id.spenViewLayout);

        // To create the SpenSettingPenLayout that will allow
        // us to work with the Pen settings layout, pass it the
        // Context, an image file path if any and the RelativeLayout
        mPenSettingView =
            new SpenSettingPenLayout(mContext, new String(),
                spenViewLayout);
        
        // Handle if we can't create a PenSettingView
        if (mPenSettingView == null) {
            Toast.makeText(mContext, "Cannot create new PenSettingView.",
                Toast.LENGTH_SHORT).show();
            finish();
        }
        
        // Add the PenSettingView to the FrameLayout
        spenViewContainer.addView(mPenSettingView);

        // Create the drawing surface on the device
        mSpenSurfaceView = new SpenSurfaceView(mContext);
        
        // Check if the SPen surface was created and if not display Toast
        // error message
        if (mSpenSurfaceView == null) {
            Toast.makeText(mContext, "Cannot create new SpenView.",
                Toast.LENGTH_SHORT).show();
            finish();
        }
        
        // Insert the drawing surface into the relative layout
        spenViewLayout.addView(mSpenSurfaceView);
        
        // Sets the canvas view
        mPenSettingView.setCanvasView(mSpenSurfaceView);

        // Display provides information on the display
        // Information about the size, density, orientation
        // refresh rate
        Display display = getWindowManager().getDefaultDisplay();
        
        // Holds 4 integer coordinates for a rectangle
        // bottom, left, right, top
        Rect rect = new Rect();
        
        // Get the size of the display as a Rect in pixels
        display.getRectSize(rect);
       
        try {
        	
        	// Create a SpenNoteDoc by passing the Context and the 
        	// width and height
            mSpenNoteDoc =
                new SpenNoteDoc(mContext, rect.width(), rect.height());
            
        } 
        
        catch (IOException e) {
            Toast.makeText(mContext, "Cannot create new NoteDoc",
                Toast.LENGTH_SHORT).show();
            e.printStackTrace();
            finish();
        } 
        
        catch (Exception e) {
            e.printStackTrace();
            finish();
        }
        
        // Adds a page to the document
        mSpenPageDoc = mSpenNoteDoc.appendPage();
        
        // Changes the background color
        mSpenPageDoc.setBackgroundColor(0xFFD6E6F5);
        
        // Clear undo / redo history
        mSpenPageDoc.clearHistory();
        
        // Put the Spen document in the current view
        // and pass true to update the screen
        mSpenSurfaceView.setPageDoc(mSpenPageDoc, true);

        // Call to method below
        initPenSettingInfo();
        
        // Set the method that will handle color changes
        mSpenSurfaceView.setColorPickerListener(mColorPickerListener);

        // Initialize the ImageView for the Pen icon
        mPenBtn = (ImageView) findViewById(R.id.penBtn);
        
        // Set the method that will handle clicks on the 
        // Pen button
        mPenBtn.setOnClickListener(mPenBtnClickListener);

        // Check if the Spen is available or not
        if(isSpenFeatureEnabled == false) {
        	
        	// Set the type of tool to recognize as the finger
        	// and for the finger to be able to draw on the screen
            mSpenSurfaceView.setToolTypeAction(SpenSurfaceView.TOOL_FINGER,
                SpenSurfaceView.ACTION_STROKE);
            Toast.makeText(mContext,
                "Device does not support Spen. \n You can draw stroke by finger",
                Toast.LENGTH_SHORT).show();
        }
    }

    private void initPenSettingInfo() {
        
    	// Set initial Pen settings
        SpenSettingPenInfo penInfo = new SpenSettingPenInfo();
        penInfo.color = Color.BLUE;
        penInfo.size = 10;
        
        // Set the Pen settings for the Surface View
        mSpenSurfaceView.setPenSettingInfo(penInfo);
        
        // Set the Pen settings for the Settings View
        mPenSettingView.setInfo(penInfo);
    }

    // Handles displaying the Pen Settings window
    private final OnClickListener mPenBtnClickListener =
        new OnClickListener() {
            @Override
            public void onClick(View v) {
                
            	// If it is on the screen set visibility off
                if (mPenSettingView.isShown()) {
                    mPenSettingView.setVisibility(View.GONE);
                
                } else {
                	
                	// If it isn't on the screen set visibility on
                    mPenSettingView
                        .setViewMode(SpenSettingPenLayout.VIEW_MODE_EXTENSION);
                    mPenSettingView.setVisibility(View.VISIBLE);
                }
            }
        };

    // When a color is picked, which occurs when the Pen settings
    // window is changed call this
    private SpenColorPickerListener mColorPickerListener =
        new SpenColorPickerListener() {
            @Override
            public void onChanged(int color, int x, int y) {
                
            	// Get the new settings from the Pen Settings View 
            	// and save them to the object representing the 
            	// Pens settings
                if (mPenSettingView != null) {
                    SpenSettingPenInfo penInfo = mPenSettingView.getInfo();
                    penInfo.color = color;
                    mPenSettingView.setInfo(penInfo);
                }
            }
        };

     // The app is being shutdown and all resources will be lost 
    @Override
    protected void onDestroy() {
        super.onDestroy();

        if (mPenSettingView != null) {
            mPenSettingView.close();
        }
        if(mSpenSurfaceView != null) {
            mSpenSurfaceView.close();
            mSpenSurfaceView = null;
        }

        if(mSpenNoteDoc != null) {
            try {
                mSpenNoteDoc.close();
            } catch (Exception e) {
                e.printStackTrace();
            }
            mSpenNoteDoc = null;
        }
    };
}

19 Responses to “Samsung Mobile SDK Tutorial 6”

  1. Hassen Ouhida says:

    My youtube name is Hassen Ouhida and I signed up for the Samsung developer account

  2. Bhau Kumar says:

    Hi Derek,
    I finally got a chance to signup for samsung galaxy challenge. I am writing an app for android device and currently I don’t have one. I am looking for one cheap one so that I can test my app on real device. It will be really exciting to see my own app running on the mobile device. How was your experience when you saw first time your app on the mobile device?
    I learned a lot from your sessions.
    Thanks a lot.
    –Bhau

    • Derek Banas says:

      Hi Bhau,

      I do a lot of work with making Android apps that work with other devices so it is extremely cool to be able to do that. I can’t wait to be able to show you guys what i have been working on. Good luck in the contest ๐Ÿ™‚

      Derek

  3. Jean says:

    Derek,

    I signed up for a Samsung Developers account.

    Thanks,

    Jean

  4. Miguel says:

    Hi Derek. Love your vids! I’m developing an app and I can honestly say that thanks to your vids I’ve gotten over the “hump” of programming that I otherwise wasn’t able to a few months ago when I tried iOS development. I’m finally googling less and coding more thanks to you!
    Also, I signed up for the Samsung Developer’s Account. ๐Ÿ™‚

    Thanks!

  5. Hi Derek,
    Thanks a great deal for the effort and the time that you are invest to make these video tutorials. I signed up with Samsung developer account. I really love your video tutorials. I’m an undergraduate. Your tutorials help me to understand core concepts, and now I can make my own Android/web applications as well. I take this opportunity as a privilege to win a Samsung Galaxy.

    Thanks again.

    Chamin Nalinda

    • Derek Banas says:

      Hi Chamin,

      You’re very welcome ๐Ÿ™‚ The phone has been claimed, but the 3 smart watches still havenโ€™t. If they arenโ€™t claimed by next Friday Iโ€™ll hold another drawing to pick new winners. Good luck

  6. Jos says:

    Hey Derek,

    I made a samsung developers account.

    -Jos

  7. nishant says:

    Hello admin,how this works i.e users write a comment in a textbox
    and when submitted it appears above.(as in case of this site we write comment,name n other details it appears above)

Leave a Reply

Your email address will not be published.

Google+