Toggle hidden & visable text on button click – Kotlin Android Studio

Issue

I’m new to learning Kotlin and android studio and want to achieve a button that toggles text back and forth when clicked on.

For example, when I click the button for the first time my textView display is true. When I click it again it is invisible and after that visible etc.

A simple toggle button for my textView.

I don’t know if I need a loop or how I will proceed by disableing the element on every second click.

MainActivity.kt

   btn_click_me.setOnClickListener {

        textViewToggle.text = "Showing text"

    }

activity_main.xml

<Button
    android:id="@+id/btn_click_me"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="42dp"
    android:layout_marginBottom="7dp"
    android:text="@string/visa_g_m_texten"
    app:layout_constraintBottom_toTopOf="@+id/textViewToggle"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:ignore="UsingOnClickInXml" />


<TextView
    android:id="@+id/textViewToggle"
    android:layout_width="355dp"
    android:layout_height="0dp"
    android:layout_marginBottom="480dp"
    android:text="@string/denna_text_kommer_togglas_p_och_av_m_r_man_klickar_p_knappen_ovanf_r"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

Every answer is very much appreciated!

// Max

Solution

You can try this:

1- Declare a Boolean variable, to save the state of the click:

var boolean = true

2- Inside button.setOnClickListener add:

boolean = !boolean 

this line will change the Boolean value in each click. (The symbol "!" means "inverse", so if "boolean" was true, then "!boolean" is false).

3- Add your if statement, for example:

if (boolean) { // means: if the value is true
    textView.text = "true"
} else {
    textView.text = "false"
}

Your final code would be like:

button.setOnClickListener {
    boolean = !boolean // inverse the value when this button is clicked
    if (boolean) {
        textView.text = "true"
    } else {
        textView.text = "false"
    }
}

And if you want to change only the visibility of the text, just write this:

var boolean = true

button.setOnClickListener {
    boolean = !boolean
    textView.isVisible = boolean
}

Answered By – Mustafa Ahmed

Answer Checked By – Cary Denson (FlutterFixes Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *