Implementing Settings for Lux Meter Instrument in PSLab Android App

In PSLab android app, we have included sensor instruments which use either inbuilt sensor of smartphone or external sensor to record sensor data. For example, Lux Meter uses the light sensor to record lux data but the problem is that these instruments doesn’t contain settings option to configure the sensor record-setting like which sensor to use, change the update period etc.

Therefore, we need to create a settings page for the Lux Meter instrument which allows the user to modify the properties of the sensor instrument. For that I will use Android Preference APIs to build a settings interface that is similar to setting activity in any other android app.

The main building block of the settings activity is the Preference object. Each preference appears as a single setting item in an activity and it corresponds to key-value pair which stores the settings in default Shared Preferences file. Every time any setting is changed by the user the Android will store the updated value of the setting in the default shared preferences which we can read in any other activity across the app.

In the following steps I will describe instruction on how to create the setting interface in Android app: 

Step1 Include the dependency

First, we need to include the dependency for v7 Preference Support Library by including the following code:

dependencies { 
compile fileTree(dir: 'libs', include: ['*.jar']) 
compile 'com.android.support:appcompat-v7:23.1.1' 
compile 'com.android.support:design:23.1.1' 
compile 'com.android.support:preference-v7:23.1.1' 
}

 Step 2 Creating the preferences screen in XML

For this step, I have created a preference screen which will be inflated when the settings fragment is being created.

I created a file named  “lux_meter_settings.xml” and place it in the res/xml/ directory.

The root node for the XML file must be a <PreferenceScreen> element. We have to add each Preference within this element. Each child I added within the <PreferenceScreen> element appears as a single item in the list of settings.

The preference which I have used are:

<EdittextPreference> This preference opens up a dialog box with edit text and stores whatever value is written by the user in the edit text. I have used this preference for inputting update period and high limit of data during recording.

<CheckboxPreference> shows an item with a checkbox for a setting that is either enabled or disabled. The saved value is a boolean (true if it’s checked). I have used this preference for enabling or disabling location data with the recorded data.

<ListPreference> opens a dialog with a list of radio buttons. The saved value can be any one of the supported value types. I have used this preference to allow the user to choose between multiple sensor types.

<?xml version="1.0" encoding="utf-8"?>
<PreferenceScreen xmlns:android="http://schemas.android.com/apk/res/android">
       <EditTextPreference
           android:key="setting_lux_update_period"
           android:title="@string/update_period"
           android:dialogTitle="@string/update_period"
           android:defaultValue="1000"
           android:dialogMessage="Please provide time interval(in ms) at which data will be updated"
           android:summary="Update period is 900ms"/>

       <EditTextPreference
           android:key="setting_lux_high_limit"
           android:title="High Limit"
           android:dialogTitle="High Limit"
           android:defaultValue="2000"
           android:dialogMessage="Please provide maximum limit of LUX value to be recorded"
           android:summary="High Limit is 2000 Lux"/>

       <CheckBoxPreference
           android:defaultValue="false"
           android:key="include_location_sensor_data"
           android:summary="Include the location data in the logged file"
           android:title="Include Location Data" />
</PreferenceScreen>

The above XML file will produce a layout as shown in Figure 1 below:

Figure 1 shows a preview of settings layout in Android Studio

 

Step 3 Implementing the backend of setting interface

As android Documentation clearly states:

As your app’s settings UI is built using Preference objects instead of View objects, you need to use a specialized Activity or Fragment subclass to display the list settings:

  • If your app supports versions of Android older than 3.0 (API level 10 and lower), you must build the activity as an extension of the PreferenceActivity class.
  • On Android 3.0 and later, you should instead use a traditional Activity that hosts a PreferenceFragment that displays your app settings.

Therefore, I first created an Activity named “SettingsActivity” which will act as a host for a Fragment. This gist contains code for SettingsActivity which I defined in the PSLab android app which will show the Setting Fragment.

Now, for setting fragment I have created a new fragment and name it “LuxMeterSettingsFragment” and make that fragment class extends the PreferenceFragmentCompat class and for which I needed to add this import statement.

import android.support.v7.preference.PreferenceFragmentCompat;

And then inside the SettingsFragment, I overridden the following method like this:

@Override
public void onCreatePreferences(Bundle savedInstanceState,
                                String rootKey) {
    setPreferencesFromResource(R.xml.lux_meter_settings, rootKey);
}

This method is called when the Android is creating the Preferences that is when we need to call the method ‘setPreferencesFromResource()’ and pass the resource file in which we have defined our preferences along with the root key which comes as a parameter. Here, the Android will create preferences referred by the key which we have provided and initialize it to the default value in the default SharedPreferences file.

Step 4 Providing setting option to navigate to setting activity

First I included a setting option in the menu file which is getting inflated in the Lux Meter Activity toolbar as shown in below code.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto">
  
   ...

   <item
       android:id="@+id/settings"
       android:title="@string/lux_meter_settings"
       app:showAsAction="never" />
</menu>

Then, heading over to  Lux Meter Activity in the onOptionItemSelected() method I added below code in which I created intent to open Setting Activity when the setting option is selected.

@Override
public boolean onOptionsItemSelected(MenuItem item) {
case R.id.settings:
   Intent settingIntent = new Intent(this, SettingsActivity.class);
   settingIntent.putExtra("title", "Lux Meter Settings");
   startActivity(settingIntent);
   break;
}

After this step, we can see the settings option in Lux Meter Activity as shown in Figure 2

Figure 2 shows the setting option in the overflow menu

 

To see if its working opens the app -> open Lux Meter Instrument-> Open Overflow Menu -> click on Lux Meter Setting Option to open settings.

Here we can the Lux Meter Setting as shown by the Figure 3.

Figure 3 shows the screenshot of the Lux Meter Setting activity on the actual device

 

Step 5 Implementing listener for change in Preferences item

Now we can also implement a listener by making SettingsFragment class implement SharedPreference.OnSharedPreferenceChangeListener interface and then overriding the onSharedPreferenceChanged() method.

Now, to register this listener with the Preference Screen which we will do it in the onResume() method of the fragment and deregister the listener in the onPause() method to correspond with the lifecycle of the fragment.

@Override
public void onResume() {
   super.onResume();
      
getPreferenceScreen().getSharedPreferences().registerOnSharedPreferenceChangeListener(this);
}
@Override
public void onPause() {
   super.onPause();
        getPreferenceScreen().getSharedPreferences().unregisterOnSharedPreferenceChangeListener(this);
}

Thus we have successfully implemented settings for the Lux Meter Instrument.

Resources

  1. Adding Settings to an App – Google Developer Fundamental Course Article on how to add settings.
  2. Gist – Setting Activity implementation – The gist used for setting activity in the app

Producing Waveforms using Wave Generator module in the PSLab Android App

This blog will demonstrate how to produce different waveforms using the Wave Generator module in the PSLab android app and view them on the Oscilloscope.

The Wave Generator in PSLab android app is simple to use and has a UI which is similar to physical commodity wave generators. It is capable of producing different waveforms like sine, sawtooth and square wave.

Apparatus Required

Before getting started with the wave generator we require the following items:

  1. PSLab device
  2. An android phone with PSLab app installed in it.
  3. USB cable (Mini B)
  4. OTG(On the Go) wire
  5. Some connecting wires having pins at both ends

Understanding the Wave Generator Pins

Figure 1 shows the pin diagram of the PSLab device

Let me briefly explain the use of the pins that are going to be used in the Wave generator module:

S1 and S2 pins

The PSLab device contains two pins (S1, S2) which are capable of producing two independent analog waveforms (sine,  sawtooth) having different frequencies and phase offset. The frequency range is from 10Hz to 5Khz.

SQR1, SQR2, SQR3 and SQR4 pin

The SQR1 pin is used for producing the square waveform and all the SQ pins can be used together to produce four different PWM signal having the same frequency. These PWM signal can have a different duty cycle and phase.

CH1, CH2 and CH3 pin

The CH pins are used by the oscilloscope in the  PSLab android app to monitor waveform signals produced by the wave generator pins. They can be used together to simultaneously monitor multiple waveforms.

Setting up the Device

We need to connect the PSLab device with the mobile phone as shown in Figure 2 which can be done by following steps:

  1. Connect a micro USB(Mini B) to the PSLab device.
  2. Connect the other end of the micro USB cable to the OTG.
  3. Connect the OTG to the phone.
Figure 2 shows the connection of the PSLab device with the smartphone

Producing Waveforms

Now, once the device has been properly connected to the device (which is shown at the top right corner of the app), then in the instruments page scroll down to the Wave Generator card and click on it to open the WaveGenerator activity.

Figure 3 shows the instruments containing card view to all the instruments and icon to show device status

Here you will see a screen like shown in Figure 4 containing two monitors and a controlling panel with lots of buttons. Here the Waveform panel is used to control the S1 and S2 pins whose properties are shown on the left monitor screen and the Digital panel is used to control the SQR pins whose properties are shown on the right monitor screen.

Figure 4 shows the UI of the Wave Generator Activity

For sine/sawtooth wave:

Connect the S1 pin to the CH1 pin using a connecting wire, then in the Waveform panel select the Wave1 button, choose the type of waveform(either sine or sawtooth), then click on the Freq button to change the frequency of the wave, then use the Seek bar or the up/down arrow buttons to change the value of frequency and then press the set button to set the frequency for the S1 pin as shown below:

Figure 5 The GIF shows the setting of the properties of the W1 pin in the UI

Now, click the view button at bottom right corner, this will directly open the Oscilloscope provided by the PSLab android app .

Once the oscilloscope is open, check the CH1 pin from the panel in the bottom and we can see the sine wave in the monitor shown by the screen in Figure 6 and Figure 7

Figure 6 shows the screenshot of oscilloscope showing the sine wave
Figure 7 shows the screenshot of the oscilloscope showing sawtooth wave

Similarly, if you want to see two sine waves connect the S1 pin to the CH1 and connect the S2 pin to the CH2 channel , choose the wave-type for both pin, set the frequencies for both of the waves, here you can also set the phase difference between the two waves, for setting phase difference first click on Wave2 button it will enable the phase button, then click on the Phase button and set the value of phase with the help of the Seek bar.

For Square Wave

Connect the CH1 pin to the SQ1 pin, after making the connection head over to the Digital panel in the Wave Generator, ensure that the mode is selected to square, now click on the Freq button in the digital panel and set the frequency of the square wave with the help of Seek bar, then click on the Duty button and set the value of duty cycle for the square wave as shown below:

Figure 8 The GIF shows the setting of properties for producing square wave from SQ1 pin

Now, once the square wave has been set click on the view button, the oscilloscope will open then select the CH1 pin and you can see the square wave on the monitor as shown by the screen in Figure 9.

Figure 9 shows the screenshot of the square wave as shown in the oscilloscope

Thus we have produced different waveforms using PSLab wave generator module.

Resources

PSLab device pin diagram  – https://github.com/fossasia/pslab-artwork/blob/master/Sticker/pslabdesign.png

Making Zoom View in PSLab Android app

This blog demonstrates how to make a zoom view in an Android app by taking example from one made in PSLab Android app. It will mainly reflect the work done under PR #1117 in PSLab Android repository. The demonstration shown in this blog is for zooming a complete layout. But individual components of a layout can also be given this zoom effect.

How to make a zoom view?

Below is a step by step guide on how to implement a zoom view in an Android app :

  • First make a  Zoom Layout class in Android Project which will further include GestureDetector, MotionEvent, etc.
  • Now extend the Zoom Layout class from a base layout provided by Android i.e. Relative Layout, Linear Layout, etc. as per need because we need to give zoom effect to a complete layout. In this demonstration, I will use the Relative Layout class as my base class.
  • Also to detect the gestures made by a user, we need to implement the ScaleGestureDetector.OnScaleGestureListener class. So, finally, the class implementation will look like this
public class ZoomLayout extends RelativeLayout implements ScaleGestureDetector.OnScaleGestureListener {
}
  • Now make default constructors and declare variables to define the range of the minimum and maximum possible zoom, coordinates before drag, coordinates after drag, etc.
private static final float MIN_ZOOM = 1.0f;
private static final float MAX_ZOOM = 4.0f;
private Mode mode = Mode.NONE;
private float scale = 1.0f;
private float lastScaleFactor = 0f;
private float startX = 0f;
private float startY = 0f;
private float dx = 0f;
private float dy = 0f;
private float prevDx = 0f;
private float prevDy = 0f;

public ZoomLayout(Context context) {
   super(context);
   init(context);
}

Here startX and startY are the initial coordinates of the layout, dx and dy are the new coordinates of the layout and prevDx and prevDy are the coordinates of the previous location of the layout. Also, mode is the current mode of the gesture which will be further elaborated upon in coming steps, and all other remaining variables are for scaling the screen on gesture movements. Also, init(context) is a method which will be explained in step 5.

  • Now, we will make a method named init() to initiate the process of scaling the layout on gesture detection.
