Slidr

Easily add slide to dismiss functionality to an Activity

2,677

389

2,677

View on GitHub

Top Related Projects

InfiniteCycleViewPager

5,751

Infinite cycle ViewPager with two-way orientation and interactive effect.

VerticalViewPager

1,229

Vertically ViewPager and vertically transformer for Android.

ViewPagerIndicator

10,138

Paging indicator widgets compatible with the ViewPager from the Android Support Library and ActionBarSherlock.

CircleIndicator

4,266

A lightweight indicator like in nexus 5 launcher

PageIndicatorView

4,623

An page indicator for Android ViewPager

paper-onboarding-android

2,559

:octocat: PaperOnboarding is a material design slider made by @Ramotion

Quick Overview

Slidr is an Android library that provides a simple way to add slide-to-dismiss functionality to activities and fragments. It allows users to slide the current view off the screen in various directions to dismiss or navigate back, enhancing the user experience with smooth and intuitive gestures.

Pros

Easy integration with minimal setup required
Customizable slide directions (top, right, bottom, left)
Supports both activities and fragments
Provides callback methods for slide events

Cons

Limited to Android platform
May conflict with other gesture-based libraries or custom implementations
Requires careful consideration when used with complex layouts or scrollable content
Not actively maintained (last update was in 2018)

Code Examples

Basic setup in an Activity:

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    Slidr.attach(this)
}

Customizing slide direction:

val config = SlidrConfig.Builder()
    .position(SlidrPosition.TOP)
    .sensitivity(1f)
    .scrimColor(Color.BLACK)
    .scrimStartAlpha(0.8f)
    .scrimEndAlpha(0f)
    .velocityThreshold(2400f)
    .distanceThreshold(0.25f)
    .edge(true)
    .edgeSize(0.18f)
    .build()

Slidr.attach(this, config)

Using with a Fragment:

class MyFragment : Fragment() {
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        Slidr.attach(this)
    }
}

Getting Started

Add the dependency to your app's build.gradle file:

dependencies {
    implementation 'com.r0adkll:slidableactivity:2.1.0'
}

In your Activity or Fragment, attach Slidr:

// In Activity
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    Slidr.attach(this)
}

// In Fragment
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
    Slidr.attach(this)
}

Customize the slide behavior (optional):

val config = SlidrConfig.Builder()
    .position(SlidrPosition.LEFT)
    .sensitivity(1f)
    .scrimColor(Color.BLACK)
    .scrimStartAlpha(0.8f)
    .scrimEndAlpha(0f)
    .build()

Slidr.attach(this, config)

Competitor Comparisons

InfiniteCycleViewPager

5,751

Infinite cycle ViewPager with two-way orientation and interactive effect.

Pros of InfiniteCycleViewPager

Supports infinite cycling of views, allowing continuous scrolling
Offers customizable transformations and animations for view transitions
Provides built-in support for auto-scrolling functionality

Cons of InfiniteCycleViewPager

More complex implementation compared to Slidr's simpler sliding mechanism
May have higher memory usage due to the infinite cycling feature
Less suitable for simple sliding panel implementations

Code Comparison

InfiniteCycleViewPager:

<com.gigamole.infinitecycleviewpager.HorizontalInfiniteCycleViewPager
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:icvp_interpolator="@android:anim/accelerate_decelerate_interpolator"
    app:icvp_scroll_duration="250"
    app:icvp_center_page_scale_offset="30dp"
    app:icvp_min_page_scale_offset="5dp"
    app:icvp_max_page_scale="0.8"
    app:icvp_min_page_scale="0.55"
    app:icvp_medium_scaled="false"/>

Slidr:

Slidr.attach(this, new SlidrConfig.Builder()
        .position(SlidrPosition.LEFT)
        .sensitivity(1f)
        .scrimColor(Color.BLACK)
        .scrimStartAlpha(0.8f)
        .scrimEndAlpha(0f)
        .velocityThreshold(2400)
        .distanceThreshold(0.25f)
        .edge(true)
        .edgeSize(0.18f)
        .build());

VerticalViewPager

1,229

Vertically ViewPager and vertically transformer for Android.

Pros of VerticalViewPager

Specifically designed for vertical swiping, which can be more intuitive for certain app designs
Extends Android's native ViewPager, providing familiar functionality and easy integration
Supports both vertical and horizontal swiping, offering flexibility in implementation

Cons of VerticalViewPager

Less actively maintained, with fewer recent updates compared to Slidr
Limited to ViewPager functionality, while Slidr offers broader sliding capabilities
Fewer customization options and animation controls than Slidr

Code Comparison

VerticalViewPager implementation:

