Develop Reference

Trying to Achieve Exposed Drop-Down Menu in Android

I am Trying to Achieve the Exposed Drop-Down Menu in Android I have tried this one but can't identify where I went wrong.
DropDown_item.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.textview.MaterialTextView
android:id="#+id/textViewFeelings"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="15dp"
android:text="TextView"
android:textColor="#color/black"
android:textSize="18sp"
android:textStyle="bold" />
</androidx.appcompat.widget.LinearLayoutCompat>
BottomSheetDialogConnectWifiFragment.kt
class BottomSheetDialogConnectWifiFragment : BottomSheetDialogFragment() {
private lateinit var _binding: FragmentBottomSheetDialogConnectWifiBinding
private val items = listOf("Material", "Design", "Components", "Android")
private lateinit var ActivityContext: Context
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
}
override fun onAttach(context: Context) {
ActivityContext = context
super.onAttach(context)
}
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?
): View {
_binding = FragmentBottomSheetDialogConnectWifiBinding.inflate(inflater, container, false)
return _binding.root
//
// val arrayAdapter = ArrayAdapter(_binding.root.context, R.layout.dropdown_item, items)
// _binding.autoCompleteTextFieldSsidType.setAdapter(arrayAdapter)
_binding.autoCompleteTextFieldSsidType.apply {
setAdapter(
ArrayAdapter(
ActivityContext,
R.layout.dropdown_item,
items
)
)
}
}
companion object {
const val TAG = "CustomBottomSheetDialogFragment"
}
}
fragment_bottom_sheet_dialog_connect_wifi
<?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="match_parent"
android:layout_height="match_parent"
android:padding="10dp"
tools:context=".Fragments.BottomSheetDialogConnectWifiFragment">
<ScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp">
<androidx.cardview.widget.CardView
android:layout_width="100dp"
android:layout_height="2dp"
android:layout_centerHorizontal="true"
android:elevation="10dp"
android:foregroundGravity="center_vertical"
app:cardBackgroundColor="#color/black"
app:cardCornerRadius="100dp">
<!--YOUR CONTENT-->
</androidx.cardview.widget.CardView>
<com.google.android.material.textview.MaterialTextView
android:id="#+id/idTVCourseTracks"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="Add Network"
android:textAlignment="center"
android:textColor="#color/black"
android:textSize="15sp" />
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/tilSsid"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/idTVCourseTracks"
android:keyboardNavigationCluster="true">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Enter The SSID" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/textFieldSsidType"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/tilSsid"
android:layout_marginTop="12dp">
<AutoCompleteTextView
android:id="#+id/autoCompleteTextFieldSsidType"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="Enter The SSID"
android:inputType="none" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/textFieldPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/textFieldSsidType"
android:layout_marginTop="12dp">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.button.MaterialButton
android:id="#+id/idBtnDismiss"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/textFieldPassword"
android:layout_marginTop="12dp"
android:text="Connect"
android:textAllCaps="false"
android:theme="#style/ShapeAppearanceOverlay.Material3.Button" />
</RelativeLayout>
</ScrollView>
</com.google.android.material.card.MaterialCardView>
I Created An bottomSheet in Android/kotlin and trying to solve this cant understood where i missing some thing to
i have try with .Apply{}Method And also with the normally but both of them not worked for me

Problem in some views in items row of recyclerview "not showing like design preview"

