Android- Hide or Show Specific Layout & Views Efficiently

Last Updated : 29 Mar, 2024

In Android app development, managing the visibility of various layout and view components is a common task. To make buttons, text, images, and other elements appear/disappear based on user input, in some long process tasks or show different page layouts depending on the app’s state, developers often have to write repetitive code to handle these scenarios.

Let’s say we have to hide 5 TextViews and 3 ImageViews on button click. Then we have to set the visibility to invisible or gone of all 8 views and to make it visible again we have to set them manually. we can also put them under the same view group like making LinearLayout etc. But what if they are not in the same ViewGroup or you are not using the linear layout? Then we have to go for manually setting them up.

Thankfully, Android provides a powerful Layout that is constrained layout to ease this process and make layout management more efficient. One such method is the constraintlayout widget Groupclass, which allows developers to group multiple views together and manipulate their visibility collectively. We can use a constraint layout and put our views inside it and make management easier.

Benefits of Using ConstraintLayout Widget Group

Simplified Code: It allows developers to manipulate the visibility of multiple views with a single line of code, reducing the need for repetitive visibility toggling logic.
Improved Readability: By grouping related views, code becomes more organized and easier to understand, enhancing maintainability and reducing the likelihood of errors.
Enhanced Flexibility: constraintlayout widget Group provides a flexible way to dynamically adjust the UI based on changing requirements or user interactions, improving the overall user experience.

To utilize this feature, views are added to the Group by specifying their IDs in a comma.

Example – app:constraint_referenced_ids=”button1,button2″

button1 and button2 is the ids of button that we can hide and show. Here is a small example in XML

“```
<androidx.constraintlayout.widget.Group
    android:id="@+id/group"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:visibility="visible"
    app:constraint_referenced_ids="button1,button2" />
```
”

Lets deep dive in detail and see how we can use it effieciently

Project Setup

Start a project with an empty activity and name your project whatever you want we are naming it HideViews.
Language using Kotlin
Minimum SDK set to Android 7.0(Nougat)

A sample video is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Kotlin language.

Step by Step Implementation

Adding Dependencies in gradle file

implementation ‘androidx.constraintlayout:constraintlayout:2.1.4’

We are going to use viewbinding so don’t forget to enable it

buildFeatures {

viewBinding true

}

Configure the Layout

Open the activity_main layout file at res/layout/activity_main.xml, and replace it with the following code.

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

    <TextView
        android:id="@+id/tvOne"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="60dp"
        android:text="ONE"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toStartOf="@id/tvTwo"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tvTwo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="60dp"
        android:text="ONE"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toStartOf="@id/tvThree"
        app:layout_constraintStart_toEndOf="@id/tvOne"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tvThree"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="60dp"
        android:text="ONE"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/tvTwo"
        app:layout_constraintTop_toTopOf="parent" />

    <LinearLayout
        android:id="@+id/llOne"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:background="#D0D6B3"
        android:orientation="horizontal"
        android:padding="20dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tvTwo">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="start"
            android:layout_marginEnd="50dp"
            android:padding="5dp"
            android:text="Geeks"
            android:textSize="20sp"
            android:textStyle="bold" />

        <TextView

            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginStart="50dp"
            android:layout_marginEnd="20dp"
            android:padding="5dp"
            android:text="For"
            android:textSize="20sp"
            android:textStyle="bold" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="end"
            android:layout_marginStart="50dp"
            android:padding="5dp"
            android:text="Geeks"
            android:textSize="20sp"
            android:textStyle="bold" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/llTwo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:layout_marginTop="30dp"
        android:background="#EFEFEF"
        android:orientation="horizontal"
        android:padding="20dp"
        app:layout_constraintEnd_toStartOf="@id/tvSix"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/llOne">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="start"
            android:layout_marginEnd="50dp"
            android:padding="5dp"
            android:text="Four"
            android:textSize="20sp"
            android:textStyle="bold" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginStart="50dp"
            android:padding="5dp"
            android:text="Five"
            android:textSize="20sp"
            android:textStyle="bold" />

    </LinearLayout>

    <TextView
        android:id="@+id/tvSix"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end"
        android:layout_marginStart="50dp"
        android:layout_marginEnd="20dp"
        android:background="#A5D3AF"
        android:padding="10dp"
        android:text="Six"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="@id/llTwo"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/llTwo"
        app:layout_constraintTop_toTopOf="@id/llTwo" />


    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/btOne"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hide One"
        android:textAllCaps="false"
        app:layout_constraintBottom_toBottomOf="@id/btTwo"
        app:layout_constraintEnd_toStartOf="@id/btTwo"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@id/btTwo" />

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/btTwo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="30dp"
        android:text="Hide Two"
        android:textAllCaps="false"
        app:layout_constraintBottom_toTopOf="@id/btAll"
        app:layout_constraintEnd_toStartOf="@id/btThree"
        app:layout_constraintStart_toEndOf="@id/btOne" />

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/btThree"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hide Three"
        android:textAllCaps="false"
        app:layout_constraintBottom_toBottomOf="@id/btTwo"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/btTwo"
        app:layout_constraintTop_toTopOf="@id/btTwo" />

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/btAll"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="50dp"
        android:text="Show All"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />


    <androidx.constraintlayout.widget.Group
        android:id="@+id/clGroupOne"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="visible"
        app:constraint_referenced_ids="tvOne,tvTwo,tvThree" />

    <androidx.constraintlayout.widget.Group
        android:id="@+id/clGroupTwo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="visible"
        app:constraint_referenced_ids="llOne" />

    <androidx.constraintlayout.widget.Group
        android:id="@+id/clGroupThree"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="visible"
        app:constraint_referenced_ids="llTwo,tvSix" />

    <androidx.constraintlayout.widget.Group
        android:id="@+id/clGroupAll"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="visible"
        app:constraint_referenced_ids="tvTwo,tvOne,tvThree,llOne,llTwo,tvTwo,tvSix" />
  
</androidx.constraintlayout.widget.ConstraintLayout>

Kotlin code

In activity main class we are setting the visibility of viewgroups with the help of buttons. ConstraintLayout widget group will hide and show the visibility for us.

Kotlin

package com.example.hideviews

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import com.example.hideviews.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        // hide all text-views of text one at a time
        binding.btOne.setOnClickListener {
            binding.clGroupOne.visibility = View.INVISIBLE
        }

        binding.btTwo.setOnClickListener {
            binding.clGroupTwo.visibility = View.INVISIBLE
        }

        binding.btThree.setOnClickListener {
            binding.clGroupThree.visibility = View.INVISIBLE
        }

        binding.btAll.setOnClickListener {
            binding.clGroupAll.visibility = View.VISIBLE
        }
    }
}

And In this way we can handle multiple views easily without writing repetitive code and make our code more cleaner. Here is the output for what we have achieved.