Material Design Search View Layout, now implemented in Google Maps, Dialer, etc

Last update: Jun 29, 2022

THIS PROJECT IS DEPRECATED

Component is not maintained anymore.

Implementation of Lollipop+ Dialer and Google Maps.

DEMO

Screenshot

Add in View

Add to your layout by using the include tag.

<include layout="@layout/widget_search_bar"/>

API

This overlays the full activity and shows the fragment which you have assigned by using setExpandedContentFragment.

searchViewLayout.setExpandedContentFragment(this, new SearchStaticFragment());

If you want to animate your Toolbar too like the demo gif, you can enable it by using handleToolbarAnimation.

searchViewLayout.handleToolbarAnimation(toolbar);

Setting Background colors for Transition. Default should also work just fine:

// Create Drawable for collapsed state. Default color is android.R.color.transparent
ColorDrawable collapsed = new ColorDrawable(
    ContextCompat.getColor(this, R.color.colorPrimary));

// Create Drawable for expanded state. Default color is #F0F0F0
ColorDrawable expanded = new ColorDrawable(
    ContextCompat.getColor(this, R.color.default_color_expanded));

// Send both colors to searchViewLayout
searchViewLayout.setTransitionDrawables(collapsed, expanded);

Listen to search complete by:

searchViewLayout.setSearchListener(new SearchViewLayout.SearchListener() {
    @Override
    public void onFinished(String searchKeyword) {
        searchViewLayout.collapse();
        Snackbar.make(searchViewLayout, "Search Done - " + searchKeyword, Snackbar.LENGTH_LONG).show();
    }
});

Listen to collapse/expand animation by using setOnToggleAnimationListener. For eg the FAB in demo hides on expanded and shows on collapse.

searchViewLayout.setOnToggleAnimationListener(new SearchViewLayout.OnToggleAnimationListener() {
    @Override
    public void onStart(boolean expanded) {
        if(expanded) {
            fab.hide();
        } else {
            fab.show();
        }
    }

    @Override
    public void onFinish(boolean expanded) { }
});

Listen to search box complete by:

searchViewLayout.setSearchBoxListener(new SearchViewLayout.SearchBoxListener() {
    @Override
    public void beforeTextChanged(CharSequence s, int start, int count, int after) {
    }
    @Override
    public void onTextChanged(CharSequence s, int start, int before, int count) {
    }
    @Override
    public void afterTextChanged(Editable s) {
    }
});

Setting Hints

If you want to set hints in the view, there are three APIs. setCollapsedHint would come up in the default/collapsed state. setExpandedHint would work for expanded state i.e. after click the view and the keyboard is up. setHint would set both the hints in one go, use this you want to show the same hint in both the states.

searchViewLayout.setCollapsedHint("Collapsed Hint");
searchViewLayout.setExpandedHint("Expanded Hint");
searchViewLayout.setHint("Global Hint");

Setting Icons Use setCollapsedIcon, setExpandedBackIcon, setExpandedSearchIcon to setup icons according to your choice. The argument should be a DrawableRes

NOTES

  1. If you want to add a scrolling widget in your setExpandedContentFragment, add a onTouchListener and disallow the parent intercept by usingv.getParent().requestDisallowInterceptTouchEvent(true);Check out fragments in sample for the implement of ListView, RecyclerView and ScrollView.

    recyclerView.setOnTouchListener(new View.OnTouchListener() {
        // Setting on Touch Listener for handling the touch inside ScrollView
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            // Disallow the touch request for parent scroll on touch of child view
            v.getParent().requestDisallowInterceptTouchEvent(true);
            return false;
        }
    });
    
  2. The default height of the view is 120dp which is also present in the dimens.xml file as

    <dimen name="search_view_layout_approx_height">120dp</dimen>

    You can use it for adding margin on top of your main content layout.

GET

Available at jCenter and mavenCentral.

dependencies {
    compile 'xyz.sahildave:searchviewlayout:0.6'
}

CHANGELOG

0.6

  • Added support for API 15

0.5

  • Added support for fragment-v4

0.4

  • Moved anim files to /animator res dir

0.3

  • Added search edit text API
  • Larger touch target

0.2

  • Added APIs for setting icons
  • Improved animations by using onAnimationUpdate

0.1

  • Added hints API.
  • Added search_view_layout_approx_height

0.0.2

  • Added API setTransitionDrawables which solves crashes in < API 19

Contribute

Contribute by creating issues (tagged enhancement, bugs) in the repo or create a pull request.

