Designing an app is not an easy task, you always feel like some actions are left behind while others are getting promoted. Google introduced us with a new concept of floating actions buttons which basically puts your most important app action always visible on the screen and always reachable to the user (it’s even close to your fingers for all the right handed people).
This Tutorial Covers The Following:
- Creating Tabs menu style android application
- Getting images from the device camera
- Setting a floating action button (FAB) for the application
- Adding Open CV library for image processing
The full App code is available @ Github
Creating the Tabs Layout UI
Tabs view for a mobile application is very common to see, it’s perfect when you want the user to switch views instantly without menus and extra clicks. I used google’s SlidingTabLayout for the main application layout. The layout file sets the tabs element on the screen:
The full layout file is the following:
The corresponding activity java class file initializes the tabs when the activity is created, you can see that the tabs are defined using a String array. Each tab item opens a different Fragment which are defined in the class ViewPagerAdapter.
Each fragment is represented by a class which extends the Fragment Base class
This is how the final app looks like:
Connecting to The Device Camera
The first thing is to add the necessary permissions to the AndroidManifest.XML file
If you want to check if the device support using a camera, use this method
When the user clicks the camera floating action button (FAB) we will open a menu to take a new picture or to choose one from the device library.
This method opens the menu:
This method handles the menu click result:
Floating Action Button (FAB)
Update: I wrote a separate post about adding a Floating Action Button to your app here
The floating action button is a button which is shown on the screen and floats above all the other content, many apps use this button to promote the most important action. If your app has an action the user must do, you should use a FAB for this action. First we create a new circle view for the button and then we initialize it in the Activity.
We start by creating a new circle.XML file and putting it inside res/drawable folder:
Inside the activity_main.XML file, create an ImageButton and use the circle drawable as a background:
In the MainActivity.java file set a new click handler for the floating action button:
Adding Open CV
Update: I wrote a separate post about adding OpenCV to your app here
After we have our app running and taking pictures, we want to add a more sophisticated image processing layer. I chose to use Open CV in order to analyze the images taken by the camera. After the image is loaded into the ImageView placeholder I use the library to transform it into grayscale and put it back inside the placeholder.
- Download open cv SDK for Android, and extract it somewhere in your home folder – I use the 241 version
- Make sure your App build.gradle file looks like this: (you need to add the open cv compile command)
- Create a new folder named jniLibs inside app/src/main and copy all content from SDK_FOLDER/SDK/native/libs
- Open terminal and navigate to SDK_FOLDER/apk and execute this command to install the OpenCV in your emulator, make sure the emulator is turned on before you run this command (you can start it from the android studio):
$adb install OpenCV_2.4.11_Manager_2.20_x86.apk
- Initialize Open CV by calling the initAsync method
Converting the image into grayscale mode is straight forward using Open CV
As always, you can find the full App code @ My Github Repository.
Cheers
