Building a Team Lineup View on Android
Every Tuesday I play amateur football with a group of friends. We’ve been doing those for almost a decade, and it’s great fun.
We play 6-a-side with three teams (winning team stays), and to help organize it, we have a dedicated app. You can RSVP until there are 18 players, after which you are added to a waiting list. One of the more novel features is automatically dividing the players into three teams by trying to balance them (each player is ranked by the other players). During the redesign of the Android app, I wanted to make showing the teams lineup more visually pleasing since it used to be a simple text table with the names of the players.
You can see the end result in the top of this post, and I’ll show a step-by-step guide for the implementation.
Football field background drawable
We’ll create a custom drawable called HalfFieldDrawable and override its draw method.
Let’s start with the grass, we run a for-loop where we are alternating the grass color.
Now we’ll draw the outer rectangle, consisting of the touchlines, goal lines and the half-way line. To do that we switch the paint style to STROKE .
We need to add the penalty are and goal area. Again, these are simple rectangles.
For drawing the corner arcs, we’ll use the Canvas.drawArc method. You need to provide it with the position, the start angle, the sweep angle, and a use-center flag (if you want to close the arc into a wedge). There’s a great visual guide for this method here.
To finish our drawable, we need to draw the half center circle and the center mark. This is similar to the previous step, but before drawing the center mark, we’ll switch the paint style to FILL.
We’re done with the football pitch drawable, now let’s build our custom view.
Team lineup custom view
There are a couple of requirements for this view:
- Show the team members. Even though we play 6-a-side, sometimes there are less than 18 players, so the number of players in team is dynamic.
- Show the shirt color (the app divides the players into three teams, and gives each team a color, so players know what shirt to bring).
- Show the aggregated offence and defence score of the team (each player has a score for both)
First, we need a view for an avatar and a name, that we’ll dynamically add to our team view.
There’s nothing special going on here, just binding the name and image of the player.
Now we can build our team view. We’ll subclass CardView for the elevation and the rounded corners.
The teamMembersFlow will be filled dynamically with the team players. We’re using flow_wrapMode=”chain” to achieve wrapping around to the next line if there isn’t room (more info can be found here).
When binding a team, we first clear the previous added players views. Then we dynamically add players views into the ConstraintLayout, and update the Flow by setting its referenceIds.
And that’s it, we built a custom view for displaying a team lineup.
You can check out the code in this gist I created:
