Search Bar
Convert Search Bar component to iOS/Android code.
A search bar allows users to search values by typing text into a field.

Component's Property info for iOS/Android

iOS
Android
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.
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
1
//HomePageViewController.swift
2
import UIKit
3
4
class HomePageViewController: UIViewController {
5
6
//Connection from an Interface Builder to a UI component
7
@IBOutlet private weak var searchSongSearchBar: UISearchBar!
8
9
override func viewDidLoad() {
10
super.viewDidLoad()
11
setupViews()
12
}
13
}
14
15
extension HomePageViewController {
16
private func setupViews() {
17
18
//SearchBar properties
19
searchSongSearchBar.layer.cornerRadius = 10
20
searchSongSearchBar.layer.masksToBounds = true
21
searchSongSearchBar.setBackgroundImage(UIImage(), for: .any, barMetrics: .default)
22
searchSongSearchBar.placeholder = NSLocalizedString("search", comment: "")
23
if let placeholderInsidesearchSongSearchBar = searchSongSearchBar.value(forKey: "searchField") as? UITextField {
24
placeholderInsidesearchSongSearchBar.textColor = UIColor.flint
25
placeholderInsidesearchSongSearchBar.font = UIFont.textStyle
26
placeholderInsidesearchSongSearchBar.textAlignment = .left
27
}
28
}
29
}
Copied!
1
<!--activitySongList.xml-->
2
<SearchView
3
android:id="@+id/songSearchView"
4
android:layout_width="0dp"
5
android:layout_height="wrap_content"
6
android:iconifiedByDefault="false"
7
android:queryBackground="@android:color/transparent"
8
android:queryHint="@string/search"
9
android:textAlignment="textStart"
10
android:textColor="?attr/flint"
11
android:layout_marginStart="20dp"
12
android:layout_marginEnd="19dp"
13
android:layout_marginBottom="8dp"
14
app:layout_constraintStart_toStartOf="parent"
15
app:layout_constraintEnd_toEndOf="parent"
16
app:layout_constraintTop_toBottomOf="@+id/descriptionTextView"
17
app:layout_constraintBottom_toTopOf="@+id/itemBackgroundView"/>
Copied!
Last modified 1yr ago