# Convert to Search Bar

## Search Bar Design to Swift/Kotlin Code

A search bar allows users to search values by typing text into a field. 

![](/files/-MKokCwgbhlqJ83gQjCE)

### Component's Property info for iOS/Android

{% tabs %}
{% tab title="iOS" %}
It's called`SearchBar` in Swift language. It can have 2 properties on Monday Hero: 

\
**Text:** The initial text displayed by the text field. You can specify the text as a plain string or as an attributed string.\
**Placeholder:** A placeholder is a text displayed by the SearchBar when the string is empty. Typing any text into the text field hides this string. 
{% endtab %}

{% tab title="Android" %}
Searchbar is called`searchView`in Android and has `hint`property on Monday Hero.

\
\&#xNAN;**`Hint`:** A hint is a text displayed by the searchView when the string is empty. Typing any text into the text field hides this string. It's called placeholder in iOS.
{% endtab %}
{% endtabs %}

### Generated iOS/Android Code

Let's see the generated code. Monday Hero will generate it even the rectangle's `cornerRadius` value included.

{% tabs %}
{% tab title="iOS" %}

```swift
//HomePageViewController.swift 
import UIKit

class HomePageViewController: UIViewController {

//Connection from an Interface Builder to a UI component
@IBOutlet private weak var searchSongSearchBar: UISearchBar!

	override func viewDidLoad() {
		super.viewDidLoad()
		setupViews()
	}
}

extension HomePageViewController {
	private func setupViews() {
	
		//SearchBar properties
		searchSongSearchBar.layer.cornerRadius = 10
		searchSongSearchBar.layer.masksToBounds =  true 
		searchSongSearchBar.setBackgroundImage(UIImage(), for: .any, barMetrics: .default)
		searchSongSearchBar.placeholder = NSLocalizedString("search", comment: "")
		if let placeholderInsidesearchSongSearchBar = searchSongSearchBar.value(forKey: "searchField") as? UITextField {
					placeholderInsidesearchSongSearchBar.textColor = UIColor.flint
					placeholderInsidesearchSongSearchBar.font = UIFont.textStyle
					placeholderInsidesearchSongSearchBar.textAlignment = .left 
		}
	}
}	
```

{% endtab %}

{% tab title="Android" %}

```markup
<!--activitySongList.xml-->
<SearchView
	android:id="@+id/songSearchView"
	android:layout_width="0dp"
	android:layout_height="wrap_content"
	android:iconifiedByDefault="false"
	android:queryBackground="@android:color/transparent"
	android:queryHint="@string/search"
	android:textAlignment="textStart"
	android:textColor="?attr/flint"
	android:layout_marginStart="20dp"
	android:layout_marginEnd="19dp"
	android:layout_marginBottom="8dp"
	app:layout_constraintStart_toStartOf="parent"
	app:layout_constraintEnd_toEndOf="parent"
	app:layout_constraintTop_toBottomOf="@+id/descriptionTextView"
	app:layout_constraintBottom_toTopOf="@+id/itemBackgroundView"/>
```

{% endtab %}
{% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://learn.mondayhero.io/v1-mac-app/working-with-monday-hero/component-convert-to-ios-android-code/convert-search-bar-design-to-ios-android-code.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.