I trying to practice some android lessons that contains recyclerview topic, currently I succeed to implement all api and response but there's one problem with my item_article_preview.xml.
The title and description of news doesn't shows in emulator like it's in design preview
After running the app
here's my xml row
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:padding="8dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="2"
android:orientation="horizontal">
<ImageView
android:id="#+id/ivArticleImage"
android:layout_width="0dp"
android:layout_height="90dp"
android:layout_weight="0.8"
android:scaleType="centerCrop" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1.2"
android:orientation="vertical">
<TextView
android:id="#+id/tvTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:ellipsize="end"
android:maxLines="2"
android:textColor="#color/black"
android:textSize="15sp"
android:textStyle="bold"
tools:text="TITLE" />
<TextView
android:id="#+id/tvDescription"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:ellipsize="end"
android:maxLines="3"
android:textColor="#color/black"
android:text="DESCRIPTION" />
</LinearLayout>
</LinearLayout>
<TextView
android:id="#+id/tvSource"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="SOURCE"
android:textColor="#android:color/black" />
<TextView
android:id="#+id/tvPublishedAt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="PUBLISHED AT"
android:textColor="#android:color/black"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvSource" />
</LinearLayout>
I tried other row design but it didn't show the title and descreption at all
<?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:padding="8dp">
<ImageView
android:id="#+id/ivArticleImage"
android:layout_width="160dp"
android:layout_height="90dp"
android:scaleType="centerCrop"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tvSource"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="SOURCE"
android:textColor="#android:color/black"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/ivArticleImage" />
<TextView
android:id="#+id/tvTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:ellipsize="end"
android:maxLines="3"
android:text="TITLE"
android:textColor="#android:color/black"
android:textSize="15sp"
android:textStyle="bold"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toRightOf="#+id/ivArticleImage"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tvDescription"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:ellipsize="end"
android:maxLines="5"
android:text="DESCRIPTION"
android:textColor="#android:color/black"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/ivArticleImage"
app:layout_constraintTop_toBottomOf="#+id/tvTitle" />
<TextView
android:id="#+id/tvPublishedAt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="PUBLISHED AT"
android:textColor="#android:color/black"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvSource" />
</androidx.constraintlayout.widget.ConstraintLayout>
RecyclerView XML
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rvBreakingNews"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:paddingBottom="50dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ProgressBar
android:id="#+id/paginationProgressBar"
style="?attr/progressBarStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="invisible"
android:background="#android:color/transparent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
my adapter class
private const val TAG = "NewsAdapter"
class NewsAdapter : RecyclerView.Adapter<NewsAdapter.ArticleViewHolder>() {
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ArticleViewHolder {
val binding = ItemRowBinding.inflate(LayoutInflater.from(parent.context))
return ArticleViewHolder(binding)
}
override fun onBindViewHolder(holder: ArticleViewHolder, position: Int) {
val article = differ.currentList[position]
// holder.bind(article)
holder.binding.apply {
Glide.with(this.root).load(article.urlToImage).into(ivArticleImage)
tvSource.text = article.source.name
tvTitle.text = article.title
tvDescription.text = article.description
tvPublishedAt.text = article.publishedAt
this#NewsAdapter.setOnItemClickListener {
onItemClickListener?.let {
it(article)
}
}
}
}
override fun getItemCount(): Int {
return differ.currentList.size
}
inner class ArticleViewHolder( val binding: ItemRowBinding) :
RecyclerView.ViewHolder(binding.root) {
private var onItemClickListener: ((Article) -> Unit)? = null
private fun setOnItemClickListener(listener: (Article) -> Unit) {
onItemClickListener = listener
}
private val diffCallBack = object : DiffUtil.ItemCallback<Article>() {
override fun areItemsTheSame(oldItem: Article, newItem: Article): Boolean {
return oldItem.id == newItem.id
}
override fun areContentsTheSame(oldItem: Article, newItem: Article): Boolean {
return oldItem == newItem
}
}
val differ = AsyncListDiffer(this, diffCallBack)
}

