Skip to content

Instantly share code, notes, and snippets.

@eneim

eneim/YourFragment.kt

Forked from rylexr/YourFragment.kt
Created February 27, 2019 10:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save eneim/0cce0e350c4fa9c4cd190c4cb7ca4810 to your computer and use it in GitHub Desktop.
Save eneim/0cce0e350c4fa9c4cd190c4cb7ca4810 to your computer and use it in GitHub Desktop.
Download ZIP
Android navigation bar style with animation
Raw
your_fragment.xml
<FrameLayout
android:id="@+id/root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/bottom_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:padding="10dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/home_action"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/round_rectangle"
android:backgroundTint="@color/home_color"
android:padding="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/likes_action"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.appcompat.widget.AppCompatImageView
android:id="@+id/home_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:src="@drawable/ic_home"
android:tint="#5b3db7"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/home_icon_text"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.appcompat.widget.AppCompatTextView
android:id="@+id/home_icon_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Home"
android:textColor="#5b3db7"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/home_icon"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/likes_action"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/round_rectangle"
android:backgroundTint="@android:color/transparent"
android:padding="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/search_action"
app:layout_constraintStart_toEndOf="@+id/home_action"
app:layout_constraintTop_toTopOf="parent">
<androidx.appcompat.widget.AppCompatImageView
android:id="@+id/likes_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:src="@drawable/ic_likes"
android:tint="#c6419e"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/likes_icon_text"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.appcompat.widget.AppCompatTextView
android:id="@+id/likes_icon_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Likes"
android:textColor="#c6419e"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/likes_icon"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/search_action"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/round_rectangle"
android:backgroundTint="@android:color/transparent"
android:padding="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/profile_action"
app:layout_constraintStart_toEndOf="@+id/likes_action"
app:layout_constraintTop_toTopOf="parent">
<androidx.appcompat.widget.AppCompatImageView
android:id="@+id/search_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:src="@drawable/ic_search"
android:tint="#e3a916"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/search_icon_text"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.appcompat.widget.AppCompatTextView
android:id="@+id/search_icon_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Search"
android:textColor="#e3a916"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/search_icon"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/profile_action"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/round_rectangle"
android:backgroundTint="@android:color/transparent"
android:padding="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/search_action"
app:layout_constraintTop_toTopOf="parent">
<androidx.appcompat.widget.AppCompatImageView
android:id="@+id/profile_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:src="@drawable/ic_profile"
android:tint="#2c93ab"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/profile_icon_text"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.appcompat.widget.AppCompatTextView
android:id="@+id/profile_icon_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Profile"
android:textColor="#2c93ab"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/profile_icon"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</FrameLayout>
Raw
YourFragment.kt
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View {
binding = DataBindingUtil.inflate(inflater, R.layout.your_fragment, container, false)
binding.homeAction.setOnClickListener { select(R.id.home_action) }
binding.likesAction.setOnClickListener { select(R.id.likes_action) }
binding.searchAction.setOnClickListener { select(R.id.search_action) }
binding.profileAction.setOnClickListener { select(R.id.profile_action) }
return binding.root
}
fun select(id: Int) {
TransitionManager.beginDelayedTransition(binding.bottomBar)
val cs = ConstraintSet()
cs.clone(binding.homeAction)
if (id == R.id.home_action) {
DrawableCompat.setTint(binding.homeAction.background, ContextCompat.getColor(context!!, R.color.home_color))
cs.setVisibility(binding.homeIconText.id, ConstraintSet.VISIBLE)
} else {
DrawableCompat.setTint(binding.homeAction.background, ContextCompat.getColor(context!!, android.R.color.transparent))
cs.setVisibility(binding.homeIconText.id, ConstraintSet.GONE)
}
cs.applyTo(binding.homeAction)
cs.clone(binding.likesAction)
if (id == R.id.likes_action) {
DrawableCompat.setTint(binding.likesAction.background, ContextCompat.getColor(context!!, R.color.likes_color))
cs.setVisibility(binding.likesIconText.id, ConstraintSet.VISIBLE)
} else {
DrawableCompat.setTint(binding.likesAction.background, ContextCompat.getColor(context!!, android.R.color.transparent))
cs.setVisibility(binding.likesIconText.id, ConstraintSet.GONE)
}
cs.applyTo(binding.likesAction)
cs.clone(binding.searchAction)
if (id == R.id.search_action) {
DrawableCompat.setTint(binding.searchAction.background, ContextCompat.getColor(context!!, R.color.search_color))
cs.setVisibility(binding.searchIconText.id, ConstraintSet.VISIBLE)
} else {
DrawableCompat.setTint(binding.searchAction.background, ContextCompat.getColor(context!!, android.R.color.transparent))
cs.setVisibility(binding.searchIconText.id, ConstraintSet.GONE)
}
cs.applyTo(binding.searchAction)
cs.clone(binding.profileAction)
if (id == R.id.profile_action) {
DrawableCompat.setTint(binding.profileAction.background, ContextCompat.getColor(context!!, R.color.profile_color))
cs.setVisibility(binding.profileIconText.id, ConstraintSet.VISIBLE)
} else {
DrawableCompat.setTint(binding.profileAction.background, ContextCompat.getColor(context!!, android.R.color.transparent))
cs.setVisibility(binding.profileIconText.id, ConstraintSet.GONE)
}
cs.applyTo(binding.profileAction)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment