How can I code buttons to change layouts in Kotlin?

Question

I am trying to make a text-based choice game for Android, very similar to the game called "Magium"

https://play.google.com/store/apps/details?id=com.magiumgames.magium&hl=en

Users will choose from a few options by pressing respective buttons to progress the story. After a buttons press, I want the app to show another layout. Let's say there is only one button (named button1) in page1. Pressing it changes the layout to page2. I achieved this by:

button1.setOnClickListener {
setContentView(R.layout.page2)
}

Again, for simplicity, let's say there is only one button (named button2) in page2. I want to show page3 after user presses button2.

I added the same code below the previous code as:

button1.setOnClickListener {
setContentView(R.layout.page2)
}

button2.setOnClickListener {
setContentView(R.layout.page3)
}

However, the app doesn't open when I do this. I am just beginning to learn programming. Could someone point me in the right direction?

i think this is what you are looking for --> https://stackoverflow.com/questions/6121797/android-how-to-change-layout-on-button-click — Wini, Jul 10 '20 at 04:42

score 0 · Accepted Answer · answered Jul 10 '20 at 04:42

0

You should not, in most cases, call setContentView() multiple times. You can read more in this answer.

Is there a point to change the whole layout to only update the content of it? You should be updating the content of your UI when the user clicks, not inflating another layout.

answered Jul 10 '20 at 04:42

alvarezfmb

66
3

I have checked the link you shared and "viewFlipper" might be exactly what I needed. I will learn about it. Thanks! – Zufu Jul 13 '20 at 05:02

score 0 · Answer 2 · answered Jul 10 '20 at 05:03

Did you check if the clickListener for the second button is called? Maybe if you set the click listener before calling setContentView(R.layout.page2) is will not have the button displayed for you to register to it.

But i agree with alvarezfmb, you should use a better solution for changing the views, maybe Fragments or even hiding and showing views is better than this solution.

score 0 · Answer 3 · answered Jul 10 '20 at 09:02

You could use fragment.

First, use in your activity layout as a container of Fragment, here we give it a id like, android:id="+id/fragment_container"

Second, create a layout xml file for your fragment, here we give it a name, like fragment_page_3.xml

Then create a subclass of Fragment, and override its onCreateView() method, where you inflate your fragment's layout. Code here

    class Page3Fragment : Fragment() {

    override fun onCreateView(
            inflater: LayoutInflater,
            container: ViewGroup?,
            savedInstanceState: Bundle?
    ): View {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_page_3, container, false)
    }
}

Finally, in clickListener, you could use fragmentManager load your fragment, code like this:

button2.setOnClickListener {
    val fragment = Page3Fragment()
    val fm = supportFragmentManager
    fm.beginTransaction()
            .add(R.id.fragment_container,fragment)
            .commit()
}

I just want to give you some ideas.

You cannot write code like this, this is wrong implementation for your app because you may need several fragment and you need a Callbacks interface implemented by your activity.

If you could change your content of UI, it's a better way.

To learn more, you could refer https://developer.android.com/guide/components/fragments

How can I code buttons to change layouts in Kotlin?

3 Answers3