Buttons are the most used components in apps and they have app-specific actions. Buttons can havea 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.
Buttons have 3 properties in Monday Hero:
Title: The text displayed over the button.
Background Image: The image used as the background of the button. Mostly it used when there is a text over the button.
Image: Icons are good examples of image buttons. They designed for having app-specific actions.
If a button has only a background color, Monday Hero can automatically understand the background color of the button. It will be defined as a View with the color.
In this case, Monday Hero automatically understands the blue rectangle as View and gets background color from the rectangle. So, defining the "Follow" label as the Title of the button will be enough. How to create a button and add a property/class can be seen in the GIF below.
When the button is created, the generated code will be like below.
Generated iOS/Android Code
The button code created is added to the page with the styles. Constraints are defined in the Storyboard file.
//ProfilePageViewController.swift
import UIKit
class ProfilePageViewController: UIViewController {
// MARK: - Properties
//Connection from an Interface Builder to a UI component
// The button with an image and text
@IBOutlet private weak var followButton: UIButton!
@IBOutlet private weak var buttonImageView: UIImageView!
//Button with an only image
@IBOutlet private weak var profileButton: UIButton!
//Button with a text and background image
@IBOutlet private weak var loginButton: UIButton!
override func viewDidLoad() {
super.viewDidLoad()
setupViews()
setupLayout()
}
}
extension ProfilePageViewController {
private func setupViews() {
// The button with an image and text
followButton.layer.cornerRadius = 6
followButton.layer.masksToBounds = true
followButton.backgroundColor = UIColor.cerulean
followButton.setTitle(NSLocalizedString("follow", comment: ""),for: .normal)
followButton.setTitleColor(UIColor.daisy, for: .normal)
followButton.titleLabel?.font = UIFont.textStyle7
followButton.contentHorizontalAlignment = .leading
followButton.contentEdgeInsets = UIEdgeInsets(top: 6, left: 9 , bottom: 6, right: 9)
//Button with an only image
profileButton.setImage(UIImage(named: "profileIcon") , for: .normal)
//Button with a text and background image
loginButton.setTitle(NSLocalizedString("login", comment: ""),for: .normal)
loginButton.setTitleColor(UIColor.white, for: .normal)
loginButton.titleLabel?.font = UIFont.textStyle2
loginButton.contentHorizontalAlignment = .center
loginButton.setBackgroundImage(UIImage(named: "loginBackground") , for: .normal)
}
private func setupLayout() {
//Constraints are defined in Storyboard file.
}
}
The button code created and added to the page with the styles.
<!--activityUserProfile.xml-->
<!--The button with a background color and text-->
<Button
android:id="@+id/followButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/follow"
android:textAllCaps="false"
android:background="@drawable/followbutton_background_drawable"
style="@style/textStyle11"
android:textAlignment="textStart"
android:textColor="?attr/daisy"
android:paddingLeft="9dp"
android:paddingRight="9dp"
android:paddingTop="6dp"
android:paddingBottom="6dp"
android:layout_marginEnd="56dp"
android:layout_marginTop="42dp"
android:layout_marginBottom="37dp"
app:layout_constraintStart_toEndOf="@+id/profilPictureImageView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@+id/nolanAlexTextView"
app:layout_constraintBottom_toTopOf="@+id/alexanderNolanTextView"/>
<!--Button with an only image-->
<Button
android:id="@+id/profileButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAllCaps="false"
android:background="@android:color/transparent"
android:drawableBottom="@drawable/profileicon"
android:layout_marginEnd="23dp"
android:layout_marginBottom="13dp"
app:layout_constraintStart_toEndOf="@+id/buttonImageView"
app:layout_constraintEnd_toEndOf="@+id/baseView"
app:layout_constraintTop_toBottomOf="@+id/userPicturesBID"
app:layout_constraintBottom_toBottomOf="@+id/baseView"/>
<!--Button with a text and background image -->
<Button
android:id="@+id/loginButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="@string/login"
android:textAllCaps="false"
android:background="@android:color/transparent"
style="@style/textStyle15"
android:textAlignment="center"
android:textColor="?attr/white"
android:layout_marginStart="108dp"
android:layout_marginEnd="86dp"
android:layout_marginBottom="18dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@+id/rectangleView"
app:layout_constraintBottom_toBottomOf="parent"/>
<!--Drawables/followbutton_background_drawable.xml-->
<!--The button with a background color and text-->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="?attr/cerulean"/>
<corners android:radius="6dp"/>
</shape>
</item>
</selector>
That's all for creating buttons on Monday Hero.
Button examples with different properties.
Example of button creation that has a title in Monday Hero.
