EC30 Programmer's Guide

Small-screen Tips

Part of an app's UX might live outside of the app itself. Take a holistic view regarding how the EC30 app interacts with other devices or software components. For example, by implementing scan-to-login, an EC30 app could eliminate the need to use the soft input panel for logging a user into an external system.

UX Simplification Tips:

Implement scan-to-login to avoid having to use the SIP
Set app to auto-launch to quicken the start-of-workday process
Consider enabling Android accessibility features:
- Voice Access allows control with spoken commands
- TalkBack combines touch with spoken input
- Select to Speak allows user to select when spoken output occurs
- Magnification can temporarily zoom areas of the screen

Alternative Input Layouts

Since it's likely that the EC30-targeted app is being ported from a device with higher resolution than the EC30's 480 x 854 pixels, it's probably better to create all new UI layouts than to squeeze existing ones onto a smaller screen. A common EC30 UI issue comes when inputting text when in portrait mode; the narrow keypad doesn't provide enough space between keys. One solution is to switch device orientation to landscape mode whenever text input is required, and to switch back again when finished.

It's easier to type on a wider SIP. Click to enlarge.

How to Toggle Landscape Mode

In essence, toggling landscape mode for text entry requires that the activity class implement the following listeners for touch and editor actions...

View.OnClickListener
View.OnTouchListener
TextView.OnEditorActionListenerhighlighted

...that those three listeners are set for text input fields, and that these methods are overridden:

onClick()
onTouch()
onEditorAction()

Set and lock desired screen orientation:


public class MainActivity extends AppCompatActivity implements View.OnClickListener,View.OnTouchListener,TextView.OnEditorActionListener {

    private EditText editTextFirstName = null;
    private EditText editTextLastName = null;
    private EditText editTextMobile = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //Set click and touch listeners to edit text fields:
        editTextFirstName = (EditText) findViewById(R.id.editFirstName);
        editTextFirstName.setOnClickListener(this);
        editTextFirstName.setOnTouchListener(this);
        editTextFirstName.setOnEditorActionListener(this);

        editTextLastName = (EditText) findViewById(R.id.editLastName);
        editTextLastName.setOnClickListener(this);
        editTextLastName.setOnTouchListener(this);
        editTextLastName.setOnEditorActionListener(this);

        editTextMobile = (EditText) findViewById(R.id.editMobile);
        editTextMobile.setOnClickListener(this);
        editTextLastName.setOnTouchListener(this);
        editTextMobile.setOnEditorActionListener(this);

        //Set click listener for submit button:
        Button button = (Button) findViewById(R.id.buttonSubmit);
        button.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.buttonSubmit:

        // Unlock screen after tapping submit button:
                setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_FULL_SENSOR);
                break;

            default:
        // If in portrait mode, put device in landscape mode and lock rotation. 
        // If already in landscape mode, just lock rotation:
                if (getResources().getConfiguration().orientation  != Configuration.ORIENTATION_LANDSCAPE){
                    setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
                } else {
                    setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LOCKED);
                }
                break;
        }
    }

    @Override
    public boolean onEditorAction(TextView v, int actionId, KeyEvent event) {
        if(actionId != EditorInfo.IME_ACTION_DONE) {
            return false;
        }
        //Unlock the screen rotation:
        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_FULL_SENSOR);
        return false;
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
    }

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        //On touch requesting the focus for the view.
        if (event.getAction() == MotionEvent.ACTION_DOWN) {
            v.requestFocus();
        }
        return false;
    }
}

Input Alternatives

To avoid manual text input through the SIP, implement drop-down "spinner" menus or "left-right navigators" whenever possible. Use the setItemList API to provide the list of items and the getSelectedItem API to get the text for the selected item text.

Click image to enlarge.

To use input alternatives:

Download the desired controls from the list below:
dropdown.aar | Drop-down spinner
CustomSelectionView.aar | Left-right navigator
Import the code:
File->Project Structure -> “+" (plus sign in top-left corner) ->import .JAR/.AAR package -> [file name]

