Ok so like in the title I’m a complete newb when it comes to .apk development. What I want to create is a private APP for our DnD session, exclusively for spell list. I want the main menu to show buttons for the classes (Warrior, Bard, etc.). Each of these buttons should show another page where there are buttons for the spell level related to the selected class (Level 0, Level 1, etc.) Then those buttons should show a list of the spells related to these particular levels. Each spells should be listed with a simple description, but each spell should be clickable to show a dedicated page for the spell for further information on the specific spell.

Now that you know where I want to go, I have a problem. I made buttons for the mainactivity.kt with activity_main.xml (in a layout folder). Then I tried implementing fragments. I have a test named BardFragment.kt and it’s layout called fragment_bard.xml. But when I try the app, If I click the Bard Spell button, the fragment shows under the listed button, instead of appearing on another page or instance.

So here is the files I have (And yes it’s french, I’m from Quebec)

MainActivity.kt

package com.example.dndspellbooklist

import android.os.Bundle
import android.widget.Button
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.appcompat.app.AppCompatActivity
import androidx.fragment.app.Fragment

class MainActivity : AppCompatActivity() {



    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            setContentView(R.layout.activity_main)

            val buttonbarde = findViewById<Button>(R.id.button_barde)

            buttonbarde.setOnClickListener{
                showFragment(BardeFragment())}

        }
    }

    private fun showFragment(fragment: Fragment) {
        supportFragmentManager.beginTransaction()
            .replace(R.id.fragment_container, fragment)
            .addToBackStack(null)
            .commit()
    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button_barde"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="50dp"
        android:text="@string/sorts_de_barde" />

    <Button
        android:id="@+id/button_druide"
        android:layout_gravity="center"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:text="@string/sorts_de_druide" />

    <Button
        android:id="@+id/button_ensorceleur"
        android:layout_gravity="center"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:text="@string/sorts_d_ensorceleur" />

    <Button
        android:id="@+id/button_magicien"
        android:layout_gravity="center"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:text="@string/sorts_magicien" />

    <Button
        android:id="@+id/button_paladin"
        android:layout_gravity="center"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:text="@string/sorts_de_paladin" />

    <Button
        android:id="@+id/button_pretre"
        android:layout_gravity="center"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:text="@string/sorts_de_pr_tre" />

    <Button
        android:id="@+id/button_rodeur"
        android:layout_gravity="center"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:text="@string/sorts_de_r_deur" />

    <!-- Fragment container to display the selected fragment -->
    <FrameLayout
        android:id="@+id/fragment_container"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />
</LinearLayout>

BardeFragment.kt

package com.example.dndspellbooklist

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
import com.example.dndspellbooklist.R

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


    }
}

and fragment_barde.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="300dp"
    android:layout_gravity="center"
    android:layout_marginTop="50dp"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button_b0"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/level_0" />

    <Button
        android:id="@+id/button_b1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/level_1" />

    <Button
        android:id="@+id/button_b2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/level_2" />

    <Button
        android:id="@+id/button_b3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/level_3" />

    <Button
        android:id="@+id/button_b4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/level_4" />

    <Button
        android:id="@+id/button_b5"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/level_5" />

    <Button
        android:id="@+id/button_b6"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/level_6" />

    <Button
        android:id="@+id/button_b7"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/level_7" />

    <Button
        android:id="@+id/button_b8"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/level_8" />

    <Button
        android:id="@+id/button_b9"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/level_9" />
</LinearLayout>

Do you have any insight on what could be the problem?

P.S. I tried ChatGPT and youtube tutorials, some posts here and there….. But I’m a complete newb with Kotlin and Java. My only experience is HTML and VB