public void init(Context context) {
        final ScaleGestureDetector scaleDetector = new ScaleGestureDetector(context, this);
        this.setOnTouchListener(new OnTouchListener() {
            @Override
            public boolean onTouch(View view, MotionEvent motionEvent) {
                switch (motionEvent.getAction() & MotionEvent.ACTION_MASK) {
                    case MotionEvent.ACTION_DOWN:
                        if (scale > MIN_ZOOM) {
                            mode = Mode.DRAG;
                            startX = motionEvent.getX() - prevDx;
                            startY = motionEvent.getY() - prevDy;
                        }
                        break;
                    case MotionEvent.ACTION_MOVE:
                        if (mode == Mode.DRAG) {
                            dx = motionEvent.getX() - startX;
                            dy = motionEvent.getY() - startY;
                        }
                        break;
                    case MotionEvent.ACTION_POINTER_DOWN:
                        mode = Mode.ZOOM;
                        break;
                    case MotionEvent.ACTION_POINTER_UP:
                        mode = Mode.DRAG;
                        break;
                    case MotionEvent.ACTION_UP:
                        mode = Mode.NONE;
                        prevDx = dx;
                        prevDy = dy;
                        break;
                    default:
                        mode = Mode.NONE;
                        prevDx = dx;
                        prevDy = dy;
                        break;
                }
                scaleDetector.onTouchEvent(motionEvent);

                if ((mode == Mode.DRAG && scale >= MIN_ZOOM) || mode == Mode.ZOOM) {
                    getParent().requestDisallowInterceptTouchEvent(true);
                    float maxDx = (child().getWidth() - (child().getWidth() / scale)) / 2 * scale;
                    float maxDy = (child().getHeight() - (child().getHeight() / scale)) * scale;
                    dx = Math.min(Math.max(dx, -maxDx), maxDx);
                    dy = Math.min(Math.max(dy, -maxDy), maxDy);
                    applyScaleAndTranslation();
                }
                return true;
            }
        });
    }

The detailed explanation of the above code snippet is as follows:

  1. scaleDetector – A gesture detector variable to store the scaling of the screen i.e. how much the screen is zoomed
  2. onTouch() – It is the main method handling the calculations for zooming the layout and setting the position of the zoomed layout. The view attribute is the current view of the layout and the motionEvent attribute handles the different task for different gestures made by a user.

Here the mode variable is used to define one of the three gestures i.e. NONE, DRAG or ZOOM where

  1. NONE – No gesture detected on the screen
  2. DRAG – Sliding gestures are made
  3. ZOOM – Pinch gesture is made

Also, a detailed explanation of the motion events used in the switch case can be found out in the resources [1].

After the switch case, the if statement is used to do calculations based on the current child in focus and the previous coordinates if and only if the zoom hasn’t reached the maximum limit and the view is dragged to see the zoomed contents. Method getParent().requestDisallowInterceptTouchEvent(true) is used to disable the scroll effect of the parent layout if any. In this case, the zoomed layout is inside a bottom sheet and so by using this method, the bottom sheet isn’t closed on swipe down gesture.

  • Now create applyScaleAndTransition() method and child() method used in step 5.
private View child() {
        return getChildAt(0);
    }

This method is used to return the current child layout in focus i.e. visible on the screen.

private void applyScaleAndTranslation() {
        child().setScaleX(scale);
        child().setScaleY(scale);
        child().setTranslationX(dx);
        child().setTranslationY(dy);
    }

This method is used to apply the final calculations that are done in step 5 to the child layout in focus.

So, now the Zoom Layout is ready for use and can be used as same as we use the Relative Layout in the XML files. The final output produced by using the Zoom Layout as a child of bottom sheet in PSLab Android app is as shown in figure 1.

Figure 1. Demonstration of Zoom Layout made in PSLab Android app

Resources

  1. https://developer.android.com/reference/android/view/MotionEvent – Documentation of motion event gestures in android

Working with Logic Analyzer in PSLab Android app

This blog demonstrates the working of Logic Analyzer instrument available in PSLab Android app. It also includes a detailed description of the features available in the Logic Analyzer instrument along with a step by step guide on how to work with it which will be beneficial to first-time users of the PSLab application.

The functionality of the Logic Analyzer available in PSLab Android app is same as that in PSLab Desktop App. So, it would be easy for a user of PSLab Desktop Application to get acquainted with this Logic Analyzer. The only difference in this instrument is the changed and attractive UI which makes working with it very easy.

Why use Logic Analyzer?

The Logic Analyzer instrument provides the functionality of capturing and plotting the digital waves on the screen so that it would be easy for a user to determine the time relationship between different waves. So, this instrument would be very useful while working with timing diagrams, protocol decodes, state machines traces, assembly language, or with source-level software.

How to generate different digital pulses in the PSLab app?

Logic Analyzer needs to be provided with some input of digital pulses among whom time relationship is to be found out. Digital pulses generated from different systems can be directly provided as input to the Logic Analyzer for analyzing. But PSLab provides a functionality to generate digital pulses up to some constrained frequency.

Following are the steps to generate different digital waves in PSLab Android application :

  • Open PSLab Android application and click on the Wave Generator tile as shown in figure 1. After opening the instrument, the screen will look as shown in figure 2.

Figure 1. Wave Generator instrument tile available in PSLab Android app

Figure 2. The main screen of the Wave Generator instrument

  • Click on the MODE button to change the mode to PWM. The screen will look as shown in figure 3.

Figure 3. PWM mode in Wave Generator

  • PSLab device provides generation of maximum four digital waves at once. In this example, I will proceed by utilizing only two pins i.e. SQR1and SQR2 (where SQR = Acronym of square wave generator and the number next to it is the pin ID available on the PSLab device) to demonstrate the working of Two Channel Mode in Logic Analyzer. Set the duty cycles and frequency for the selected pins as desired (try to keep all the duty cycles different from each other to understand the process of measurement easily).

NOTE: User can also set phase angle for different waves but I will proceed with defaults.

How to analyze the generated waves in Logic Analyzer?

  • Now go back and select the Logic Analyzer tile as shown in figure 4 from the list of available instruments. A screen as shown in figure 5 should open.

Figure 4. Tile of Logic Analyzer instrument available in the PSLab app

Figure 5. The main screen of the Logic Analyzer instrument

On the right-hand side, you can see a slider whose initial value is SELECT which shows the information on how to use the slider below it. Below the Channel Selection area is the Analyze button used to fetch and plot the data which is generated or provided to the respective Logic Analyzer pins i.e. ID1, ID2, ID3, and ID4.

The blank area on the left is where the graph will be plotted after fetching data points. Below it is the Axis Indicator used to indicate the position of the highlighter so that time measurement can be done easily. To the right of the Axis Indicator is a small light which indicates the status of the device. It turns GREEN if the device is connected else it remains in RED.

  • In this blog, I will demonstrate the Two Channel Mode. But all the other available modes need the same implementation by only varying the number of pins in use. So, slide to 2 in the Carousel View and a screen as shown in figure 6 will pop up.

Figure 6. Two Channel Mode in Logic Analyzer

  • Connect the wires on the PSLab device as shown in Figure 7.