VerticalViewPager viewPager = (VerticalViewPager) findViewById(R.id.viewpager);
viewPager.setAdapter(new MyPagerAdapter());

Slidr implementation:

Slidr.attach(this, new SlidrConfig.Builder()
    .position(SlidrPosition.LEFT)
    .sensitivity(1f)
    .scrimColor(Color.BLACK)
    .build());

VerticalViewPager focuses on providing a vertical swiping experience for ViewPager, while Slidr offers a more comprehensive sliding interface for activities and fragments. VerticalViewPager is simpler to implement for specific use cases, but Slidr provides greater flexibility and customization options for sliding interactions throughout an app.

ViewPagerIndicator

10,138

Paging indicator widgets compatible with the ViewPager from the Android Support Library and ActionBarSherlock.

Pros of ViewPagerIndicator

More comprehensive and feature-rich, offering various indicator styles
Well-established and widely used in the Android community
Supports customization of indicator appearance and behavior

Cons of ViewPagerIndicator

Not actively maintained (last update in 2014)
Designed specifically for ViewPager, limiting its use with other UI components
May require additional work to integrate with modern Android development practices

Code Comparison

ViewPagerIndicator:

CirclePageIndicator indicator = (CirclePageIndicator)findViewById(R.id.indicator);
indicator.setViewPager(viewPager);
indicator.setSnap(true);

Slidr:

Slidr.attach(this);

ViewPagerIndicator focuses on providing customizable indicators for ViewPager, while Slidr is designed to add edge-to-edge sliding functionality to activities or fragments. ViewPagerIndicator requires more setup and configuration, whereas Slidr offers a simpler, one-line implementation for its core functionality.

ViewPagerIndicator is better suited for projects requiring detailed control over paging indicators, while Slidr is ideal for quickly adding sliding dismiss gestures to activities or fragments without the need for extensive customization.

CircleIndicator

4,266

A lightweight indicator like in nexus 5 launcher

Pros of CircleIndicator

Focused specifically on creating circular indicators for ViewPagers
Highly customizable appearance with various attributes
Lightweight and easy to integrate into existing projects

Cons of CircleIndicator

Limited to circular indicators only, less versatile than Slidr
Requires more manual setup for advanced customizations
May not be suitable for complex sliding layouts or animations

Code Comparison

CircleIndicator:

CircleIndicator indicator = findViewById(R.id.indicator);
ViewPager viewPager = findViewById(R.id.viewPager);
indicator.setViewPager(viewPager);

Slidr:

Slidr.attach(this);

CircleIndicator focuses on providing a simple API for adding circular indicators to ViewPagers, while Slidr offers a more comprehensive solution for implementing sliding panels and edge-to-edge interactions in Android applications.

CircleIndicator is ideal for projects that specifically need circular indicators for ViewPagers, offering extensive customization options for the indicator's appearance. However, it lacks the versatility of Slidr, which provides a broader range of sliding functionalities and can be applied to various UI elements.

Slidr's implementation is generally simpler, often requiring just a single line of code to attach sliding behavior to an activity. In contrast, CircleIndicator typically requires more setup, including XML layout configuration and programmatic binding to a ViewPager.

Both libraries serve different purposes and can be valuable additions to Android projects depending on the specific requirements of the application.

PageIndicatorView

4,623

An page indicator for Android ViewPager

Pros of PageIndicatorView

Offers a wide variety of customizable indicator styles and animations
Provides easy integration with ViewPager and RecyclerView
Supports both XML and programmatic configuration

Cons of PageIndicatorView

Limited to page indication functionality, not a full sliding panel solution
May require additional setup for complex layouts or custom behaviors

Code Comparison

PageIndicatorView:

val pageIndicatorView = findViewById<PageIndicatorView>(R.id.pageIndicatorView)
pageIndicatorView.count = 5 // Set the number of pages
pageIndicatorView.selection = 2 // Set the current selected page

Slidr:

Slidr.attach(this) // Attach sliding functionality to the activity

Summary

PageIndicatorView is a specialized library for creating customizable page indicators, offering various styles and animations. It's ideal for projects requiring detailed control over indicator appearance and behavior.

Slidr, on the other hand, is a more general-purpose library for adding sliding functionality to activities or fragments. It's simpler to implement but less focused on page indication.

Choose PageIndicatorView for projects needing sophisticated page indicators, especially with ViewPager or RecyclerView. Opt for Slidr when you need a quick and easy way to add sliding panel functionality to your app's UI.

paper-onboarding-android

2,559

:octocat: PaperOnboarding is a material design slider made by @Ramotion

Pros of paper-onboarding-android

Offers a visually appealing and interactive onboarding experience
Provides customizable animations and transitions
Includes a demo app for easy implementation and testing

