“When I am attending a session in a room, I don’t get information on what is coming up.”
The issue that the user expressed was that he wanted to know what were the upcoming sessions at a microlocation. While I took up this issue in Open Event Android a few days back, I was thinking of ways about how this can be implemented. The app should be easy-to-use even for non-developers and thus, any new feature shouldn’t be too complex in its implementation. We decided upon doing the following:
- Adding an “upcoming” option in the options menu of the Location activity.
- This option’s purpose was to trigger the app to show information about the upcoming session in that microlocation.
Initial changes in LocationActivity.java
First of all, we added a new icon in the options menu of LocationActivity.java. One of the things that we learnt there was to use ifRoom|collapseActionView option for the app:showAsAction
attribute as frequently as possible. This option ensures that the title in the option’s menu is visible at all times irrespective of the options being visible along with their icons.
So in case, the title is too big and there is very little room for the options to appear individually, then instead of squeezing down the title, the “ifRoom” attribute will collapse the option icons and insert a 3-dotted drop-down option list with all the options appearing in the drop-down.
Something like this:
The icon’s XML element and UI looked something like this:
<item
android:id="@+id/upcoming_sessions"
android:icon="@drawable/ic_timeline_white_24dp"
android:title="@string/upcoming"
app:showAsAction="ifRoom|collapseActionView"
app:actionViewClass="android.support.v7.widget.Button"/>
About the drawable icon that you see in the screenshot above, it was a tough find. Before I talk about how I came across this icon, I will talk about adding an icon in Android Studio.
How to add an icon in Android Studio?
Adding an item in Android studio means adding a drawable at a basic level. You can find all drawables under the app/src/main/res/drawable folder.
To add a new drawable, right-click on the drawable folder and go to new –>Vector asset. A window similar to what is shown below will appear.
Now, on selecting the “icon” option you will be taken to a huge list of icons that you can add in your app and then use them subsequently. But the problem here is that it is tough at times to find the icon that will be fit for your purpose. Like in my case, there was no direct icon for “upcoming”. This is when we had to do something more. We had to browse to this amazing site by Google: https://material.io/icons/ This site shows all the available icons in a much more interactive way and it was a lot more easier for me to come across the icon we wanted using this site.
The vector drawable file for the icon we chose looks like this:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:fillColor="#FFFFFF"
android:pathData="M23,8c0,1.1 -0.9,2 -2,2 -0.18,0 -0.35,-0.02 -0.51,-0.07l-3.56,3.55c0.05,0.16 0.07,0.34 0.07,0.52 0,1.1 -0.9,2 -2,2s-2,-0.9 -2,-2c0,-0.18 0.02,-0.36 0.07,-0.52l-2.55,-2.55c-0.16,0.05 -0.34,0.07 -0.52,0.07s-0.36,-0.02 -0.52,-0.07l-4.55,4.56c0.05,0.16 0.07,0.33 0.07,0.51 0,1.1 -0.9,2 -2,2s-2,-0.9 -2,-2 0.9,-2 2,-2c0.18,0 0.35,0.02 0.51,0.07l4.56,-4.55C8.02,9.36 8,9.18 8,9c0,-1.1 0.9,-2 2,-2s2,0.9 2,2c0,0.18 -0.02,0.36 -0.07,0.52l2.55,2.55c0.16,-0.05 0.34,-0.07 0.52,-0.07s0.36,0.02 0.52,0.07l3.55,-3.56C19.02,8.35 19,8.18 19,8c0,-1.1 0.9,-2 2,-2s2,0.9 2,2z"/>
</vector>
What would the upcoming icon do?
Keeping in mind the necessity for the feature to be less complex, I decided that the upcoming icon will lead the user to a dialog box that shows the status of upcoming sessions in that micro location. The implementation for this feature involved 2 main things:
- Finding out the upcoming session from the list of sessions in the microlocation.
- Generate a dialog box that shows information about that session.
Finding position of upcoming session in Recycler View
Upcoming session will be a session whose starting time comes after the current time. So the approach was simple.
- Run a loop on a sorted list of all sessions in a microlocation.
- Find out every session’s start time.
- Compare the start time of every session with the current time.
- Find the first session whose start time comes after the current time.
- Store that session’s position, name, ID and other stuff like track name and track color.
- Break out of the loop.
This was the basic logic or algorithm, so to say. Here’s the implementation in the upcomingSession() function:
public void upcomingSession(){
String upcomingTitle = "";
String track = "";
String color = null;
Date current = new Date();
for (Session sess:sortedSessions){
try {
Date start = DateUtils.getDate(sess.getStartsAt());
if (start.after(current)){
upcomingTitle = sess.getTitle();
track = sess.getTrack().getName();
color = sess.getTrack().getColor();
break;
}
} catch (ParseException e) {
e.printStackTrace();
}
}
Now, displaying a dialog box consisting of all the necessary information is an easy thing to do once you have the required information. So, I’ll just provide some code for it here without explaining much about it.
The initialisations:
public void upcomingSessionsInitial(){
upcomingDialogBox = new Dialog(this);
upcomingDialogBox.setContentView(R.layout.upcoming_dialogbox);
trackImageIcon = (ImageView)upcomingDialogBox.findViewById(R.id.track_image_drawable);
upcomingSessionText = (TextView) upcomingDialogBox.findViewById(R.id.upcoming_session_textview);
upcomingSessionTitle = (TextView) upcomingDialogBox.findViewById(R.id.upcoming_Session_title);
Button dialogButton = (Button) upcomingDialogBox.findViewById(R.id.upcoming_button);
dialogButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
upcomingDialogBox.dismiss();
}
});
}
The calling:
switch (item.getItemId()){
case R.id.action_map_location:
FragmentManager fragmentManager = getSupportFragmentManager();
FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
Bundle bundle = new Bundle();
bundle.putBoolean(ConstantStrings.IS_MAP_FRAGMENT_FROM_MAIN_ACTIVITY, false);
bundle.putString(ConstantStrings.LOCATION_NAME, location);
Fragment mapFragment = ((OpenEventApp)getApplication())
.getMapModuleFactory()
.provideMapModule()
.provideMapFragment();
mapFragment.setArguments(bundle);
fragmentTransaction.replace(R.id.content_frame_location, mapFragment, FRAGMENT_TAG_LOCATION).addToBackStack(null).commit();
sessionRecyclerView.setVisibility(View.GONE);
noSessionsView.setVisibility(View.GONE);
menu.setGroupVisible(R.id.menu_group_location_activity, false);
return true;
case android.R.id.home:
onBackPressed();
getSupportFragmentManager().popBackStack();
sessionRecyclerView.setVisibility(View.VISIBLE);
return true;
case R.id.upcoming_sessions:
upcomingDialogBox.show();
return true;
default:
return true;
}
}
Final result:
This is the final result or solution that we generated for the issue that was addressed by one of the users:
Some useful links are:
X Axis Customization
You must be logged in to post a comment.