ACTIVITY:
val list : MutableList<Item> = mutableListOf()
list.add(Item("TITLE", "DESCRITION", "ESPN", "2022-08-02T14:32:47Z"))
val rv = findViewById<RecyclerView>(R.id.rvBreakingNews)
rv.layoutManager = LinearLayoutManager(applicationContext)
rv.adapter = RvAdapter(list)
ADAPTER
class RvAdapter(private var list : List<Item>) : RecyclerView.Adapter<RvAdapter.ViewHolder>() {
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
val view = LayoutInflater.from(parent.context).inflate(R.layout.item, parent, false)
return ViewHolder(view)
}
override fun onBindViewHolder(holder: ViewHolder, position: Int) {
holder.title.setText(list[position].getTitle())
holder.desc.setText(list[position].getDescription())
holder.source.setText(list[position].getSource())
holder.published.setText(list[position].getPublished())
}
// return the number of the items in the list
override fun getItemCount(): Int {
return list.size
}
// Holds the views for adding it to image and text
class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
val title : TextView = itemView.findViewById(R.id.tvTitle)
val desc : TextView = itemView.findViewById(R.id.tvDescription)
val source : TextView = itemView.findViewById(R.id.tvSource)
val published : TextView = itemView.findViewById(R.id.tvPublishedAt)
val imageView : ImageView = itemView.findViewById(R.id.ivArticleImage)
}
}
ACTIVITY XML (SAME AS YOURS):
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:paddingBottom="50dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ProgressBar
android:id="#+id/paginationProgressBar"
style="?attr/progressBarStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="invisible"
android:background="#android:color/transparent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
ITEM XML(SAME AS YOURS):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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"
android:padding="8dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="2"
android:orientation="horizontal">
<ImageView
android:id="#+id/ivArticleImage"
android:layout_width="0dp"
android:layout_height="90dp"
android:layout_weight="0.8"
android:background="#android:drawable/sym_def_app_icon"
android:scaleType="centerCrop" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1.2"
android:orientation="vertical">
<TextView
android:id="#+id/tvTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:ellipsize="end"
android:maxLines="2"
android:textColor="#color/black"
android:textSize="15sp"
android:textStyle="bold"
tools:text="TITLE" />
<TextView
android:id="#+id/tvDescription"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:ellipsize="end"
android:maxLines="3"
android:textColor="#color/black"
android:text="DESCRIPTION" />
</LinearLayout>
</LinearLayout>
<TextView
android:id="#+id/tvSource"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="SOURCE"
android:textColor="#android:color/black" />
<TextView
android:id="#+id/tvPublishedAt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="PUBLISHED AT"
android:textColor="#android:color/black"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvSource" />
</LinearLayout>

I found the problem causes this spilled of screen, here in this line
val binding = ItemRowBinding.inflate(LayoutInflater.from(parent.context))
you just inflated the inflater of a parent but there are two parameters is missing,
the viewGroup which it "parent and attachToRoot = false
edit your onCreateViewHolder like this
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ArticleViewHolder {
val inflater = LayoutInflater.from(parent.context)
val binding = ItemRowBinding.inflate(inflater,parent,false)
return ArticleViewHolder(binding)
}

Multiple RecyclerView(two) has lag - android

