Samsung Mobile SDK Tutorial 5

Samsung SLook AirButtonIn this part of my Samsung Mobile SDK tutorial we will look at the Samsung SLook AirButton. AirButton is going to allow us to create custom menus on the screen and time the user clicks on an active area in the app with the SPen button.

With Samsung AirButton you can use S-Pen to view content, select menus or insert images for quick content access. AirButton shows you information from anywhere and anytime and it can perform additional operations when you bring your S-Pen near the target view and press the side button.

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 from the Video and Transcription

<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:orientation="vertical"
    tools:context=".MainActivity"
    android:background="@drawable/background"
    android:id="@+id/root_layout" >
    <Button
        android:id="@+id/btn_recipient"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:text="Frequent list" />
    <Button
        android:id="@+id/btn_text"
        android:layout_width="200dip"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:text="Show text" />
    <Button
        android:id="@+id/btn_menu"
        android:layout_width="100dip"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="50dip"
        android:text="Menu" />    
    <Button
        android:id="@+id/btn_image"
        android:layout_width="60dip"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:text="+" />                        
</RelativeLayout>

package com.samsung.android.example.slookdemos;

import java.util.ArrayList;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

import com.samsung.android.sdk.look.airbutton.SlookAirButton;
import com.samsung.android.sdk.look.airbutton.SlookAirButton.ItemSelectListener;
import com.samsung.android.sdk.look.airbutton.SlookAirButtonAdapter;
import com.samsung.android.sdk.look.airbutton.SlookAirButtonAdapter.AirButtonItem;

