I followed the compose documentation to create a bottom navigation bar by creating such a sealed class
sealed class Screen(val route: String, val label: String, val icon: ImageVector) {
object ScreenA: Screen("screenA", "ScreenA", Icons.Default.AccountBox)
object ScreenB: Screen("screenB", "ScreenB", Icons.Default.ThumbUp
}
with something such as the following screen, simply containing a Text item.
#Composable
fun ScreenA() {
Text(text = "This is ScreenA",
style = TextStyle(color = Color.Black, fontSize = 36.sp),
textAlign = TextAlign.Center)
}
and have also implemented the Scaffold, BottomNavigation, and NavHost exactly like in the docs and everything is working just fine.
Let´s say I now want to have one of the screens with a whole bunch of data displayed in a list with all sorts of business logic methods which would need a Fragment, ViewModel, Repository, and so on.
What would be the correct approach be? Can I still create the fragments and somehow pass them to the sealed class or should we forget about fragments and make everything composable?
Since you are following the documentation you need to forget about Fragments. Documentations suggests that view models per screen will be instantiated when the composable function is called/navigated to. The viewmodel will live while the composeable is not disposed. This is also motivated by single activity approach.
#Inject lateinit var factory : ViewModelProvider.Factory
#Composable
fun Profile(profileViewModel = viewModel(factory),
userId: String,
navigateToFriendProfile: (friendUserId: String) -> Unit) {
}
This can be seen in compose samples here.
If you want to mix both, you can omit using navigation-compose, and roll with navigation component and use Fragment and only use composable for fragment UI.
#AndroidEntryPoint
class ProfileFragment: BaseFragment() {
private val profileViewModel by viewModels<ProfileViewModel>(viewModelFactory)
private val profileFragmentArgs by navArg<ProfileFragmentArgs>()
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
return ComposeView(requireContext()).apply {
setContent {
Profile(profileViewModel = profileViewModel, id = profileFragmentArgs.id, navigateToFriendProfile = { findNavController().navigate(...) })
}
}
}
Related
I am integrating Compose into my app and I am confused about the use of multiple remember calls when managing state using state holders. Consider the following example:
State holder:
class MyScreenState(
val listState: LazyListState,
private val fragment: Fragment
) {
fun doSomethingWithFragment() {
...
...
}
}
Remember function:
#Composable
fun rememberMyScreenState(
listState: LazyListState = rememberLazyListState(),
fragment: Fragment
) = remember(
listState,
fragment
) {
MyScreenState(
listState = listState,
fragment = fragment
)
}
Fragment:
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
return ComposeView(requireContext()).apply {
setContent {
val state = rememberMyScreenState(this#MyScreenFragment)
...
}
}
}
As it is stated in documentation, each state holder should also provide its remember function which calls remember with the passed values and creates the holder.
But why are the default values of this function usually another remember functions? What additional value does it bring to the table? Why can't I simply default to to LazyListState():
#Composable
fun rememberMyScreenState(
listState: LazyListState = LazyListState(),
fragment: Fragment
)
And what should I do if I have a value that doesn't have its own remember "wrapper", like fragment from the example above. Can I safely pass it like this or do I also need to wrap it for some reason?
remember will save everything inside its block, but this does not apply to function parameters.
So this line listState: LazyListState = LazyListState() will create a new state every time it is recomposed - and the old state will be forgotten.
So all parameters should be remembered by themselves (if necessary).
I am using nested recyclerview.
In the picture, the red box is the Routine Item (Parent Item), and the blue box is the Detail Item (Child Item) in the Routine Item.
You can add a parent item dynamically by clicking the ADD ROUTINE button.
Similarly, child items can be added dynamically by clicking the ADD button of the parent item.
As a result, this function works just fine.
But the problem is in the code I wrote.
I use a ViewModel to observe and update parent item addition/deletion.
However, it does not observe changes in the detail item within the parent item.
I think it's because LiveData only detects additions and deletions to the List.
So I put _items.value = _items.value code to make it observable when child items are added and deleted.
This way, I didn't even have to use update code like notifyDataSetChanged() in the child adapter.
In the end it is a success, but I don't know if this is the correct code.
Let me know if you have additional code you want!
In Fragment.kt
class WriteRoutineFragment : Fragment() {
private var _binding : FragmentWriteRoutineBinding? = null
private val binding get() = _binding!!
private lateinit var adapter : RoutineAdapter
private val vm : WriteRoutineViewModel by viewModels { WriteRoutineViewModelFactory() }
override fun onCreateView(inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?): View? {
_binding = FragmentWriteRoutineBinding.inflate(inflater, container, false)
adapter = RoutineAdapter(::addDetail, ::deleteDetail)
binding.rv.adapter = this.adapter
return binding.root
}
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
getTabPageResult()
// RecyclerView Update
vm.items.observe(viewLifecycleOwner) { updatedItems ->
adapter.setItems(updatedItems)
}
}
private fun getTabPageResult() {
val navController = findNavController()
navController.currentBackStackEntry?.also { stack ->
stack.savedStateHandle.getLiveData<String>("workout")?.observe(
viewLifecycleOwner, Observer { result ->
vm.addRoutine(result) // ADD ROUTINE
stack.savedStateHandle?.remove<String>("workout")
}
)
}
}
private fun addDetail(pos: Int) {
vm.addDetail(pos)
}
private fun deleteDetail(pos: Int) {
vm.deleteDetail(pos)
}
}
ViewModel
class WriteRoutineViewModel : ViewModel() {
private var _items: MutableLiveData<ArrayList<RoutineModel>> = MutableLiveData(arrayListOf())
val items: LiveData<ArrayList<RoutineModel>> = _items
fun addRoutine(workout: String) {
val item = RoutineModel(workout, "TEST")
_items.value?.add(item)
// _items.value = _items.value
}
fun addDetail(pos: Int) {
val detail = RoutineDetailModel("TEST", "TEST")
_items.value?.get(pos)?.addSubItem(detail) // Changing the parent item's details cannot be observed by LiveData.
_items.value = _items.value // is this right way?
}
fun deleteDetail(pos: Int) {
if(_items.value?.get(pos)?.getSubItemSize()!! > 1)
_items.value?.get(pos)?.deleteSubItem() // is this right way?
else
_items.value?.removeAt(pos)
_items.value = _items.value // is this right way?
}
}
This is pretty standard practice when using a LiveData with a mutable List type. The code looks like a smell, but it is so common that I think it's acceptable and people who understand LiveData will understand what your code is doing.
However, I much prefer using read-only Lists and immutable model objects if they will be used with RecyclerViews. It's less error prone, and it's necessary if you want to use ListAdapter, which is much better for performance than a regular Adapter. Your current code reloads the entire list into the RecyclerView every time there is any change, which can make your UI feel laggy. ListAdapter analyzes automatically on a background thread your List for which items specifically changed and only rebinds the changed items. But it requires a brand new List instance each time there is a change, so it makes sense to only use read-only Lists if you want to support using it.
An Activity opens fragments A,B,C,D,E,F,G,H,.... in a PageView2, which obviously slides back and forth through the fragments, all the fragments are using binding view layouts they only know about their own layout not each others, the Activity only knows it's own layout binding, so when a user changes widgets within the fragments how does that data get sent back to the Activity, in a collective way that one place can access all changes made to fragments A,B,C,D,E,F,G,H,.... so that the input can be saved.
The way I'd like it to work is;
User Clicks Edit
Makes alterations within the fragments
Chooses Apply or Cancel changes.
Well it works to a point, the problem is if the Fragments haven't been initialized, you get an instant crash, I presume I'm doing this wrong.
class mySharedViewModel : ViewModel() {
lateinit var udetails : FragmentEdcardsDetailsBinding
lateinit var uanswers : FragmentEdcardsAnswersBinding
lateinit var umath : FragmentEdcardsMathBinding
lateinit var uanimimage : FragmentEdcardsMediaAnimimageBinding
lateinit var ufullscreen : FragmentEdcardsMediaFullscreenimageBinding
lateinit var uvideo : FragmentEdcardsMediaVideoBinding
lateinit var uaudio : FragmentEdcardsMediaAudioBinding
fun cardapply() {
mytools.debug("${udetails}" )
mytools.debug("${uanswers}" )
}
}
Edit 2
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
u = FragmentEdcardsDetailsBinding.bind(view)
model.udetails= u
model.udetailsinit = true
Created a workaround, my gut is still telling me this is way wrong! idea being when apply is press it checks if model.udetailinit is true, because testing an uninitialized udetail just results in crash.
This should be done using a shared ViewModel, you should create a ViewModel object in your Activity and then access this ViewModel using Activity scope in your fragments.
Define a ViewModel as
class MyViewModel : ViewModel() {
val action: MutableLiveData<String> = MutableLiveData()
}
In Activity create object of this ViewModel
class SomeActivity: AppCompatActivity(){
// create ViewModel
val model: MyViewModel by viewModels()
override fun onCreate(savedInstanceState: Bundle?) {
model.action.observe(viewLifecycleOwner, Observer<String> { action->
// Do something with action
})
}
}
And in your Fragments access the ViewModel from Activity Scope
class SomeFragment: Fragment() {
private val model: MyViewModel by activityViewModels()
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
// Change value of action and notify Activity
model.action.value = "SomeAction"
}
}
I'm building an Android app that has different pages that mainly have some EditText. My goal is to handle the click on the EditText and shows a DialogAlert with an EditText, then the user can put the text, click "save" and the related field in the database (I'm using Room and I've tested the queries and everything works) will be updated. Now I was able to handle the text from the DialogFragment using interface but I don't know how to say that the text retrieved is related to the EditText that I've clicked. What is the best approach to do this?
Thanks in advance for your help.
Let's take this fragment as example:
class StaticInfoResumeFragment : Fragment(), EditNameDialogFragment.OnClickCallback {
private val wordViewModel: ResumeStaticInfoViewModel by viewModels {
WordViewModelFactory((requireActivity().application as ManagementCinemaApplication).resumeStaticInfoRepo)
}
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?,
): View? {
val root = inflater.inflate(R.layout.fragment_static_info_resume, container, false)
wordViewModel.resumeStaticInfo.observe(viewLifecycleOwner) { words ->
println("test words: $words")
}
val testView = root.findViewById<TextInputEditText>(R.id.textInputEditText800)
testView.setOnClickListener{
val fm: FragmentManager = childFragmentManager
val editNameDialogFragment = EditNameDialogFragment.newInstance("Some Title")
editNameDialogFragment.show(fm, "fragment_edit_name")
}
resumeStaticInfoViewModel.firstName.observe(viewLifecycleOwner, Observer {
testView.setText(it)
})
return root
}
override fun onClick(test: String) {
println("ciao test: $test")
wordViewModel.updateFirstName(testa)
}}
Then I've the ViewModel:
class ResumeStaticInfoViewModel(private val resumeStaticInfoRepo: ResumeStaticInfoRepo): ViewModel() {
val resumeStaticInfo: LiveData<ResumeStaticInfo> = resumeStaticInfoRepo.resumeStaticInfo.asLiveData()
fun updateFirstName(resumeStaticInfoFirstName: String) = viewModelScope.launch {
resumeStaticInfoRepo.updateFirstName(resumeStaticInfoFirstName)
}
....
And the DialogFragment:
class EditNameDialogFragment : DialogFragment() {
private lateinit var callback: OnClickCallback
interface OnClickCallback {
fun onClick(test: String)
}
override fun onAttach(context: Context) {
super.onAttach(context)
try {
callback = parentFragment as OnClickCallback
} catch (e: ClassCastException) {
throw ClassCastException("$context must implement UpdateNameListener")
}
}
override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
val title = requireArguments().getString("title")
val alertDialogBuilder: AlertDialog.Builder = AlertDialog.Builder(requireContext())
alertDialogBuilder.setTitle(title)
val layoutInflater = context?.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
val alertCustomView = layoutInflater.inflate(R.layout.alert_dialog_edit_item, null)
val editText = alertCustomView.findViewById<EditText>(R.id.alert_edit)
alertDialogBuilder.setView(alertCustomView)
alertDialogBuilder.setPositiveButton(
"Save",
DialogInterface.OnClickListener { dialog, which ->
callback.onClick(editText.text.toString())
})
alertDialogBuilder.setNegativeButton("No") { _: DialogInterface, _: Int -> }
return alertDialogBuilder.create()
}
companion object {
fun newInstance(title: String?): EditNameDialogFragment {
val frag = EditNameDialogFragment()
val args = Bundle()
args.putString("title", title)
frag.arguments = args
return frag
}
}
}
Do you mean you just want to show a basic dialog for entering some text, and you want to be able to reuse that for multiple EditTexts? And you want a way for the dialog to pass the result back, but also have some way of identifying which EditText it was created for in the first place?
The thing about dialogs is they can end up being recreated (like if the app is destroyed in the background, and then restored when the user switches back to it) so the only real configuration you can do on it (without getting into some complexity anyway) is through its arguments, like you're doing with the title text.
So one approach you could use is send some identifier parameter to newInstance, store that in the arguments, and then pass it back in the click listener. So you're giving the callback two pieces of data in onClick - the text entered and the reference ID originally passed in. That way, the activity can handle the ID and decide what to do with it.
An easy value you could use is the resource ID of the EditText itself, the one you pass into findViewById - it's unique, and you can easily use it to set the text on the view itself. You're using a ViewModel here, so it should be updating automatically when you set a value in that, but in general it's a thing you could do.
The difficulty is that you need to store some mapping of IDs to functions in the view model, so you can handle each case. That's just the nature of making the dialog non-specific, but it's easier than making a dialog for each property you want to update! You could make it a when block, something like:
// you don't need the #ResId annotation but it can help you avoid mistakes!
override fun onClick(text: String, #ResId id: Int) {
when(id) {
R.id.coolEditText -> viewModel.setCoolText(text)
...
}
}
where you list all your cases and what to call for each of them. You could also make a map like
val updateFunctions = mapOf<Int, (String) -> Unit>(
R.id.coolEditText to viewModel::setCoolText
)
and then in your onClick you could call updateFunctions[id]?.invoke(text) to grab the relevant function for that EditText and call it with the data. (Or use get which throws an exception if the EditText isn't added to the map, which is a design error you want to get warned about, instead of silently ignoring it which is what the null check does)
Im working on a project and implementing the MVVM model with databinding and navigation. My button is on a fragment that opens with a drawer menu item, the thing is when i click on the button it does nothing, the debugger doesn't go into the navigate method, I really don't know what I did wrong, can someone help?
MYACCOUNT CLASS:
class MyAccountFragment : BaseFragment() {
private val vm: MyAccountViewModel by viewModel()
override fun getViewModel(): BaseViewModel = vm
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
val binding = FragmentMyAccountBinding.inflate(inflater, container, false)
context ?: return binding.root
injectFeature()
setToolbar(binding)
subscribeUi(binding)
return binding.root
}
/**
* set toolbar
* **/
private fun setToolbar(binding: FragmentMyAccountBinding) {
binding.appBarLayout.backClickListener = (activity as MainActivity).createOnBackClickListener()
}
/**
* set ui
* **/
private fun subscribeUi(binding: FragmentMyAccountBinding) {
binding.viewModel = vm
}
}
MYACCVIEWMODEL
class MyAccountViewModel constructor() : BaseViewModel() {
fun onAddRoomClick()
{
navigate(MyAccountFragmentDirections.actionMyAccountFragmentToAddRoomFragment())
}
}
and in the xml i implemented the
android:onClick="#{() -> viewModel.onAddRoomClick()}"
Im using this pattern for all my Fragments and ViewModels, and i really dont know why it doesn't do anything, the vm initializes. On the other drawermenu fragment I also have the onClick method and it navigates to the other fragment. So if anyone knows the solution that would be helpful, thank you in advance.
the answer was in the initialization of the viewModel.
the onClick method in xml is in a content_layout that is included in a fragment_layout and instead of binding.viewModel = vm I had to do binding.content_layout.viewModel = vm.
private fun subscribeUi(binding: FragmentMyAccountBinding) {
binding.contentMyAccount.viewModel = vm
}
ViewModel is not supposed to handle any kind of navigation, it will just receive the event from the UI and pass it to the controller (which might be a fragment or activity) and the latter will handle the navigation...
So one way to solve your issue is to do the following:
ViewModel
class MyAccountViewModel constructor() : BaseViewModel() {
private val _navigateToRoomFragEvent = MutableLiveData<Boolean>(false)
val navigateToRoomFragEvent:LiveData<Boolean>
get()=_navigateToRoomFragEvent
fun onAddRoomClick()
{
_navigateToRoomFragEvent.value=true
}
fun resetNavigation(){
_navigateToRoomFragEvent.value=false
}
}
Controller (Activity or Fragment)
inside **onCreate() (if it is an activity)**
viewModel.navigateToRoomFragEvent.observe(this,Observer{navigate->
//boolean value
if(navigate){
navController.navigate(//action)
}
viewModel.resetNavigation() //don't forget to reset the event
})
onActivityCreated(if it is a fragment)
viewModel.navigateToRoomFragEvent.observe(viewLifeCycleOwner,Observer{navigate->
//boolean value
if(navigate){
navController.navigate(//action)
}
viewModel.resetNavigation() //don't forget to reset the event
})
Hope it helps,