GSoC18

Read more about the article Implementing the Feedback section on Skills CMS

Implementing the Feedback section on Skills CMS

In this blog post, we are going to implement the Skill feedback system on the Skills CMS. The features that are added by this implementation are displaying all the comments/feedbacks of the user, ability to add new feedback and also option to edit a previous feedback that was added. The UI interacts with the back-end server via two APIs - API to return all feedbacks - URL -  https://api.susi.ai/cms/getSkillFeedback.json It takes 4 parameters - model, group, language, skill API to post/edit feedback - URL -  https://api.susi.ai/cms/feedbackSkill.json It takes 6 parameters - model, group, language, skill, feedback, access_token Detailed explanation of the implementation The first task was to create a separate component for the feedback section - SkillFeedbackCard.js, along with the CSS file SkillFeedbackCard.css Create ES6 function to get all the Feedbacks of a skill,namely getFeedback(), on the parent component, i.e, SkillListing.js getFeedback = () => { let getFeedbackUrl = `${urls.API_URL}/cms/getSkillFeedback.json`; let modelValue = 'general'; this.groupValue = this.props.location.pathname.split('/')[1]; this.languageValue = this.props.location.pathname.split('/')[3]; getFeedbackUrl = getFeedbackUrl + '?model=' + modelValue + '&group=' + this.groupValue + '&language=' + this.languageValue + '&skill=' + this.name; let self = this; // Get skill feedback of the visited skill $.ajax({ url: getFeedbackUrl, dataType: 'jsonp', crossDomain: true, jsonp: 'callback', success: function (data) { self.saveSkillFeedback(data.feedback); }, error: function(e) { console.log(e); } }); }; saveSkillFeedback = (feedback = []) => { this.setState({ skill_feedback: feedback }) }   This above code contains the function getFeedback(), that makes an API call to the server for getting all the feedbacks. On successfully getting the response, the feedback array of the response is then passed to a function, saveSkillFeedback(), which in turn updates the skill_feedback state, which was declared in the constructor. This re-renders the components and displays the feedback in the UI. The response of the /cms/getSkillFeedback.json API is as follows - { "feedback": [ { "feedback": "Awesome skill!", "email": "coolakshat24@gmail.com", "timestamp": "2018-06-12 19:28:39.297" }, { "feedback": "Awesome skill!", "email": "akshatnitd@gmail.com", "timestamp": "2018-06-12 21:35:53.048" } ], "session": {"identity": { "type": "host", "name": "141.101.98.18_a7ab9c4d", "anonymous": true }}, "skill_name": "aboutsusi", "accepted": true, "message": "Skill feedback fetched" }   Then, we go ahead and create the function that is responsible for posting new feedback and editing them as well. postFeedback = (newFeedback) => { let baseUrl = urls.API_URL + '/cms/feedbackSkill.json'; let modelValue = 'general'; this.groupValue = this.props.location.pathname.split('/')[1]; this.languageValue = this.props.location.pathname.split('/')[3]; let postFeedbackUrl = baseUrl + '?model=' + modelValue + '&group=' + this.groupValue + '&language=' + this.languageValue + '&skill=' + this.name + '&feedback=' + newFeedback + '&access_token='+cookies.get('loggedIn'); let self = this; $.ajax({ url: postFeedbackUrl, dataType: 'jsonp', jsonp: 'callback', crossDomain: true, success: function (data) { self.getFeedback() }, error: function(e) { console.log(e); } }); };   This above code snippet contains the function postFeedback(newFeedback), that takes the user feedback and make an API call to update it on the server. All the required functions are ready. Now we add the SkillFeedbackCard.js component on the SkillListing.js component and pass useful data in the props. <SkillFeedbackCard skill_name={this.state.skill_name} skill_feedback={this.state.skill_feedback} postFeedback={this.postFeedback} /> The next step is creating the UI for the SkillFeedbackCard.js component. We…

Continue ReadingImplementing the Feedback section on Skills CMS
Read more about the article Displaying all the images from storage at once in Phimpme Android Application

Displaying all the images from storage at once in Phimpme Android Application