GitHub

https://github.com/sahildave/Search-View-Layout
Comments
  • 1. Unable to scroll expanded fragment

    I've implemented a viewpager + tabs as the expanded fragment. Each viewpager has a recyclerview. I'm able to swipe left and right with no problems, however, swipping up/down is not possible!

    Reviewed by 3lywa at 2015-11-16 00:58
  • 2. When expanding with tab layout fragment gets cut off at bottom

    I am using ExpandedContentSupportFragment to expand a fragment that contains tabs, If I go into any of these tabs the bottom bit is cut off, almost as if there is a bit off the screen that can never be seen. Is there any fix to this?

    Reviewed by kiaanpillay at 2016-05-03 09:46
  • 3. Question: can the same animation be done for when switching between CardViews?

    Suppose I have multiple CardViews with different content and size, is it possible to animate between them nicely, so that it looks like the CardView changes its size?

    Reviewed by AndroidDeveloperLB at 2015-12-03 15:16
  • 4. Expanded search icon

    Adds expanded search icon. Search icon touch functions the same as the 'Search' soft keyboard button. Search icon only visible if search box has text inside of it.

    Reviewed by vguzzi at 2015-11-07 15:33
  • 5. GPL License

    I am evaluating the use of your Search-View-Layout library in our closed-source app. Unfortunately, the LICENSE-file in the root-folder specifies the usage of your library according to the GPL-2.0 license, which demands full source code disclosure even for the apps using your library.

    As it is not an option for me to disclose the apps' source code, I would like to propose a license-change to

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

    in order to enable developers of commercial apps to use your great library.

    If you want, I could create a pull request with the license-change from my forked repository.

    Reviewed by ajans at 2016-02-11 14:05
  • 6. Too small touch target for the back arrow

    While I like the design and behaviour of this lib a lot, there is a small, but important hurdle with it: when the search layout is expanded, the back arrow displayed on the left side has a way too small touch target. I think the best would be as high as the whole search layout, and the same width too (so it retains the 1:1 ratio).

    Now it's barely bigger than the arrow itself and really easy to miss. Please correct it, it would improve the usability a lot!

    Reviewed by balazsgerlei at 2015-12-16 18:51
  • 7. Fixes sahildave/Search-View-Layout#16

    Using FragmentTransaction.setCustomAnimations requires that the new android.animation framework aka Object Animator.

    Moving animation XML files to animator folder was enough to get that issue fixed.

    Reviewed by tfmend at 2016-02-04 18:45
  • 8. minSdkVersion 15 cannot be smaller than version 16 declared in library

    Error:Execution failed for task ':app:processDebugManifest'.
    > Manifest merger failed : uses-sdk:minSdkVersion 15 cannot be smaller than version 16 declared in library [xyz.sahildave:searchviewlayout:0.5] /home/User/Example/WORKSPASE/NewProject/app/build/intermediates/exploded-aar/xyz.sahildave/searchviewlayout/0.5/AndroidManifest.xml
        Suggestion: use tools:overrideLibrary="xyz.sahildave.widget" to force usage
    
    
    Reviewed by LOG-TAG at 2016-07-24 12:10
  • 9. Added clear button

    I've added the possibility to replace expanded search button with clear button. And you can still set custom icon to it. It seems quite useful for me.

    Reviewed by arso8 at 2016-02-07 00:21
This library provides a simple way to add a draggable sliding up panel (popularized by Google Music and Google Maps) to your Android application. Brought to you by Umano.
This library provides a simple way to add a draggable sliding up panel (popularized by Google Music and Google Maps) to your Android application. Brought to you by Umano.

Note: we are not actively responding to issues right now. If you find a bug, please submit a PR. Android Sliding Up Panel This library provides a simp

Aug 10, 2022
GoolgePlusLayout is a custom layout that plays animation on the children views while scrolling as the layout in the Google Plus (android) main page

Google Plus Layout Google Plus Layout is a custom layout that support playing animation on child view(s) in a serialize manner like the the main

Jun 24, 2022
A layout to transition between two views using a Floating Action Button as shown in many Material Design concepts
A layout to transition between two views using a Floating Action Button as shown in many Material Design concepts

⚠ This library is no longer maintained ⚠️ FABRevealLayout A layout to transition between two views using a Floating Action Button as shown in many Mat

