Search Bar View

Search Bar is a Material Design component that helps users to search through a collection of content using a Search View component.

This implementation provides a direct input search bar that follows Material Design 3 guidelines while maintaining the ability to be customized.

Contents

1. Using search bar
2. Menu example
3. Implementation
4. Theming
5. Attributes
6. States

Using search bar

The search bar provides a text input field with search and clear icons. It supports both direct text input and search submission.

Installation

Add the dependency:

dependencies {
    implementation("com.github.IgniteCoders:SearchBarView:1.0.2")
}

Add the jitpack repository to you setting.gradle.kts:

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

Basic usage

<com.ignite.material.searchbarview.SearchBarView
    android:id="@+id/searchBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

Handling input

searchBar.setOnQueryTextChangeListener { newText ->
    // Handle text changes
}

searchBar.setOnQueryTextSubmitListener { query ->
    // Handle search submission
}

Menu example

Add actions to the trailing side using a standard menu resource.

1. Create a menu resource, e.g. res/menu/search_actions.xml:

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/action_filter"
        android:icon="@drawable/ic_filter_list"
        android:title="Filter"
        android:showAsAction="always" />
    <item
        android:id="@+id/action_voice"
        android:title="Voice"
        android:showAsAction="never" />
    <item
        android:id="@+id/action_settings"
        android:title="Settings"
        android:showAsAction="never" />
</menu>

2. Inflate the menu either via XML or programmatically:

XML:

<com.ignite.material.searchbarview.SearchBarView
    android:id="@+id/searchBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:menu="@menu/search_actions" />

Kotlin:

searchBar.inflateMenu(R.menu.search_actions)

3. Handle menu item clicks:

searchBar.setOnMenuItemClickListener { item ->
    when (item.itemId) {
        R.id.action_filter -> {
            // Open filter UI
            true
        }
        R.id.action_voice -> {
            // Start voice input
            true
        }
        R.id.action_settings -> {
            // Navigate to settings
            true
        }
        else -> false
    }
}

XML attributes example

<com.ignite.material.searchbarview.SearchBarView
    android:id="@+id/searchBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:hint="Search items..."
    app:textAppearance="@style/TextAppearance.Material3.BodyLarge"
    app:backgroundColor="?attr/colorSurfaceVariant"
    app:textColor="?attr/colorOnSurface"
    app:iconTint="?attr/colorOnSurfaceVariant" />

Implementation

Anatomy

1. Container
2. Leading search icon
3. Input text field
4. Trailing clear icon

Behavior

• The search bar expands to fill its layout width
• The clear icon appears when text is entered and clears the input when tapped
• Ripple effect is shown on touch when the search bar is not focused
• The input field gains focus when the container is tapped

Theming

Tokens

The search bar supports the following Material Design tokens:

• Container color: colorSurfaceVariant
• Container outline: colorOutline
• Input text color: colorOnSurface
• Hint and icon color: colorOnSurfaceVariant

Customization

All colors and dimensions can be customized through XML attributes or programmatically.

Attributes

Container attributes

Element	Attribute	Related method(s)	Default value
Height	app:height	setHeight()	56dp
Corner radius	app:cornerRadius	setCornerRadius()	28dp
Background color	app:backgroundColor	setBackgroundColor()	?attr/colorSurfaceVariant
Stroke color	app:strokeColor	setStrokeColor()	?attr/colorOutline
Stroke width	app:strokeWidth	setStrokeWidth()	0dp
Elevation	app:elevation	setElevation()	0dp

Text attributes

Element	Attribute	Related method(s)	Default value
Text appearance	app:textAppearance	setTextAppearance()	?attr/textAppearanceBodyLarge
Text color	app:textColor	setTextColor()	?attr/colorOnSurface
Text alignment	app:textCentered	setTextCentered()	false
Hint text	app:hint	setHint()	@string/search_hint
Hint text color	app:hintTextColor	setHintTextColor()	?attr/colorOnSurfaceVariant
Text size	app:textSize	setTextSize()	System default
Font family	app:textFont	setFontFamily()	System default
Text style	app:textStyle	-	normal

Icon attributes

Element	Attribute	Related method(s)	Default value
Search icon	app:leadingIcon	setLeadingIcon()	@drawable/ic_search
Clear icon	app:clearIcon	setClearIcon()	@drawable/ic_clear
Search icon size	app:leadingIconSize	setLeadingIconSize()	24dp
Clear icon size	app:clearIconSize	setClearIconSize()	24dp
Icon tint	app:iconTint	setIconTint()	?attr/colorOnSurfaceVariant

Input attributes

Element	Attribute	Related method(s)	Default value
Enabled	app:enabled	setEnabled()	true
Max lines	app:maxLines	setMaxLines()	1
Max length	app:maxLength	setMaxLength()	No limit
Input type	app:inputType	setInputType()	text
IME options	app:imeOptions	setImeOptions()	actionSearch

States

Enabled state

The search bar can be:

• Enabled (default)
• Disabled

<com.ignite.searchbarview.SearchBarView
    ...
    app:enabled="false" />

searchBar.isEnabled = false

Focus state

The search bar has two focus states:

• Unfocused: Shows ripple effect on touch
• Focused: Shows keyboard and allows text input

License

Copyright 2024 IgniteCoders
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.