In the Phimpme Android application, the images are displayed in the albums in which they are indexed in the device’s storage. However, there is also an “All photos” section in the application where all the images present in the device’s storage are displayed at once irrespective of the folder they’re indexed in. So in this post, I will be discussing how we achieved the “All Photos”  functionality. Android framework provides developers with a media content provider class called MediaStore. It contains metadata for all available media on both internal and external storage devices. With the help of particular methods we can obtain metadata for all the images stored in the device’s storage. Step 1 So First we need to get the Uri from MediaStore content provider pointing to the media(here media refers to the photos stored on the device). This can be done by the following snippet of code. Uri uri = android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI; Step 2 Now retrieving a cursor object containing the data column for the image media is required to be performed. The data column will contain the path to the particular image files on the disk. This can be done by querying the MediaColumns table of the MediaStore class, which can be performed by the use of the content resolver query method. The mentioned functionality can be achieved by the following lines of code. String[] projection = {MediaStore.MediaColumns.DATA}; Cursor cursor = activity.getContentResolver().query(uri, projection, null, null, null); Step 3 In the final step, we would retrieve the path of all the images by iterating through the cursor object obtained in the previous step and keep adding those paths to an ArrayList<String>. Creating Media objects passing in the image path and concurrently adding those Media objects to an ArrayList<Media> to be done thereafter. Finally, the dataset(ArrayList<Media> in this case) containing Media objects for all the images is required to be passed to the Media Adapter in order to display all the photos in the UI. The code snippets used for the final steps are provided below. while (cursor.moveToNext()) {   absolutePathOfImage = cursor.getString(cursor.getColumnIndexOrThrow(MediaStore.MediaColumns.DATA));   listOfAllImages.add(absolutePathOfImage); } ArrayList<Media> list = new ArrayList<>(); for (String path : listOfAllImages) {   list.add(new Media(new File(path))); } return list; This is how we achieved the functionality to display all the images from the storage on a single screen(at once) in the Phimpme Android application. To get the full source code, please refer to the Phimpme Android Github repository listed in the resource section below. The screenshot for displaying the “All photos” section is provided below. Resources 1.Android Developer Guide - https://developer.android.com/reference/android/provider/MediaStore 2.Github-Phimpme Android Repository - https://github.com/fossasia/phimpme-android/ 3.Displaying all the images from gallery in android - https://deepshikhapuri.wordpress.com/2017/03/20/get-all-images-from-gallery-in-android-programmatically/

Continue ReadingDisplaying all the images from storage at once in Phimpme Android Application
Read more about the article Adding option to Unfavourite image in Phimp.Me

Adding option to Unfavourite image in Phimp.Me

This blog is in accordance with the P.R #1900. Here I have implemented the option to unfavourite image in the Phimp.Me android application. Implementation In the Phimp.Me app there are the following modes present: 1. all_photos: All the photos are displayed in this mode irrespective of where they are saved. 2. fav_photos: The photos which are added to favourites are displayed in the fav_photos. 3. Albums_mode: All the albums which are present in the app are displayed in the albums_mode. The main idea here is to find whether the selected image is already FAVOURITE or not. If it is already FAVORITED then it can be removed from that mode by removing its path form the Realm Database. If it isn’t already FAVORITED then the image is ignored and the next image is taken into consideration. The process of removing the images from favourites can be an expensive one as the user can select myriad images which would ultimately block the Main UI. So it is better handled asynchronously and is implemented using the AsyncTask. Whenever the user adds an image to the FAVOURITES, it gets added to the Realm Database where the model class being used is the FavouriteImagesModel.The selected media in the all_photos and fav_photos mode can be accessed via by selectedMedia.size()  and the number of selected media in the albums_mode can be accessed by getAlbum().getSelectedCount(). So in the execute method of doInBackground() a condition check is initially made and then 2 separate loops are run depending upon the mode in which the selected images exist. Initially it is checked whether the selected image is already a FAVOURITE one or not by the following code. If it belongs to the favourite mode then the size of the favouriteImageModels would become 1. RealmResults<FavouriteImagesModel> favouriteImagesModels = realm.where                                                (FavouriteImagesModel.class).equalTo("path", selectedMedias.get(i).getPath( )).findAll( ); If ( favouriteImagesModels.size( ) == 1) {             favouriteImagePresent = true;              imagesUnfavourited++;    } Now as the image belongs to the favourite mode we ultimately use the following code to remove the image from FAVOURITES.  favouriteImagesModels.deleteAllFromRealm(); The full code which handle the option to unfavourite an image is shown below. @Override                    protected Boolean doInBackground(String... arg0) {                              if ( all_photos || fav_photos )   {                            realm = Realm.getDefaultInstance();                            realm.executeTransaction ( new Realm.Transaction( ) {                                                                @Override                                public void execute (Realm realm)  {                                    for (int i = 0 ;  i < selectedMedias.size( ) ;  i++) {                                        RealmResults<FavouriteImagesModel> favouriteImagesModels = realm.where                                                (FavouriteImagesModel.class).equalTo("path", selectedMedias.get(i).getPath( )).findAll( );                                        If ( favouriteImagesModels.size( ) == 1) {                                            favouriteImagePresent = true;                                            imagesUnfavourited++;                                        }                                        favouriteImagesModels.deleteAllFromRealm();                                    }                                }                            });                        }          else if ( !fav_photos && !albumsMode ) {                            realm = Realm.getDefaultInstance();                            realm.executeTransaction(new Realm.Transaction() {                                                           @Override                                public void execute(Realm realm) {                                    for (int i = 0;  i < getAlbum().getSelectedCount();  i++) {                                        RealmResults<FavouriteImagesModel> favouriteImagesModels = realm.where                                                (FavouriteImagesModel.class).equalTo("path", getAlbum( ).getSelectedMedia(i).getPath( ) ).findAll( );                                        If ( favouriteImagesModels.size() == 1) {                                            favouriteImagePresent = true;                                            imagesUnfavourited++;                                        }                                        favouriteImagesModels.deleteAllFromRealm();                                    }                                }                    } After the doInBackground( ) method has been executed the onPostExecute( ) comes into play and some other UI related changes are done such as a SnackBar message…

