Skip to content

Commit

Permalink
Add HalfFieldDrawable to draw football half field
Browse files Browse the repository at this point in the history
- Move details to cards
- Draw view with half field in details

First part of #46
  • Loading branch information
Grigorii Bykov committed Mar 29, 2023
1 parent f00af21 commit 4b3b4d9
Show file tree
Hide file tree
Showing 6 changed files with 211 additions and 16 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import android.app.Activity
import android.content.Intent
import android.graphics.drawable.ColorDrawable
import android.os.Bundle
import android.view.View
import android.view.WindowManager
import android.widget.ImageView
import android.widget.TextView
Expand All @@ -21,6 +22,7 @@ import com.bykov.footea.extensions.getColorFromAttr
import com.bykov.footea.extensions.toast
import com.bykov.footea.models.FootballTeamDetails
import com.bykov.footea.ui.PaletteRequestListener
import com.bykov.footea.ui.widgets.HalfFieldDrawable
import com.google.android.material.appbar.AppBarLayout
import com.google.android.material.appbar.CollapsingToolbarLayout

Expand Down Expand Up @@ -76,6 +78,10 @@ class TeamDetailsActivity : AppCompatActivity(R.layout.activity_team_details), T
findViewById(R.id.venue)
}

private val lineupContent: View by lazy(LazyThreadSafetyMode.NONE) {
findViewById(R.id.lineup_card_content)
}

private val appBarOffsetChangeListener = AppBarOffsetChangeListener(
onOffsetChanged = { _, offsetRange ->
teamBadge.alpha = 1 - offsetRange
Expand All @@ -102,6 +108,7 @@ class TeamDetailsActivity : AppCompatActivity(R.layout.activity_team_details), T
}
appBarLayout.addOnOffsetChangedListener(appBarOffsetChangeListener)
titleViewAnimator.onViewsCreated(teamName, toolbarTitle)
lineupContent.background = HalfFieldDrawable(this)

presenter.loadTeamDetails(intent.getIntExtra(EXTRA_TEAM_ID, NO_TEAM_ID))
}
Expand Down
118 changes: 118 additions & 0 deletions app/src/main/java/com/bykov/footea/ui/widgets/HalfFieldDrawable.kt
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
package com.bykov.footea.ui.widgets

import android.content.Context
import android.graphics.Canvas
import android.graphics.ColorFilter
import android.graphics.Paint
import android.graphics.PixelFormat
import android.graphics.Rect
import android.graphics.drawable.Drawable
import androidx.core.content.res.ResourcesCompat
import com.bykov.footea.R

/**
* Draws half of the field.
*
* Inspired by https://proandroiddev.com/building-a-team-lineup-view-on-android-daaf27e3901e
*/
class HalfFieldDrawable(context: Context) : Drawable() {

private val linePaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
strokeWidth = context.resources.getDimension(R.dimen.field_line_width)
color = ResourcesCompat.getColor(context.resources, R.color.field_line, context.theme)
style = Paint.Style.STROKE
}

private val rect = Rect()
private val padding = context.resources.getDimensionPixelSize(R.dimen.field_line_padding)
private val halfInnerGoalWidth = context.resources.getDimensionPixelSize(R.dimen.field_inner_goal_width)
private val halfInnerGoalHeight = context.resources.getDimensionPixelSize(R.dimen.field_inner_goal_height)
private val halfGoalWidth = context.resources.getDimensionPixelSize(R.dimen.field_goal_width)
private val halfGoalHeight = context.resources.getDimensionPixelSize(R.dimen.field_goal_height)
private val cornerSize = context.resources.getDimensionPixelSize(R.dimen.field_corner_size)
private val centerCircleSize = context.resources.getDimensionPixelSize(R.dimen.field_center_circle_size)
private val centerInnerCircleSize = context.resources.getDimensionPixelSize(R.dimen.field_center_inner_circle_size)

