I have an android application that asks users a few questions, kind of a survey. Each question has an YES and a NO Button. So when the user presses either YES or NO button, a new Button to go to the next question becomes visible over the YES and NO buttons. When the user clicks on the next question button it changes the textview for the question to the next question text as well as the imageView for that question changes.
I am making use of DataBinding along with LiveData.
I have created a list of images used and another list for the questions as follows in my ViewModel class.:
//list of images : Question 4 does not have an image
imgs= listOf(
R.drawable.imgQ1, // 1
R.drawable.imgQ2,// 2
R.drawable.imgQ3)//3
//list of questions
qs= listOf(
"What is .....?",//1
"Who is ....?",//2
"How to .....?",//3
"Why is .....?")//4
I created a ViewState to handle when to show which button and UI:
sealed class MyUIState{
data class UIState(
val policyText: Boolean, // determines if the policy textview should be visible or not
val nextQuestionButton: Boolean,// determines if the next question button should be visible or not
val nextQuestionNewImage: Int = R.drawable.imgQ1,//what image is used for the next question
val nextQuestion: String //what is the next question from the list
) : MyUIState()
}
I also have a BindingAdapter class which handles the visibility and text changes and image changes
(basically this - I have added these function to my layout file with data binding):
#BindingAdapter("btnNextQ")
fun Button.btnNextQ(myState: MyUIState?){
visibility = if (myState is MyUIState.UIState) {
if (state.nextQuestionButton)
View.VISIBLE
else
View.GONE
} else
visibility
}
#BindingAdapter("newImage")
fun ImageView.newImage(myState: MyUIState?){
if(myStateis MyUIState.UIState){
setImageResource(state.nextQuestionNewImage)
}
}
And then in my ViewModel class I have a function for the click event on either the YES or NO Button where I call the UIState like this:
//I have this declared at the top of my class (global)
private val myViewState = MutableLiveData<MyUIState>()
//this the button click for yes:
fun YesClick(){
myViewState.postValue(MyUIState.UIState(
policyText= true,
nextQuestionButton = true,
nextQuestion = qs[0])) //still keep the text for question1
}
Now, I want the image and question to change after the user clicked the next question button. So basically what happens is that after clicking next question, the next question buttons goes invisible as well as the other components keeping the YES and NO buttons and the updated question and image. This is my code for the click event on the next question button:
fun nextQuestion(){
myViewState .postValue(MyUIState.UIState(
nextQuestionNewImage = imgs[1],
nextQuestion = qs[1],
nextQuestionButton = false,
policyText= false))
}
So the state does move to the next question with the necessary items being visible and invisible, but I am struggling to keep it going to the next questions in the list. I can go from question1 to question2 but not sure how to keep doing that until the end of the list of questions.
So basically, I just want to keep updating the same activity with the new data.
Any help or advice will be highly appreciated.
Not sure if I understood your real problem. Maybe if you share more of your code we could help you better.
Anyway, I would recommend you to have two states for your view (activity in your case), one state for the question itself containing both yes and no buttons, question text and the right image. And another state for your "move to next" question which contains the question text, button and whatever you want.
Then your view needs to take care of each state. In the case, you need to deal with one state while dealing against the other state, for example showing one button and hiding the ones you don't need.
So whenever you click on the yes button, the VM will get the event, check everything and then emit an event back to the View with a new state, and so on.
It's quite the same thing you did, but using two states will help you to tackle each state and ease off your code
Related
I am trying to create an app in android studio. I've only recently started to get interested in this and ran into a problem. As planned, for each move in the game, the player presses several buttons, I would like to put the id of these buttons in a separate list, and when necessary, use this list to change the color of all those buttons that are in this list
What i did:
I have the list->
val move_list: MutableList<Any> = mutableListOf()
When the player presses the button, I add its id to move_list
fun for_btn_buba2(view: View){
move_list.add(buba2.id)
In activity_main.xml my button seems like:
<Button
android:id="#+id/buba2"
android:text="Buba 2"
...
android:onClick="for_btn_buba2"/>
And on click of another button i wanted to insert code like this:
move_list[0].setBackgroundColor(Color.parseColor(colorString:"#FFFC9D45"))
move_list[0] means id for button buba2
In python it can be, but it isnt python)
How can I change the color of the button through the list index with the buttons?
Firstly I suggest you indicate the type of what is in the list, which is Int so like
val move_list: MutableList<Int> = mutableListOf()
Then you can probably do this in the onClick of the other button
findViewById<View>(move_list[0]).setBackgroundColor(Color.parseColor("#FFFC9D45"))
or to do it to all
move_list.forEach {
findViewById<View>(it).setBackgroundColor(Color.parseColor("#FFFC9D45"))
}
I also notice you directly refer to buba2 in it the for_btn_buba2. I have the feeling that you are writing this function for every buba. This is unnecessary. You can get the id from the view parameter because that is in fact the same id. So do
fun for_btn_buba(view: View){
move_list.add(view.id)
}
then you can give each buba the same for_btn_buba as android:onClick
Alternatively you don't even work with ids at all and make it a
val move_list: MutableList<View> = mutableListOf()
and then do
fun for_btn_buba(view: View){
move_list.add(view)
}
and then you can actually change the background like you wrote it:
move_list[0].setBackgroundColor(Color.parseColor("#FFFC9D45"))
or
move_list.forEach {
it.setBackgroundColor(Color.parseColor("#FFFC9D45"))
}
I've been messing around with Jetpack Compose and currently looking at different ways of creating/managing/updating State.
The full code I'm referencing is on my github
I have made a list a piece of state 3 different ways and noticed differences in behavior. When the first list button is pressed, it causes all 3 buttons to be recomposed. When either of the other 2 lists are clicked though they log that the list has changed size, update their UI but trigger no recompose of the buttons ?
To clarify my question, why is that when I press the button for the firsList I get the following log messages, along with size updates:
Drawing first DO list button
Drawing List button
Drawing second DO list button
Drawing List button
Drawing third DO list button
Drawing List button
But when I press the buttons for the other 2 lists I only get the size update log messages ?
Size of list is now: 2
Size of list is now: 2
var firstList by remember{mutableStateOf(listOf("a"))}
val secondList: SnapshotStateList<String> = remember{ mutableStateListOf("a") }
val thirdList: MutableList<String> = remember{mutableStateListOf("a")}
Row(...) {
println("Drawing first DO list button")
ListButton(list = firstList){
firstList = firstList.plus("b")
}
println("Drawing second DO list button")
ListButton(list = secondList){
secondList.add("b")
}
println("Drawing third DO list button")
ListButton(list = thirdList){
thirdList.add("b")
}
}
When I click the button, it adds to the list and displays a value. I log what is being re-composed to help see what is happening.
#Composable
fun ListButton(modifier: Modifier = Modifier,list: List<String>, add: () -> Unit) {
println("Drawing List button")
Button(...,
onClick = {
add()
println("Size of list is now: ${list.size}")
}) {
Column(...) {
Text(text = "List button !")
Text(text = AllAboutStateUtil.alphabet[list.size-1])
}
}
}
I'd appreciate if someone could point me at the right area to look so I can understand this. Thank you for taking the time.
I'm no expert (Well,), but this clearly related to the mutability of the lists in concern. You see, Kotlin treats mutable and immutable lists differently (the reason why ListOf<T> offers no add/delete methods), which means they fundamentally differ in their functionality.
In your first case, your are using the immutable listOf(), which once created, cannot be modified. So, the plus must technically be creating a new list under the hood.
Now, since you are declaring the immutable list in the scope of the parent Composable, when you call plus on it, a new list is created, triggering recompositions in the entire Composable. This is because, as mentioned earlier, you are reading the variable inside the parent Composable's scope, which makes Compose figure that the entire Composable needs to reflect changes in that list object. Hence, the recompositions.
On the other hand, the type of list you use in the other two approaches is a SnapshotStateList<T>, specifically designed for list operations in Compose. Now, when you call its add, or other methods that alter its contents, a new object is not created, but a recomposition signal is sent out (this is not literal, just a way for you to understand). The way internals of recomposition work, SnapshotStateList<T> is designed to only trigger recompositions when an actual content-altering operation takes place, AND when some Composable is reading it's content. Hence, the only place where it triggered a recomposition was the list button that was reading the list size, for logging purposes.
In short, first approach triggers complete recompositions since it uses an immutable list which is re-created upon modification and hence the entire Composable is notified that something it is reading has changed. On the other hand, the other two approaches use the "correct" type of lists, making them behave as expected, i.e., only the direct readers of their CONTENT are notified, and that too, when the content (elements of the list) actually changes.
Clear?
EDIT:
EXPLANATION/CORRECTION OF BELOW PROPOSED THEORIES:
You didn't mention MutableListDos in your code, but I'm guessing it is the direct parent of the code you provided. So, no, your theory is not entirely correct, as in the immutable list is not being read in the lambda (only), but the moment and the exact scope where you are declaring it, you send the message that this value is being read then and there. Hence, even if you removed the lambda (and modified it from somewhere else somehow), it will still trigger the recompositions. The Row still does have a Composable scope, i.e., it is well able to undergo independent recompositions, but the variable itself is being declared (and hence read) in the parent Composable, outside the scope of the Row, it causes a recomp on the entire parent, not just the Row Composable.
I hope we're clear now.
I am coding the functionality of a button that serves to remove other buttons. My buttons are dynamic. I have to program the functionality in my .kt. I am noob on android studio so am not sure what the best way to do it.
The function is like this:
I have a TableRow where are my buttons. All this buttons have their own listener.
val param: TableRow.LayoutParams =TableRow.LayoutParams(TableRow.LayoutParams.MATCH_PARENT,TableRow.LayoutParams.MATCH_PARENT)
var buttondynamic = Button(this)
buttondynamic = buildButton(item, i, mysize, mysize, true)
buttondynamic.layoutParams = param
tr.addView(buttondynamic)
Also I have a listener for the trash button but I don't know how to make the action works. How I should code this? Hove you some idea?
trashButton.setOnClickListener {
// This for goes over the table taking every single button
for(i in 1..12){
val btnFor: Button = findViewById(i) as Button
... -> here the codo shoul be (I think)
}
}
On the other hand, I have the code for the delete button listener. I only need the idia for the remove button over a button.
Thank you so much
If you want to delete it for just the current view , mean that you want it to appear the next time you open that activity , so just set its visibility like :
button.Visiblity = View.GONE
But if that buttons is connected to some stored data , like an array or a list or something like that , you can just delete that stored data for that button and reload your table again .
I'm new to Android and I'm building a simple application to start with. It consists of a client with three screens. In the first screen the user is prompted for an Ip to connect to a server (I use an EditText and a button). If the connection is successfully established, some data will be retrieved from the server and the client will show the data on a blank screen (I use a TextView). This would be the second screen. Then, the user could ask the server for detailed information about any data that has been retrieved from the server, which would be the third screen (I use a TextView again).
The problem is that I don't know what's the best way to go about it. I have currently one activity and one XML file containing all the components of the view (EditText, button, TextView). Until now, I've been using setVisibility(View.GONE);to hide certain components depending on the screen the user is in. (For example in the first screen I have to hide both TextViews).
One of the problems I'm facing is that when I put the phone in a horizontal position the components I had hidden show up again. I don't know if hiding views is the ideal thing to do for my purpose.
I've thought that maybe I should use more than one activity, shouldn't I?
I really appreciate any help you can give me to structure my first app.
I would definitely recommend splitting up your App into multiple Activities/Fragments. Depending on how big the logic for each screen gets you will be glad you did it later on because each Activity only has one responsibility.
Look at your mail app for example. You got your List Activity showing you all your mails and then when you select one it starts the Detail Activity showing you the content of your mail. Each Activity is only responsible for one thing which make each one easier to write and maintain.
It also simplifies your layout definitions because each one only contains the relevant parts.
Seems like this is coming up a lot. Android destroys and recreates and Activity when the configuration changes. Screen rotation is part of the orientation. In order to avoid that, the Activity is responsible for retaining state. The mechanisms given for that are the onCreate and onSaveInstanceState. In your example, you could do something like the following:
int uiPhase = 1;
#Override
void onCreate( Bundle data ) {
uiPhase = data.getInt( "uiPhase", 1 );
// inflate layout
setPhase( uiPhase );
}
// invoke the following each time your screen changes
void setPhase( int newPhase ) {
uiPhase = newPhase;
switch( uiPhase ) {
case 1: // show UI elements for first screen, hide others
break;
case 2: // show UI elements for second screen, hide others
break;
case 3: // show UI elements for third screen, hide others
break;
}
}
#Override
void onSaveInstanceState( Bundle data ) {
data.put( "uiPhase", uiPhase );
}
I didn't want to complicate the pattern above too much, but a good method for setting visibility is as follows:
phase1view.setVisibility( uiPhase == 1 ? View.VISIBLE : View.GONE );
phase2view.setVisibility( uiPhase == 2 ? View.VISIBLE : View.GONE );
phase3view.setVisibility( uiPhase == 3 ? View.VISIBLE : View.GONE );
That pulls the repetition in the setPhase method quite a bit together.
Set button visibility to GONE (button will be completely "removed" -- the buttons space will be available for another widgets) or INVISIBLE (button will became "transparent" -- its space will not be available for another widgets):
use in place of
setVisibility(View.GONE)
change to
setVisibility(View.INVISIBLE) and try
I want to create a page with X questions (the questions are stored in a database and I read them), headline and buttons at the end.
When the user clicks on one question than the question should transform into a dialog where the user can modify the question, however the other questions above and beneath it should still display the same way.
The way ListActivity is used in the sample notepad application in the android documentation it seems like the class can only display multiple items of the same type.
Is there a straightforward way to go about this problem?
I should tell you that I don't like your solution as an user.
I would prefer to chose from a list and having an edit activity after a click.
That's the default approach I've seen in every android app and it will be also easier for you.
If you still want to do what you explained I would try do this:
Create a ListView
Create a class QuestionOrDialog
Create an Adapter that extends from ArrayAdapter
Override getView doing something like:
QuestionOrDialog aQuestionOrDialog = getItem(position);
if ( aQuestionOrDialog.showDialog() ) {
return mInflater.inflate(R.layout.dialog, parent, false);
} else {
view = mInflater.inflate(R.layout.question, parent, false);
TextView question = (TextView) view.findViewById(R.id.question);
question.setText(aQuestionOrDialog.getQuestion());
}
On the OnClick you will have to do a getItem() and set that it was clicked.
Tell the listView that it's item have changed.
Hope it works.