public class AirButtonSimpleActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_airbutton_simple);

        Button btnMenu = (Button) findViewById(R.id.btn_menu);
        
        // Call to method below which is passed a reference to the button
        createMenuWidgetFromView(btnMenu);
        Button btnRecipient = (Button) findViewById(R.id.btn_recipient);
        createRecipientListWidgetFromView(btnRecipient);
        Button btnImage = (Button) findViewById(R.id.btn_image);
        createImageListWidgetFromView(btnImage);
        Button btnText = (Button) findViewById(R.id.btn_text);
        createTextListWidgetFromView(btnText);

        // Toast provides information on using the example
        Toast.makeText(this, "Please hover and press the S-pen side-button on each button",
                Toast.LENGTH_SHORT).show();
    }

    // When an item is selected open a Toast that displays the index clicked
    private ItemSelectListener mCallback = new ItemSelectListener() {
        public void onItemSelected(View arg0, int arg1, Object arg2) {
            Toast.makeText(AirButtonSimpleActivity.this, "Item index = " + arg1, Toast.LENGTH_SHORT)
                    .show();
        }
    };

    // When btnImage is clicked this returns an SlookAirButton
    public SlookAirButton createImageListWidgetFromView(View v) {

    	// Creates an instance of the SLookAirButton
    	// getAdapterImageList() retrieves an ArrayList of AirButtonItems
    	// UI_TYPE_LIST says that we want the list display version
        SlookAirButton airButtonWidget = new SlookAirButton(v, getAdapterImageList(),
                SlookAirButton.UI_TYPE_LIST);
        
        // Set the ItemSelectListener instance that receives event
        // information from the SlookAirButton
        airButtonWidget.setItemSelectListener(mCallback);
        
        // Set the widget position 
        airButtonWidget.setGravity(SlookAirButton.GRAVITY_LEFT);
        
        // Define the display direction for your items
        // for UI_TYPE_LIST you can use DIRECTION_UPPER,
        // DIRECTION_LOWER, or DIRECTION_AUTO
        airButtonWidget.setDirection(SlookAirButton.DIRECTION_UPPER);
        
        // Set the position of the AirButton based on x and y
        airButtonWidget.setPosition(0, -50);

        return airButtonWidget;
    }

    // When btnText is clicked this returns an SlookAirButton
    public SlookAirButton createTextListWidgetFromView(View v) { 
    	
    	// Creates an instance of the SLookAirButton
    	// getAdapterStringList() retrieves an ArrayList of AirButtonItems
    	// UI_TYPE_LIST says that we want the list display version
        SlookAirButton airButtonWidget = new SlookAirButton(v, getAdapterStringList(), 
        		SlookAirButton.UI_TYPE_LIST);
        
        // Set the ItemSelectListener instance that receives event
        // information from the SlookAirButton
        airButtonWidget.setItemSelectListener(mCallback);

        // Set the position of the AirButton based on x and y
        airButtonWidget.setPosition(0, 50);

        return airButtonWidget;
    }

    // When btnRecipient is clicked this returns an SlookAirButton
    public SlookAirButton createRecipientListWidgetFromView(View v) {
    	
    	// Creates an instance of the SLookAirButton
    	// getAdapterRecipientList() retrieves an ArrayList of AirButtonItems
    	// UI_TYPE_LIST says that we want the list display version
        SlookAirButton airButtonWidget = new SlookAirButton(v, getAdapterRecipientList(),
                SlookAirButton.UI_TYPE_LIST);
        
        // Define the display direction for your items
        // for UI_TYPE_LIST you can use DIRECTION_UPPER,
        // DIRECTION_LOWER, or DIRECTION_AUTO
        airButtonWidget.setDirection(SlookAirButton.DIRECTION_LOWER);
        
        // Set the ItemSelectListener instance that receives event
        // information from the SlookAirButton
        airButtonWidget.setItemSelectListener(mCallback);

        return airButtonWidget;
    }

    // When btnMenu is clicked this returns an SlookAirButton
    public SlookAirButton createMenuWidgetFromView(View v) {
    	
    	// Creates an instance of the SLookAirButton
    	// getAdapterMenuList() retrieves an ArrayList of AirButtonItems
    	// UI_TYPE_MENU says that we want the menu display version
    	// This menu isn't scrollable, has an image and text and
    	// is displayed in a horizontal direction. 
    	// Using 32dp x 32dp drawables is recommended
        SlookAirButton airButtonWidget = new SlookAirButton(v, getAdapterMenuList(),
                SlookAirButton.UI_TYPE_MENU);
        
        // Define the display direction for your items
        airButtonWidget.setDirection(SlookAirButton.DIRECTION_RIGHT);
        
        // Set the ItemSelectListener instance that receives event
        // information from the SlookAirButton
        airButtonWidget.setItemSelectListener(mCallback);

        return airButtonWidget;
    }

    // Creates the menu of AirButtonItems to display in the SlookAirButton
    public SlookAirButtonAdapter getAdapterImageList() {
        ArrayList<AirButtonItem> itemList = new ArrayList<AirButtonItem>();
        itemList.add(new AirButtonItem(getResources().getDrawable(R.drawable.pic01), null, null));
        itemList.add(new AirButtonItem(getResources().getDrawable(R.drawable.pic02), null, null));
        itemList.add(new AirButtonItem(getResources().getDrawable(R.drawable.pic03), null, null));
        itemList.add(new AirButtonItem(getResources().getDrawable(R.drawable.pic04), null, null));
        itemList.add(new AirButtonItem(getResources().getDrawable(R.drawable.pic05), null, null));
        itemList.add(new AirButtonItem(getResources().getDrawable(R.drawable.pic06), null, null));
        itemList.add(new AirButtonItem(getResources().getDrawable(R.drawable.pic07), null, null));
        itemList.add(new AirButtonItem(getResources().getDrawable(R.drawable.pic08), null, null));
        itemList.add(new AirButtonItem(getResources().getDrawable(R.drawable.pic09), null, null));
        itemList.add(new AirButtonItem(getResources().getDrawable(R.drawable.pic10), null, null));
        itemList.add(new AirButtonItem(getResources().getDrawable(R.drawable.pic11), null, null));
        itemList.add(new AirButtonItem(getResources().getDrawable(R.drawable.pic12), null, null));

        return new SlookAirButtonAdapter(itemList);
    }

    // Creates the menu of AirButtonItems to display in the SlookAirButton
    public SlookAirButtonAdapter getAdapterStringList() {
        ArrayList<AirButtonItem> stringList = new ArrayList<AirButtonItem>();
        stringList.add(new AirButtonItem(null, "You can come here at 5:00", null));
        stringList.add(new AirButtonItem(null, "Why?", null));
        stringList.add(new AirButtonItem(null, "Please send your e-mail address", null));
        stringList.add(new AirButtonItem(null, "Ok. No problem", null));
        stringList.add(new AirButtonItem(null, "kkkkkkk", null));
        stringList.add(new AirButtonItem(null, "I'm a boy", null));
        stringList.add(new AirButtonItem(null, "You are a girl", null));
        stringList.add(new AirButtonItem(null, "How about this weekend?", null));
        stringList.add(new AirButtonItem(null, "You are so sexy!", null));
        stringList.add(new AirButtonItem(null, "Haha it's really good", null));
        stringList.add(new AirButtonItem(null, "What you really want to?", null));
        stringList.add(new AirButtonItem(null, "I wanna watch movie", null));
        stringList.add(new AirButtonItem(null, "No...", null));
        stringList.add(new AirButtonItem(null, "ASAP", null));
        stringList.add(new AirButtonItem(null, "Really? I can't agree with you", null));

        return new SlookAirButtonAdapter(stringList);
    }

    // Creates the menu of AirButtonItems to display in the SlookAirButton
    public SlookAirButtonAdapter getAdapterRecipientList() {
        ArrayList<AirButtonItem> itemList = new ArrayList<AirButtonItem>();
        itemList.add(new AirButtonItem(getResources().getDrawable(R.drawable.recipient),
                "Alexander Hamilton", null));
        itemList.add(new AirButtonItem(getResources().getDrawable(R.drawable.recipient),
                "Oliver Wolcott Jr", null));
        itemList.add(new AirButtonItem(getResources().getDrawable(R.drawable.recipient),
                "Samuel Dexter", null));
        itemList.add(new AirButtonItem(getResources().getDrawable(R.drawable.recipient),
                "Albert Gallatin", null));
        itemList.add(new AirButtonItem(getResources().getDrawable(R.drawable.recipient),
                "George W. Campbell", null));
        itemList.add(new AirButtonItem(getResources().getDrawable(R.drawable.recipient),
                "Richard Rush", null));
        itemList.add(new AirButtonItem(getResources().getDrawable(R.drawable.recipient),
                "Richard Rush", null));
        itemList.add(new AirButtonItem(getResources().getDrawable(R.drawable.recipient),
                "William J. Duane", null));
        itemList.add(new AirButtonItem(getResources().getDrawable(R.drawable.recipient),
                "Thomas Ewing", null));
        itemList.add(new AirButtonItem(getResources().getDrawable(R.drawable.recipient),
                "George M. Bibb", null));
        itemList.add(new AirButtonItem(getResources().getDrawable(R.drawable.recipient),
                "William M. Meredith", null));
        itemList.add(new AirButtonItem(getResources().getDrawable(R.drawable.recipient),
                "Howell Cobb", null));
        itemList.add(new AirButtonItem(getResources().getDrawable(R.drawable.recipient),
                "Salmon P. Chase", null));

        return new SlookAirButtonAdapter(itemList);
    }
    
    // Creates the menu of AirButtonItems to display in the SlookAirButton
    public SlookAirButtonAdapter getAdapterMenuList() {
        ArrayList<AirButtonItem> itemList = new ArrayList<AirButtonItem>();
        itemList.add(new AirButtonItem(getResources().getDrawable(R.drawable.ic_menu_add), "Add",
                null));
        itemList.add(new AirButtonItem(getResources().getDrawable(R.drawable.ic_menu_archive),
                "Help", null));
        itemList.add(new AirButtonItem(getResources().getDrawable(R.drawable.ic_menu_edit), "Edit",
                null));
        itemList.add(new AirButtonItem(getResources().getDrawable(R.drawable.ic_menu_help), "Help",
                null));
        ;

        return new SlookAirButtonAdapter(itemList);
    }
}

18 Responses to “Samsung Mobile SDK Tutorial 5”

  1. Sang says:

    Hi Derek,

    nice tutorial again.

    by the way, I signed up for the Samsung account and left a comment in one of your previous tutorials (do not remember which one) but it seems like the comment is deleted.
    I went to the previous tutorials to find my comment to see your reply but seems like I cannot find it.

  2. Nebojsa Videnov says:

    Hi Derek,

    Really appreciate your will to share knowledge in such cool and professional way.
    Waiting for tutorials about Android Game Development..
    By the way I have signed for the Samsung developer account πŸ™‚
    Best regards,
    Nebojsa

  3. Randy Miller says:

    Hi Derek.
    I have watched most of your tutorials and they are fantastic. I also signed up for the Samsung developer account and would like to be entered. I could really use a new device as I just started working at a software development company where I have been working on mobile android apps and having an up-to-date device to test them on would be great (the company I work for is cheap and my Droid DNA is far and above the most up to date phone we have to test on).

    Anyway, keep up the good work. I look forward to more tutorials. I don’t think you have done a tutorial on widgets yet and I think that is something that would be worthwhile to know.

  4. marko says:

    Hi Derek,
    I’ve signed up for Samsung developer account. Wish me luck πŸ™‚ . Thank you for all amazing videos. I watched all java videos from 1-19, OOD videos, and OOP is still little confusing to me. I feel like I am missing something. Maybe I need to practice more. Thank you again Derek.

    • Derek Banas says:

      Hi Marko,

      Good luck in the contest. To truly understand OOP you need to practice. Try creating systems in which you solve your own real world problems. I’m glad you found the videos useful πŸ™‚

  5. marko says:

    Derek, my comment still awaiting moderation.

  6. Gaurav says:

    Hi Derek,

    Thanks for sharing, I want to know how to use SlookAirButtonAdapter.onHoverEnter , I can’t find out how to implement it in my code.

  7. Evan B says:

    I just singed up for a samsung developers account.

Leave a Reply

Your email address will not be published.

Google+