Building a Team Lineup View on Android

Football field background drawable

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

  • 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.

avatar_and_name_view.xml

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.

team_view.xml

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: