add badges to bottom navigation

This commit is contained in:
Phillip Thelen 2019-06-20 10:01:43 +02:00
parent 6971793fbe
commit d9f9d4b7da
4 changed files with 80 additions and 37 deletions

View file

@ -1,41 +1,63 @@
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:parentTag="android.widget.LinearLayout"
tools:parentTag="android.widget.RelativeLayout"
tools:background="@color/brand_100">
<ImageView
android:id="@+id/icon_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:src="@drawable/icon_habits_selected"
android:layout_gravity="center"/>
<ImageView
android:id="@+id/icon_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:src="@drawable/icon_habits_selected"
android:layout_gravity="center"
android:layout_alignParentTop="true"
android:layout_marginTop="6dp"
android:layout_centerHorizontal="true"/>
<TextView
android:id="@+id/title_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/brand_500"
tools:text="@string/habits"
android:layout_gravity="center"
android:textSize="12sp"
android:letterSpacing="0.05"
android:fontFamily="@string/font_family_regular"
android:paddingStart="@dimen/spacing_small"
android:paddingEnd="@dimen/spacing_small"
android:layout_centerHorizontal="true"
android:layout_below="@id/icon_view"
/>
<TextView
android:id="@+id/selected_title_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/white"
tools:text="@string/habits"
android:layout_gravity="center"
android:textSize="12sp"
android:letterSpacing="0.05"
android:fontFamily="@string/font_family_medium"
android:paddingStart="@dimen/spacing_small"
android:paddingEnd="@dimen/spacing_small"
android:layout_centerHorizontal="true"
android:layout_below="@id/icon_view"
/>
<TextView
android:id="@+id/title_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/brand_500"
tools:text="@string/habits"
android:layout_gravity="center"
android:textSize="12sp"
android:letterSpacing="0.05"
android:fontFamily="@string/font_family_regular"
android:paddingStart="@dimen/spacing_small"
android:paddingEnd="@dimen/spacing_small"
/>
<TextView
android:id="@+id/selected_title_view"
android:id="@+id/badge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignEnd="@id/icon_view"
android:minWidth="20dp"
android:gravity="center"
tools:text="10"
android:textColor="@color/white"
tools:text="@string/habits"
android:layout_gravity="center"
android:textSize="12sp"
android:letterSpacing="0.05"
android:fontFamily="@string/font_family_medium"
android:paddingStart="@dimen/spacing_small"
android:paddingEnd="@dimen/spacing_small"
/>
style="@style/Overline"
android:background="@drawable/badge_circle"
android:padding="3dp"
android:layout_marginEnd="-10dp"
android:visibility="invisible"
tools:visibility="visible"/>
</merge>

View file

@ -233,13 +233,13 @@ class TasksFragment : BaseMainFragment() {
}
else -> ""
}
/*val tab = bottomNavigation?.id(id)
val tab = bottomNavigation?.tabWithId(id)
if (step.shouldDisplay()) {
tab?.setBadgeCount(1)
tab?.badgeCount = 1
activeTutorialFragments.add(taskType)
} else {
tab?.removeBadge()
}*/
tab?.badgeCount = 0
}
}
if (activeTutorialFragments.size == 1) {
val fragment = viewFragmentsDictionary?.get(indexForTaskType(activeTutorialFragments[0]))

View file

@ -5,7 +5,7 @@ import android.graphics.PorterDuff
import android.util.AttributeSet
import android.view.View
import android.widget.ImageView
import android.widget.LinearLayout
import android.widget.RelativeLayout
import android.widget.TextView
import androidx.core.content.ContextCompat
import com.habitrpg.android.habitica.R
@ -14,11 +14,12 @@ import com.habitrpg.android.habitica.ui.helpers.bindView
class BottomNavigationItem @JvmOverloads constructor(
context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : LinearLayout(context, attrs, defStyleAttr) {
) : RelativeLayout(context, attrs, defStyleAttr) {
private val iconView: ImageView by bindView(R.id.icon_view)
private val selectedTitleView: TextView by bindView(R.id.selected_title_view)
private val titleView: TextView by bindView(R.id.title_view)
private val badge: TextView by bindView(R.id.badge)
var isActive = false
set(value) {
@ -34,6 +35,17 @@ class BottomNavigationItem @JvmOverloads constructor(
}
}
var badgeCount: Int = 0
set(value) {
field = value
if (value == 0) {
badge.visibility = View.INVISIBLE
} else {
badge.visibility = View.VISIBLE
badge.text = value.toString()
}
}
init {
inflate(R.layout.bottom_navigation_item, true)
@ -46,7 +58,6 @@ class BottomNavigationItem @JvmOverloads constructor(
titleView.text = attributes.getString(R.styleable.BottomNavigationItem_title)
selectedTitleView.text = attributes.getString(R.styleable.BottomNavigationItem_title)
}
orientation = VERTICAL
}
}

View file

@ -209,6 +209,16 @@ class HabiticaBottomNavigationView @JvmOverloads constructor(
}
}
fun tabWithId(id: Int): BottomNavigationItem? {
return when(id) {
R.id.tab_habits -> habitsTab
R.id.tab_dailies -> dailiesTab
R.id.tab_todos -> rewardsTab
R.id.tab_rewards -> todosTab
else -> null
}
}
private fun updateItemSelection() {
habitsTab.isActive = activeTaskType == Task.TYPE_HABIT
dailiesTab.isActive = activeTaskType == Task.TYPE_DAILY