override fun draw(canvas: Canvas) {
val width = bounds.width()
val height = bounds.height()
canvas.apply {
// draw field lines
rect.set(padding, padding, width - padding, height - padding)
drawRect(rect, linePaint)
// draw goals
rect.set(
width / 2 - halfInnerGoalWidth,
padding,
width / 2 + halfInnerGoalWidth,
padding + halfInnerGoalHeight
)
drawRect(rect, linePaint)
rect.set(
width / 2 - halfGoalWidth,
padding,
width / 2 + halfGoalWidth,
padding + halfGoalHeight
)
drawRect(rect, linePaint)
// draw corners
drawArc(
padding.toFloat() - cornerSize,
padding.toFloat() - cornerSize,
(padding + cornerSize).toFloat(),
(padding + cornerSize).toFloat(),
0f,
90f,
false,
linePaint
)
drawArc(
(width - padding - cornerSize).toFloat(),
padding.toFloat() - cornerSize,
(width - padding + cornerSize).toFloat(),
(padding + cornerSize).toFloat(),
90f,
90f,
false,
linePaint
)
// draw center circle
drawArc(
(width / 2 - centerCircleSize).toFloat(),
(height - padding - centerCircleSize).toFloat(),
(width / 2 + centerCircleSize).toFloat(),
(height - padding + centerCircleSize).toFloat(),
180f,
180f,
false,
linePaint
)
linePaint.style = Paint.Style.FILL
drawArc(
(width / 2 - centerInnerCircleSize).toFloat(),
(height - padding - centerInnerCircleSize).toFloat(),
(width / 2 + centerInnerCircleSize).toFloat(),
(height - padding + centerInnerCircleSize).toFloat(),
180f,
180f,
false,
linePaint
)
}
}

override fun setAlpha(alpha: Int) {
// no-op
}

override fun setColorFilter(colorFilter: ColorFilter?) {
// no-op
}

@Deprecated("Deprecated in Java",
ReplaceWith("PixelFormat.OPAQUE", "android.graphics.PixelFormat")
)
override fun getOpacity(): Int {
return PixelFormat.OPAQUE
}
}
83 changes: 68 additions & 15 deletions app/src/main/res/layout/activity_team_details.xml
Original file line number Diff line number Diff line change
Expand Up @@ -121,27 +121,80 @@
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="8dp">
android:padding="8dp"
android:clipToPadding="false">

<TextView
android:id="@+id/venue_label"
style="@style/TeamDetails.Label"
android:layout_width="wrap_content"
<com.google.android.material.card.MaterialCardView
android:id="@+id/venue_card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/venue_label"
app:cardBackgroundColor="@color/white_12"
app:cardCornerRadius="6dp"
app:cardElevation="4dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
app:layout_constraintTop_toTopOf="parent">

<TextView
android:id="@+id/venue"
style="@style/TeamDetails.Value"
android:layout_width="0dp"
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="6dp">

<TextView
android:id="@+id/venue_label"
style="@style/TeamDetails.Label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/venue_label"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>

<TextView
android:id="@+id/venue"
style="@style/TeamDetails.Value"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@id/venue_label"
tools:text="Very very long and not in one line description of a football team" />

</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>

<com.google.android.material.card.MaterialCardView
android:id="@+id/lineup_card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@id/venue_label"
tools:text="Very very long and not in one line description of a football team" />
android:layout_marginTop="8dp"
app:cardBackgroundColor="@color/white_12"
app:cardCornerRadius="6dp"
app:cardElevation="4dp"
app:layout_constraintTop_toBottomOf="@id/venue_card">

<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">

<TextView
android:id="@+id/lineup_label"
style="@style/TeamDetails.Label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/lineup_label"
android:layout_margin="6dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<View
android:id="@+id/lineup_card_content"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="@id/lineup_label"
app:layout_constraintDimensionRatio="1"/>

</androidx.constraintlayout.widget.ConstraintLayout>

</com.google.android.material.card.MaterialCardView>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
3 changes: 3 additions & 0 deletions app/src/main/res/values/colors.xml
Original file line number Diff line number Diff line change
Expand Up @@ -9,4 +9,7 @@
<color name="black">#000000</color>
<color name="white">#ffffff</color>
<color name="white_12">#fafafa</color>

<!-- HalfFieldDrawable -->
<color name="field_line">#808080</color>
</resources>
13 changes: 13 additions & 0 deletions app/src/main/res/values/dimens.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- HalfFieldDrawable -->
<dimen name="field_line_width">2dp</dimen>
<dimen name="field_line_padding">8dp</dimen>
<dimen name="field_inner_goal_width">32dp</dimen>
<dimen name="field_inner_goal_height">24dp</dimen>
<dimen name="field_goal_width">104dp</dimen>
<dimen name="field_goal_height">64dp</dimen>
<dimen name="field_corner_size">12dp</dimen>
<dimen name="field_center_circle_size">48dp</dimen>
<dimen name="field_center_inner_circle_size">4dp</dimen>
</resources>
3 changes: 2 additions & 1 deletion app/src/main/res/values/strings.xml
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,6 @@
<string name="default_error">Error loading football teams!</string>
<string name="badge_content_description">Team badge</string>
<string name="national_label">National</string>
<string name="venue_label">Venue</string>
<string name="venue_label">Stadium</string>
<string name="lineup_label">Starting XI</string>
</resources>

0 comments on commit 4b3b4d9

Please sign in to comment.