ListGridSwitchView

List Grid Switch View

platform API JitPack GitHub license

A lightweight List-Grid Switch View

GitHub issues GitHub forks GitHub stars GitHub contributors

Table of Contents

Purpose

This library provides a lightweight List-Grid Switch View that can be used to switch between list and grid modes. In Android projects, we often need to display a list of items in both list and grid modes. It’s easy to create a custom view for this purpose but it’s even easier to use this library. The switch view is highly customizable and can be used in both Kotlin and Java projects.

Features

Demo

Prerequisites

If you’re using old gradle versions, add this in your root build.gradle file (not your module build.gradle file):

allprojects {
    repositories {
        ...
        maven { url "https://jitpack.io" }
    }
}

If you’re using new gradle versions, add this in your root settings.gradle file (not your module build.gradle file):

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        ...
        maven { url "https://jitpack.io" }
    }
}

Dependency

Add this to your module’s build.gradle file (latest version JitPack):

dependencies {
    ...
    implementation 'com.github.CuteLibs:ListGridSwitchView:0.1.0'
}

or build.gradle.kts if you’re using Kotlin DSL:

dependencies {
    ...
    implementation("com.github.CuteLibs:ListGridSwitchView:0.1.0")
}

Usage

XML

<io.github.cutelibs.listgridswitchview.CustomListGridSwitchView
    android:id="@+id/customListGridSwitchView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

Kotlin

val switchView = binding.customListGridSwitchView
switchView.setListener { mode ->
    when (mode) {
        CustomListGridSwitchView.SwitchMode.LIST -> {
            // Handle list mode
        }

        CustomListGridSwitchView.SwitchMode.GRID -> {
            // Handle grid mode
        }
    }
}
switchView.shouldRememberState(true)

Java

CustomListGridSwitchView switchView = binding.customListGridSwitchView;
switchView.setListener(new Function1<CustomListGridSwitchView.SwitchMode, Unit>() {
    @Override
    public Unit invoke(CustomListGridSwitchView.SwitchMode mode) {
        switch (mode) {
            case LIST:
                // Handle list mode
                break;
            case GRID:
                // Handle grid mode
                break;
        }
        return null;
    }
});
switchView.shouldRememberState(true);

Customization

XML

<io.github.cutelibs.listgridswitchview.CustomListGridSwitchView
    android:id="@+id/customListGridSwitchView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:setMode="list" <!-- Sets the initial mode -->
    app:iconColor="@color/colorAccent" <!-- Color filter for the list and grid icons -->
    app:listIcon="@drawable/ic_list_custom_switch_view" <!-- Custom drawable for the list icon -->
    app:gridIcon="@drawable/ic_grid_custom_switchview" <!-- Custom drawable for the grid icon -->
    />

Kotlin

val switchView = binding.customListGridSwitchView

// returns the current mode
val currentMode = switchView.getCurrentMode()


// set custom list icon
switchView.setListIcon(ContextCompat.getDrawable(context, R.drawable.my_custom_list_icon))

// Set custom grid icon
switchView.setGridIcon(ContextCompat.getDrawable(context, R.drawable.my_custom_grid_icon))

// Set mode programmatically
switchView.setMode(CustomListGridSwitchView.SwitchMode.GRID)


// Set listener to observe mode changes
switchView.setListener { mode ->
    when (mode) {
        CustomListGridSwitchView.SwitchMode.LIST -> {
            // Handle list mode
        }

        CustomListGridSwitchView.SwitchMode.GRID -> {
            // Handle grid mode
        }
    }
}


// Tell the switch view to remember its state across app launches
switchView.shouldRememberState(true)

// Clear the saved state (use this when you want to reset the switch view's memory)
// switchView.clearState()

Java

CustomListGridSwitchView switchView = binding.customListGridSwitchView;

// Returns the current mode
CustomListGridSwitchView.SwitchMode currentMode = switchView.getCurrentMode();

// Set custom list icon
switchView.setListIcon(ContextCompat.getDrawable(this, R.drawable.my_custom_list_icon));

// Set custom grid icon
switchView.setGridIcon(ContextCompat.getDrawable(this, R.drawable.my_custom_grid_icon));

// Set mode programmatically
switchView.setMode(CustomListGridSwitchView.SwitchMode.GRID);

// Set listener to observe mode changes
switchView.setListener(new Function1<CustomListGridSwitchView.SwitchMode, Unit>() {
    @Override
    public Unit invoke(CustomListGridSwitchView.SwitchMode mode) {
        switch (mode) {
            case LIST:
                // Handle list mode
                break;
            case GRID:
                // Handle grid mode
                break;
        }
        return null;
    }
});

// Tell the switch view to remember its state across app launches
switchView.shouldRememberState(true);

// Clear the saved state (use this when you want to reset the switch view's memory)
// switchView.clearState();

Attributes and Methods

XML

| Attribute | Description | | — | — | | app:setMode | Sets the initial mode. | | app:iconColor | Color filter for the list and grid icons. | | app:listIcon | Custom drawable for the list icon. | | app:gridIcon | Custom drawable for the grid icon. |

Enums

enum class SwitchMode {
    LIST, GRID
}

| Enum | Description | | — | — | | LIST | List mode. | | GRID | Grid mode. |

Kotlin

| Method | Description | | — | — | | setMode(mode: SwitchMode) | Sets the initial mode. | | getCurrentMode() | Returns the current mode. | | setListIcon(drawable: Drawable?) | Sets a custom drawable for the list icon. | | setGridIcon(drawable: Drawable?) | Sets a custom drawable for the grid icon. | | setIconColor(color: Int) | Sets the color filter for the list and grid icons. | | setListener(listener: (SwitchMode) -> Unit) | Sets a listener to observe mode changes. | | shouldRememberState(shouldRemember: Boolean) | Tells the switch view to remember its state across app launches. | | clearState() | Clears the saved state (use this when you want to reset the switch view’s memory). |

Java

| Method | Description | | — | — | | setMode(SwitchMode mode) | Sets the initial mode. | | getCurrentMode() | Returns the current mode. | | setListIcon(Drawable drawable) | Sets a custom drawable for the list icon. | | setGridIcon(Drawable drawable) | Sets a custom drawable for the grid icon. | | setIconColor(int color) | Sets the color filter for the list and grid icons. | | setListener(Function1<SwitchMode, Unit> listener) | Sets a listener to observe mode changes. | | shouldRememberState(boolean shouldRemember) | Tells the switch view to remember its state across app launches. | | clearState() | Clears the saved state (use this when you want to reset the switch view’s memory). |

Notes

Contribute

Please fork this repository and contribute back using pull requests.

Any contributions, large or small, major features, bug fixes, are welcomed and appreciated.

Let me know which features you want in the future in Request Feature tab.

If this project helps you a little bit, then give a to Star ⭐ the Repo.

License

Copyright 2022 CuteLibs

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

 http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.