I have a food app in Arabic, This is how my app looks like:
As you see, the horizontal RecyclerViews
are RTL as expected.
In this app, I have a Category
and a Recipe
, the categories are populated vertically in the parent RecyclerView
and the recipes are populated in the child RecyclerView
in each category horizontally.
This is the code of the main layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context=".ui.main.MainActivity"
tools:showIn="@layout/app_bar_main">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/rvCategories"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="@+id/adView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/frameRecentPlaceholder" />
<com.google.android.gms.ads.AdView
android:id="@+id/adView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
app:adSize="BANNER"
app:adUnitId="@string/ADMOB_BANNER_ID"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
And for the Category
item:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="@+id/tvCategoryName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="8dp"
android:textColor="@color/Black"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="@+id/btnViewAll"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="@+id/btnViewAll"
tools:text="@string/milk" />
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/rvRecipes"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/btnViewAll" />
<Button
android:id="@+id/btnViewAll"
android:layout_width="wrap_content"
android:textStyle="bold"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:text="@string/view_all"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
And for the Recipe
Item.
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="300dp"
android:layout_height="220dp"
android:layout_margin="8dp"
android:orientation="vertical"
app:cardCornerRadius="16dp"
app:cardElevation="1dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.65" />
<ImageView
android:id="@+id/ivRecipeImage"
android:layout_width="0dp"
android:layout_height="0dp"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
app:layout_constraintBottom_toTopOf="@+id/guideline2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
tools:ignore="ContentDescription" />
<TextView
android:id="@+id/tvRecipeTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:textColor="@color/Black"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="@+id/tvRecipeCategories"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/ibOptions"
app:layout_constraintTop_toTopOf="@+id/guideline2"
app:layout_constraintVertical_chainStyle="packed"
tools:text="البطاطس بالجبن الرومي" />
<com.andalus.abomed7at55.mn_edek_a7la.custom.FontAwesomeTextView
android:id="@+id/tvTagsIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:text="@string/tags_icon"
android:textSize="12sp"
android:textStyle="normal"
app:layout_constraintBottom_toBottomOf="@+id/tvRecipeCategories"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="@+id/tvRecipeCategories" />
<TextView
android:id="@+id/tvRecipeCategories"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginEnd="2dp"
android:layout_marginRight="2dp"
android:layout_marginBottom="8dp"
android:gravity="start"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/tvTagsIcon"
app:layout_constraintStart_toEndOf="@+id/ibOptions"
app:layout_constraintTop_toBottomOf="@+id/tvRecipeTitle"
tools:text="حلويات" />
<ImageButton
android:id="@+id/ibOptions"
android:layout_width="wrap_content"
android:layout_height="24dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:adjustViewBounds="true"
android:background="@android:color/transparent"
android:scaleType="fitXY"
android:src="@drawable/ic_more_vert_black_24dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/guideline2"
tools:ignore="ContentDescription" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
So far so good. The problem starts when I try to add a new fragment on top of my parent (categories) RecyclerView
and make it scrollable.
In brief, I'm trying to reach this design:
The top section is not an item of the recycler view, it comes from a fragment, this is the code of this new design:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context=".ui.main.MainActivity"
tools:showIn="@layout/app_bar_main">
<FrameLayout
android:id="@+id/frameRecentPlaceholder"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/rvCategories"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="@+id/adView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/frameRecentPlaceholder" />
<com.google.android.gms.ads.AdView
android:id="@+id/adView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
app:adSize="BANNER"
app:adUnitId="@string/ADMOB_BANNER_ID"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
So far so good, the top section doesn't scroll with the content and that is the expected behavior, but when I wrap the layout with a NestedScrollView
the app starts to behave strangely, the horizontal RecyclerViwes start to scroll vertically and the app looks ugly, the code:
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_marginTop="?actionBarSize"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context=".ui.main.MainActivity"
tools:showIn="@layout/app_bar_main">
<FrameLayout
android:id="@+id/frameRecentPlaceholder"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/rvCategories"
android:layout_width="0dp"
android:layout_height="match_parent"
app:layout_constraintBottom_toTopOf="@+id/adView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/frameRecentPlaceholder" />
<com.google.android.gms.ads.AdView
android:id="@+id/adView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
app:adSize="BANNER"
app:adUnitId="@string/ADMOB_BANNER_ID"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
The result:
I think this is something related to the RTL
or reverseLayout
.
This is the code of my adapter:
class CategoriesAdapter(
private val onCategoryClicked: (category: String) -> Unit = {},
var data: List<Category> = listOf(),
private val onRecipeClicked: (id: Int) -> Unit = {},
private val onOptionsClicked: (id: Int, optionsButton: View) -> Unit
) : RecyclerView.Adapter<CategoriesAdapter.CategoryHolder>(), Serializable {
private lateinit var context: Context
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): CategoryHolder {
context = parent.context
val view = LayoutInflater.from(context).inflate(R.layout.item_category, parent, false)
return CategoryHolder(view)
}
override fun onBindViewHolder(holder: CategoryHolder, position: Int) {
holder.tvCategoryName.text = data[position].title
data[position].recipesAdapter.onClick = {
onRecipeClicked.invoke(it)
}
data[position].recipesAdapter.onOptionsClicked = { id, optionsButton ->
onOptionsClicked.invoke(id, optionsButton)
}
holder.rvRecipes.adapter = data[position].recipesAdapter
}
override fun getItemCount(): Int {
return data.size
}
inner class CategoryHolder(view: View) : RecyclerView.ViewHolder(view) {
val tvCategoryName: TextView = itemView.tvCategoryName
val rvRecipes: RecyclerView = itemView.rvRecipes
//The most important part
init {
rvRecipes.layoutManager = LinearLayoutManager(context, RecyclerView.HORIZONTAL, true)
rvRecipes.onFlingListener = null
val snapHelper = LinearSnapHelper()
snapHelper.attachToRecyclerView(rvRecipes)
itemView.btnViewAll.setOnClickListener {
onCategoryClicked.invoke(data[adapterPosition].tag)
}
}
}
}
I hope someone can help me with this.
Instead of using NestedScrollView
, a simpler solution is to use different view types
instead.