Kotlin with MVVM application PART 3

Hi everyone now we are in Part 3. We try to create a Profile Page.

UI

Create Profile fragment and add recycler view in a layout like this

We need a Recyclerview item on a profile page, create profile_items.xml, or recycler_view_items.xml in layout maybe like this. ( UI up to you )

We put in e.g: tvName(User),tvBodyFat(User)…

MODEL

We need a model to get data from DB and for ModelViewViewModel(MVVM). Create it model folder and add the data class.

data class MustfitModel(
    val name: String? = null,
    val bodyFat: String? = null,
     ....
     ....  <-fill according to your own model
)

ADAPTER

Now create an adapter for use recycler view.

class MustfitRecyclerAdapter(private val informationList: ArrayList<MustfitModel>) <- USE MODEL : 
    RecyclerView.Adapter<MustfitRecyclerAdapter.InformationHolder>() {

After clicking implement members

override fun onCreateViewHolder(
    parent: ViewGroup,
    viewType: Int
): InformationHolder {
    val binding = ProfileItemsBinding.inflate(
        LayoutInflater.from(parent.context),
        parent,
        false
    )
    return InformationHolder(binding)
}
class InformationHolder(val binding: ProfileItemsBinding) :
    RecyclerView.ViewHolder(binding.root) {
}
override fun getItemCount(): Int {
    return informationList.size   <- Return list size 
}

And add some code for access in model data.

override fun onBindViewHolder(holder: InformationHolder, position: Int) {
    holder.binding.tvName.text  <- Binding  for  Layout
  = informationList[position].name   <- Access position in the list item. in Model class e.g.: name,bodyFat ...
.
. <-fill according to your own model
.
}

REPOSİTORY

Let’s create getDataFromDB function on the repo folder on DataRepository(remember we created)

private lateinit var _firebaseAuth: FirebaseAuth 
private lateinit var _fireStoreDB: FirebaseFirestore
fun getDataFromDB(){
_firebaseAuth = Firebase.auth 
_fireStoreDB = Firebase.firestore

so far everything is the same now remember we created the collection on FireStore(“informations”). We access this collection path and we get it by User Email.

_fireStoreDB.collection("informations")<-Collection Path
.orderBy("userEmail", com.google.firebase.firestore.Query.Direction.DESCENDING
). -> for more is below 

now control with the snapshot but what is a snapshot?

note: Firestore addSnapshotListener is querying all data when a new document added

more -> addSnapshotListener { snapshot, exception ->
if (exception != null) { <- control exception
    _messageLiveData.postValue("exception localizedMessage") 
}
else {
    if (snapshot != null) { <- snapshot must not be null
        if (!snapshot.isEmpty) { 
            _informationArrayList.clear(). <- clear list 
            val documents = snapshot.documents 
            for (document in documents) {
                val name = document.get("name") as String? <-Get data on db and put variable
                val bodyFat = document.get("bodyFat") as String
               .....
               .....
                val post = MustfitModel(
                    name,
                    bodyFat,
                    ..... 
                    .....
                )
                _informationArrayList.add(post)  <- add data
            }
        }
    }
}

VİEWMODEL

fun getDataFromDB() {
    _appRepository = DataRepository()
    _appRepository.getDataFromDB()
}

UI

Let’s fill Fragment

private lateinit var _binding: FragmentProfileBinding
private val _informationArrayList: ArrayList<MustfitModel> = ArrayList()
private var _adapter: MustfitRecyclerAdapter? = null
private val _viewModel by inject<DataViewModel>() <-KOIN

onCreateView

_binding = FragmentProfileBinding.inflate(inflater, container, false)
_binding.rvProfile.layoutManager = LinearLayoutManager(activity) <-Call Recycler View
_adapter = MustfitRecyclerAdapter(_informationArrayList) <-Call adapter 
_binding.rvProfile.adapter = _adapter
viewModel.getDataFromDB()
return _binding.root

Now let’s try the app.

Don’t forget to add Profile Fragment on Navigation. (Click and learn in PART 1)

Remember on Part1 Flow-Chart and now update Flow-Chart.

We will in PART 4 get data from API will use Retrofit, RxJava, use Reactivex in Repository and use Intent for push data between pages(put extra).