I have a list that load in RecyclerView with CardView and in CardView I have a RecyclerView that have (max) 10 items, I load it now, but it has lag:
My First LessonContentListAdapter.kt:
class LessonContentListAdapter : RecyclerView.Adapter<RecyclerView.ViewHolder>() {
private var onItemClickListener: ((LessonsContentList) -> Unit)? = null
fun setOnItemClickListener(listener: (LessonsContentList) -> Unit) {
onItemClickListener = listener
}
private val callback = object : DiffUtil.ItemCallback<LessonsContentList>() {
override fun areItemsTheSame(
oldItem: LessonsContentList,
newItem: LessonsContentList
): Boolean {
return oldItem.id == newItem.id
}
override fun areContentsTheSame(
oldItem: LessonsContentList,
newItem: LessonsContentList
): Boolean {
return oldItem == newItem
}
}
val differ = AsyncListDiffer(this, callback)
override fun getItemCount(): Int {
return differ.currentList.size
}
inner class LessonContentListItems(private val lessonContentListItemsBinding: LessonContentListItemsBinding) :
RecyclerView.ViewHolder(lessonContentListItemsBinding.root) {
fun bind(lessons: LessonsContentList) {
lessonContentListItemsBinding.txtContentTitleO.text = lessons.titleOriginal
lessonContentListItemsBinding.txtContentTitleT.text = lessons.titleTranslate
lessonContentListItemsBinding.txtTime.text = lessons.timeLaps
}
}
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
val view =
LessonContentListItemsBinding.inflate(
LayoutInflater.from(parent.context),
parent,
false
)
return LessonContentListItems(view)
}
override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
(holder as LessonContentListItems).bind(differ.currentList[position])
val childLessonContentListVectorsAdapter =
ChildLessonContentListVectorsAdapter(
differ.currentList[position].imgLevels
)
holder.itemView.recyclerLessonsContentListVectors.layoutManager = LinearLayoutManager(
holder.itemView.recyclerLessonsContentListVectors.context,
LinearLayoutManager.HORIZONTAL,
false
)
holder.itemView.recyclerLessonsContentListVectors.setHasFixedSize(true)
holder.itemView.recyclerLessonsContentListVectors.adapter =
childLessonContentListVectorsAdapter
}
}
Second ChildLessonContentListVectorsAdapter.kt:
class ChildLessonContentListVectorsAdapter(imgLevels: List<ImgLevelsDetalis>) :
RecyclerView.Adapter<ChildLessonContentListVectorsAdapter.MyViewHolder>() {
var childModelArrayList: List<ImgLevelsDetalis> = imgLevels
class MyViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
var heroImage: ImageView
init {
heroImage = itemView.findViewById(R.id.imgHaveStudied)
}
}
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyViewHolder {
val view: View = LayoutInflater.from(parent.context)
.inflate(R.layout.child_lessons_content_list, parent, false)
return MyViewHolder(view)
}
override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
val currentItem: ImgLevelsDetalis = childModelArrayList[position]
holder.heroImage.setImageResource(currentItem.img)
}
override fun getItemCount(): Int {
return childModelArrayList.size
}
}
First fragment_lesson_content_list.xml:
<?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"
android:background="#color/white"
android:clickable="true"
android:fitsSystemWindows="true"
android:focusable="true"
tools:context=".presentation.ui.lessoncontentlist.LessonContentListFragment">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbarLessonContentList"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/purple_500"
android:contentInsetStart="0dp"
android:contentInsetLeft="0dp"
android:minHeight="?attr/actionBarSize"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center">
<ImageButton
android:id="#+id/imgBackContent"
android:layout_width="50dp"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:background="#null"
android:paddingLeft="10dp"
android:src="#drawable/ic_baseline_arrow_back_24" />
<TextView
android:id="#+id/txtTitleContent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:textColor="#color/white"
android:textStyle="bold" />
</RelativeLayout>
</androidx.appcompat.widget.Toolbar>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerLessonsContentList"
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/toolbarLessonContentList" />
</androidx.constraintlayout.widget.ConstraintLayout>
second lesson_content_list_items.xml:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
card_view:cardBackgroundColor="#color/purple_700"
card_view:cardCornerRadius="4dp"
card_view:layout_constraintLeft_toLeftOf="parent"
card_view:layout_constraintRight_toRightOf="parent"
card_view:layout_constraintTop_toTopOf="parent">
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:weightSum="10">
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="5"
android:orientation="horizontal"
android:weightSum="10">
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="8"
android:orientation="vertical">
<TextView
android:id="#+id/txtContentTitleO"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Grammer"
android:textColor="#color/white"
android:textStyle="bold" />
<TextView
android:id="#+id/txtContentTitleT"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="مکالمه"
android:textColor="#color/white" />
</androidx.appcompat.widget.LinearLayoutCompat>
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="2"
android:gravity="right"
android:orientation="horizontal">
<TextView
android:id="#+id/txtTime"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:text="2Min"
android:textColor="#color/white"
android:textStyle="bold" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:adjustViewBounds="true"
android:scaleType="center"
android:src="#drawable/ic_baseline_timelapse_24" />
</androidx.appcompat.widget.LinearLayoutCompat>
</androidx.appcompat.widget.LinearLayoutCompat>
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginBottom="5dp"
android:gravity="right"
android:orientation="horizontal">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerLessonsContentListVectors"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:orientation="horizontal" />
</androidx.appcompat.widget.LinearLayoutCompat>
</androidx.appcompat.widget.LinearLayoutCompat>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
Third child_lessons_content_list.xml:
<?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"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right">
<ImageView
android:id="#+id/imgHaveStudied"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Firstly, you can use setInitialItemPrefetchCount() for a prefetching feature for nested RecyclerView. for more information please check this article
I think, the main reason, loading images from the server blocks the main thread. You can do this asynchronously. please check this article too.

Adjust layout to take a percentage of the screen

How can I make a custom view to take only 33% of the screen and make it show proportionately on every device?
This should be handled either on the xml files below, or in the custom view kotlin class, since it's part of a library and I don't have access to the view that will host my custom class.
buff_view.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:id="#+id/mainLinearLayout"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<include layout="#layout/buff_sender"/>
<include layout="#layout/buff_question"/>
<LinearLayout
android:id="#+id/answersContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"/>
</LinearLayout>
buff_sender.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:orientation="horizontal">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/light_bg"
android:orientation="horizontal"
tools:ignore="RtlHardcoded">
<ImageView
android:id="#+id/sender_image"
android:layout_width="27dp"
android:layout_height="27dp"
android:layout_gravity="center_vertical"
android:padding="4dp" />
<TextView
android:id="#+id/sender_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:padding="4dp"
tools:text="Praveen"
android:textColor="#color/test_color_dark"
android:textStyle="bold" />
</LinearLayout>
<androidx.appcompat.widget.AppCompatImageButton
android:id="#+id/buff_close"
android:layout_width="26dp"
android:layout_height="26dp"
android:layout_alignParentEnd="true"
android:background="#drawable/ic_btn_close" />
</RelativeLayout>
buff_question.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/dark_bg"
android:orientation="horizontal">
<TextView
android:id="#+id/question_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|start"
android:padding="18dp"
android:textColor="#color/test_color_light"
android:textStyle="bold"
tools:text="Where do you think Jorge will put this penalty? I'd go left here! Hehehehehehehehehehe super long text" />
<FrameLayout
android:layout_width="32dp"
android:layout_height="32dp">
<ProgressBar
android:id="#+id/question_time_progress"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:indeterminate="false"
android:indeterminateDuration="1"
android:max="100"
android:progress="0" />
<TextView
android:id="#+id/question_time"
android:layout_width="26dp"
android:layout_height="26dp"
android:layout_gravity="center"
android:gravity="center"
android:textColor="#color/test_color_light"
android:textStyle="bold"
tools:text="14" />
</FrameLayout>
</LinearLayout>
buff_answer.xml (which will be injected in the answersContainer from buff_view.xml dynamically depending on the number of answers available for that question)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:background="#drawable/light_bg"
android:orientation="horizontal"
tools:ignore="RtlHardcoded">
<ImageView
android:id="#+id/answer_image"
android:layout_width="27dp"
android:layout_height="27dp"
android:layout_gravity="center_vertical"
android:src="#drawable/ic_generic_answer"
android:padding="4dp" />
<TextView
android:id="#+id/answer_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:padding="4dp"
android:textColor="#color/test_color_dark"
tools:text="The keeper's right"
android:textStyle="bold" />
</LinearLayout>
BuffView.kt
class BuffView #JvmOverloads constructor(context: Context, attrs: AttributeSet? = null)
: LinearLayout(context, attrs) {
private val apiErrorHandler = ApiErrorHandler()
private val getBuffUseCase = GetBuffUseCase(apiErrorHandler)
private val intervalsHandler = Handler()
private val buffView: LinearLayout = inflate(context, R.layout.buff_view, this) as LinearLayout
private var errorListener: ErrorListener? = null
private var countDownTimer: CountDownTimer? = null
private var buffIdCount = 1
private var getBuffs = false
fun init() {
getBuffs = true
getBuff()
}
private fun getBuff() {
if (!getBuffs) return
getBuffUseCase.invoke(Params(buffIdCount.toLong()), object : UseCaseResponse<Buff> {
override fun onSuccess(result: Buff) {
displayBuff(result)
}
override fun onError(errorModel: ErrorModel?) {
errorListener?.onError( errorModel?.message?: "An error has occurred")
hideBuff()
}
})
if (buffIdCount < TOTAL_BUFFS ) {
intervalsHandler.postDelayed({
buffIdCount++
getBuff()
stopCountDownTimer()
}, REQUEST_BUFF_INTERVAL_TIME)
}
}
private fun displayBuff(buff: Buff) {
setQuestion(buff.question.title)
setAuthor(buff.author)
setAnswer(buff.answers)
setProgressBar(buff.timeToShow)
setCloseButton()
invalidate()
showBuff()
}
private fun setQuestion(questionText: String) {
question_text.text = questionText
}
private fun setAuthor(author: Buff.Author) {
val firstName = author.firstName
val lastName = author.lastName
sender_name.text = "$firstName $lastName"
Glide.with(buffView)
.load(author.image)
.into(sender_image)
}
private fun setAnswer(answers: List<Buff.Answer>) {
val answersContainer = findViewById<LinearLayout>(R.id.answersContainer)
answersContainer.removeAllViews()
for(answer in answers) {
val answerView: View = LayoutInflater.from(answersContainer.context).inflate(
R.layout.buff_answer,
answersContainer,
false
)
answer.answerImage?.x0?.url?.let {
Glide.with(buffView)
.load(it)
.into(answerView.answer_image)
}
answerView.setOnClickListener {
answerView.background = ContextCompat.getDrawable(context, R.drawable.answer_selected_bg)
answerView.answer_text.setTextColor(ContextCompat.getColor(context, android.R.color.white))
//freeze timer
stopCountDownTimer()
//hideView() after 2 seconds
it.postDelayed(Runnable {
hideBuff()
}, HIDE_BUFF_AFTER_SELECTED_ANSWER_DURATION)
}
answerView.answer_text?.text = answer.title
answersContainer.addView(answerView)
}
}
...
}

You'll have to include your buff_view.xml as a child of a layout where you can set the layout_weight property like this.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:gravity="bottom">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal">
<include layout="#layout/buff_view">
</LinearLayout>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2" />
</LinearLayout>
Also change the width and height constraints for the buff view top LinearLayout like this
<LinearLayout
android:id="#+id/mainLinearLayout"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="#layout/buff_sender"/>
<include layout="#layout/buff_question"/>
<LinearLayout
android:id="#+id/answersContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"/>
</LinearLayout>
EDIT: Progress bar not visible problem
I think it is a problem with the TextView question_text
Change it like this
<TextView
android:id="#+id/question_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="center_vertical|start"
android:padding="18dp"
android:textColor="#color/test_color_light"
android:textStyle="bold" />
Also change the main Layout in buff_question.xml and set its layout_width to match_parent like this
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/dark_bg"
android:orientation="horizontal">

This is easily done using ConstraintLayout and width/height percentages.
Be sure to set the actual width dimensions to 0dp (where using a percentage value) and to make sure the views are constrained appropriately.
The below produces this output
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:background="#color/salmon1"
android:id="#+id/view1"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent=".33"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:background="#color/orange1"
android:id="#+id/view2"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/view1" />
</androidx.constraintlayout.widget.ConstraintLayout>

RecyclerView not inflating items

