Adding Number of Sessions Label in Open Event Android App
The Open Event Android project has a fragment for showing tracks of the event. The Tracks Fragment shows the list of all the Tracks with title and TextDrawable. But currently it is not showing how many sessions particular track has. Adding TextView with rounded corner and colored background showing number of sessions for track gives great UI. In this post I explain how to add TextView with rounded corner and how to use Plurals in Android.
1. Create Drawable for background
Firstly create track_rounded_corner.xml Shape Drawable which will be used as a background of the TextView. The <shape> element must be the root element of Shape drawable. The android:shape attribute defines the type of the shape. It can be rectangle, ring, oval, line. In our case we will use rectangle.
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <corners android:radius="360dp" /> <padding android:bottom="2dp" android:left="8dp" android:right="8dp" android:top="2dp" /> </shape>
Here the <corners> element creates rounded corners for the shape with the specified value of radius attribute. This tag is only applied when the shape is a rectangle. The <padding> element adds padding to the containing view. You can modify the value of the padding as per your need. You can feel shape with appropriate color using <solid> as we are setting color dynamically we will not set color here.
2. Add TextView and set Drawable
Now add TextView in the track list item which will contain number of sessions text. Set track_rounded_corner.xml drawable we created before as background of this TextView using background attribute.
<TextView android:id="@+id/no_of_sessions" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/track_rounded_corner" android:textColor="@color/white" android:textSize="@dimen/text_size_small"/>
Set color and text size according to your need. Here don’t add padding in the TextView because we have already added padding in the Drawable. Adding padding in the TextView will override the value specified in the drawable.
3. Create TextView object in ViewHolder
Now create TextView object noOfSessions and bind it with R.id.no_of_sessions using ButterKnife.bind() method.
public class TrackViewHolder extends RecyclerView.ViewHolder { ... @BindView(R.id.no_of_sessions) TextView noOfSessions; private Track track; public TrackViewHolder(View itemView, Context context) { super(itemView); ButterKnife.bind(this, itemView); public void bindTrack(Track track) { this.track = track; ... } }
Here TrackViewHolder is a RecycleriewHolder for the TracksListAdapter. The bindTrack() method of this view holder is used to bind Track with ViewHolder.
4. Add Quantity Strings (Plurals) for Sessions
Now we want to set the value of TextView. Here if the number of sessions of the track is zero or more than one then we need to set text “0 sessions” or “2 sessions”. If the track has only one session than we need to set text “1 session” to make text meaningful. In android we have Quantity Strings which can be used to make this task easy.
<resources> <!--Quantity Strings(Plurals) for sessions--> <plurals name="sessions"> <item quantity="zero">No sessions</item> <item quantity="one">1 session</item> <item quantity="other">%d sessions</item> </plurals> </resources>
Using this plurals resource we can get appropriate string for specified quantity like “zero”, “one” and “other” will return “No sessions”, “1 session”, and “2 sessions”. accordingly. 2 can be any value other than 0 and 1.
Now let’s set background color and test for the text view.
int trackColor = Color.parseColor(track.getColor()); int sessions = track.getSessions().size(); noOfSessions.getBackground().setColorFilter(trackColor, PorterDuff.Mode.SRC_ATOP); noOfSessions.setText(context.getResources().getQuantityString(R.plurals.sessions, sessions, sessions));
Here we are setting background color of textview using getbackground().setColorFilter() method. To set appropriate text we are using getQuantityString() method which takes plural resource and quantity(in our case no of sessions) as parameters.
Now we are all set. Run the app it will look like this.
Conclusion
Adding TextView with rounded corner and colored background in the App gives great UI and UX. To know more about Rounded corner TextView and Quantity Strings follow the links given below.
- Shape Drawable from official Android guide: https://developer.android.com/guide/topics/resources/drawable-resource.html#Shape
- Rounded Corner Tutorial from Gadgetsaint authored by Anu S Pillai: http://www.gadgetsaint.com/tips/rounded-corners-views-layouts-android
- Plurals from official Android guide: https://developer.android.com/guide/topics/resources/string-resource.html#Plurals
- Open Event Android PR: https://github.com/fossasia/open-event-android/pull/1888
You must be logged in to post a comment.