Continue ReadingAdding option to Unfavourite image in Phimp.Me
Read more about the article Use PreferenceManager in place of SharedPreferences

Use PreferenceManager in place of SharedPreferences

SharedPreferences is used in android to store data in the form of a key-value pair in an application. But, sometimes we need to store data at many places in the application such as saving the login email or a particular information that remains the same for the entire use of the app. In SUSI.AI android app PrefManager.java class is made that uses the sharedpreferences in android and provides a custom wrapper that is used to store the data in the key-value pair form in the app. To store data in sharedpreferences through the PreferenceManager class we just need to declare an instance of the PreferenceManager in the location in which we want to save the data. The SUSI.AI Android app opens up the login screen and on just viewing the welcome cards for the first time due to the incorrect implementation of the sharedpreferences, using the Preference Manager we can correctly implement the preferences in welcome activity. Whenever we install the SUSI.AI Android app, on opening it for the first time we see welcome cards that give a basic overview of the app. So, now after swiping all the cards and on reaching the final card instead of clicking GOT IT to move to the login screen and on pressing the home button we put the app in the background. Now, what happened was when the app showed cards, it was due to the WelcomeActivity.java activity. In the onCreate() method of this activity we check whether the WelcomeActivity is opened for the first time or not. In this case we make use of the PrefManager.java class. if (PrefManager.getBoolean("activity_executed", false)) {   Intent intent = new Intent(this, LoginActivity.class);   startActivity(intent);   finish(); } else {   PrefManager.putBoolean("activity_executed", true); } This piece of code calls the getBoolean(<preferenceKey>,<preferenceDefaultValue>) of the PrefManager.java class and checks the boolean value against the preference key passed in the function. If it is the first time when this function is called then the default value is accessed against the preference key: “activity_executed”, which is passed as false and no code within the if statement is executed and so the code in the else block is executed which puts the value true as the preference value against the key “activity_executed” and the next line is executed in the sequence after this line. In short, on opening the app for the first time the preference key “activity_executed” has a value of true against it. When we close the app by destroying it while it is in the WelcomeActivity, the onDestroy() method is called and memory is cleared, but when we open the app again we expect to see the Welcome Cards, but instead we find that we are on the login screen, even though the GOT IT button on the final card was not pressed. This is because when we go through the onCreate() method again the if condition is true this time and it sends the user directly to the Login activity. To, solve this problem the method that was followed was :…

Continue ReadingUse PreferenceManager in place of SharedPreferences
Read more about the article Implementing Color Picker in the Open Event Orga App