Figure 7. Connecting wires on PSLab

NOTE: The Logic Analyzer pins used in this demonstration are ID1 and ID2. But any IDx pin can be chosen for analysis. But try to maintain the selected choice throughout the implementation.

  • Now from the Channel Selection area, select the channel for the first card to  ID1 (default) and that for the second card to ID2. For Edges Selection, maintain the defaults.

NOTE: There are several options available for plotting the digital waves besides the default selected i.e.

  1. Every Edge – Plot every edge of the signal
  2. Falling Edges – Plot only falling edges of the signal (When a signal comes from 1 to 0 state)
  3. Rising Edges Only – Plot only rising edges of the signal (When a signal comes from 0 to 1 state)
  4. Disabled – Don’t plot the selected wave
  • After Channel Selection, press the Analyze button to plot the data. On pressing the Analyze button, a circular loading sign will appear showing that the data is being fetched and converted to data that can be plotted. As soon as the data is ready to be plotted, the loading sign vanishes and the graph appears as shown in figure 8.

Figure 8. GIF showing the loading and analyzing processes

  • The time relationship between the plotted data can be found out by clicking over the rising/falling edges and noting the time shown in the Axis Indicator as shown in figure 8.
  • An example of Edge Selection is shown in figure 9.

Figure 9. Example of Edge Selection option

Here, EVERY FALLING EDGE option is selected for the ID1 channel and EVERY RISING EDGE option is selected for the ID2 channel.

So in this way, the Logic Analyzer instrument available in PSLab Android application can be used to ease out the process of calculating the time interval between different edges for different/same digital pulse/s.

Resources

  1. PSLab Android Application – https://github.com/fossasia/pslab-android (Link to repo)
  2. PSLab device pins sticker – https://github.com/fossasia/pslab-artwork/blob/master/Sticker/pslabdesign.png

Implementing the discrete Seekbar for Wave Generator

The Wave Generator instrument in PSLab Android app allows us to produce waveforms having different values of properties like frequency, duty, phase etc.

The range of these properties allowed by PSLab Device are :

Table showing the range of properties that can be set for waves by PSLab device
Wave Property Range
Min Max Step Size
Frequency 10 Hz 5000 Hz 1 Hz
Phase 360°
Duty 10% 100% 10%

We can set these values using the up/down arrow buttons provided by the wave generator but the problem is that the range of values is very high and least counts are small so it is convenient to set the values using only the up and down arrow buttons.

Therefore we need something that could allow us to directly set any value of our choice while keeping the UI interactive.

The solution to this problem – “Discrete Seekbar”. It contains a slider having points at equal intervals and whose length represents the range of the values and a head that slides over the slider and is used to select a specific value from a range of values.

I have included the discrete Seekbar in Wave Generator by using a third-party library if you want to add Seekbar directly you can do that by directly using the default Seekbar widget provided by Android SDK and setting the following attribute in as shown below.

android:theme = “@style/Widget.AppCompat.SeekBar.Discrete”

Refer to this post[2] for implementing Seekbar directly without an external library.

The reason I chose this library is that:-

  • It offers various implementation of different types of Seekbar like discrete and continuous.
  • Implementation of Seekbar is simpler and it offers various customizations like thumb color, track color, tick text etc.  

In following steps I will implement the discrete Seekbar:

Step 1 Adding the dependency

For this project, I will be using an external library “IndicatorSeekbarLibrary” by Warkiz[1], for adding the dependency we need to include the following code in our build.gradle file.

dependencies{
implementation 'com.github.warkiz.widget:indicatorseekbar:2.0.9'
}

Step 2 Including the Seekbar in layout

For this step, we need to add the Seekbar widget using <com.warkiz.widget.IndicatorSeekBar> XML tag in our wave generator layout file to include the Seekbar in our layout as shown in the code below:

<com.warkiz.widget.IndicatorSeekBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:isb_max="5000"
    app:isb_min="0"
    app:isb_ticks_count="5"
    app:isb_thumb_color="@color/color_green"
    app:isb_thumb_size="20dp"
    app:isb_track_background_color="@color/color_gray"
    app:isb_track_background_size="2dp"
    app:isb_track_progress_color="@color/color_blue"
    app:isb_track_progress_size="4dp" />

Some important attributes used above:

app:isb_max : defines the max value that can be achieved by the Seekbar.

app:isb_min :  defines the min value that can be achieved by the Seekbar

app:isb_ticks_count: no. of ticks(interval) that has to be shown on the slider

We can see different components of Seekbar like track, indicator, thumb, tick of SeekBar in the following diagram[2].