Add control to layout .xml as below:
Drop-down spinner:

<com.zebra.dropdown.DropDown
    android:id="@+id/cdp1"
    android:layout_width="300dp"
    android:layout_height="40dp"
    android:layout_marginTop="30dp"
    android:layout_marginLeft="10dp"
    app:dd_gravity="CENTER"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent"/>

Left-right navigator:

<com.zebra.selectionview.CustomSelectionView
    android:id="@+id/csv1"
    android:layout_width="300dp"
    android:layout_height="40dp"
    android:layout_marginTop="30dp"
    android:layout_marginLeft="10dp"
    app:csv_gravity="CENTER"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/cdp1"/>

Add items in the control using the setItemList() method as below:


public class MainActivity extends AppCompatActivity {

private DropDown mCustomDropDown;
private CustomSelectionView mCustomSelectionView;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
    setContentView(R.layout.activity_main);

    ArrayList&lt;String&gt; strings = new ArrayList&lt;String&gt;();
    for (int i = 0; i &lt;= 50; i++) {
        strings.add("Item " + i);
    }
    mCustomDropDown = (DropDown) findViewById(R.id.cdp1);
    mCustomDropDown.setItemList(strings);

    mCustomSelectionView = (CustomSelectionView) findViewById(R.id.csv1);
    mCustomSelectionView.setItemList(strings);


}

Access selected item from drop-down or left-right navigator control using the getSelectedItem() method as below:


public void onSubmitClick(View view){
        Toast.makeText(this,"Selected Item on Drop down is = " + mCustomDropDown.getSelectedItem() 
                    "\n Selected Item on Left Right Navigator is = " + mCustomSelectionView.getSelectedItem(),Toast.LENGTH_SHORT).show();
}

Embedded Tools

The EC30 implements embedded tools to simplify changes to display size and font scaling during development. Accessed through the "Power-off" menu when developer options are enabled on the device, the tools are designed to simplify changes to the UX for testing and can be easily disabled before device deployment.

Click image to enlarge.

Remove Small-screen Restriction

The EC30 falls to the category of small-screen devices, and a migrated app will fail to launch if the “smallScreens” attribute in its Android manifest file is to "false." To prevent this issue in the migrated app, the smallScreens attribute must be "true" in the app's manifest:

<supports-screens 
                  android:resizeable=["true"| "false"]
                  android:smallScreens=["true" | "false"] <-- SET TO "true" FOR EC30
                  android:normalScreens=["true" | "false"]
                  android:largeScreens=["true" | "false"]
                  android:xlargeScreens=["true" | "false"]
                  android:anyDensity=["true" | "false"]
                  android:requiresSmallestWidthDp="integer"
                  android:compatibleWidthLimitDp="integer"
                  android:largestWidthLimitDp="integer“
/>

Power Management

The EC30's 1200 mAh Li-Ion PowerPrecision+ battery is rated to provide a full 10 hours of continuous operation. However, battery performance varies greatly depending on device settings, especially those of the display panel and backlight. To maximize operation of EC30 devices while on battery power, Zebra recommends the following power-management best practices:

To Prolong Battery Life:

Set screen brightness to minimum level for use
Set a short screen timeout interval (10-15 seconds)
Set the device to wake after pressing scan trigger or PTT button
Optimize all EC30 apps for Doze and App Standby
Observe Doze Restrictions
Ensure apps are managing activities during the Doze maintenance window
Do not disable Doze mode through MX
Do not "whitelist" an app for battery optimization (prevents Doze mode)
Test app to ensure proper operation when entering/exiting Doze mode

Also See

Google Material Design | Google app design tool
Screen compatibility overview | Google development community
Support different screen sizes | Google development community
Support different pixel densities | Google development community
Optimize for battery life | Google development community
Keeping an app running when it wants to sleep | Zebra engineering

-->