Button
Convert Button component to Android/iOS code.
Buttons are the most used components in apps and they have app-specific actions. Buttons can have a title, background, or image as property/class. They may include more than one property. A button can have both properties at the same time. For example, background and title, or title and image, etc.
You can convert rectangles, images and texts in your design into buttons on Monday Hero. All you need to do tagging the elements with the properties. They are already automatically selected by Monday Hero, incase it tags properties wrong you can reselect them anytime. Here are some button examples with the properties:
Button Examples
Buttons have 3 properties in Monday Hero:
Title: The text displayed over the button.
Background: It's the background of the button. It can be either an image or it can be a view like a rectangle.
Image: Icons are good examples of image buttons. They designed for having app-specific actions.
Here is another button example below. In this case, Monday Hero automatically understands the blue rectangle as View and gets background color from the rectangle. So, tagging the "Follow" text as the Title and the rectangle as Background will be enough. How to create a button and add a property/class can be seen in the GIF below.
Example of button creation that has a title in Monday Hero.
When the button is created, the generated code will be like below.

Generated iOS/Android Code

iOS
Android
The button code created is added to the page with the styles. Constraints are defined in the Storyboard file.
1
//ProfilePageViewController.swift
2
import UIKit
3
4
class ProfilePageViewController: UIViewController {
5
6
// MARK: - Properties
7
//Connection from an Interface Builder to a UI component
8
9
// The button with an image and text
10
@IBOutlet private weak var followButton: UIButton!
11
@IBOutlet private weak var buttonImageView: UIImageView!
12
13
//Button with an only image
14
@IBOutlet private weak var profileButton: UIButton!
15
16
//Button with a text and background image
17
@IBOutlet private weak var loginButton: UIButton!
18
19
override func viewDidLoad() {
20
super.viewDidLoad()
21
setupViews()
22
setupLayout()
23
}
24
}
25
26
extension ProfilePageViewController {
27
private func setupViews() {
28
29
// The button with an image and text
30
followButton.layer.cornerRadius = 6
31
followButton.layer.masksToBounds = true
32
followButton.backgroundColor = UIColor.cerulean
33
followButton.setTitle(NSLocalizedString("follow", comment: ""),for: .normal)
34
followButton.setTitleColor(UIColor.daisy, for: .normal)
35
followButton.titleLabel?.font = UIFont.textStyle7
36
followButton.contentHorizontalAlignment = .leading
37
followButton.contentEdgeInsets = UIEdgeInsets(top: 6, left: 9 , bottom: 6, right: 9)
38
39
//Button with an only image
40
profileButton.setImage(UIImage(named: "profileIcon") , for: .normal)
41
42
//Button with a text and background image
43
loginButton.setTitle(NSLocalizedString("login", comment: ""),for: .normal)
44
loginButton.setTitleColor(UIColor.white, for: .normal)
45
loginButton.titleLabel?.font = UIFont.textStyle2
46
loginButton.contentHorizontalAlignment = .center
47
loginButton.setBackgroundImage(UIImage(named: "loginBackground") , for: .normal)
48
}
49
50
private func setupLayout() {
51
//Constraints are defined in Storyboard file.
52
}
53
}
54
Copied!
The button code created and added to the page with the styles.
⚠️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.
1
<!--activityUserProfile.xml-->
2
<!--The button with a background color and text-->
3
<Button
4
android:id="@+id/followButton"
5
android:layout_width="match_parent"
6
android:layout_height="wrap_content"
7
android:text="@string/follow"
8
android:textAllCaps="false"
9
android:background="@drawable/followbutton_background_drawable"
10
style="@style/textStyle11"
11
android:textAlignment="textStart"
12
android:textColor="?attr/daisy"
13
android:paddingLeft="9dp"
14
android:paddingRight="9dp"
15
android:paddingTop="6dp"
16
android:paddingBottom="6dp"
17
android:layout_marginEnd="56dp"
18
android:layout_marginTop="42dp"
19
android:layout_marginBottom="37dp"
20
app:layout_constraintStart_toEndOf="@+id/profilPictureImageView"
21
app:layout_constraintEnd_toEndOf="parent"
22
app:layout_constraintTop_toBottomOf="@+id/nolanAlexTextView"
23
app:layout_constraintBottom_toTopOf="@+id/alexanderNolanTextView"/>
24
25
<!--Button with an only image-->
26
<Button
27
android:id="@+id/profileButton"
28
android:layout_width="wrap_content"
29
android:layout_height="wrap_content"
30
android:textAllCaps="false"
31
android:background="@android:color/transparent"
32
android:drawableBottom="@drawable/profileicon"
33
android:layout_marginEnd="23dp"
34
android:layout_marginBottom="13dp"
35
app:layout_constraintStart_toEndOf="@+id/buttonImageView"
36
app:layout_constraintEnd_toEndOf="@+id/baseView"
37
app:layout_constraintTop_toBottomOf="@+id/userPicturesBID"
38
app:layout_constraintBottom_toBottomOf="@+id/baseView"/>
39
40
<!--Button with a text and background image -->
41
<Button
42
android:id="@+id/loginButton"
43
android:layout_width="0dp"
44
android:layout_height="wrap_content"
45
android:text="@string/login"
46
android:textAllCaps="false"
47
android:background="@android:color/transparent"
48
style="@style/textStyle15"
49
android:textAlignment="center"
50
android:textColor="?attr/white"
51
android:layout_marginStart="108dp"
52
android:layout_marginEnd="86dp"
53
android:layout_marginBottom="18dp"
54
app:layout_constraintStart_toStartOf="parent"
55
app:layout_constraintEnd_toEndOf="parent"
56
app:layout_constraintTop_toBottomOf="@+id/rectangleView"
57
app:layout_constraintBottom_toBottomOf="parent"/>
Copied!
1
<!--Drawables/followbutton_background_drawable.xml-->
2
<!--The button with a background color and text-->
3
<selector xmlns:android="http://schemas.android.com/apk/res/android">
4
<item>
5
<shape android:shape="rectangle">
6
<solid android:color="?attr/cerulean"/>
7
<corners android:radius="6dp"/>
8
</shape>
9
</item>
10
</selector>
Copied!
That's all for creating buttons on Monday Hero.