Here is the main layout that consist of the recyclerview, collapsingtoolbar layout and other layout i'm using
making the height of the recyclerview wrap conent didnt solve the problem, and i'm correcly passing the size of the item in the adapter as well,
hope you help me find what i'm doing wrong , ive been on this for some days now
main layout
<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:fitsSystemWindows="true">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="300dp"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:expandedTitleTextAppearance="#android:color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center_horizontal"
android:orientation="vertical">
<TextView
android:id="#+id/love_music"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TITILE"
android:textColor="#android:color/white"
android:textSize="20sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="subtitle"
android:textColor="#android:color/white"
android:textSize="18sp" />
</LinearLayout>
</RelativeLayout>
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<include layout="#layout/content_main" />
below is my adapter class
class FeedsAdapter(val items: List<Advert>) : RecyclerView.Adapter<FeedsAdapter.ViewHolder>() {
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
val v = LayoutInflater.from(parent.context).inflate(R.layout.item_card, parent,false)
return ViewHolder(v)
}
override fun getItemCount(): Int = items.size
override fun onBindViewHolder(holder: ViewHolder, position: Int) {
val post:Advert = items[position]
holder.postName.text = post.username
holder.postDesc.text = post.description
holder.postLocation.text = post.location
holder.timePosted.text = post.created_at
Picasso.get().load(post.image1).into(holder.postImage)
}
class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
val postName = itemView.findViewById(R.id.post_name) as TextView
val postDesc = itemView.findViewById(R.id.post_description) as TextView
val postLocation = itemView.findViewById(R.id.post_location)as TextView
val timePosted = itemView.findViewById(R.id.post_time_posted) as TextView
val postImage = itemView.findViewById(R.id.post_image) as ImageView
}
}
The fragment where i'm trying to call use the layout
class HomeFragment : Fragment() {
private lateinit var homeViewModel: HomeViewModel
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
homeViewModel = ViewModelProviders.of(this).get(HomeViewModel::class.java)
val root = inflater.inflate(R.layout.fragment_home, container, false)
val recyclerView = view?.findViewById<RecyclerView>(R.id.advert_recyclerView)
recyclerView?.layoutManager = LinearLayoutManager(activity,LinearLayoutManager.VERTICAL ,false)
//val textView: TextView = root.findViewById(R.id.text_home)
/* homeViewModel.text.observe(this, Observer {
textView.text = it
})*/
Coroutines.main{
ApiClient.instance.getAdvert().enqueue(object: Callback<AdvertResponse> {
override fun onFailure(call: Call<AdvertResponse>, t: Throwable) {
Toast.makeText(activity,"login failed ${t.message}",Toast.LENGTH_LONG).show()
}
override fun onResponse(
call: Call<AdvertResponse>,
response: Response<AdvertResponse>
) {
val ads: List<Advert> = response.body()!!.Advert
val adapter = FeedsAdapter(ads)
recyclerView?.adapter = adapter
adapter.notifyDataSetChanged()
}
})
}
return root
}
}
The individual item i'm tryning to inflate into the recyclerview
androidx.cardview.widget.CardView 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">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/post_profile_pic"
android:layout_width="45dp"
android:layout_height="45dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:srcCompat="#tools:sample/avatars" />
<TextView
android:id="#+id/post_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:text="Ruth Agwu"
app:layout_constraintStart_toEndOf="#+id/post_profile_pic"
app:layout_constraintTop_toTopOf="#+id/post_profile_pic" />
<RatingBar
android:id="#+id/ratingBar"
android:layout_width="45dp"
android:layout_height="12dp"
android:layout_marginStart="16dp"
app:layout_constraintStart_toEndOf="#+id/post_name"
app:layout_constraintTop_toTopOf="#+id/post_name" />
<ImageView
android:id="#+id/imageView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/ratingBar"
app:srcCompat="#drawable/more_vert_24dp" />
<ImageView
android:id="#+id/imageView8"
android:layout_width="18dp"
android:layout_height="18dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
app:layout_constraintStart_toEndOf="#+id/post_profile_pic"
app:layout_constraintTop_toBottomOf="#+id/post_name"
app:srcCompat="#drawable/location_on_24dp" />
<TextView
android:id="#+id/post_location"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Jabi"
app:layout_constraintStart_toEndOf="#+id/imageView8"
app:layout_constraintTop_toBottomOf="#+id/post_name" />
<TextView
android:id="#+id/post_time_posted"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="25 min ago"
app:layout_constraintStart_toEndOf="#+id/post_location"
app:layout_constraintTop_toTopOf="#+id/post_location" />
<ImageView
android:id="#+id/post_image"
android:layout_width="0dp"
android:layout_height="200dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/post_time_posted"
app:srcCompat="#drawable/solar_panel" />
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
android:layout_height="50dp"
android:background="#drawable/ash_background"
app:layout_constraintBottom_toBottomOf="#+id/post_image"
app:layout_constraintEnd_toEndOf="#+id/post_image"
app:layout_constraintStart_toStartOf="#+id/post_image">
<TextView
android:id="#+id/post_description"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:gravity="start|top"
android:text="We specialize on all kinds of cakes and snack's. cooking Catering and events management"
android:textColor="#android:color/white"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

changing the home fragment to this worked like magic
class HomeFragment : Fragment() {
private lateinit var homeViewModel: HomeViewModel
lateinit var rvRecyclerView : RecyclerView
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
var view = inflater.inflate(R.layout.fragment_home, container, false)
rvRecyclerView = view!!.findViewById<RecyclerView>(R.id.advert_recyclerView)
rvRecyclerView.layoutManager = LinearLayoutManager(activity,LinearLayoutManager.VERTICAL ,false)
//homeViewModel = ViewModelProviders.of(this).get(HomeViewModel::class.java)
fetchFeeds()
return view
}
private fun fetchFeeds() {
Coroutines.main{
ApiClient.instance.getAdvert().enqueue(object: Callback<AdvertResponse> {
override fun onFailure(call: Call<AdvertResponse>, t: Throwable) {
Toast.makeText(activity,"login failed ${t.message}",Toast.LENGTH_LONG).show()
}
override fun onResponse(
call: Call<AdvertResponse>,
response: Response<AdvertResponse>
) {
val ads: List<Advert> = response.body()!!.Advert
val adapter = FeedsAdapter(ads)
rvRecyclerView.adapter = adapter
adapter.notifyDataSetChanged()
}
})
}
}
}