Jul 22, 2022
A pull to refresh layout for android, the RecyclerRefreshLayout is based on the SwipeRefreshLayout. support all the views, highly customizable, code simplicity, etc. really a practical RefreshLayout!
A pull to refresh layout for android, the RecyclerRefreshLayout is based on the SwipeRefreshLayout. support all the views, highly customizable, code simplicity, etc.  really a practical RefreshLayout!

RecyclerRefreshLayout English | 中文版 RecyclerRefreshLayout based on the {@link android.support.v4.widget.SwipeRefreshLayout} The RecyclerRefreshLayout

Aug 17, 2022
Responsive Layout Gird Configuration using Compose. An adaptive layout
Responsive Layout Gird Configuration using Compose. An adaptive layout

ResponsiveGrid Responsive Grid is most followed layout system by the designer as it adapts to screen size and orientation, ensuring consistency across

Apr 12, 2022
A 3D Layout for Android,When you use it warp other view,it can became a 3D view,一秒让你的view拥有3D效果!
A 3D Layout for Android,When you use it warp other view,it can became a 3D view,一秒让你的view拥有3D效果!

ThreeDLayout A 3D Layout,When you use it warp other view,it can became a 3D view 中文文档 preview USAGE 1.compile library allprojects { repositories {

Jun 7, 2022
Aug 8, 2022
:octocat: 📃 FoldingCell is a material design expanding content cell inspired by folding paper material made by @Ramotion
:octocat: 📃  FoldingCell is a material design expanding content cell inspired by folding paper material made by @Ramotion

FOLDING CELL [JAVA] Expanding content cell with animation inspired by folding paper card material design. We specialize in the designing and coding of

Aug 8, 2022
Pixel perfect for design layout android

Pixelperfect Pixel perfect helps you design layouts according to the resolution of your users' device Follow the steps below to implement : dependen

Jun 12, 2022
Smooth version of Google Support Design AppBarLayout
Smooth version of Google Support Design AppBarLayout

smooth-app-bar-layout [Deprecated] ================ [DEPRECATED] The issue that is addressed in this library is fixed from support design 26.0.0 or ab

Aug 2, 2022
Android drawer icon with material design animation
Android drawer icon with material design animation

LDrawer Android drawer icon with material design animation Note Basically same as appcompat_v7 version 21, you can use appcompat_v7 compile 'com.andro

Jul 20, 2022
Navigation Drawer Activity with material design style and simplified methods

MaterialNavigationDrawer Navigation Drawer Activity with material design style and simplified methods       It requires 10+ API and android support v7

Aug 11, 2022
Android Sample Project with Material Design and Toolbar.

AndroidMaterialDesignToolbar -- PROJECT IS NOT SUPPORTED Android Sample Project with Material Design and Toolbar. Project use Appcompat library for ma

Jun 22, 2022
An implementation of tap targets from the Material Design guidelines for feature discovery.
An implementation of tap targets from the Material Design guidelines for feature discovery.

TapTargetView An implementation of tap targets from Google's Material Design guidelines on feature discovery. Min SDK: 14 JavaDoc Installation TapTar

Aug 17, 2022
Material Design tap target for Android. https://sjwall.github.io/MaterialTapTargetPrompt/
Material Design tap target for Android. https://sjwall.github.io/MaterialTapTargetPrompt/

Material Tap Target Prompt A Tap Target implementation in Android based on Material Design Onboarding guidelines. For more information on tap targets

Aug 9, 2022
Android Library that lights items for tutorials or walk-throughs etc...
Android Library that lights items for tutorials or walk-throughs etc...

Spotlight Gradle dependencies { implementation 'com.github.takusemba:spotlight:x.x.x' } Usage val spotlight = Spotlight.Builder(this) .setTarg

Aug 12, 2022
ViewStateLayout - Easy way to manage common state templates like loading, empty, error etc.!
ViewStateLayout - Easy way to manage common state templates like loading, empty, error etc.!

ViewStateLayout Easy way to manage common state templates like loading, empty, error etc.! How to Step 1. Add the JitPack repository to your build fil

Jul 17, 2022
An Android Layout which has a same function like https://github.com/romaonthego/RESideMenu

ResideLayout An Android Layout which has a same function like https://github.com/romaonthego/RESideMenu. Can be used on Android 1.6(I haven't try it.)

Apr 15, 2022
The Most Powerful Swipe Layout!
The Most Powerful Swipe Layout!

Android Swipe Layout ![Gitter](https://badges.gitter.im/Join Chat.svg) This is the brother of AndroidViewHover. One year ago, I started to make an app

Aug 11, 2022