Implementing Color Picker in the Open Event Orga App

In the Open Event Orga App, we have implemented a color picker to change the color of the Session’s item heading. Earlier the user had to enter the hex code in the given field to provide the color which is a bit cumbersome but now it is much easier with the help of a color picker. The PR related to this issue can be found here: #1073 The following approach was followed to implement the color picker. Firstly we have used the library https://github.com/Pes8/android-material-color-picker-dialog. So it is included in the build.gradle file. The following line is added this file. dependencies {        implementation 'com.pes.materialcolorpicker:library:1.2.0'    } Then navigate to the CreateTracksFragment.java class where we will need to implement the color picker. But firstly when the user enters the fragment , he should be able to see a random color in the edit text field and a small demo to the right of it where the selected color will be shown. These two things are done in the following steps. 1. To auto fill the color field with a random color the following code is written: public String getRandomColor() {   Random random = new Random();   colorRed = random.nextInt(255);   colorGreen = random.nextInt(255);   colorBlue = random.nextInt(255);   colorRGB = Color.rgb(colorRed, colorGreen, colorBlue);   return String.format("#%06X",(0xFFFFFF & colorRGB)); } public int getRed() {   return colorRed; } public int getGreen() {   return colorGreen; } public int getBlue() {   return colorBlue; } public int getColorRGB() {   return colorRGB; }   With the help of the above code a random hex color is generated with the help of colorRed, colorGreen and colorBlue. These random fields are assigned to the local variables as they need to be used later on in the CreateTracksFragment. This method is then called from the onStart( ) of the CreateTracksFragment. 2. Now a small demo color view is created to the right of the edit text field where the user can see the color of the current hex code. To implement this the following XML code is written. A small image view is created with the id color_picker. <ImageView   android:id="@+id/color_picker"   android:layout_width="24dp"   android:layout_height="24dp"   android:layout_margin="10dp"   android:layout_weight="0.2" /> The above image view is filled with the current selected color with the help of the following code: This ensures that whenever the user opens the CreateTracksFragment he should be able to view the color. binding.form.colorPicker.setBackgroundColor(getPresenter().getColorRGB()); Now after implementing the above 2 features, the color picker dialog needs to be shown when the user clicks on the demo color view and the dialog box should show the value of Red, Green, Blue generated by the random method in the presenter. So these values are obtained from the presenter and added as constructor parameters as shown below. The color picker library has 2 main methods that need to be implemented which are : → setCallback( ) which is a callback method triggered when the user has selected the color and clicks on submit button. The action that needs to be performed after this is written in this particular callback method. In our case,…

Continue ReadingImplementing Color Picker in the Open Event Orga App
Read more about the article Setup interactive charts for data representation

Setup interactive charts for data representation

At the end of this blog, you would be able to setup interactive charts using HighCharts and D3.js. As the charts/data-visualisation models will form the backbone of the upcoming SUSI.AI Analytics dashboard, as well as the data representational model for various useful data. For the purpose of integration with the SUSI Skills CMS project, we will be using the react-highcharts and react-tagcloud library. There are various kinds of charts and plots that HighCharts offers. They are - Line charts Area charts Column and Bar Charts Pie Charts Scatter and Bubble Charts Combinations Dynamic Charts Gauges Heat and Tree maps 3D charts Check out this link for the full list. We would be aiming to build up the above charts for analysis of Term Frequency Trends and Trending Clouds. For the Term Frequency Trends, we will need to setup a Basic Line Graph and for the later,  we need a World Cloud. Setting up a Basic Line Graph The aim is to setup a basic line graph and to accomplish that we use a react library called react-highcharts, which makes our work very easier. Firstly, we create an object config that contains the labels and the required data, with the key values as mentioned in the API reference. The object looks like this - const config = { xAxis: { categories: ['01/13', '01/14', '01/15', '01/16', '01/17', '01/18', '01/19', '01/20'] }, series: [{ data: [750, 745, 756, 740, 760, 752, 765] }] }; Secondly, we create a React Component and pass the config object as a property to the ReactHighcharts component. Finally, we render the component in a div of the index.html file, and the following output is achieved. The code for the component that renders the Chart is as follows: import React from 'react'; import ReactHighcharts from 'react-highcharts'; import ReactDOM from 'react-dom'; const config = { xAxis: { categories: ['01/13', '01/14', '01/15', '01/16', '01/17', '01/18', '01/19', '01/20'] }, series: [{ data: [750, 745, 756, 740, 760, 752, 765] }] }; ReactDOM.render(<ReactHighcharts config={config} />, document.getElementById('app')); Setting up a WordCloud Here, we wish to setup a WordCloud that would show the different words that got searched or the top trending words. We would be using the react-tagcloud library for this. Firstly, we create an object data that contains the text along with the count/frequency of search. The object looks like this - const data = [ { value: "JavaScript", count: 38 }, { value: "React", count: 30 }, { value: "Nodejs", count: 28 }, { value: "Express.js", count: 25 }, { value: "HTML5", count: 33 }, { value: "MongoDB", count: 18 }, { value: "CSS3", count: 20 } ]; Secondly, we create a React Component and pass the data object as a property to the TagCloud component. Finally, we render the component in a div of the index.html file, and the following output is achieved. The code for the component that renders the Chart is as follows: import React from 'react'; import React, { Component } from 'react'; import { TagCloud } from…

