# 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. 

![](https://2355570332-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-MKoiOYms5cxc9s7YGQK%2F-MKokCwgbhlqJ83gQjCE%2Fplaceholder.png?alt=media\&token=907e2f50-7fea-49ee-a0e7-37dfb13d302f)

### 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 %}