Football field background drawable
We’ll create a custom drawable called
HalfFieldDrawable and override its
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
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
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.
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
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: