SUSI Android

Read more about the article Showing skills based on different metrics in SUSI Android App using Nested RecyclerViews

Showing skills based on different metrics in SUSI Android App using Nested RecyclerViews

SUSI.AI Android app had an existing skills listing page, which displayed skills under different categories. As a result, there were a number of API calls at almost the same time, which led to slowing down of the app. Thus, the UI of the Skill Listing page has been changed so as to reduce the number of API calls and also to make this page more useful to the user. API Information For getting a list of SUSI skills based on various metrics, the endpoint used is /cms/getSkillMetricsData.json This will give you top ten skills for each metric. Some of the metrics include skill ratings, feedback count, etc. Sample response for top skills based on rating : "rating": [ { "model": "general", "group": "Knowledge", "language": "en", "developer_privacy_policy": null, "descriptions": "A skill to tell atomic mass and elements of periodic table", "image": "images/atomic.png", "author": "Chetan Kaushik", "author_url": "https://github.com/dynamitechetan", "author_email": null, "skill_name": "Atomic", "protected": false, "reviewed": false, "editable": true, "staffPick": false, "terms_of_use": null, "dynamic_content": true, "examples": ["search for atomic mass of radium"], "skill_rating": { "bookmark_count": 0, "stars": { "one_star": 0, "four_star": 3, "five_star": 8, "total_star": 11, "three_star": 0, "avg_star": 4.73, "two_star": 0 }, "feedback_count": 3 }, "usage_count": 0, "skill_tag": "atomic", "supported_languages": [{ "name": "atomic", "language": "en" }], "creationTime": "2018-07-25T15:12:25Z", "lastAccessTime": "2018-07-30T18:50:41Z", "lastModifiedTime": "2018-07-25T15:12:25Z" }, . . ]   Note : The above response shows only one of the ten objects. There will be ten such skill metadata objects inside the “rating” array. It contains all the details about skills. Implementation in SUSI.AI Android App Skill Listing UI of SUSI SKill CMS Skill Listing UI of SUSI Android App The UI of skills listing in SUSI Android app displays skills for each metric in a horizontal recyclerview, nested in a vertical recyclerview. Thus, for implementing horizontal recyclerview inside vertical recyclerview, you need two viewholders and two adapters (one each for a recyclerview). Let us go through the implementation. Make a query object consisting of the model and language query parameters that shall be passed in the request to the server. val queryObject = SkillMetricsDataQuery("general", PrefManager.getString(Constant.LANGUAGE,Constant.DEFAULT))   Fetch the skills based on metrics, by calling fetch in SkillListModel which then makes an API call to fetch groups. skillListingModel.fetchSkillsMetrics(queryObject, this)   When the API call is successful, the below mentioned method is called which in turn parses the received response and updates the adapter to display the skills based on different metrics. override fun onSkillMetricsFetchSuccess(response: Response<ListSkillMetricsResponse>) { skillListingView?.visibilityProgressBar(false) if (response.isSuccessful && response.body() != null) { Timber.d("METRICS FETCHED") metricsData = response.body().metrics if (metricsData != null) { metrics.metricsList.clear() metrics.metricsGroupTitles.clear() if (metricsData?.rating != null) { if (metricsData?.rating?.size as Int > 0) { metrics.metricsGroupTitles.add(utilModel.getString(R.string.metric_rating)) metrics.metricsList.add(metricsData?.rating) skillListingView?.updateAdapter(metrics) } } if (metricsData?.usage != null) { if (metricsData?.usage?.size as Int > 0) { metrics.metricsGroupTitles.add(utilModel.getString(R.string.metric_usage)) metrics.metricsList.add(metricsData?.usage) skillListingView?.updateAdapter(metrics) } } if (metricsData?.newest != null) { val size = metricsData?.newest?.size if (size is Int) { if (size > 0) { metrics.metricsGroupTitles.add(utilModel.getString(R.string.metric_newest)) metrics.metricsList.add(metricsData?.newest) skillListingView?.updateAdapter(metrics) } } } if (metricsData?.latest != null) { if (metricsData?.latest?.size as Int > 0) { metrics.metricsGroupTitles.add(utilModel.getString(R.string.metric_latest)) metrics.metricsList.add(metricsData?.latest) skillListingView?.updateAdapter(metrics) } } if (metricsData?.feedback !=…

Continue ReadingShowing skills based on different metrics in SUSI Android App using Nested RecyclerViews
Read more about the article Show skills image in Circular Image View in SUSI.AI Android app

Show skills image in Circular Image View in SUSI.AI Android app

Each SUSI.AI skill has some data like skill name, skill image, skill rating and so on. Some of the skills image have a square appearance while others have a circular appearance and so on. This blog shows how to transform all images to circular image view while setting the skill image in the appropriate view holder in the skills card using Picasso. Step - 1 : Create a new helper class called CircleTransform.java that implements the Transformation interface from Picasso. Step -2 : Override the transform and key methods. Step - 3 : Create a Bitmap and perform the following steps inside the transform() method, as mentioned in the code below : @Override public Bitmap transform(Bitmap source) { int size = Math.min(source.getWidth(), source.getHeight()); int x = (source.getWidth() - size) / 2; int y = (source.getHeight() - size) / 2; Bitmap squaredBitmap = Bitmap.createBitmap(source, x, y, size, size); if (!squaredBitmap.equals(source)) { source.recycle(); } Bitmap bitmap = Bitmap.createBitmap(size, size, source.getConfig()); Canvas canvas = new Canvas(bitmap); Paint paint = new Paint(); BitmapShader shader = new BitmapShader(squaredBitmap, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP); paint.setShader(shader); paint.setAntiAlias(true); float radius = size / 2f; canvas.drawCircle(radius, radius, radius, paint); squaredBitmap.recycle(); return bitmap; }   This method returns a bitmap that we shall use to add to the appropriate view holder. Step - 4 : Also return a string called “circle” from the key() method. @Override public String key() { return "circle"; }   Step - 5 : Now, add this transformation to the code, where the skill image is set into the appropriate view holder using Picasso. fun setSkillsImage(skillData: SkillData, imageView: ImageView) { Picasso.with(imageView.context) .load(getImageLink(skillData)) .error(R.drawable.ic_susi) .transform(CircleTransform()) .fit() .centerCrop() .into(imageView) }   Now, all skill images will be circular, as can be seen in the following screenshot :  .      The first image shows the skills image before applying CircleTransform while the second image shows the same after applying it. Resources CircleTransform for Picasso https://gist.github.com/julianshen/5829333 Check out this blog on ‘AvatarView’ https://android.jlelse.eu/avatarview-custom-implementation-of-imageview-4bcf0714d09d Picasso Image Rotation and Transformation https://futurestud.io/tutorials/picasso-image-rotation-and-transformation

Continue ReadingShow skills image in Circular Image View in SUSI.AI Android app
Read more about the article Displaying Avatar of Users using Gravatar on SUSI.AI Android App

Displaying Avatar of Users using Gravatar on SUSI.AI Android App

This blog post shows how the avatar image of the user is displayed in the feedback section using the Gravatar service on SUSI.AI Android app. A Gravatar is a Globally Recognized Avatar. Your Gravatar is an image that follows you from site to site appearing beside your name when you do things like comment or post on a blog. So, it was decided to integrate the service to SUSI.AI, so that it helps to  identify the user via the avatar image too. Implementation The aim is to use the user’s email address to get his/her avatar. For this purpose, Gravatar exposes a publicly available avatar of the user, which can be accessed via following steps : Creating the Hash of the email Sending the image request to Gravatar For the purpose of creating the MD5 hash of the email, use the MessageDigest class. The function takes an algorithm such as SHA-1, MD5, etc. as input and returns a MessageDigest object that implements the specified digest algorithm. Perform a final update on the digest using the specified array of bytes, which then completes the digest computation. That is, this method first calls update(input), passing the input array to the update method, then calls digest(). fun toMd5Hash(email: String?): String? { try { val md5 = MessageDigest.getInstance("MD5") val md5HashBytes: Array<Byte> = md5.digest(email?.toByteArray()).toTypedArray() return byteArrayToString(md5HashBytes) } catch (e: Exception) { return null } }   Convert the byte array to String, which is the requires MD5 hash of the email string. fun byteArrayToString(array: Array<Byte>): String { val result = StringBuilder(array.size * 2) for (byte: Byte in array) { val toAppend: String = String.format("%x", byte).replace(" ", "0") result.append(toAppend) } return result.toString() }   Now, a URL is generated using the hash. This is the URL that will be used to fetch the avatar. The URL format is https://www.gravatar.com/avatar/HASH, where HASH is the hash of the email of the user. In case, the hash is invalid, Gravatar returns a placeholder avatar. Also, append ‘.jpg’ to the URL to maintain image format consistency in the app. Finally, load this URL using Picasso and set it in the appropriate view holder. fun setAvatar(context: Context, email: String?, imageView: ImageView) { val imageUrl: String = GRAVATAR_URL + toMd5Hash(email) + ".jpg" Picasso.with(context) .load(imageUrl) .fit().centerCrop() .error(R.drawable.ic_susi) .transform(CircleTransform()) .into(imageView) }   You can now see the avatar image of the users in the feedback section. 😀 Resources MessageDigest | Android Developers https://developer.android.com/reference/java/security/MessageDigest  

Continue ReadingDisplaying Avatar of Users using Gravatar on SUSI.AI Android App
Read more about the article Use objects to pass multiple query parameters when making a request using Retrofit

Use objects to pass multiple query parameters when making a request using Retrofit

There are multiple instances where there is a need to make an API call to the SUSI.AI server to send or fetch data. The Android client uses Retrofit to make this process easier and more convenient. While making a GET or POST request, there are often multiple query parameters that need to sent along with the base url. Here is an example how this is done: @GET("/cms/getSkillFeedback.json") Call<GetSkillFeedbackResponse> fetchFeedback( @Query("model") String model, @Query("group") String group, @Query("language") String language, @Query("skill") String skill);   It can be seen that the list of params can be very long indeed. A long list of params would lead to more risks of incorrect key value pairs and typos. This blog would talk about replacing such multiple params with objects. The entire process would be explained with the help of an example of the API call being made to the getSkillFeedback.json API. Step - 1 : Replace multiple params with a query map. @GET("/cms/getSkillFeedback.json") Call<GetSkillFeedbackResponse> fetchFeedback(@QueryMap Map<String, String> query);   Step - 2 : Make a data class to hold query param values. data class FetchFeedbackQuery( val model: String, val group: String, val language: String, val skill: String )   Step - 3 : Instead of passing all different strings for different query params, pass an object of the data class. Hence, add the following code to the ISkillDetailsModel.kt interface. ... fun fetchFeedback(query: FetchFeedbackQuery, listener: OnFetchFeedbackFinishedListener) ...   Step - 4 : Add a function in the singleton file (ClientBuilder.java) to get SUSI client. This method should return a call. ... public static Call<GetSkillFeedbackResponse> fetchFeedbackCall(FetchFeedbackQuery queryObject){ Map<String, String> queryMap = new HashMap<String, String>(); queryMap.put("model", queryObject.getModel()); queryMap.put("group", queryObject.getGroup()); queryMap.put("language", queryObject.getLanguage()); queryMap.put("skill", queryObject.getSkill()); //Similarly add other params that might be needed return susiService.fetchFeedback(queryMap); } ...   Step - 5 : Send a request to the getSkillFeedback.json API by passing an object of FetchFeedbackQuery data class to the fetchFeedbackCall method of the ClientBuilder.java file which in turn would return a call to the aforementioned API. ... override fun fetchFeedback(query: FetchFeedbackQuery, listener: ISkillDetailsModel.OnFetchFeedbackFinishedListener) { fetchFeedbackResponseCall = ClientBuilder.fetchFeedbackCall(query) ... }   No other major changes are needed except that instead of passing individual strings for each query param as params to different methods and creating maps at different places like in a view, create an object of FetchFeedbackQuery class and use it to pass data throughout the project. This ensures type safety. Also, data classes reduce the code length significantly and hence are more convenient to use in practice. Resources Kotlin data classes https://kotlinlang.org/docs/reference/data-classes.html A blog on ‘Retrofiting on Android with Kotlin’ https://segunfamisa.com/posts/using-retrofit-on-android-with-kotlin Link to the SUSI.AI Android repository https://github.com/fossasia/susi_android

Continue ReadingUse objects to pass multiple query parameters when making a request using Retrofit
Read more about the article Fetch Five Star Skill Rating from getSkillList API in SUSI.AI Android

Fetch Five Star Skill Rating from getSkillList API in SUSI.AI Android

SUSI.AI had a thumbs up/down rating system till now, which has now been replaced by a five star skill rating system. Now, the user is allowed to rate the skill based on a five star rating system. The UI components include a rating bar and below the rating bar is a section that displays the skill rating statistics - total number of ratings, average rating and a graph showing the percentage of users who rated the skill with five stars, four stars and so on. SUSI.AI Skills are rules that are defined in SUSI Skill Data repo which are basically the processed responses that SUSI returns to the user queries. When a user queries something from the SUSI Android app, a query to SUSI Server is made which in turn fetches data from SUSI Skill Data and returns a JSON response to the app. Similarly, to get skill ratings, a call to the ‘/cms/getSkillList.json’ API is made. In this API, the server checks the SUSI Skill Data repo for the skills and returns a JSON response consisting of all the required information like skill name, author name, description, ratings, etc. to the app. Then, this JSON response is parsed to extract individual fields to display the appropriate information in the skill details screen of the app. API Information The endpoint to fetch skills is ‘/cms/getSkillList.json’ The endpoints takes three parameters as input - model - It tells the model to which the skill belongs. The default value is set to general. group - It tells the group(category) to which the skill belongs. The default value is set to All. language - It tells the language to which the skill belongs. The default value is set to en. Since all skills have to be fetched, this API is called for every group individually. For instance, call “https://api.susi.ai/cms/getSkillList.json?group=Knowledge” to get all skills in group “Knowledge”. Similarly, call for other groups. Here is a sample response of a skill named ‘Capital’ from the group Knowledge : "capital": { "model": "general", "group": "Knowledge", "language": "en", "developer_privacy_policy": null, "descriptions": "A skill to tell user about capital of any country.", "image": "images/capital.png", "author": "chashmeet singh", "author_url": "https://github.com/chashmeetsingh", "skill_name": "Capital", "terms_of_use": null, "dynamic_content": true, "examples": ["What is the capital of India?"], "skill_rating": { "negative": "0", "positive": "4", "feedback_count" : 0, "stars": { "one_star": 0, "four_star": 1, "five_star": 0, "total_star": 1, "three_star": 0, "avg_star": 4, "two_star": 0 } }, "creationTime": "2018-03-17T17:11:59Z", "lastAccessTime": "2018-06-06T00:46:22Z", "lastModifiedTime": "2018-03-17T17:11:59Z" }, It consists of all details about the skill called ‘Capital’: Model (model) Group (group) Language (language) Developer Privacy Policy (developer_privacy_policy) Description (descriptions) Image (image) Author (author) Author URL (author_url) Skill name (skill_name) Terms of Use (terms_of_use) Content Type (dynamic_content) Examples (examples) Skill Rating (skill_rating) Creation Time (creationTime) Last Access Time (lastAccessTime) Last Modified Time (lastModifiedTime) From among all this information, the information of interest for this blog is Skill Rating. This blog mainly deals with showing how to parse the JSON response to get the skill rating star values, so as to…

Continue ReadingFetch Five Star Skill Rating from getSkillList API in SUSI.AI Android
Read more about the article Plot a Horizontal Bar Graph using MPAndroidChart Library in SUSI.AI Android App

Plot a Horizontal Bar Graph using MPAndroidChart Library in SUSI.AI Android App

Graphs and charts provide a visual representation of the data. They provide a clearer and quicker understanding of the impact of certain statistics. Thus, SUSI.AI Android app makes use of bar charts to display statistics related to user ratings for SUSI skills. This blog guides through the steps to create a Horizontal Bar Chart, using MPAndroidChart library, that has been used in the SUSI.AI Android app skill details page to display the five star skill rating by the users. On vertical axis : Labels of the rating shown On horizontal axis : Percentage of total number of users who rated the skill with the corresponding number of stars on the vertical axis Step - 1 : Add the required dependencies to your build.gradle. (a) Project level build.gradle allprojects { repositories { maven { url 'https://jitpack.io' } } } (b) App level build.gradle dependencies { implementation 'com.github.PhilJay:MPAndroidChart:v3.0.3' }   Step - 2 : Create an XML layout. <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <!-- Add a Horizontal Bar Chart using MPAndroidChart library --> <com.github.mikephil.charting.charts.HorizontalBarChart android:id="@+id/skill_rating_chart" android:layout_width="match_parent" android:layout_height="match_parent" /> </android.support.constraint.ConstraintLayout>   Step - 3 : Create an Activity and initialize the Horizontal Bar Chart. class MainActivity : Activity { lateinit var skillRatingChart : HorizontalBarChart override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.chart) setSkillGraph( ) } }   Step - 4 : Create a method in your MainActivity to set up the basic properties and the axes. /** * Set up the axes along with other necessary details for the horizontal bar chart. */ fun setSkillGraph(){ skillRatingChart = skill_rating_chart //skill_rating_chart is the id of the XML layout skillRatingChart.setDrawBarShadow(false) val description = Description() description.text = "" skillRatingChart.description = description skillRatingChart.legend.setEnabled(false) skillRatingChart.setPinchZoom(false) skillRatingChart.setDrawValueAboveBar(false) //Display the axis on the left (contains the labels 1*, 2* and so on) val xAxis = skillRatingChart.getXAxis() xAxis.setDrawGridLines(false) xAxis.setPosition(XAxis.XAxisPosition.BOTTOM) xAxis.setEnabled(true) xAxis.setDrawAxisLine(false) val yLeft = skillRatingChart.axisLeft //Set the minimum and maximum bar lengths as per the values that they represent yLeft.axisMaximum = 100f yLeft.axisMinimum = 0f yLeft.isEnabled = false //Set label count to 5 as we are displaying 5 star rating xAxis.setLabelCount(5) //Now add the labels to be added on the vertical axis val values = arrayOf("1 *", "2 *", "3 *", "4 *", "5 *") xAxis.valueFormatter = XAxisValueFormatter(values) val yRight = skillRatingChart.axisRight yRight.setDrawAxisLine(true) yRight.setDrawGridLines(false) yRight.isEnabled = false //Set bar entries and add necessary formatting setGraphData() //Add animation to the graph skillRatingChart.animateY(2000) } Here is the XAxisValueFormatter class that is used to add the custom labels to the vertical axis : public class XAxisValueFormatter implements IAxisValueFormatter { private String[] values; public XAxisValueFormatter(String[] values) { this.values = values; } @Override public String getFormattedValue(float value, AxisBase axis) { // "value" represents the position of the label on the axis (x or y) return this.values[(int) value]; } }   Step - 5 : Set the bar entries. /** * Set the bar entries i.e. the percentage of users who rated the skill with * a certain number of stars. * * Set the colors for different bars and the bar width of the bars. */ private fun…

Continue ReadingPlot a Horizontal Bar Graph using MPAndroidChart Library in SUSI.AI Android App
Read more about the article Creating Settings Screen in SUSI Android Using PreferenceActivity and Kotlin

Creating Settings Screen in SUSI Android Using PreferenceActivity and Kotlin

An Android application often includes settings that allow the user to modify features of the app. For example, SUSI Android app allows users to specify whether they want to use in built mic to give speech input or not. Different settings in SUSI Android app and their purpose are given below Setting                                        Purpose Enter As Send It allows users to specify whether they want to use enter key to send message or to add new line. Mic Input It allows users to specify whether they want to use in built mic to give speech input or not. Speech Always It allows users to specify whether they want voice output in case of speech input or not. Speech Output It allows users to specify whether they want speech output irrespective of input type or not. Language It allows users to set different query language. Reset Password It allows users to change password. Select Server It allows users to specify whether they want to use custom server or not. Android provides a powerful framework, Preference framework, that allows us to define the way we want preferences. In this blog post, I will show you how Settings UI is created using Preference framework and Kotlin in SUSI Android. Advantages of using Preference are: It has own UI so we don‘t have to develop our own UI for it It stores the string into the SharedPreferences so we don’t need to manage the values in SharedPreference. First, we will add the dependency in build.gradle(project) file as shown below. compile 'com.takisoft.fix:preference-v7:25.4.0.3' To create the custom style for our Settings Activity screen we can set android:theme="@style/PreferencesThemeLight" as the base theme and can apply various other modifications and colour over this. By default, it has the usual Day and Night theme with NoActionBar extension. Layout Design I used PreferenceScreen as the main container to create UI of Settings and filled it with the other components. Different components used are following: SwitchPreferenceCompat: This gives us the Switch Preference which we can use to toggle between two different modes in the setting. <com.takisoft.fix.support.v7.preference.SwitchPreferenceCompat android:defaultValue="true" PreferenceCategory: It is used for grouping the preference. For example, Chat Settings, Mic Settings, Speech Settings etc are different groups in settings. ListPreference: This preference display list of values and help in selecting one. For example in setLanguage option ListPreference is used to show a list of query language. List of query language is provided via xml file array.xml (res/values). Attribute android:entries point to arrays languagentries and android:entryValue holds the corresponding value defined for each of the languages. <ListPreference android:title="@string/Language" android:key="Lang_Select" android:entries="@array/languagentries" android:entryValues="@array/languagentry" </ListPreference> Implementation in SUSI Android All the logic related to Preferences and their action is written in ChatSettingsFragment class. ChatSettingsFragment extends PreferenceFragmentCompat class. class ChatSettingsFragment : PreferenceFragmentCompat() Fragment populate the preferences when created. addPreferencesFromResource method is used to inflate view from xml. addPreferencesFromResource(R.xml.pref_settings) Reference Main site link of PreferenceScreen by Google: https://developer.android.com/reference/android/preference/PreferenceScreen.html Main site link of PreferenceFragmentCompat: https://developer.android.com/reference/android/support/v7/preference/PreferenceFragmentCompat.html Article with example on android settings using PreferenceFragmentCompat: https://storiesandroid.wordpress.com/2015/10/06/android-settings-using-preference-fragments/ Article by Jakob Ulbrich on…

Continue ReadingCreating Settings Screen in SUSI Android Using PreferenceActivity and Kotlin
Read more about the article Implement Internationalization in SUSI Android With Weblate

Implement Internationalization in SUSI Android With Weblate

When you build an Android app, you must consider about users for whom you are building an app. It may be possible that you users are from the different region. To support the most users your app should show text in locale language so that user can use your app easily. Our app SUSI Android is also targeting users from different regions. Internationalization is a way that ensures our app can be adapted to various languages without requiring any change to source code. This also allows projects to collaborate with non-coders more easily and plugin translation tools like Weblate. Benefits of using Internationalization are: It reduces the time for localization i.e it will localize your app automatically. It helps us to keep and maintain only single source code for different regions. To achieve Internationalization in Android app you must follow below steps: Move all the required contents of your app’s user interface into the resource file. Create new directories inside res to add support for Internationalization. Each directory’s name should follow rule <resource type>-(language code). For example values-es contains string resource for es language code i.e Spanish. Now add different locale content in the respective folder. We need to create separate directories for different locale because to show locale specific content, Android check specific folder i.e res/<resource type>-(language code) like res/values-de and show content from that folder. That’s why we need to move all the required content into resource file so that each required content can be shown in the specific locale. How Internationalization is implemented in SUSI Android In SUSI Android there is not any locale specific image but only string. So I created only locale specific value resource folder to add locale specific strings. To create locale specific values folder I follow the above-mentioned rule i.e <resource type>-(language code). After that, I added specific language string in the respective folder. Instead of hard-coded strings, we used strings from string.xml file so that it will change automatically according to the region. android:text="@string/reset" and showToast(getString(R.string.wrong_password)) In absence of resource directory for any specific locale, Android use default resource directory. Integrate Weblate in SUSI Android Weblate is a web based translation tool. The best part of Weblate is its tight version control integration which makes it easy for translators to contribute because translator does not need to fork your repo and send pull request for each change but Weblate handle this part i.e translator translate strings of the project in Weblate site and Weblate will send pull request for those changes. Weblate can host your free software projects for free but it depends on them. Here is the link of SUSI Android project hosted on Weblate. If your project is good then they can host your project for free. But for that, you have to apply from this link and select ask for hosting. Now fill up form as shown in below picture. Once your project is hosted on Weblate, they will email you about it. After that, you have to integrate…

Continue ReadingImplement Internationalization in SUSI Android With Weblate