Figure 1 depicts the different attributes of the slider
(Source – https://github.com/warkiz/IndicatorSeekBar/blob/master/README.md)

Step 3 Attaching the listener to the Seekbar in Java file

In this step we need to attach the listener to the Seekbar to record changes in the Seekbar made by the user, for this we will create a new listener with the help of onSeekBarChangeListener interface and attach it with the Seekbar as shown in following code

IndicatorSeekBar seekbar = (IndicatorSeekBar) findViewbyId(R.id.seekbar);

seekBar.setOnSeekChangeListener(new OnSeekChangeListener() {
            @Override
            public void onSeeking(SeekParams seekParams) {
                /* called when the user is sliding the thumb */
            }

            @Override
            public void onStartTrackingTouch(IndicatorSeekBar seekBar) {
                /* called when the sliding of thumb is started */
            }

            @Override
            public void onStopTrackingTouch(IndicatorSeekBar seekBar) {
                /* called when the sliding of thumb stops */
            }
        });

After following all the above steps, I  implemented the Seekbar shown in Figure 2 below in my wave generator and now it becomes really easy to set different values of properties for without having to continually press the up/down button.

Figure 2 shows the Seekbar included in wave generator beside up/down arrow button

Resources

  1. warkiz/IndicatorSeekBar library  – Github Repo of the Indicator SeekBar library
  2. http://nileshsenta.blogspot.com/2016/10/discrete-seekbar-without-third-party.html – Blog by Nilesh Shenta on how to implement discrete without third party library

 

Implementing Carousel Slider in PSLab Android App

This blog is a demonstration for creating a Carousel Picker in Android by taking an example of the Carousel Picker made in PSLab Android app under PR #1007. Some improvement to this would be to add custom animation to the ViewPager and adjusting the ViewPager sliding speed. So first let’s start with the basics and terminology of Carousel.

What is Carousel?

Carousel according to the dictionary means roundabout or merry-go-round. The term was mainly used for the traditional amusement ride of a merry-go-round in amusement parks with seats of horses. The same is the working of Carousel View in Android. It gives a smooth sliding effect to slide between a variety of options available.

How to implement Carousel View in the app?

Following are the steps to implement a basic Carousel View in the app. Further effects and upgrades can be given as per the need.

  • The first step is to add jitpack to your app’s gradle file
maven { url 'https://jitpack.io '}
  • Now add a library dependency in your project level gradle file
compile 'com.github.Vatican-Cameos:CarouselPicker:v1.0

The above dependency uses the View Pager and Gesture Detector functionality provided by Android. The Gesture Detector class detects the swipe gesture made by the user and the View Pager highlights the relevant label in the Carousel box according to the swipe done i.e left or right.

  • Now Carousel Picker is ready to be added directly to layouts. So, add the Carousel by adding the following layout code at a proper section in layouts file.
<in.goodiebag.carouselpicker.CarouselPicker
	android:id="@+id/carouselPicker"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:layout_marginTop="20dp"
	android:layout_marginBottom="20dp"
	android:background="#DDD"
	apps:items_visible="three" />

Here, the items_visible is used to provide the Carousel Picker with the number of max items to be seen at a time on screen where only one item will be in focus. Other items are adjusted on the side and can be viewed by scrolling.

  • Now as we have implemented the layouts, so now’s the time to set adapter and resource type for Carousel to hold in Java files. First, find the Carousel View with its id.
CarouselPicker carouselPicker = findViewById(R.id.carouselPicker);
  • Now set a list of items to be added in the Carousel Picker. The items can be both images and texts.
List<CarouselPicker.PickerItem> items = new ArrayList<>();

To add images :

items.add(new CarouselPicker.DrawableItem(R.mipmap.ic_launcher));

To add texts/strings :

items.add(new CarouselPicker.TextItem("Example", 10));

Here, the integer that is added after the text indicates the size in sp of the text that is to be displayed in Carousel View.

  • Now after creating a list of items, make an adapter which provides this list of information to Carousel Picker.
CarouselPicker.CarouselViewAdpater adapter = new CarouselPicker.CarouselViewAdpater(this, items);
  • Now set the adapter for the Carousel View :
carouselPicker.setAdapter(adapter);
  • To dynamically add items to the Carousel View, simply change the list of items in the list provided to the adapter and then use
adapter.notifyDataSetChanged();
  • Now to change the functionality of the app with every Carousel item, implement the onPageChangeListener as Carousel View implements ViewPager class.
carouselPicker.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        	@Override
        	public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        	}

        	@Override
        	public void onPageSelected(int position) {
        	}

        	@Override
        	public void onPageScrollStateChanged(int state) {
          }

Following GIF shows how Carousel View looked after implementation in PSLab app. Each option provided in the view was used to provide user with a different channel selection mode.

Figure 1. GIF of implemented Carousel View in PSLab app

So in this way, a Carousel Picker or Carousel View can be implemented in the app. Further functionalities of animations, mirroring, shadow effect, all can be done with just minor changes in the above code. And to fully customize the look of the Carousel or to enable infinite scrolling feature, a local Carousel Picker can be implemented by just making a custom adapter and a class that extends ViewPager class. Below are the resources to implement both custom and dependency based Carousel View.

Resources

  1. https://www.youtube.com/watch?v=sTJm1Ys9jMI – Youtube Video for dependency based Carousel View
  2. https://www.youtube.com/watch?v=4ct0oPf_u2o – Youtube Video for implementing infinite scrolling
  3. http://www.codexpedia.com/android/android-carousel-view-using-viewpager/ – An article to implement custom Carousel View

 

 

 

 

 

Making Bottomsheet responsive using Custom Gesture Detector in PSLab Android App

In the previous blog Creating Instruction Guide using Bottomsheet, I have created the Bottom Sheet guide in instrument activities in PSLab Android app. But simply adding the Bottom Sheet in the layout is not enough as it could lead to some UI issues like no proper way to show or hide the Bottom Sheet, therefore, he/she will find it difficult to work with Bottom Sheet that could degrade User Experience.

We need to make the Bottom Sheet responsive and interactive which we can do by capturing swipe gestures done by the user and overriding their functionality i.e. when the user slides up with the finger then the Bottom Sheet will reveal itself and when the user slides the finger down the Bottom Sheet will hide.

For this Android provides a class GestureDetector which is used with another class SimpleOnGestureListener which acts as a listener to capture Gesture events like swipe, pinch, scroll, long press etc.

In this blog, I will create a custom gesture listener that will listen to the swipe events and according to the gestures it will show/hide the Bottom Sheet.

I will start by creating a gesture listener class called “SwipeGestureListener” extending the class ‘GestureDetector.SimpleOnGestureListener’ and also as I need swipe gestures to control the Bottom Sheet, so I will pass the reference of the Bottom Sheet as a parameter in the constructor.

public class SwipeGestureListener extends GestureDetector.SimpleOnGestureListener{
   private  BottomSheetBehavior bottomSheet;

   public SwipeGestureDetector(BottomSheetBehavior bt) {
       bottomSheet = bt;
   }  
}

Now in this listener class as we are concerned with the swipe events so will only override the below method provided by ‘GestureDetector.SimpleOnGestureListener’ interface

public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY)

This method is called whenever the user swipes its finger in any direction.

In the above code, we can see that the method provides with object e1 and e2 of type MotionEventThe MotionEvent class is used to report movements in terms of Action Codes like ACTION_DOWN, ACTION_UP and also contains other information about the touch like the pressure of the touch, x and y coordinate, orientation of the contact area etc. 

The e1 object will have the attribute values relating to the point when the swipe started and the e2 object will have attribute values relating to the point when the swipe has ended.

Now, the main thing we need to determine if the direction of the swipe which is not directly available using the MotionEvent object.

So, to determine the direction of the swipe I will fetch the coordinates of the initial point and terminal point of the swipe using the objects initial and final point i.e., e1 and e2.

//Initial Point
float x1 = e1.getX(), y1 = e1.getY();

//Final Point
float x2 = e2.getX(), y2 = e2.getY();

Then, using these coordinates to calculate the angle of the swipe and based on the angle I will return the direction of the swipe as shown in the code below

private Direction getDirection(float x1, float y1, float x2, float y2) {

       Double angle = Math.toDegrees(Math.atan2(y1 - y2, x2 - x1));

       if (angle > 45 && angle <= 135)
           return Direction.TOP;
       if (angle >= 135 && angle < 180 || angle < -135 && angle > -180)
           return Direction.LEFT;
       if (angle < -45 && angle>= -135)
           return Direction.DOWN;
       if (angle > -45 && angle <= 45)
           return Direction.RIGHT;

       return null;     // required by java to avoid error
   }

As of now, I have the direction of the swipe so I will apply switch case and handle the swipe up and swipe down gesture as below:

  1. When the user slides up:-  Show the Bottom Sheet by changing the state of the Bottom Sheet from STATE_HIDDEN to STATE_COLLAPSED(partially viewable).
                                          
  2. When the user slides down: – Hide the Bottom Sheet by changing the state of the Bottom Sheet to STATE_HIDDEN.