Continue ReadingSetup interactive charts for data representation
Read more about the article Implementing Filters in Phimp.me Android App

Implementing Filters in Phimp.me Android App

Image filters in phimp.me android app are implemented using the OpenCV library that enables the android developers to write code in C++/C which is compatible with java. I have implemented around eight filters in the filters.cpp file, mainly dealing with the colour variations that took place between the images. Suppose that the color model used in consideration is the RGB (Red,Green,Blue) model and we define that every pixel is defined using these values. If we simply want to boost or focus on the red part of the image it can be done by enhancing the particular color in the source image i.e. modifying each pixel of the app by enhancing the blue color of each pixel. The code for the same can be written as : void applyBlueBoostEffect(cv::Mat &src, cv::Mat &dst, int val) { register int x, y; float opacity = val * 0.01f; cvtColor(src, src, CV_BGRA2BGR); dst = Mat::zeros(src.size(), src.type()); uchar r, g, b,val1; for (y = 0; y < src.rows; y++) { for (x = 0; x < src.cols; x++) { r = src.at<Vec3b>(y, x)[0]; g = src.at<Vec3b>(y, x)[1]; b = src.at<Vec3b>(y, x)[2]; val1 = saturate_cast<uchar>(b*(1+opacity)); if(val1 > 255) { val1 = 255; } dst.at<Vec3b>(y, x)[0] = saturate_cast<uchar>(r); dst.at<Vec3b>(y, x)[1] = saturate_cast<uchar>(g); dst.at<Vec3b>(y, x)[2] = saturate_cast<uchar>(val1); } } } In the above function what we are doing is taking the source image and converting it to a matrix of known number of rows and columns. Now, we loop over this matrix created and at each position in the matrix calculate the red, green and blue values present there. There is a parameterized value “val” that determines the amount to which the color chosen is enhanced. A simple variable val1 contains the enhanced value of the color chosen, here which is color blue. We modify and boost the color by the equation  : B = B*(1 + (0.01f* val) ) Finally at this particular position in the matrix all the three values of the color are updated i.e. the original red and green color but the modified blue color. The output of this filter converts images as below shown : Before                                                                                   After    In the above method defined we instead of enhancing one color we can even modify two colors or all the three at the same time to get different effects as per the required needs. An example where I implemented a filter to enhance two colors at the same time is given below, the purpose of this filter is to add a violet color tone in the image. The code for the filter is : void applyRedBlueEffect(cv::Mat &src, cv::Mat &dst, int val) { register int x, y; float opacity = val * 0.01f; cvtColor(src, src, CV_BGRA2BGR); dst = Mat::zeros(src.size(), src.type()); uchar r, g, b; uchar val1,val3; for…

Continue ReadingImplementing Filters in Phimp.me Android App
Read more about the article Making a SUSI Skill to get details about bank from IFSC

Making a SUSI Skill to get details about bank from IFSC

We are going to make a SUSI skill that fetches information about a bank when the IFSC (Indian Financial System Code) is known. Here is a detailed explanation of how we going about doing this. Getting started with the skill creation API endpoint that returns the bank details Before going to the skill development, we need to find an API that would return the bank details from the IFSC, On browsing through various open source projects. I found an apt endpoint by Razorpay. Razorpay is a payment gateway for India which allows businesses to accept, process and disburse payments with ease. The Github link  to the repository is https://github.com/razorpay/ifsc. API endpoint -  https://ifsc.razorpay.com/<:ifsc> Request type -  GET Response type -  JSON Now, head over to the SUSI Etherpad, which is the current SUSI Skill Development Environment and create a new Pad.  Here, we need to define the skill in the Etherpad. We will now write rules/intents for the skill. An intent represents an action that fulfills a user's spoken request. Intents consist of 2 parts - User query - It contains different patterns of query that user can ask. Answer - It contains the possible answer to the user query. The main intent that our skill focuses on is, returning the bank name and address from the IFSC code. Here is how it looks - Name of bank with IFSC code * | Bank's name with IFSC code * !example:Name of bank with IFSC code SBIN0007245 !expect: The name of bank is State Bank of India !console:The name of bank with IFSC code $1$ is $object$ { "url":"https://ifsc.razorpay.com/$1$", "path":"$.BANK" } eol Part-wise explanation of the intent The first line contains the query pattern that the user can use while querying. You can see that a wildcard character (*) is used in the pattern. It contains the IFSC of the bank that we wish to know, and will later on use to fetch the details via the API. The second line contains an example query, followed by third line that contains the expected answer. Last part of the rule contains the answer that is fetched from an external API -  https://ifsc.razorpay.com/<:ifsc>  ,via the console service  provided by SUSI Skills. Here, <:ifsc> refers to the IFSC that the user wants to know about. We get it from the user query itself, and can access it by the variable name $1$ as it matches with the 1st wildcard present in the query. If there would be 2 wildcards, we could have accessed them by $1$ and $2$ respectively. The console service provides us with an option to enter the url of the API that we want to hit and path of the key we want to use. The sample response of the endpoint looks like this : { "BANK": "Karnataka Bank", "IFSC": "KARB0000001", "BRANCH": "RTGS-HO", "ADDRESS": "REGD. & HEAD OFFICE, P.B.NO.599, MAHAVEER CIRCLE, KANKANADY, MANGALORE - 575002", "CONTACT": "2228222", "CITY": "DAKSHINA KANNADA", "RTGS": true, "DISTRICT": "MANGALORE", "STATE": "KARNATAKA" }   Since, we want…

Continue ReadingMaking a SUSI Skill to get details about bank from IFSC
Read more about the article Option to secure particular albums in Phimpme Android Application

Option to secure particular albums in Phimpme Android Application

In the Phimpme Android application, users can perform various operations on the albums available such as creating a zip file of the album, rename an album and many more. However, one another useful functionality that has been added to the Phimpme Android application is the option to secure particular albums. So in this post, I will be discussing the implementation of this security feature. Step 1 Firstly, a view item for providing the option to enable security for particular albums is required to be added to the security settings layout. The two-state toggle switch widget provided by the Android framework along with a textview has been added as the required view item. A screenshot depicting the layout change is provided below. The code snippet representing the operation is provided below. <TextView   android:id="@+id/security_body_apply_folders_title"   android:layout_width="wrap_content"   android:layout_height="wrap_content"   android:text="@string/local_folder"   android:textColor="@color/md_dark_background"   android:textSize="@dimen/medium_text" /> <android.support.v7.widget.SwitchCompat   android:id="@+id/security_body_apply_folder_switch"   android:layout_width="wrap_content"   android:layout_height="wrap_content"   android:layout_alignParentEnd="true"   android:layout_centerVertical="true"   android:layout_gravity="center_vertical"   android:button="@null"   android:hapticFeedbackEnabled="true" /> Step 2 Now we need to keep track of the albums selected by the user to secure. This can be done by storing the selected album/albums paths in an ArrayList<String> which can be referred later when required in the process. The required code snippet to perform the above mentioned operation is provided below. holder.foldercheckbox.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() { @Override public void onCheckedChanged(CompoundButton compoundButton, boolean b) { if(b){ securedfol.add(a.getPath()); a.setsecured(true); }else{ securedfol.remove(a.getPath()); a.setsecured(false); } } }); Step 3 Now we need to store the selected albums preference in the SharedPreference so that the user’s security preference persists even when the user exits the application and the user doesn’t have to redo the securing operation the next time user launches the application. The ArrayList<String> object containing the path of the user choice albums are converted to JSON representation by the use of the Gson Java library and the string key denoting the JSON representation of the list is saved in the SharedPreference thereafter. if(securedfol.size()>0){   SharedPreferences.Editor editor = SP.getEditor();   Gson gson = new Gson();   String securedfolders = gson.toJson(securedfol);   editor.putString(getString(R.string.preference_use_password_secured_local_folders), securedfolders);   editor.commit();} Now at the time of performing other operations on the secured folders, the list containing the secured folder paths is retrieved from SharedPreference and the choosen folder’s path is searched in the obtained list, then the user is asked to authenticate accordingly. This is how we have implemented the functionality to secure particular albums in the Phimpme Android application. To get the full source code, please refer to the Phimpme Android Github repository listed in the resource section below. Resources 1.Android Developer Guide - https://developer.android.com/training/data-storage/shared-preferences 2.Github-Phimpme Android Repository - https://github.com/fossasia/phimpme-android/ 3.Gson Java library tutorial - http://www.vogella.com/tutorials/JavaLibrary-Gson/article.html

