How to convert MainActivity code to fragment in Android Kotlin

Question

I am trying to convert a main activity code to fragment in navigation drawer template. I have seen this post but this is in Java. Could I get some help and directions on how to convert the following main into a fragment slide?

My main:

package com.example.testingapp

import android.graphics.Color
import android.os.Bundle
import com.google.android.material.floatingactionbutton.FloatingActionButton
import com.google.android.material.snackbar.Snackbar
import androidx.appcompat.app.AppCompatActivity
import android.view.Menu
import android.view.MenuItem
import android.view.inputmethod.EditorInfo
import android.webkit.WebView
import android.webkit.WebViewClient
import android.widget.Button
import android.widget.EditText
import android.widget.Toast
class MainActivity : AppCompatActivity() {

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

        // Variable and constants declaration
        val btnShow = findViewById<Button>(R.id.btnShow)
        val editText = findViewById<EditText>(R.id.editText)
        val btnExit = findViewById<Button>(R.id.btnExit)
        val webview = findViewById<WebView>(R.id.webview)
        btnExit.setOnClickListener{
            finish()
        }

        // Function that runs when the showButton is clicked.
        // It takes one argument, which is the text entered by the user.
        // Then it loads a web page, using the text as a part of the url.
        btnShow.setOnClickListener{

            // Declare the text from editText
            val text = editText.text

            // Show the text from the user in a small toast window
            Toast.makeText(this, text, Toast.LENGTH_SHORT).show()

            // Make the webView
            webview.webViewClient = WebViewClient()
            webview.setBackgroundColor(Color.parseColor("#ffffff"))

        }
    }
}

main xml:

     <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/btnUpdate"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/btnExit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="24dp"
        android:backgroundTint="@color/colorPrimary"
        android:textColor="@android:color/white"
        android:text="Exit"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <Button
        android:id="@+id/btnShow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginBottom="24dp"
        android:backgroundTint="@color/colorPrimary"
        android:text="show temp"
        android:textColor="@android:color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent" />

    <WebView
        android:id="@+id/webview"
        android:layout_width="337dp"
        android:layout_height="386dp"
        android:layout_marginStart="32dp"
        android:layout_marginLeft="32dp"
        android:layout_marginEnd="32dp"
        android:layout_marginRight="32dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.581"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.213" />

    <EditText
        android:id="@+id/editText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:ems="10"
        android:hint="Enter sensor name"
        android:inputType="textPersonName"
        app:layout_constraintBottom_toTopOf="@+id/btnShow"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Goal: convert the above main code into a fragment in navigation drawer template

class GalleryFragment : Fragment() {

    private lateinit var galleryViewModel: GalleryViewModel

    override fun onCreateView(
            inflater: LayoutInflater,
            container: ViewGroup?,
            savedInstanceState: Bundle?): View? {
        galleryViewModel =
            ViewModelProvider(this).get(GalleryViewModel::class.java)
        val root = inflater.inflate(R.layout.fragment_gallery, container, false)
        val textView: TextView = root.findViewById(R.id.text_gallery)
        galleryViewModel.text.observe(viewLifecycleOwner, Observer {
            textView.text = it
        })
        return root 
    }
}

\

Answer 1

The answer you posted seems straight forward, but I see how Java could be difficult to understand to a new Kotlin Android Developer. I'd highly suggest you to give it a try though, learning a bit of Java could make you understand Kotlin better too.

I tried to answer with the fewest possible changes to your code, so it'll be more obvious how you can reproduce it in the future. There are just about three lines that changed.

import android.graphics.Color
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.webkit.WebView
import android.webkit.WebViewClient
import android.widget.Button
import android.widget.EditText
import android.widget.Toast
import androidx.fragment.app.Fragment

class MainFrag: Fragment() {
    override fun onCreateView(inflater: LayoutInflater,
                              container: ViewGroup?, savedInstanceState: Bundle?): View?
    = inflater.inflate(R.layout.activity_main, container, false).apply {

        // Variable and constants declaration
        val btnShow = findViewById<Button>(R.id.btnShow)
        val editText = findViewById<EditText>(R.id.editText)
        val btnExit = findViewById<Button>(R.id.btnExit)
        val webview = findViewById<WebView>(R.id.webview)
        btnExit.setOnClickListener { activity?.finish() }

        // Function that runs when the showButton is clicked.
        // It takes one argument, which is the text entered by the user.
        // Then it loads a web page, using the text as a part of the url.
        btnShow.setOnClickListener {

            // Declare the text from editText
            val text = editText.text

            // Show the text from the user in a small toast window
            Toast.makeText(context, text, Toast.LENGTH_SHORT).show()

            // Make the webView
            webview.webViewClient = WebViewClient()
            webview.setBackgroundColor(Color.parseColor("#ffffff"))
        }
    }
}

Answer 2

Updates: I have tried @rtsketo's suggestion. It seems that I could run the app. However, when I tried to run it and click this fragment (the gallery) with the navigation drawer template, the app would just crash. I am not too sure what goes wrong as it has no errors indicated.

class GalleryFragment:  Fragment() {
    override fun onCreateView(inflater: LayoutInflater,
                              container: ViewGroup?, savedInstanceState: Bundle?): View?
    = inflater.inflate(R.layout.activity_main, container, false).apply {

        // Variable and constants declaration
        val btnShow = findViewById<Button>(R.id.btnShow)
        val editText = findViewById<EditText>(R.id.editText)
        val btnExit = findViewById<Button>(R.id.btnExit)
        val webview = findViewById<WebView>(R.id.webview)
        btnExit.setOnClickListener { activity?.finish() }

        // Function that runs when the showButton is clicked.
        // It takes one argument, which is the text entered by the user.
        // Then it loads a web page, using the text as a part of the url.
        btnShow.setOnClickListener {

            // Declare the text from editText
            val text = editText.text

            // Show the text from the user in a small toast window
            Toast.makeText(context, text, Toast.LENGTH_SHORT).show()

            // Make the webView
            webview.webViewClient = WebViewClient()
            webview.setBackgroundColor(Color.parseColor("#ffffff"))
        }
    }
}

Updates 2: I tried @Nicola Gallazzi's suggestion to use onCreated method but it comes with Unresolved reference: findViewById

class GalleryFragment : Fragment() {
 override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // Variable and constants declaration
        val btnShow = findViewById<Button>(R.id.btnShow)
        val editText = findViewById<EditText>(R.id.editText)
        val btnExit = findViewById<Button>(R.id.btnExit)
        val webview = findViewById<WebView>(R.id.webview)
        btnExit.setOnClickListener { activity?.finish() }

        // Function that runs when the showButton is clicked.
        // It takes one argument, which is the text entered by the user.
        // Then it loads a web page, using the text as a part of the url.
        btnShow.setOnClickListener {

            // Declare the text from editText
            val text = editText.text

            // Show the text from the user in a small toast window
            Toast.makeText(context, text, Toast.LENGTH_SHORT).show()

            // Make the webView
            webview.webViewClient = WebViewClient()
            webview.setBackgroundColor(Color.parseColor("#ffffff"))

            // Declare and assign the url to get, and adding the text the user entered
            var urltoget = "http://my.domain.org/apk_handler_app.php?action="+text

            // Load the url
            webview.loadUrl(urltoget)

            // To hide the softkeyboard when editText misses focus.
            editText.onEditorAction(EditorInfo.IME_ACTION_DONE)
        }
    }
}