For doing this, we will modify the onFIing()’ method as shown below

@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
   switch (getDirection(e1.getX(), e1.getY(), e2.getX(), e2.getY())) {
       case TOP:
           bottomSheet.setState(BottomSheetBehavior.STATE_COLLAPSED);
           return true;
       case LEFT:
           return true;
       case DOWN:
           if(bottomSheet.getState()==BottomSheetBehavior.STATE_COLLAPSED){
               bottomSheet.setState(BottomSheetBehavior.STATE_HIDDEN);
           }
           return true;
       case RIGHT:
           return true;
       default:
           return false;
   }
}

Now, the custom gesture listener is implemented but it cannot start listening to the touch event on its own, so we need to resolve this by performing the following steps:

  1. Firstly, we need to create an object of class GestureDetector and pass the current activity context and the object of class ‘SwipeGestureListener’ as parameters. Also while creating the listener for ‘SwipeGestureListener’ we need to pass the object of the Bottom Sheet in it as a parameter.

    GestureDetector gestureDetector = new GestureDetector(this, new SwipeGestureListener(bottomSheetBehavior)); 
  2. Then we need to override the ‘onTouchEvent()’ method of our Activity and pass the event which is received as a parameter to the GestureDetector.
    Doing this will pass the touch event that it received to the GestureDetector for it to handle.

    @Override
    public boolean onTouchEvent(MotionEvent event) {
       gestureDetector.onTouchEvent(event);                
       return super.onTouchEvent(event);
    }
    

The Bottom Sheet is now responsive to the gestures on the screen and this will improve the User Experience.

Resources

  1. Detect Common Gestures – Android Developer Article –  Android documentation
  2. Choreographic animations with Android’s Bottom Sheet – Blog by Orkhan Gasimli

 

Working with Logic Analyzer in PSLab application

This blog demonstrates the working of Logic Analyzer instrument available in PSLab Desktop Application. It also includes a detailed description of the features available in the Logic Analyzer instrument. Also, it provides a step by step guide on how to work with the Logic Analyzer provided by PSLab which will be beneficial to first-time users.

What is a Logic Analyzer?

A Logic Analyzer is an electronic instrument used to capture and display digital signals with an added functionality of providing the time difference between different edges of different pulses. It is mainly used to observe the time relationship between different digital signals. An example of a standard Logic Analyzer available in the market is as shown in figure 1.

Figure 1. Standard Logic Analyzer

How to generate different digital pulses in PSLab?

Logic Analyzer needs to be provided with some input of digital pulses among whom time relationship is to be found out. Digital pulses generated from different systems can be directly provided as input to the logic analyzer for analyzing. But PSLab provides a functionality to generate digital pulses up to some constrained frequency.

Following are the steps to generate different digital waves in the PSLab desktop application :

  • Go to Advanced Control Section of PSLab app. The screen should look like one as shown in Figure 2.

Figure 2.  Advanced Control Section

  • PSLab device provides generation of maximum four digital waves at once. In this example, I will proceed by utilizing all the four pins i.e. SQR1, SQR2, SQR3, SQR4 (where SQR = Acronym of square wave generator and the number next to it is the pin ID available on the PSLab device). Set the duty cycles for each of the pins as desired (try to keep all the duty cycles different from each other to understand the process of measurement easily). After setting it should look something like Figure 3.

Figure 3. Configuring PWM

NOTE: User can also set phase angle for different waves but I will proceed keeping all without any phase difference.

  • Now set the frequency of the digital waves in the tab provided next to text Frequency and then press the SET button. This should generate desired digital waves when connected.

How to analyze the generated waves in Logic Analyzer?

  • Now go to the Experiments section and click on the Logic Analyzer instrument as shown in Figure 4.

Figure 4. Test and Measurement Page

  • Now a screen as shown in Figure 5 should open which is the main screen for Logic Analyzer Instrument.

Figure 5. Logic Analyzer Main Page

On the right, you can see three buttons i.e Start, Plot Data and Raw Data. Below that selection for the number of channels is provided. And at last, the time measurement tool is provided which can measure the time difference between different edges of different digital waves. The graph at the center is the place where all the waves generated will be plotted.

  • Now as we have generated four different waves, we need to navigate to Four Channel Mode in the Channel Selection section. There you can observe four pins i.e. ID1, ID2, ID3, and ID4 are selected by default as shown in Figure 6. So, we need to connect the pins SQR1, SQR2, SQR3 and SQR4 with pins ID1, ID2, ID3 and ID4 on the PSLab device.

Figure 6. Channel Selection Section

NOTE: There are several options available for plotting the digital waves besides the one selected in the above image i.e.

  1. Every Edge – Plot every edge of the signal
  2. Falling Edges – Plot only falling edges of the signal (When a signal comes from 1 to 0 state)
  3. Rising Edges Only – Plot only rising edges of the signal (When a signal comes from 0 to 1 state)
  4. Disabled – Don’t plot the selected wave

Figure 7. Connecting wires on PSLab device

  • Connect the wires on the PSLab device as shown in Figure 7.
  • Now, as the device is connected, we can use the three buttons located at the top right corner to plot the digital waves. The functionalities of all the three buttons are as follows:
  1. Start – It collects exactly 2500 sample points from the wave generated to be plotted
  2. Plot Data – It plots the data on the graph if the samples are collected successfully
  3. Raw Data – It provides a sheet containing time at particular intervals and the difference between the data points at that particular time
  • Press the Start button and as soon as the samples are collected, press the Plot Data button. Then the screen should look something like Figure 8.

Figure 8. Final graph of input provided

Zoom in further, and the screen will look like Figure 9.

Figure 9. Zoomed In graph for better visualization

  • So now, the waves are plotted and are ready to be analyzed. Time difference between any two edges for any two distinct or a similar wave can be found out by using the TIME INTERVAL MEASUREMENT TOOL which is as shown in Figure 10.

Figure 10. Time Interval Measurement Tool

  • The working of this tool can be explained by taking an example as follow :

Figure 11. Configuring the Time Interval Measurement Tool

Suppose time difference between the rising edge of ID1 and falling edge of ID3 is to be measured. So, set the parameters as shown in Figure 11 for the following situation.

The timeout of the Logic Analyzer can be set to any desired value from 10mS to 9999 mS. Here, I will proceed with 10mS of the timeout. Now, press the measure button to see the result. It will be same as the Figure 12 shown below if all the configurations are set as the one in the  example :

Figure 12. Calculated time difference displayed

So in this way, many calculations can be taken out very easily and can be viewed at once at a single place without manually doing any calculations. Also, the data generated can be stored in the local system by pressing the Save Data button located at the bottom right corner.

