Convert Figma logo to code with AI

mxn21 logoFlowingDrawer

swipe display drawer with flowing & bouncing effects.

2,567
468
2,567
3

Top Related Projects

The flexible, easy to use, all in one drawer library for your Android project. Now brand new with material 2 design.

DrawerLayout-like ViewGroup, where a "drawer" is hidden under the content view, which can be shifted to make the drawer visible.

Side menu with some categories to choose.

Material Design Search Bar for Android

:octocat: 📃 FoldingCell is a material design expanding content cell inspired by folding paper material made by @Ramotion

An Android library that allows you to easily create applications with slide-in menus. You may use it in your Android apps provided that you cite this project and include the license in your app. Thanks!

Quick Overview

FlowingDrawer is an Android library that provides a custom drawer implementation with a flowing animation effect. It offers a unique and visually appealing way to create sliding menus or navigation drawers in Android applications, enhancing the user experience with smooth transitions and customizable designs.

Pros

  • Attractive flowing animation effect for drawer opening and closing
  • Highly customizable with various styling options
  • Easy integration into existing Android projects
  • Supports both left and right drawer configurations

Cons

  • Limited documentation and examples
  • May not be suitable for projects requiring standard Material Design navigation drawers
  • Potential performance impact on older devices due to complex animations
  • Not actively maintained (last update was several years ago)

Code Examples

  1. Basic drawer setup:
mLeftDrawer = (FlowingDrawer) findViewById(R.id.drawerlayout);
mLeftDrawer.setMenuSize(300);
mLeftDrawer.setTouchMode(ElasticDrawer.TOUCH_MODE_BEZEL);
mLeftDrawer.setOnDrawerStateChangeListener(new ElasticDrawer.OnDrawerStateChangeListener() {
    @Override
    public void onDrawerStateChange(int oldState, int newState) {
        if (newState == ElasticDrawer.STATE_CLOSED) {
            Log.i("MainActivity", "Drawer STATE_CLOSED");
        }
    }

    @Override
    public void onDrawerSlide(float openRatio, int offsetPixels) {
        Log.i("MainActivity", "openRatio=" + openRatio + " ,offsetPixels=" + offsetPixels);
    }
});
  1. Programmatically open and close the drawer:
// Open the drawer
mLeftDrawer.openMenu();

// Close the drawer
mLeftDrawer.closeMenu();
  1. Customizing drawer appearance:
mLeftDrawer.setMenuBackground(R.drawable.menu_background);
mLeftDrawer.setMenuOverlayColor(Color.parseColor("#66000000"));
mLeftDrawer.setRadius(20);

Getting Started

  1. Add the JitPack repository to your project's build.gradle:
allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}
  1. Add the dependency to your app's build.gradle:
dependencies {
    implementation 'com.github.mxn21:FlowingDrawer:2.1.0'
}
  1. Include the FlowingDrawer in your layout XML:
<com.mxn.soul.flowingdrawer_core.FlowingDrawer
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawerlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:edMenuSize="260dp"
    app:edPosition="1">

    <!-- Your main content -->
    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <!-- Your menu content -->
    <com.mxn.soul.flowingdrawer_core.FlowingMenuLayout
        android:id="@+id/menulayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!-- Add your menu items here -->

    </com.mxn.soul.flowingdrawer_core.FlowingMenuLayout>

</com.mxn.soul.flowingdrawer_core.FlowingDrawer>

Competitor Comparisons

The flexible, easy to use, all in one drawer library for your Android project. Now brand new with material 2 design.

Pros of MaterialDrawer

  • More comprehensive and feature-rich, offering a wide range of customization options
  • Actively maintained with frequent updates and a large community
  • Supports multiple drawer types (e.g., standard, mini, and expandable drawers)

Cons of MaterialDrawer

  • Larger library size, which may impact app performance and size
  • Steeper learning curve due to its extensive features and options
  • May require more setup and configuration for basic use cases

Code Comparison

MaterialDrawer:

drawer = DrawerBuilder()
    .withActivity(this)
    .withToolbar(toolbar)
    .addDrawerItems(
        PrimaryDrawerItem().withName("Home"),
        SecondaryDrawerItem().withName("Settings")
    )
    .build()

FlowingDrawer:

mDrawer = (FlowingDrawer) findViewById(R.id.drawerlayout);
mDrawer.setTouchMode(ElasticDrawer.TOUCH_MODE_BEZEL);
mDrawer.setOnDrawerStateChangeListener(new ElasticDrawer.OnDrawerStateChangeListener() {
    @Override
    public void onDrawerStateChange(int oldState, int newState) {
        // Handle state changes
    }
});

MaterialDrawer offers a more declarative approach with a builder pattern, while FlowingDrawer uses a more traditional view-based setup. MaterialDrawer provides more built-in drawer item types, whereas FlowingDrawer focuses on the animation and touch behavior of the drawer itself.

DrawerLayout-like ViewGroup, where a "drawer" is hidden under the content view, which can be shifted to make the drawer visible.

Pros of SlidingRootNav

  • More customizable with various content layouts and animations
  • Supports both left and right drawer positions
  • Easier integration with existing projects due to its flexible implementation

Cons of SlidingRootNav

  • Slightly more complex setup process
  • May require more code to achieve basic functionality
  • Limited built-in menu item styles compared to FlowingDrawer

Code Comparison

FlowingDrawer:

mLeftDrawer = (FlowingDrawer) findViewById(R.id.drawerlayout);
mLeftDrawer.setMenuIcon(R.drawable.ic_menu);
mLeftDrawer.setMenuListener(new FlowingDrawer.MenuListener() {
    // Implement menu open/close callbacks
});

SlidingRootNav:

SlidingRootNavBuilder builder = new SlidingRootNavBuilder(this)
    .withMenuLayout(R.layout.menu_left_drawer)
    .withDragDistance(140)
    .withRootViewScale(0.7f)
    .withMenuOpened(false)
    .withContentClickableWhenMenuOpened(false)
    .inject();

Both libraries offer sliding drawer functionality, but SlidingRootNav provides more customization options and flexibility in terms of layout and animations. FlowingDrawer, on the other hand, offers a simpler implementation with a unique flowing animation effect. The choice between the two depends on the specific requirements of your project and the desired visual style.

Side menu with some categories to choose.

Pros of Side-Menu.Android

  • More visually appealing animations with customizable effects
  • Better documentation and usage examples
  • Larger community support and more frequent updates

Cons of Side-Menu.Android

  • Limited to side menu functionality only
  • Potentially higher learning curve due to more complex implementation

Code Comparison

Side-Menu.Android:

ResideMenu resideMenu = new ResideMenu(this);
resideMenu.setBackground(R.drawable.menu_background);
resideMenu.attachToActivity(this);
resideMenu.addMenuItem(menuItem, ResideMenu.DIRECTION_LEFT);

FlowingDrawer:

mDrawer = (FlowingDrawer) findViewById(R.id.drawerlayout);
mDrawer.setTouchMode(ElasticDrawer.TOUCH_MODE_BEZEL);
mDrawer.setOnDrawerStateChangeListener(new ElasticDrawer.OnDrawerStateChangeListener() {
    // Implementation
});

Side-Menu.Android offers a more specialized solution for creating side menus with advanced animations, while FlowingDrawer provides a more general-purpose drawer implementation with a unique flowing animation effect. Side-Menu.Android may be better suited for projects requiring highly customizable side menus, whereas FlowingDrawer might be preferred for its simplicity and distinctive visual style.

Material Design Search Bar for Android

Pros of MaterialSearchBar

  • Focused on search functionality, providing a more specialized and refined search experience
  • Offers material design-compliant search bar with customizable features
  • Includes built-in suggestions and history management

Cons of MaterialSearchBar

  • Limited to search functionality, less versatile for overall UI design
  • May require additional components for a complete navigation solution
  • Less suitable for creating complex drawer-based layouts

Code Comparison

MaterialSearchBar:

MaterialSearchBar searchBar = findViewById(R.id.searchBar);
searchBar.setHint("Search");
searchBar.setOnSearchActionListener(new MaterialSearchBar.OnSearchActionListener() {
    @Override
    public void onSearchStateChanged(boolean enabled) {
        // Handle search state change
    }
});

FlowingDrawer:

mDrawer = (FlowingDrawer) findViewById(R.id.drawerlayout);
mDrawer.setTouchMode(ElasticDrawer.TOUCH_MODE_BEZEL);
mDrawer.setOnDrawerStateChangeListener(new ElasticDrawer.OnDrawerStateChangeListener() {
    @Override
    public void onDrawerStateChange(int oldState, int newState) {
        // Handle drawer state change
    }
});

Summary

MaterialSearchBar is a specialized library for implementing material design search bars, while FlowingDrawer focuses on creating animated drawer layouts. MaterialSearchBar offers a refined search experience but is limited in scope, whereas FlowingDrawer provides more flexibility for overall UI design but may require additional components for search functionality.

:octocat: 📃 FoldingCell is a material design expanding content cell inspired by folding paper material made by @Ramotion

Pros of folding-cell-android

  • More visually appealing and interactive UI element
  • Supports both XML and programmatic implementation
  • Regularly maintained with recent updates

Cons of folding-cell-android

  • Limited to a specific folding animation style
  • Requires more complex implementation compared to a simple drawer
  • May not be suitable for navigation purposes

Code Comparison

FlowingDrawer implementation:

mDrawer = (FlowingDrawer) findViewById(R.id.drawerlayout);
mDrawer.setTouchMode(ElasticDrawer.TOUCH_MODE_BEZEL);
mDrawer.setOnDrawerStateChangeListener(new ElasticDrawer.OnDrawerStateChangeListener() {
    @Override
    public void onDrawerStateChange(int oldState, int newState) {
        // Handle state change
    }
});

folding-cell-android implementation:

final FoldingCell fc = (FoldingCell) findViewById(R.id.folding_cell);
fc.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        fc.toggle(false);
    }
});

Both libraries offer unique UI elements for Android applications. FlowingDrawer provides a customizable drawer with a flowing animation, ideal for navigation menus. folding-cell-android offers an interactive folding cell component, suitable for displaying expandable content in list views or other UI elements. The choice between the two depends on the specific UI requirements and design goals of the application.

An Android library that allows you to easily create applications with slide-in menus. You may use it in your Android apps provided that you cite this project and include the license in your app. Thanks!

Pros of SlidingMenu

  • More mature and widely adopted project with a larger community
  • Supports both left and right sliding menus
  • Offers more customization options and features

Cons of SlidingMenu

  • No longer actively maintained (last commit in 2016)
  • Uses older Android development practices and may not be compatible with modern Android projects
  • Heavier implementation compared to FlowingDrawer

Code Comparison

SlidingMenu:

SlidingMenu menu = new SlidingMenu(this);
menu.setMode(SlidingMenu.LEFT);
menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
menu.setShadowWidthRes(R.dimen.shadow_width);
menu.setBehindOffsetRes(R.dimen.slidingmenu_offset);

FlowingDrawer:

mDrawer = (FlowingDrawer) findViewById(R.id.drawerlayout);
mDrawer.setTouchMode(ElasticDrawer.TOUCH_MODE_BEZEL);
mDrawer.setOnDrawerStateChangeListener(new ElasticDrawer.OnDrawerStateChangeListener() {
    @Override
    public void onDrawerStateChange(int oldState, int newState) {
        // Handle state change
    }
});

Both libraries provide easy-to-use APIs for implementing sliding menus, but FlowingDrawer focuses on a more modern, fluid animation style. SlidingMenu offers more configuration options but requires more setup code. FlowingDrawer has a simpler implementation and is more suitable for projects seeking a specific animated drawer effect.

Convert Figma logo designs to code with AI

Visual Copilot

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

Try Visual Copilot

README

FlowingDrawer

Android Arsenal travis-ic

Showcase

swipe right to display drawer with flowing effects.

Download

Include the following dependency in your build.gradle file.

Gradle:

    repositories {
        jcenter()
    }

    dependencies {
        implementation 'com.mxn.soul:flowingdrawer-core:2.1.0'
        implementation 'com.nineoldandroids:library:2.4.0'
    }

V2.0.0 Features

  • The menu can be positioned along two edges:left and right .
  • Allows the drawer to be opened by dragging the edge or the entire screen.

Usage

For a working implementation of this project see the app/ folder and check out the sample app

activity_main.xml:

    <com.mxn.soul.flowingdrawer_core.FlowingDrawer
            xmlns:app="http://schemas.android.com/apk/res-auto"
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/drawerlayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:clipChildren="false"
            android:clipToPadding="false"
            app:edPosition="1"
            app:edMenuSize="260dp"
            app:edMenuBackground="#dddddd">

        <!--content-->
        <RelativeLayout
                android:id="@+id/content"
                android:layout_width="match_parent"
                android:layout_height="match_parent"/>

        <!--menu-->
        <com.mxn.soul.flowingdrawer_core.FlowingMenuLayout
                android:id="@+id/menulayout"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

            <FrameLayout
                    android:id="@+id/id_container_menu"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"/>

        </com.mxn.soul.flowingdrawer_core.FlowingMenuLayout>

    </com.mxn.soul.flowingdrawer_core.FlowingDrawer>

To use a FlowingDrawer, position FlowingDrawer as the root , position your primary content view as the first child with width and height of match_parent . Add FlowingMenuLayout as child views after the main content view . FlowingMenuLayout commonly use match_parent for height and width.

Don't set any background on FlowingMenuLayout or FlowingMenuLayout's children, it means their background should be transparent.

Don't set FlowingMenuLayout's width with a fixed width, it's not a useful way to change it's width .

You can change menu's attribute in FlowingDrawer layout node use custom attribute,like edMenuBackground,edMenuSize, edPosition.

Use edPosition attribute corresponding to which side of the view you want the drawer to emerge from: left or right.Left menu : edPosition =1 ; Right menu: edPosition =2 .

For more custom attribute ,you can see in attrs.xml.

MainActivity:

     mDrawer = (FlowingDrawer) findViewById(R.id.drawerlayout);
     mDrawer.setTouchMode(ElasticDrawer.TOUCH_MODE_BEZEL);
     mDrawer.setOnDrawerStateChangeListener(new ElasticDrawer.OnDrawerStateChangeListener() {
                 @Override
                 public void onDrawerStateChange(int oldState, int newState) {
                     if (newState == ElasticDrawer.STATE_CLOSED) {
                         Log.i("MainActivity", "Drawer STATE_CLOSED");
                     }
                 }

                 @Override
                 public void onDrawerSlide(float openRatio, int offsetPixels) {
                     Log.i("MainActivity", "openRatio=" + openRatio + " ,offsetPixels=" + offsetPixels);
                 }
             });

setTouchMode can allows the drawer to be opened by dragging the edge or the entire screen. setOnDrawerStateChangeListener can be used to monitor the state and motion of drawer views. Avoid performing expensive operations such as layout during animation as it can cause stuttering. ElasticDrawer.OnDrawerStateChangeListener offers default/no-op implementations of each callback method.

License

Copyright 2015 soul.mxn

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.