Author: Avjeet

This author has written 14 articles
Read more about the article Creating Control Panel For Wave Generator using Constraint Layout

Creating Control Panel For Wave Generator using Constraint Layout

  In the blog Creating the onScreen Monitor Using CardView I had created the monitors to view the wave properties in this blog we will create the UI of controlling panel that will be used for that monitors with multiple buttons for both analog and digital waveforms. Which layout to choose? In today’s world, there are millions of Android devices present with different screen sizes and densities and the major concern of an Android developer is to make the layout that fits all the devices and this task is really difficult to handle with a linear or relative layout with fixed dimensions. To create a complex layout with lots of views inside the parent using linear layout we have to make use of the attribute layout_weight for their proper stretching and positioning, but such a complex layout require a lot of nesting of weights and  android tries to avoid it by giving a warning : Nested Weights are bad for performance This is because layout_weight attribute requires a widget to be measured twice[1]. When a LinearLayout with non-zero weights is nested inside another LinearLayout with non-zero weights, then the number of measurements increases exponentially. So, to overcome this issue we will make use of special type of layout “Constraint Layout” which was introduced in Google I/O 2016. Features of Constraint Layout:- It is similar to Relative Layout as all views are laid out according to their relationship with the sibling, but it is more flexible than Relative Layout. It helps to flatten the view hierarchy for complex layouts. This layout is created with the help of powerful tool provided by Android which has a palette on the left-hand side from where we can drag and drop the different widgets like TextView, ImageView, Buttons etc. and on the right-hand side it provides options for positioning, setting margins and other styling option like setting color, change text style etc. It automatically adjusts the layout according to the screen size and hence doesn’t require the use of layout_weight attribute. In following steps, I will create the controlling panel for Wave generator which is a complex layout with lots of buttons with the help of constraint layout. Step 1: Add the dependency of the Constraint Layout in the Project To use Constraint layout add the following to your build.gradle file and sync the project dependencies { implementation "com.android.support.constraint:constraint-layout:1.1.0" } Step 2: Applying Guidelines to the layout Guidelines[3] are anchors that won’t be displayed in your app, they are like one line of a grid above your layout and can be used to attach or constraint your widgets to it. They are only visible on your blueprint or preview editor. These will help to position and constraint the UI components on the screen easily. For adding guidelines : As shown in Figure 1 Right-click anywhere on the layout -> Select helpers -> Select horizontal or vertical guideline according to your need. And for positioning the guideline we have to set the value of attribute layout_constraintGuide_percent…

Continue ReadingCreating Control Panel For Wave Generator using Constraint Layout
Read more about the article Creating the onScreen Monitor Using CardView

Creating the onScreen Monitor Using CardView