Resources

  1. PSLab Desktop Application – https://github.com/fossasia/pslab-desktop-apps (Link to repo)
  2. PSLab device pins sticker – https://github.com/fossasia/pslab-artwork/blob/master/Sticker/pslabdesign.png

 

Implementing Card View in PSLab app

Card View was announced by Google in I/O ‘14 conference. Although it started a bit slow, but now we can see most of the apps like Snapchat, Google, Facebook, etc. using this widget. So, this blog is solely contributed on how to implement Card View in your own app by taking example of PSLab application.

What is Card View ?

CardView is a view container or ViewGroup that inherits its nature from FrameLayout which further inherits from ViewGroup itself. The only thing that separates a CardView from any other ViewGroups is its nature to behave like a card, more specifically the shadow and rounded corners. The basic customization that a CardView provides includes CornerRadius, Elevation, MaxElevation, ContentPadding, CompatPadding, PreventCornerOverlap, and a dedicated CardBackgroundColor or say Card Background which is the most necessary feature for a card to look cool.

Step by Step description how CardView was implemented in PSLab

  • First step is to add dependencies in your project as widgets like Card View, Recyclerview, etc. are not included in a common repository of widgets provided by Google.

App level dependency :

compile 'com.android.support:cardview-v7:26.0.0'
compile 'com.android.support:recyclerview-v7:+'

If you are using Android Studio 3.0+ than add the following dependency instead of above :

implementation 'com.android.support:cardview-v7:26.0.0'
implementation 'com.android.support:recyclerview-v7:27.1.1'
  •  Now we can use Card View widget in our app. So, first make add card view in layout section like this :
<android.support.v7.widget.CardView
    	android:id="@+id/card_view"
    	android:layout_width="match_parent"
    	android:layout_height="@dimen/total_height_card"
    	android:layout_gravity="center"
    	android:layout_margin="@dimen/card_margin"
    	card_view:cardCornerRadius="@dimen/card_radius">
 </android.support.v7.widget.CardView>

These are the basic attributes that are used while declaring a card view. Other possible attributes can be :

  1. Elevation – Used to elevate card to give a depth effect
  2. MaxElevation – Used to give constraint to the depth effect
  3. ContentPadding – Used to provide padding between content and the card
  4. PreventCornerOverlap – To prevent different corners to overlap as shown in figure 1.

Figure 1. Image showing corner overlapping in CardView

  • Now to set the objects inside the Card View, mostly RelativeLayout is preferred as it gives the freedom to place objects in reference of others whereas LinearLayout provides freedom to place them in only one direction. Other layouts such as FrameLayout, Tables, etc. can be used as per the need of the app.
  • Now we will create a layout that will hold all the cards using RecyclerView.
<android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:scrollbars="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
  • Now after setting the layouts, it’s time to make adapter which inflates the information in the cards which is then represented using RecyclerView.
public class ApplicationAdapter extends RecyclerView.Adapter<ApplicationAdapter.Holder> {

	private List<ApplicationItem> applicationList;
	private final OnItemClickListener listener;
	/**
 	* View holder for application list item
 	*/
	public class Holder extends RecyclerView.ViewHolder {

    	TextView header, description;
    	ImageView applicationIcon; //Background Image

    	public Holder(View itemView) {
        super(itemView);
        this.header = itemView.findViewById(R.id.heading_card);
        this.description = itemView.findViewById(R.id.description_card);
        this.applicationIcon = itemView.findViewById(R.id.application_icon);
    	}

    	public void setup(final ApplicationItem applicationItem, final OnItemClickListener listener) {
      header.setText(applicationItem.getApplicationName());
      description.setText(applicationItem.getApplicationDescription());
      applicationIcon.setImageResource(applicationItem.getApplicationIcon());
         }
	}

	public ApplicationAdapter(Context mContext, List<ApplicationItem> applicationList, OnItemClickListener listener) {
    	this.mContext = mContext;
    	this.applicationList = applicationList;
    	this.listener = listener;
	}

     @Override
	public Holder onCreateViewHolder(ViewGroup parent, int viewType) {
    	View itemView = LayoutInflater.from(parent.getContext())
            	.inflate(R.layout.application_list_item, parent, false);
    	return new Holder(itemView);
	}

Following is the detailed explanation of each and every method :

  1. Holder(View ) – As name suggests, it holds all the items that are included in a single card together
  2. setup() – This method can contain any number of parameters as per requirement. It basically sets the data in the views in the card
  3. ApplicationAdapter() – Constructor
  4. onCreateViewHolder() – It inflates the layout containing CardView as soon as the data gets ready to be fed in it
  • Now as adapter is ready, we can declare RecyclerView in Java code to implement CardView. The main reason to use RecyclerView is that it provides the feature of scrollability so that a number of cards can be adjusted on the screen. ScrollView can also be used but it slows down the app as it tries to load all the card at once rather than loading cards as per use like RecyclerView.
RecyclerView listView = view.findViewById(R.id.applications_recycler_view);
    	RecyclerView.LayoutManager mLayoutManager = new GridLayoutManager(context, rows);
    	listView.setLayoutManager(mLayoutManager);
    	listView.setItemAnimator(new DefaultItemAnimator());
    	listView.setAdapter(applicationAdapter);

Here, we have used GridLayoutManager to use grids along with RecyclerView. It is optional and can be used as per requirement. Also, before setting adapter, fill the adapter with relevant data or else no card will be seen in actual app.

  • Now the app is ready to be built and tested on mobile device. This is how it looks in the PSLab application after implementing the above guide :

Figure 2. Screenshot of CardView implemented in PSLab app

So, in this way great user experience can be given by using this very basic widget. But great attention should be given while designing the objects inside the card as the selection and position of the objects is what makes the card look good. Objects used in making cards for PSLab very well suited the app and so are designed like that. Practice should be done by taking reference of some very good apps like Snapchat, Google, etc. and from Material Designs provided by Google before implementing them in actual project.

Resources

  1. https://www.androidhive.info/2016/05/android-working-with-card-view-and-recycler-view/ – This article gives a better practice by implementing a real world example
  2. https://developer.android.com/reference/android/support/v7/widget/CardView – Official documentation by Google on CardView
  3. https://developer.android.com/guide/topics/ui/layout/recyclerview – Official documentation by Google on RecyclerView

Creating Instruction Guide using Bottomsheet

The PSLab android app consists of different instruments like oscilloscope, multimeter, wave generator etc and each instrument has different functionality and usage so it is necessary that there should be an instruction guide for every instrument so that the user can easily read the instruction to understand the functionality of the instrument.

In this we will create an instruction guide for the Wave Generator which will contain information about the instrument, it’s functionalities, steps for how to use the instrument.

The main component that I used to create instruction guide is Bottom SheetBottom Sheet is introduced in Android Support v23.2 . It is a special UI widget which slide up from the bottom of the screen and it can be used to reveal some extra information that we cannot show on the main layout like bottom menus,  instructions etc.

They are of two types :

