How to Create an Expandable CardView in Android?
Last Updated :
30 Aug, 2022
Expandable Cardview provides to create expansion panels without too much hassle and without writing boilerplate code. An expandable card view becomes quite useful when it comes to an efficient and systematic presentation of data or information on the screen. It is used in a variety of apps, for example, the Contacts app or the Gallery app. We are going to implement this project using both Java and Kotlin Programming Languages for Android.
Step by Step Implementation
Step 1: Create a New Project in Android Studio
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. The code for that has been given in both Java and Kotlin Programming Language for Android.
Step 2: Adding Dependency to the build.gradle File
Go to Module build.gradle file and add this dependency and click on Sync Now button.
implementation 'androidx.cardView:cardView:1.0.0'
Step 3: Add all the Required Drawable Resources to the Drawable Folder
Choose the drawable resources as per the requirement. Here, in the CardView, use two images of the GeeksforGeeks icons and 2 other icons to indicate either of the 'expand more' or 'expand less' options.
The following are the GeeksforGeeks icons used:
The image below shows the use of expansion icons:
The expansion icons used here are imported as a vector asset from the Android Studio itself. The steps for the same are as follows:
Right-click on the drawable resource folder > Go to new > Click on Vector Asset > The following box pops up > Click on the icon next to Clip Art
From the variety of icons shown, choose the following two icons:
ic_baseline_expand_more_24
ic_baseline_expand_less_24
Step 4: Working with the XML Files
In the XML file, create the entire layout along with the portion that you want to be displayed after the CardView is expanded. The basic idea here is to set the visibility of the expandable element to 'gone' or 'visible'.
Note: Set the visibility to 'gone' and not 'invisible' because 'gone' removes that particular element completely as if it was never there. However, 'invisible' only makes the element disappears while it still exists in the layout.
Next, go to the activity_main.xml file, which represents the UI of the project. Below is the code for the activity_main.xml file. Comments are added inside the code to understand the code in more detail.
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"
android:background="#E4E3E3"
tools:context=".MainActivity">
<!-- Base CardView -->
<androidx.cardview.widget.CardView
android:id="@+id/base_cardview"
style="@style/Base.CardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.473"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.021">
<!-- This is a ConstraintLayout for the entire CardView including the expandable portion -->
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="@+id/base_cardview"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.511"
tools:layout_editor_absoluteX="-55dp">
<!-- This is a ConstraintLayout for the fixed portion of the CardView. The elements that
lie within the fixed portion of the CardView can be constrained to this layout -->
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/fixed_layout"
android:layout_width="match_parent"
android:layout_height="150dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0">
<ImageView
android:id="@+id/icon"
android:layout_width="150dp"
android:layout_height="150dp"
android:src="@drawable/icon_one"
app:layout_constraintBottom_toBottomOf="@+id/fixed_layout"
app:layout_constraintEnd_toEndOf="@+id/fixed_layout"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="@+id/fixed_layout"
app:layout_constraintTop_toTopOf="@+id/fixed_layout"
app:layout_constraintVertical_bias="1.0" />
<TextView
android:id="@+id/heading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="GeeksforGeeks"
android:textColor="#006600"
android:textSize="25dp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="@+id/fixed_layout"
app:layout_constraintEnd_toEndOf="@+id/fixed_layout"
app:layout_constraintHorizontal_bias="0.926"
app:layout_constraintStart_toStartOf="@+id/fixed_layout"
app:layout_constraintTop_toTopOf="@+id/fixed_layout"
app:layout_constraintVertical_bias="0.198" />
<TextView
android:id="@+id/list_of_subjects"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginBottom="58dp"
android:text="List of subjects"
android:textSize="20dp"
app:layout_constraintBottom_toBottomOf="@+id/fixed_layout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.878"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/heading"
app:layout_constraintVertical_bias="0.0" />
<!-- This is ImageButton for the expansion icon -->
<ImageButton
android:id="@+id/arrow_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_baseline_expand_more_24"
app:layout_constraintBottom_toBottomOf="@id/fixed_layout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.802"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/list_of_subjects"
app:layout_constraintVertical_bias="0.0" />
</androidx.constraintlayout.widget.ConstraintLayout>
<!-- The following is the expandable portion whose visibility is initially set to 'gone'
The parent LinearLayout contains 3 child LinearLayouts that hold a subject name and an icon each -->
<LinearLayout
android:id="@+id/hidden_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/fixed_layout">
<!-- Child LinearLayout 1 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="20dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="10dp"
android:layout_marginBottom="10dp"
android:src="@drawable/gfg_icon_black" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:text="Database Management"
android:textColor="#000000"
android:textSize="20dp" />
</LinearLayout>
<!-- Child LinearLayout 2 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="20dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="10dp"
android:layout_marginBottom="10dp"
android:src="@drawable/gfg_icon_black" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:text="Data Structures"
android:textColor="#000000"
android:textSize="20dp" />
</LinearLayout>
<!-- Child LinearLayout 3 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="20dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="10dp"
android:layout_marginBottom="10dp"
android:src="@drawable/gfg_icon_black" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:text="Operating Systems"
android:textColor="#000000"
android:textSize="20dp" />
</LinearLayout>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
Step 5: Working with the MainActivity File
Go to the MainActivity File and refer to the following code. Below is the code for the MainActivity File. Comments are added inside the code to understand the code in more detail.
Java
import android.os.Bundle;
import android.transition.AutoTransition;
import android.transition.TransitionManager;
import android.view.View;
import android.widget.ImageButton;
import android.widget.LinearLayout;
import androidx.appcompat.app.AppCompatActivity;
import androidx.cardview.widget.CardView;
public class MainActivity extends AppCompatActivity {
ImageButton arrow;
LinearLayout hiddenView;
CardView cardView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
cardView = findViewById(R.id.base_cardview);
arrow = findViewById(R.id.arrow_button);
hiddenView = findViewById(R.id.hidden_view);
arrow.setOnClickListener(view -> {
// If the CardView is already expanded, set its visibility
// to gone and change the expand less icon to expand more.
if (hiddenView.getVisibility() == View.VISIBLE) {
// The transition of the hiddenView is carried out by the TransitionManager class.
// Here we use an object of the AutoTransition Class to create a default transition
TransitionManager.beginDelayedTransition(cardView, new AutoTransition());
hiddenView.setVisibility(View.GONE);
arrow.setImageResource(R.drawable.ic_baseline_expand_more_24);
}
// If the CardView is not expanded, set its visibility to
// visible and change the expand more icon to expand less.
else {
TransitionManager.beginDelayedTransition(cardView, new AutoTransition());
hiddenView.setVisibility(View.VISIBLE);
arrow.setImageResource(R.drawable.ic_baseline_expand_less_24);
}
});
}
}
import android.os.Build
import android.os.Bundle
import android.transition.AutoTransition
import android.transition.TransitionManager
import android.view.View
import android.widget.ImageButton
import android.widget.LinearLayout
import androidx.appcompat.app.AppCompatActivity
import androidx.cardview.widget.CardView
class MainActivity : AppCompatActivity() {
private lateinit var arrow: ImageButton
private lateinit var hiddenView: LinearLayout
private lateinit var cardView: CardView
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
cardView = findViewById(R.id.base_cardview)
arrow = findViewById(R.id.arrow_button)
hiddenView = findViewById(R.id.hidden_view)
arrow.setOnClickListener {
// If the CardView is already expanded, set its visibility
// to gone and change the expand less icon to expand more.
if (hiddenView.visibility == View.VISIBLE) {
// The transition of the hiddenView is carried out by the TransitionManager class.
// Here we use an object of the AutoTransition Class to create a default transition
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
TransitionManager.beginDelayedTransition(cardView, AutoTransition())
}
hiddenView.visibility = View.GONE
arrow.setImageResource(R.drawable.ic_baseline_expand_more_24)
} else {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
TransitionManager.beginDelayedTransition(cardView, AutoTransition())
}
hiddenView.visibility = View.VISIBLE
arrow.setImageResource(R.drawable.ic_baseline_expand_less_24)
}
}
}
}
Output: Run on Emulator
Similar Reads
How to Create a Credit Card Form in Android?
Many of the apps are having functionality that provides a beautiful UI for adding your Credit Cards inside their application and saving them. This type of functionality is seen in the CRED application where we can save our Credit Cards inside that application. In this article, we will be simply crea
4 min read
How to Make CardView Checkable In Android?
In Android, We can make a CardView checkable, which can be really a useful feature. If we want the user to select some items and want to display the items that the user has chosen then this one is the most important feature for us. A sample GIF is given below to get an idea about what we are going t
4 min read
How to Add Gradient to CardView in Android?
UI stands for User Interface, which represents the graphical interface that allows the user to interact with software or any other devices. It comprises some visual elements like Buttons, icons, text, and Images that allow users to steer and interact with the software. UI basically concentrate on cr
2 min read
CardView in Android With Example
CardView is a new widget in Android that can be used to display any sort of data by providing a rounded corner layout along with a specific elevation. CardView is the view that can display views on top of each other. The main usage of CardView is that it helps to give a rich feel and look to the UI
3 min read
How to Enable/Disable Button in Android?
The Enable/Disable Feature is used in many Android apps so the basic use of that feature is to prevent the user from clicking on a button until they will add all the required fields that have been asked. We are considering an example of email and password if the user has entered the email and passwo
3 min read
How to Change CardView Color When Selected in Android?
CardView is a UI component in Android Studio that provides a simple way to display content with a raised or elevated appearance. It's part of the Android Support Library, which means it's compatible with Android devices running Android 5.0 (API level 21) or higher. A sample video is given below to g
2 min read
How to Generate a PDF file in Android App?
There are many apps in which data from the app is provided to users in the downloadable PDF file format. So in this case we have to create a PDF file from the data present inside our app and represent that data properly inside our app. So by using this technique, we can easily create a new PDF accor
6 min read
How to Create an ImageButton in Android?
Nowadays, image buttons play a big role in making the android application more interactive and user-friendly. Be it any social media app like Instagram or Facebook or any shopping app or streaming app, each application uses this feature widely. In this article, we will take a look at the implementat
3 min read
How to Build a Simple Expense Calculator App in Android?
Pre-requisites: Android App Development Fundamentals for BeginnersGuide to Install and Set up Android StudioHow to Create/Start a New Project in Android Studio?Running your first Android appRecyclerView in Android with ExampleShared Preferences in Android with Example A simple expense calculator let
10 min read
Expandable News Feed in Android with Example
Many news applications use the Expandable type of view for displaying the news along with the categories. This type of feature will help to make the UI look better and also provides additional content in the same UI. This type of UI is used when you display different types of content inside your app
10 min read