The PSLab works as a Wave generator and the Oscilloscope when connected with the Android device. The mockup of the Wave Generator has been created in the blog Creating the Mockup for Wave Generator using Moqups. In this blog, we will create the monitor screen in the PSLab Android app using Android studio. Deciding the layout to use for monitors As monitors with rounded border look appealing on android device screen so we will select CardView to be the base layout of our monitors. The CardView element allows us to add certain properties like rounded corners, elevation etc. To use the CardView in your app, add the following dependency to build.gradle file and sync the project. dependencies { // CardView implementation 'com.android.support:cardview-v7:27.1.1' } Add the <android.support.v7.widget.CardView> widget to your layout and all the other views to be shown on monitor screen will be placed inside this card layout as its child layout. Creating the monitor cards We need to decide how much spacing is to be provided to the cards to properly view them on different screens. Here we make use of the special attribute in the View class. android:layout_weight=1 This attribute assigns an "importance" value to a View in terms of how much space it should occupy on the screen. That is if we give equal weight to two views which inside the same parent then they will both occupy equal space. To implement this create two CardViews inside <LinearLayout> with the same layout_weight. <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:card_view="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.v7.widget.CardView android:layout_width="0dp" android:layout_height="250dp" android:layout_weight="1" card_view:cardCornerRadius="10dp" /> <android.support.v7.widget.CardView android:layout_width="0dp" android:layout_height="250dp" android:layout_weight="1" card_view:cardCornerRadius="10dp" /> </LinearLayout> So this will give us a screen like this with equally weighted monitor card views as shown in Figure 1. Both the cards have the width equal to half the screen width which is set automatically by the Android. Creating partitions in the monitors We have to make partitions in the monitor screen so that every characteristic of Wave Generator like wave frequency, phase, selected pin etc. can be viewed simultaneously on the screen with proper spacing. For making partitions we need to make a separator line which we can create by using <View> and setting the attributes as below: <View android:layout_width="@dimen/length_0dp" android:layout_height="@dimen/divider_width" android:background="@color/dark_grey" /> This will create a thin line having the grey color. We have to make four partitions of the card view for both monitors as shown in Figure 2. Populating the screen with text and image icons We have to include the <TextView> and <ImageView> to show the property data on the monitors. Different partitions as shown in Figure 3 can be used for showing different data such as: Top Partition:- To view the selected wave.  Left Partition:- To view the selected waveform eg:- sine, triangular  Right Partition:- To view the selected wave characteristics like frequency, phase etc.  Bottom Partition:-  To view the property selected which has been selected by user After inserting all the desired Views and providing the Views with dummy data and icons and customizing the Views by giving proper color…

Continue ReadingCreating the onScreen Monitor Using CardView
Read more about the article Creating the Mockup for Wave Generator using Moqups

Creating the Mockup for Wave Generator using Moqups

PSLab is a versatile device that can be used as a waveform signal generator, as it is capable of producing different types of waves. It provides a cheap and portable alternative as compared to the physical wave generators available in markets. The current UI of the Wave Generator present in the PSLab app as shown in Figure 1 is very basic and makes use of some basic UI components which are not able to properly expose all the functionalities of the wave generator. This affects the user experience negatively. In this blog, we will discuss creating a mockup for the PSLab wave generator using modern design to improve the UI/UX of the app. I will try to keep the layout simple enough so that users can easily understand it.  Understanding the Functionality of Waveform Generator We can observe from the image that PSLab provide: Two pins named W1 and W2 which are capable of producing two different sine or saw-tooth waves having different characteristics simultaneously. Four Pins named SQ1, SQ2, SQ3, SQ4 which are capable of producing Square Wave and Pulse Width modulation signals. It also allows us to change the properties of these waves such as frequency, phase, duty cycle. Before starting with the mockup a physical commodity Waveform Signal Generator as shown in Figure 3 was inspected. Most waveform generators in the market have a control panel with buttons and a monitor screen so that the user can view the changes while controlling the characteristics of the wave. I will try to create a layout similar to this in following steps by dividing it into two halves: Upper half containing monitor screens Lower half containing controlling panel having buttons Steps for creating the mockup Step 1: Choosing the Tool The tool that we will be using here to create a mockup is moqups[1]. I have chosen this software because:- It is an online tool and doesn’t require it to be set up first It is very efficient and powerful tool for creating mobile or web wireframes. It doesn't require any prior knowledge of programming language. It has a palette to drag & drop UI elements like Buttons, Textboxes, Checkboxes etc. on the left-hand side, allows modifying the features of each element (here on the right) and other options at the top related to prototyping, previewing etc as shown in figure 4. Step 2: Creating the base of the layout The mockup tool moqups[1] have a built-in template of Android screen which we can drag and drop from the palette and use it as our base. Step 3: Creating the Lower Half Now as discussed above I will create controlling panel containing buttons in the lower half of the screen, for this I will drag and drop buttons from the palette on the right-hand side and design them according to the theme of the app that is making their border round shape, changing their color to match the theme color and editing text in them. As the PSLab has…

Continue ReadingCreating the Mockup for Wave Generator using Moqups
Read more about the article Creating Device Screen to show connection status of PSLab Device

Creating Device Screen to show connection status of PSLab Device

For using the PSLab Device the user needs to connect the PSLab device to an Android Phone having a PSLab android app. So there should be a screen that should be able to show the proper status of the PSLab device connection to the android app dynamically and it should also contain instructions on “How to connect the device to the app”. So, in this blog we will create a device screen which shows the proper status of the connection of the PSLab device with the phone. First step will be designing the layout for the device screen, for this we will create a fragment named HomeFragment and for its layout we will make use of the Relative Layout as view group and then create a Linearlayout inside it and position it at the center so that it always appears at the center in different screen sizes. Then inside the LinearLayout, we will create(as shown in respective order) : ImageView and TextView for showing the status of device connection. Linear Layout with multiple TextView showing instructions on “How to connect the device to the screen”. A TextView that will direct the user to a webview showing PSLab website. After creating all the above views we have created the layout will look like this: - Now for showing the PSLab connection status dynamically, we have to implement following logic: When the device is connected it should show the connected icon and text and hide the instructions. When the device is disconnected it should show the disconnected icon and text and also the instructions. For this, we will create a method inside the HomeFragment Java file which make use of Arguments deviceConnected and deviceFound to store device connected status. public static HomeFragment newInstance(boolean deviceConnected, boolean deviceFound) { HomeFragment homeFragment = new HomeFragment(); homeFragment.deviceConnected = deviceConnected; homeFragment.deviceFound = deviceFound; return homeFragment; } When both arguments are true we will show the connected text and icon and hide the instructions. And when both arguments are false we will show the disconnected text and icon and display the instructions. if (deviceFound && deviceConnected) { tvConnectMsg.setVisibility(View.GONE); tvVersion.setText(scienceLab.getVersion()); tvVersion.setVisibility(View.VISIBLE); imgViewDeviceStatus.setImageResource(R.drawable.icons8_usb_connected_100); tvDeviceStatus.setText(getString(R.string.device_connected_successfully)); } else { imgViewDeviceStatus.setImageResource(R.drawable.icons_usb_disconnected_100); tvDeviceStatus.setText(getString(R.string.device_not_found)); } How do we know that the device is connected? For this, we have to handle the USB Attach event [1] that is whenever the USB is connected the Android will give a broadcast of USB connected and on receiving that broadcast in the app we will replace the HomeFragment giving setting both arguments to true.  We will create a Broadcast Receiver[2] in the main activity which executes it’s onReceive() method on receiving USB attach event. private final BroadcastReceiver mUsbReceiver = new BroadcastReceiver() { public void onReceive(Context context, Intent intent) { String action = intent.getAction(); if (UsbManager.ACTION_USB_DEVICE_ATTACHED.equals(action)) { UsbDevice device = intent.getParcelableExtra(UsbManager.EXTRA_DEVICE); if(device!=null){ getSupportFragmentManager().beginTransaction().replace(R.id.frame, HomeFragment.newInstance(true, true)).commitAllowingStateLoss(); } } } }; Here In the OnReceive Method, we will replace our device screen fragment by passing parameters deviceConnected = true and deviceFound = true to HomeFragment newInstance() method. Every time we create a…

Continue ReadingCreating Device Screen to show connection status of PSLab Device