  1. Modal Bottom Sheet:–  This Bottom Sheet has properties very similar to normal dialogs present in Android like elevation only difference is that they pop up from the bottom of screen with proper animation and they are implemented using BottomSheetDialogFragment Class.

  2. Persistent Bottom Sheet:– This Bottom Sheet is included as a part of the layout and they can be slid up and down to reveal extra information. They are implemented using BottomSheetBehaviour Class.

For my project, I used persistent Bottom Sheet as modal Bottom Sheet can’t be slid up and down by the swipe of the finger whereas persistent Bottom Sheet can be slid up and down and can be hidden by swipe features.

Implementing the Bottom Sheet

Step 1: Adding the Dependency

To start using Bottom Sheet we have to add the dependency (We have also include Jake Wharton-Butterknife library for view binding but it is optional.)

dependencies {

   implementation fileTree(include: ['*.jar'], dir: 'libs')

   implementation "com.android.support:appcompat-v7:26.0.1"
   implementation "com.android.support:design:26.0.1"
   implementation "com.jakewharton:butterknife:8.8.1"

   annotationProcessor "com.jakewharton:butterknife-compiler:8.8.1"

Step 2: Creating Bottom Sheet layout file

In this step, we will create the layout of the Bottom Sheet, as our purpose of making Bottom Sheet is to show extra information regarding the instrument so we will include ImageView and TextView inside the layout that will be used to show the content later.

Some attributes in the layout worth noting are:

  • app:layout_behavior: This attribute makes the layout act as Bottom Sheet.
  • app:behavior_peekHeight: This is the height of the Bottom Sheet when it is minimized.
  • app:behavior_hideable: Defines if the Bottom Sheet can be hidden by swiping it down.

Here, we will also create one extra LinearLayout having height equal to the peek_height. This  LinearLayout will be at the top of the BottomSheet as shown in Figure 1 and it will be visible when the BottomSheet is in a minimized state(not hidden). Here we will put text view with like “Show guide” and an arrow pointing upwards so that it is easier for the user to understand that sheet can be viewed by sliding up.

Figure 1 LinearLayout containing textview and imageview

Here is the gist[2] that contains code for the layout of the Bottom Sheet guide

After this step, we can see a layout of Bottom Sheet in our Android Editor as shown in Figure 2

Figure 2 shows the layout of the Bottom Sheet

Step 3: Creating the Container view layout containing content and Bottom Sheet

For container view, we will create new layout under Res Layout and name it “container_view_wavegenerator.xml”

In this layout, we will use ‘Coordinator Layout’ as ViewGroup because persistent Bottom Sheet is implemented using BottomSheetBehavior class which can only be applied to the child of ‘CoordinatorLayout’.

Then add the main layout of our instrument and the layout of the Bottom Sheet inside this layout as its child.

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <include layout="@layout/activity_wave_generator" />

   <include layout="@layout/bottom_sheet_custom" />

Step 4: Setting Up Bottom Sheet and Handling callbacks

Now we will head over to the “WaveGenerator.java” file(or any instrument java file)Here we will handle set up Bottom Sheet and handle callbacks by using following classes:

BottomSheetBehavior provides callbacks and makes the Bottom Sheet work with CoordinatorLayout.

BottomSheetBehavior.BottomSheetCallback() provides the callback when the Bottom Sheet changes its state. It has two methods that need to be overridden:

  1. public void onSlide(@NonNull View bottomSheet, float slideOffset)

    This method is called when the Bottom Sheet slides up and down on the screen. It has slideOffset as a parameter whose value varies from -1.0 to 0.0 when the Bottom Sheet comes from the hidden state to collapsed and 0.0 to 1.0 when it goes from collapsed state to expanded state.

  2. public void onStateChanged(@NonNull View bottomSheet, int newState)

    This method is called when BottomSheet changed its state. Here, let us also understand the different states which can be attained by the Bottom Sheet:

    • BottomSheetBehavior.STATE_EXPANDED : When the Bottom Sheet is fully expanded showing all the content.
    • BottomSheetBehavior.STATE_HIDDEN : When the Bottom Sheet is hidden at the bottom of the layout.
    • BottomSheetBehavior.STATE_COLLAPSED : When the Bottom Sheet is in a collapsed state that is only the peek_height view part of the layout is visible.
    • BottomSheetBehavior.STATE_DRAGGING : When the Bottom Sheet is dragging.
    • BottomSheetBehavior.STATE_SETTLING : When the Bottom Sheet is settling either at expanded height or at collapsed height.

We will implement these methods in our instrument class, and also put the content that needs to be put inside the Bottom Sheet.

@BindView(R.id.bottom_sheet)
LinearLayout bottomsheet;
@BindView(R.id.guide_title)
TextView bottomSheetGuideTitle;
@BindView(R.id.custom_dialog_schematic)
ImageView bottomSheetSchematic;
@BindView(R.id.custom_dialog_desc)
TextView bottomSheetDesc;

BottomSheetBehavior bottomSheetBehavior;

@Override
protected void onCreate(Bundle savedInstanceState) { 
              
           //main instrument implementation code

           setUpBottomSheet()
}

private void setUpBottomSheet() {

   bottomSheetBehavior = BottomSheetBehavior.from(bottomsheet);

    bottomSheetGuideTitle.setText(R.string.wave_generator);
   bottomSheetSchematic.setImageResource(R.drawable.sin_wave_guide);
   bottomSheetDesc.setText(R.string.wave_gen_guide_desc);

  bottomSheetBehavior.setBottomSheetCallback(new 
  BottomSheetBehavior.BottomSheetCallback() {
       @Override
       public void onStateChanged(@NonNull View bottomSheet, int newState) {
           if (newState == BottomSheetBehavior.STATE_EXPANDED) {
               bottomSheetSlideText.setText(R.string.hide_guide_text);
           } else {
               bottomSheetSlideText.setText(R.string.show_guide_text);
           }
       }

       @Override
       public void onSlide(@NonNull View bottomSheet, float slideOffset) {
           Log.w("SlideOffset", String.valueOf(slideOffset));
        }
      });
}

After following all the above steps the Bottom Sheet will start working properly in the Instrument layout as shown in Figure 3

Figure 3 shows the Bottom Sheet in two different states

To read more about implementing Bottom Sheet in layout refer this: AndroidHive article- working with bottomsheet

Resources

  1. Developer Documentation – BottomSheetBehaviour
  2. Gist containing xml file for layout of Custom Bottomsheet