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.
Output:
Share your thoughts in the comments
Please Login to comment...