Git Product home page Git Product logo

search's Introduction

API API Kotlin Version Maven Central License

DEPRECATED

Please use:

  • com.google.android.material.search.SearchBar
  • com.google.android.material.search.SearchView

Search

  • Search component for Android
  • Material You Design
  • Styling
  • Kotlin

Search

Api

  • Java = 1.8
  • Kotlin = 1.8

Add the dependency to your gradle file:

repositories {
    google()
    mavenCentral()
}

dependencies {
    implementation 'io.github.lapism:search:2.0.1'
}

Usage

        binding.materialSearchView.requestFocus()
        binding.materialSearchView.clearFocus()

MaterialSearchBar

        val toolbar = binding.materialSearchBar.getToolbar()
        setSupportActionBar(toolbar)

        binding.materialSearchBar.apply {
            navigationIconCompat = NavigationIconCompat.SEARCH
            setHint(getString(R.string.search))
            setOnClickListener {
                binding.materialSearchView.requestFocus()
            }
            setNavigationOnClickListener {
                binding.materialSearchView.requestFocus()
            }
        }

MaterialSearchView

        binding.materialSearchView.apply {
            addView(recyclerView)
            navigationIconCompat = NavigationIconCompat.ARROW
            setNavigationOnClickListener {
                binding.materialSearchView.clearFocus()
            }
            setHint(getString(R.string.search))
            setOnQueryTextListener(object : MaterialSearchView.OnQueryTextListener {
                override fun onQueryTextChange(newText: CharSequence) {
                    adapter.filter(newText)
                }

                override fun onQueryTextSubmit(query: CharSequence) {

                }
            })
            setOnFocusChangeListener(object : MaterialSearchView.OnFocusChangeListener {
                override fun onFocusChange(hasFocus: Boolean) {

                }
            })
        }

Layout

You have to use app theme Theme.Material3.* or Theme.MaterialComponents.*.

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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:fitsSystemWindows="false"
    tools:context=".activity.MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <!-- Simple MaterialToolbar extension -->
        <com.lapism.search.widget.MaterialSearchBar
            android:id="@+id/material_search_bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|enterAlways|snap" />

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"

        app:layout_behavior="@string/material_search_bar_scrolling_view_behavior"

        app:navGraph="@navigation/mobile_navigation" />

    <com.lapism.search.widget.MaterialSearchView
        android:id="@+id/material_search_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_anchor="@id/material_search_bar" />

    <BottomNavigationView
        android:id="@+id/bottom_navigation_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:orientation="vertical"
        app:layout_insetEdge="bottom"
        app:menu="@menu/menu_bottom_nav" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

XML attributes

<declare-styleable name="MaterialSearchBar">
    <attr name="search_navigationIconCompat" format="enum">
        <enum name="none" value="0" />
        <enum name="arrow" value="1" />
        <enum name="search" value="2" />
    </attr>
    <attr name="search_navigationIcon" format="reference" />
    <attr name="search_navigationContentDescription" format="reference" />
    <attr name="search_navigationBackgroundColor" format="reference" />
    <attr name="search_navigationElevation" format="dimension" />
    <attr name="search_radius" format="dimension" />
    <attr name="android:hint" />
    <attr name="android:layout_marginStart" />
    <attr name="android:layout_marginEnd" />
    <attr name="android:layout_marginTop" />
    <attr name="android:layout_marginBottom" />
</declare-styleable>

<declare-styleable name="MaterialSearchView">
    <attr name="search_navigationIconCompat" />
    <attr name="search_navigationIcon" />
    <attr name="search_navigationContentDescription" />
    <attr name="search_navigationBackgroundColor" />
    <attr name="search_navigationElevation" />
    <attr name="search_clearIcon" format="reference" />
    <attr name="search_dividerColor" format="reference" />
    <attr name="search_scrimColor" format="reference" />
    <attr name="android:hint" />
    <attr name="android:imeOptions" />
    <attr name="android:inputType" />
</declare-styleable>

Todo

Animation

  • animation like Google, needs help :)

Author

License

This project is licensed under the Apache License 2.0 - see the LICENSE file for details.

search's People

Contributors

lapism avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.