Cons of paper-onboarding-android

Limited to onboarding screens, less versatile than Slidr
May require more setup and configuration for complex designs
Potentially higher learning curve for developers new to custom animations

Code Comparison

paper-onboarding-android:

val onBoardingPage = PaperOnboardingPage(
    "Title",
    "Description",
    Color.parseColor("#678FB4"),
    R.drawable.icon,
    R.drawable.icon_bg
)

Slidr:

Slidr.attach(this, new SlidrConfig.Builder()
    .position(SlidrPosition.LEFT)
    .sensitivity(1f)
    .scrimColor(Color.BLACK)
    .scrimStartAlpha(0.8f)
    .scrimEndAlpha(0f)
    .velocityThreshold(2400)
    .distanceThreshold(0.25f)
    .edge(true)
    .edgeSize(0.18f)
    .build()
);

paper-onboarding-android focuses on creating visually appealing onboarding experiences with customizable animations, while Slidr provides a more general-purpose sliding panel functionality. paper-onboarding-android may require more setup for complex designs but offers a polished onboarding solution. Slidr, on the other hand, is more versatile and can be used for various sliding interactions throughout an app.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Deprecated

This library is no longer supported as the modern convention of building Android apps switches from multi-Activity to single-Activity. If you are looking for similar behavior look into supporting Android's new predictive back handling

Slidr

Easily add slide-to-dismiss functionality to your Activity by calling Slidr.attach(this) in your onCreate(..) method.

Slidr Example

Usage

An example usage:

public class ExampleActivity extends <Activity|FragmentActivity|ActionBarActivity> {

	@Override
	public void onCreate(Bundle savedInstanceState){
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_example);
		int primary = getResources().getColor(R.color.primaryDark);
		int secondary = getResources().getColor(R.color.secondaryDark);
		Slidr.attach(this, primary, secondary);
	}

}

public class ExampleActivity extends <Activity|FragmentActivity|ActionBarActivity> {

	@Override
	public void onCreate(Bundle savedInstanceState){
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_example);
        	Slidr.attach(this);
	}

}

Fragments

The activity must extend FragmentActivity. Set the background to the main container of the activity in the xml background="@android:color/transparent". Add the following code to the Fragment:

// This interface is needed to see if the fragment
// is resuming after creation (Slidr to be attached) or
// simply from the background (app was paused before).
SlidrInterface slidrInterface;

@Override
public void onResume() {
    super.onResume();
    if(slidrInterface == null)
        slidrInterface = Slidr.replace(getView().findViewById(R.id.content_container), new SlidrConfig.Builder().position(SlidrPosition.LEFT).build());
}

In the xml of the fragment's view, the root view must be a FrameLayout with the same background set to the activity before. Add a child viewgroup to it with the id content_container. E.g.:

<FrameLayout
    android:id="@+id/main_container"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/transparent">
    
    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/content_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
	
		...other stuff

    </android.support.design.widget.CoordinatorLayout>
</FrameLayout>

Remember: you have to add new Fragments with:

getSupportFragmentManager().beginTransaction()
	.add(R.id.fragment_container, YourFragmentClass.newInstance())
	.commit();

where fragment_container is the id of a FrameLayout inside the activity's xml.

Configuring

SlidrConfig config = new SlidrConfig.Builder()
	.primaryColor(getResources().getColor(R.color.primary)
	.secondaryColor(getResources().getColor(R.color.secondary)
	.position(SlidrPosition.LEFT|RIGHT|TOP|BOTTOM|VERTICAL|HORIZONTAL)
	.sensitivity(1f)
	.scrimColor(Color.BLACK)
	.scrimStartAlpha(0.8f)
	.scrimEndAlpha(0f)
	.velocityThreshold(2400)
	.distanceThreshold(0.25f)
	.edge(true|false)
	.edgeSize(0.18f) // The % of the screen that counts as the edge, default 18%
	.listener(new SlidrListener(){...})
	.build();

Slidr.attach(this, config);

Slidr.attach(...) will return a SlidrInterface which gives you access to two methods:

SlidrInterface.lock();
SlidrInterface.unlock();

These methods lock or unlock the slidable touch interface.

The theme that you use for your sliding activity must have these attributes set:

<item name="android:windowIsTranslucent">true</item>  
<item name="android:windowBackground">@android:color/transparent</item>

Then in the layout of your activity you must give it a background like this;

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/background_material_light">

    ...

Including in your project

Include this line in your gradle build file:

implementation 'com.r0adkll:slidableactivity:2.1.0'

Author

Drew Heavner, r0adkll

License

Copyright (c) 2014 Drew Heavner

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.

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot