SUSI is an artificial intelligence for interactive chat bots. The SUSI Android app (https://github.com/fossasia/susi_android) has a toolbar, that allows different user preferences right up in the menu option. These include functionalities such as search, login, logout and rating the app. The material design toolbar provides a clean and efficient way to do these functions. We will see how we implemented this in the SUSI Android app.
To implement ActionBar in the Android app we will start with adding the dependency below to the gradle file.
compile `com.android.support:appcompat-v7:22.2.0`
For more information regarding setting up ActionBar in your own project please refer to this link.
Now we will add the Toolbar in our XML file as shown below.
<android.support.v7.widget.Toolbar xmlns:app="http://schemas.android.com/apk/res-auto" style="@style/Theme.AppCompat" xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="?attr/colorPrimary" android:minHeight="@dimen/abc_action_bar_default_height_material"> <ImageView android:id="@+id/toolbar_img" android:layout_width="@dimen/toolbar_logo_width" android:layout_height="@dimen/toolbar_logo_height" android:layout_gravity="center" app:srcCompat="@drawable/ic_susi_white" /> </android.support.v7.widget.Toolbar>
On Adding the above code we can see the preview of the Toolbar which appears like this.
Now we will see how to implement the menu options. In the menu_main.xml we can add options to be shown in the toolbar.
<menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" tools:context=".activities.MainActivity"> <item android:id="@+id/action_search" android:icon="@android:drawable/ic_menu_search" android:orderInCategory="200" android:title="@string/search" app:actionViewClass="android.support.v7.widget.SearchView" app:showAsAction="always" /> <item android:id="@+id/down_angle" android:icon="@drawable/ic_arrow_down_24dp" android:title="Search Down" android:visible="false" app:showAsAction="always"/> <item android:id="@+id/up_angle" android:icon="@drawable/ic_arrow_up_24dp" android:title="Search Up" android:visible="false" app:showAsAction="always"/> <item android:id="@+id/action_settings" android:orderInCategory="100" android:title="@string/action_settings" app:showAsAction="never" /> <item android:id="@+id/wall_settings" android:orderInCategory="100" android:title="@string/action_wall_settings" app:showAsAction="never" /> <item android:id="@+id/action_share" android:orderInCategory="101" android:title="@string/action_share" app:showAsAction="never" />
We can define different items in the ActionBar as shown above. Also, we have the option by which we can set the visibility of the items. If the visibility of the item is false, then it will be shown in the overflow menu like this.
Now we will see how we can add functionalities to the options present in the menu ActionBar. To add the listeners to the options we have to override the function onCreateOptionsMenu and there we can add the logic for different options as shown below.
@Override public boolean onCreateOptionsMenu(final Menu menu) { this.menu = menu; getMenuInflater().inflate(R.menu.menu_main, menu); if(PrefManager.getBoolean(Constant.ANONYMOUS_LOGGED_IN, false)) { menu.findItem(R.id.action_logout).setVisible(false); menu.findItem(R.id.action_login).setVisible(true); } else if(!(PrefManager.getBoolean(Constant.ANONYMOUS_LOGGED_IN, false))) { menu.findItem(R.id.action_logout).setVisible(true); menu.findItem(R.id.action_login).setVisible(false); } searchView = (SearchView) MenuItemCompat.getActionView(menu.findItem(R.id.action_search)); final EditText editText = (EditText)searchView.findViewById(android.support.v7.appcompat.R.id.search_src_text); searchView.setOnSearchClickListener(new View.OnClickListener() { @Override public void onClick(View view) { toolbarImg.setVisibility(View.GONE); ChatMessage.setVisibility(View.GONE); btnSpeak.setVisibility(View.GONE); sendMessageLayout.setVisibility(View.GONE); isEnabled = false; } }); }
For diving more into the code, we can refer to the GitHub repo of Susi Android (https://github.com/fossasia/susi_android).
Resources
- Using the Android Toolbar (ActionBar) by Vogella http://www.vogella.com/tutorials/AndroidActionBar/article.html
- Official Android documentation of Appbar in Android app https://developer.android.com/training/appbar/setting-up.html