Convert to Search Bar

Convert Search Bar component to iOS/Android code.
Search Bar Design to Swift/Kotlin Code
A search bar allows users to search values by typing text into a field. 
Component's Property info for iOS/Android
iOS
Android
iOS
It's calledSearchBar 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. 
Android
Searchbar is calledsearchViewin Android and has hintproperty on Monday Hero.
⚠️This feature is available in only Mac App. Web App support for Android is coming soon.
If you need to install the desktop app, click here.​

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 the placeholder in iOS.
Generated iOS/Android Code
Let's see the generated code. Monday Hero will generate it even the rectangle's cornerRadius value included.
iOS
Android
iOS
//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 
		}
	}
}	
Android
<!--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"/>
Convert to Status Bar
Convert to Lists and Grids
Last updated 1 month ago