Continue ReadingOption to secure particular albums in Phimpme Android Application
Read more about the article Implementing Search Functionality in Phimpme Android Application.

Implementing Search Functionality in Phimpme Android Application.

In the Phimpme Android application, users are provided with options to perform various operations on the albums available such as move, creating a zip file of the album, rename an album and many more. However, one another useful functionality that has been added to the Phimpme Android application is the option to search albums. So in this post, I will be discussing the implementation of search functionality. Step 1 Android framework provides developers with a search widget called SearchView that provides a user interface for the user to search a query and submit the request. So first setting up the widget in the action bar of the activity is required. The searchview widget can be added to the action bar as a menu item by adding the following lines in the XML menu resource file menu_albums.xml. <item   android:id="@+id/search_action"   android:title="@string/search_menu"   android:visible="true"   android:icon="@drawable/ic_search_black_24dp"   android:tint="@color/white"   app:actionViewClass="android.support.v7.widget.SearchView"   app:showAsAction="always" /> Step 2 Now SearchView.OnQueryTextListener interface is used for initiating the search operation and listening to the callbacks for changes to the query text. For the purpose of listening to the querytext, two methods are used here both of which are listed below. onQueryTextChanged(String Text) - This method is called every time the query text is changed by the user and returns a boolean value, false if SearchView should perform the default action of showing any suggestions and true if the action was handled by the listener. onQueryTextSubmit(String query) - This method is called when the user submits a query which could be done with a key press on the keyboard or by pressing the submit button. It also returns a boolean value which is true if the query has been handled by the listener, otherwise false. The code snippet for the implementation of the above mentioned interface is provided below. searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {   @Override   public boolean onQueryTextSubmit(String query) {       return false;   }   @Override   public boolean onQueryTextChange(String newText) {       return searchTitle(newText);   } }); Step 3 In the final step, with the use of the onQueryTextChange method of the SearchView.onQueryTextListener interface the search operation and displaying the search results in the UI can be achieved. The onQueryTextChange method is called every time the search-query text changes. From the onQueryTextChange method, another method named searchTitle is invoked. Inside the searchTitle method the album names matching the search-query are searched from an Arraylist<Albums> containing all the albums displayed in the application. The albums obtained as a result of the search operation are then stored in another Arraylist<Album> which is thereafter passed as a parameter to the swapDataSet method of the AlbumsAdapter class to display the searched albums in the album view. The code snippet used for the above operations is provided below. public boolean searchTitle(String newText) {   if (!fromOnClick) {       String queryText = newText;       queryText = queryText.toLowerCase();       final ArrayList<Album> newList = new ArrayList<>();       for (Album album : albList) {           String name = album.getName().toLowerCase();           if (name.contains(queryText)) {               newList.add(album);           }       }       if(newList.isEmpty()){           checkNoSearchResults(newText);       }       else{           if(textView.getVisibility() == View.VISIBLE){               textView.setVisibility(View.INVISIBLE);           }       }       albumsAdapter.swapDataSet(newList);   } else {       fromOnClick = false;   }   return true;…

Continue ReadingImplementing Search Functionality in Phimpme Android Application.