Search code examples
androidandroid-layout

How to manage visibility and enabled state of overlapping buttons in a ConstraintLayout?


I have two buttons in a ConstraintLayout in my Android application: startButton and stopButton. Both buttons have the same constraints, so they are positioned on top of each other. When the activity starts, I want only the startButton to be visible and clickable, while the stopButton should be invisible.

I'm currently using the following code to achieve this:

startButton.setVisibility(View.VISIBLE);
stopButton.setVisibility(View.INVISIBLE);

My question is:

  1. Is it necessary to also set the isEnabled property for both buttons, like this?
startButton.setEnabled(true);
stopButton.setEnabled(false);
  1. If setting isEnabled is necessary, why is it required?

I want to ensure that startButton is visible and clickable, and stopButton is completely hidden and not clickable when the activity starts.

Layout XML:

<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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/startButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Start"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <Button
        android:id="@+id/stopButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Stop"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Java Code:

public class MainActivity extends AppCompatActivity {

    private Button startButton;
    private Button stopButton;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        startButton = findViewById(R.id.startButton);
        stopButton = findViewById(R.id.stopButton);

        startButton.setVisibility(View.VISIBLE);
        stopButton.setVisibility(View.INVISIBLE);

        // Optional:
        // startButton.setEnabled(true);
        // stopButton.setEnabled(false);
    }
}

Initial State: startButton should be visible and clickable and stopButton should be invisible and not clickable. Do I need to explicitly set the isEnabled property for both buttons, or is managing the visibility (View.VISIBLE and View.INVISIBLE) sufficient for my requirements? Any detailed explanation or best practices would be appreciated.


Solution

  • Instead of setting stopButton.setVisibility(View.INVISIBLE); you can also set stopButton.setVisibility(View.GONE). When setting View.GONE the constraints are eased and the element "disappears". You can check this in layout view. When changing you can again set stopButton.setVisibility(View.VISIBLE). Using this method the isEnabled should not be necessary.

    Another option is to only use one button and instead of changing visibility you could also change the onClick parameter as well as the text parameter based on whether start or stop is desired.