Material, a UI/UX framework for creating beautiful iOS applications

Overview

Material

Material

Welcome to Material, a UI/UX framework for creating beautiful applications. Material's animation system has been completely reworked to take advantage of Motion, a library dedicated to animations and transitions.

Carthage compatible Accio supported Version License Xcode 8.2+ iOS 8.0+ Swift 4.0+ Donate

Photos Sample

Take a look at a sample Photos project to get started.

Photos

Sample Projects

Take a look at Sample Projects to get your projects started.

Features

  • Completely Customizable
  • Motion Animations & Transitions
  • Layout Tools for AutoLayout & Grid Systems
  • Color Library
  • Cards
  • FABMenu
  • Icons
  • TextField
  • Snackbar
  • Tabs
  • Chips
  • SearchBar
  • NavigationController
  • NavigationDrawer
  • BottomNavigationBar
  • Sample Projects
  • And More...

Requirements

  • iOS 8.0+
  • Xcode 8.0+

Communication

  • If you need help, use Stack Overflow. (Tag 'cosmicmind')
  • If you'd like to ask a general question, use Stack Overflow.
  • If you found a bug, and can provide steps to reliably reproduce it, open an issue.
  • If you have a feature request, open an issue.
  • If you want to contribute, submit a pull request.

Installation

Embedded frameworks require a minimum deployment target of iOS 8+.

CocoaPods

CocoaPods is a dependency manager for Cocoa projects. You can install it with the following command:

$ gem install cocoapods

To integrate Material's core features into your Xcode project using CocoaPods, specify it in your Podfile:

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '8.0'
use_frameworks!

pod 'Material', '~> 3.1.0'

Then, run the following command:

$ pod install

Carthage

Carthage is a decentralized dependency manager that builds your dependencies and provides you with binary frameworks.

You can install Carthage with Homebrew using the following command:

$ brew update
$ brew install carthage

To integrate Material into your Xcode project using Carthage, specify it in your Cartfile:

github "CosmicMind/Material"

Run carthage update to build the framework and drag the built Material.framework into your Xcode project.

Change Log

Material is a growing project and will encounter changes throughout its development. It is recommended that the Change Log be reviewed prior to updating versions.

Icons

Icons is a library of Google and CosmicMind icons that are available for use within your iOS applications.

Icon

Learn More

Colors

Try the Material Colors app to see the wonderful colors available in Material, or use the online version at MaterialColor.com.

MaterialColors

TextField

A TextField is an excellent way to improve UX. It allows for a placeholder and additional hint details.

TextField

Button

A button is used to trigger an action through a touch event. Material comes with a foundational button, and 4 specialized buttons that can be stylized in any way.

Material Image

Switch

A switch is a control component that toggles between on and off states.

Material Image

Card

A Card is a flexible component that may be configured in any way you like. It has a Toolbar, Bar, and content area that may utilize any UIView type.

Material Image

ImageCard

An ImageCard is an expansion of the base Card. The Toolbar overlays an image area that sits above the dynamic content area.

Image Card Sample

PresenterCard

The PresenterCard is a completely new card style. It allows for a primary presentation area that may be any UIView type in addition to the content area, Toolbar, and Bar components. The options for this card are endless.

Presenter Card Sample

FABMenu

A FABMenu manages a collection of views. A new MenuItem type has been added that manages a title and button to improve UX and visual beauty.

Material Image

Toolbar

Toolbars are super flexible and add excellent control to your navigation flow. They manage a set of left and right views with auto aligning title and detail labels.

Material Image

SearchBar

A SearchBar is a powerful navigation tool that allows for user's input with an instant visual response. A set of left and right views may be added to expand functionality.

SearchBarController

Tabs

Tabs is a new component that links a customizable TabBar to a stack of view controllers making a powerful and visually pleasing component to have in any application.

Tabs

NavigationController

A NavigationController is a specialized view controller that manages a hierarchy of content efficiently, making it easier for users to move within an application.

Material Image

NavigationDrawer

A NavigationDrawer slides in from the left or right and contains the navigation destinations for your application.

Material Image

Snackbar

A Snackbar is a new component that is very simple in its behavior and very powerful in its message. It can be used application wide, or isolated to specific view controllers.

Material Image

Sticker Sheet

To help template your project, checkout Material Sticker Sheet.

MaterialStickerSheet

Much More...

So much more inside. Enjoy!

License

The MIT License (MIT)

Copyright (C) 2019, CosmicMind, Inc. http://cosmicmind.com. All rights reserved.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Comments
  • TextField looks drastically different after Swift rewrite

    TextField looks drastically different after Swift rewrite

    I am in the process of updating our app to use Swift 3 and Material is one of the dependencies I've had to update. I am using release 2.2.5.

    There are three big issues I am seeing:

    1. Placeholder text does not appear until some text is entered into the text field.

    2. placeholderActiveColor is being ignored. The color of the placeholder text does not change if the text field becomes the first responder.

    3. The placeholder label now appears to be in a different position. We use snapshot tests to ensure our UI does not change accidentally and all of our uses of Material's TextField seem to have the placeholder label shift up by about 20 pixels.

    I am currently using Xcode 8.1 GM and building against the iOS 10 SDK.

    I will continue to investigate to try and figure out what the issue could be. These seem like core components of the TextField so I have to imagine it isn't behaving like this for everyone but looking at our code we are not doing anything unique with our text fields.

    regression 
    opened by reidmain 55
  • FlatButton Pulse

    FlatButton Pulse

    Hello all, it is possible to change the Pulse of the FlatButton from rectangular to circle? Like it is on Android.

    If not, it is possible to reduce the size of the pulse?

    Thank you very much in advance

    Marco.

    help wanted 
    opened by MarcoCarnevali 47
  • Temporary Issue: MTextField

    Temporary Issue: MTextField

    @danieldahan I think we need a fresh issue to talk about the new TextField

    I have started to test on it and I will update tis post as we go to inform you about the situation.

    Issues:

    • [x] Placeholder And title label doesn't respect the text alignment of the TextField. (Remember the TextView issue?)
    • [x] Cannot set the highlight color for PlaceholderLabel

    Thoughts:

    • The animation is much smoother now.
    enhancement 
    opened by mohpor 43
  • TextField titleLabel issues

    TextField titleLabel issues

    Hi Guys,

    In the recent update of the library, we have got new implementations of the TextField, we have an issue with the titleLabel animation. The titleLabel doesn't come back when nothing is typed (or when the text field is empty) in the TextField. We have gone through the implementation, we figured out that the hideTitleLabel function is not called when the handleEditingDidEnd if the text is empty.

    Also, in the library, we have been using CGRectNull in many places but it is crashing at sometimes, a solution that we found is to replace CGRectNull to CGRectZero. http://stackoverflow.com/questions/32919051/sublayer-with-non-finite-position-inf-inf

    bug help wanted 
    opened by posaninagendra 37
  • Swift 4.2 Support

    Swift 4.2 Support

    Hi,

    There are 289 warnings when I try to build my current Material on XCode 10, with Swift 4.2 on.

    I check for new Material (by pod outdated) but no new version yet?

    When would you release new version?

    Thanks

    good first issue high priority material 
    opened by quanguyen 32
  • Carthage update is failing

    Carthage update is failing

    Versions:

    • Running Xcode 9.0
    • Material 2.11.2

    I am using Carthage as my package manager and within the last two days I have not been able to get the project to build because of this error dyld: Library not loaded: @rpath/Motion.framework/Motion Referenced from: /Users/macmedan/Library/Developer/CoreSimulator/Devices/43F98839-6A55-4C7F-917A-196EB7585DDC/data/Containers/Bundle/Application/4EF67EC1-9605-4AB7-9E5C-B0ECC9846C7D/Shipper Dev.app/Frameworks/Material.framework/Material Reason: image not found

    I have also noticed that this gets executed now when I do a carthage update A shell task (/usr/bin/env git clone --quiet [email protected]:CosmicMind/Motion.git

    I am using material version 2.11.2 and 2.11.0 gave me the same issue.

    Any guidance would be greatly appreciated.

    help wanted investigate good first issue 
    opened by MacMeDan 28
  • Possibility to make the SnackbarController from a UITabBarController ?

    Possibility to make the SnackbarController from a UITabBarController ?

    Hi,

    I want to use your awesome SnackBar by using the SnackbarController but my main VC is a UITabBarController ! Can you help me on this ?

    Moreover, do I need to instanciate my UITabBarController manually in AppDelegate ? (it's not the case for now ...)

    Thanks a lot :)

    help wanted 
    opened by Arkezis 28
  • TextView not working

    TextView not working

    I have a problem implementing the TextView, I'm getting an error on these lines (when setting the placeholder label of the TextView). There's some optimization error I get in the debugger log.

        textView.placeholderLabel = UILabel()
        textView.placeholderLabel!.textColor = MaterialColor.grey.base
        textView.placeholderLabel!.text = "Description"
    
    help wanted 
    opened by vishiswoz 28
  • Square shadow in FabButton

    Square shadow in FabButton

    Hi,

    There is a weird shadow under a FabButton. Here is a video:

    https://youtu.be/O4CIaIu7eow

    It not always happens. Sometimes the square doesn't appear and it is alright and other times it happens like the video shows. When the button is tapped, the square shadow disappears and everything goes right.

    ¿Any idea? I have tried to tweek some shadow parameters but it does not work

    Thanks

    help wanted 
    opened by urizev 27
  • NavigationDrawerController and menu button

    NavigationDrawerController and menu button

    if press on menu button on navigation bar and move finger to left, the left view controller will close, but the content view stay on screen, and block the user interactions.

    nov-20-2017 15-54-39

    help wanted investigate good first issue high priority material 
    opened by ayham-achami 26
  • Wrong TextField Placeholder text (and titleLabel text) after changing Placeholder + Refocus focus

    Wrong TextField Placeholder text (and titleLabel text) after changing Placeholder + Refocus focus

    Steps to reproduce:

    1. Setup a TextField and set a placeholder text
    2. Start typing
    3. (While still focused) Clear the text field programmatically and change the placeholder string (Placeholder will be right at this point)
    4. Focus on the text field
    5. Leave the text field (at this point the placeholder string will get back to the original value)

    Reason:

    showTitleLabel() uses a variable called placeholderText to store the placeholder string before removing it from the text field. hideTitleLabel() uses the same variable to restore the placeholder string. Now if the placeholder value gets updated while the title label is displaying (between a call to the mentioned methods), the placeholderText variable doesn't get updated, and when hideTitleLabel() gets called, it will set the placeholder value back to the the last time showTitleLabel() has updated it.

    Resolution:

    Simple: ~~Move the placeholderText setter line to the didSet of the placeholder~~ (not a good idea)


    I will submit a PR ASAP

    bug 
    opened by mohpor 24
  •  Cycle in dependencies between targets 'Material' and 'Motion'; building could produce unreliable results.

    Cycle in dependencies between targets 'Material' and 'Motion'; building could produce unreliable results.

    When I use use_modular_headers! in Podfile ,pod 'Material' ,i got this error. Showing All Errors Only Cycle in dependencies between targets 'Material' and 'Motion'; building could produce unreliable results. Cycle path: Material → Motion → Material Cycle details: → Target 'Material' has a command with output '/Users/test/Library/Developer/Xcode/DerivedData/snack-cdujtgzquuqznrefmfahomuccaiw/Build/Products/UAT_α-iphoneos/Material/libMaterial.a' ○ Target 'Material' has target dependency on Target 'Motion' → Target 'Motion': Ditto /Users/test/Library/Developer/Xcode/DerivedData/snack-cdujtgzquuqznrefmfahomuccaiw/Build/Products/UAT_α-iphoneos/Motion/Motion.swiftmodule/Project/armv7.swiftsourceinfo /Users/test/Library/Developer/Xcode/DerivedData/snack-cdujtgzquuqznrefmfahomuccaiw/Build/Intermediates.noindex/Pods.build/UAT_α-iphoneos/Motion.build/Objects-normal/armv7/Motion.swiftsourceinfo ○ Target 'Motion' has compile command for Swift source files ○ That command depends on command in Target 'Motion': script phase “Copy generated compatibility header” ○ Target 'Motion': SwiftMergeGeneratedHeaders /Users/test/Library/Developer/Xcode/DerivedData/snack-cdujtgzquuqznrefmfahomuccaiw/Build/Intermediates.noindex/Pods.build/UAT_α-iphoneos/Motion.build/DerivedSources/Motion-Swift.h /Users/test/Library/Developer/Xcode/DerivedData/snack-cdujtgzquuqznrefmfahomuccaiw/Build/Intermediates.noindex/Pods.build/UAT_α-iphoneos/Motion.build/Objects-normal/arm64/Motion-Swift.h /Users/test/Library/Developer/Xcode/DerivedData/snack-cdujtgzquuqznrefmfahomuccaiw/Build/Intermediates.noindex/Pods.build/UAT_α-iphoneos/Motion.build/Objects-normal/armv7/Motion-Swift.h ○ Target 'Motion' has compile command for Swift source files

    opened by Garretming 0
  • FABButton is rotated weird

    FABButton is rotated weird

    Hey. What's wrong?

    ` func setupFloatingMenu(){ self.floatingMenu.fabMenuItemSize = CGSize.init(width: 45, height: 45); self.floatingMenu.shapePreset = .circle; self.floatingMenu.delegate = self;

        var menuButton = FABButton(image: Icon.add, tintColor: .white);
        menuButton.backgroundColor = #colorLiteral(red: 0.1886929572, green: 0.4163666964, blue: 0.951190412, alpha: 1)
        menuButton.pulseColor = .white;
        self.floatingMenu.fabButton = menuButton;
        
        var reviewItem = FABMenuItem();
        reviewItem.title = "수강후기";
        reviewItem.titleLabel.fontSize = 13;
        reviewItem.titleLabel.textColor = .white;
        reviewItem.titleLabel.backgroundColor = .clear;
        reviewItem.fabButton.shadowColor = .black;
        reviewItem.fabButton.image = #imageLiteral(resourceName: "iconFreeReview");
        reviewItem.fabButton.backgroundColor = .white;
        reviewItem.fabButton.pulseColor = #colorLiteral(red: 0.1886929572, green: 0.4163666964, blue: 0.951190412, alpha: 1);
        
        var buyItem = FABMenuItem();
        buyItem.title = "수강신청";
        buyItem.titleLabel.fontSize = 13;
        buyItem.titleLabel.textColor = .white;
        buyItem.titleLabel.backgroundColor = .clear;
        buyItem.fabButton.shadowColor = .black;
        buyItem.fabButton.image = #imageLiteral(resourceName: "iconFreeBuy");
        buyItem.fabButton.backgroundColor = .white;
        buyItem.fabButton.pulseColor = #colorLiteral(red: 0.1886929572, green: 0.4163666964, blue: 0.951190412, alpha: 1);
        
        self.floatingMenu.fabMenuItems = [reviewItem, buyItem];
    }
    

    extension SWFreeLectureTableViewController : FABMenuDelegate{ func fabMenuWillOpen(fabMenu: FABMenu) { self.blurView.isHidden = false; self.blurView.alpha = 0; UIView.animate(withDuration: 0.3, delay: 0) { [weak self] in self?.blurView.alpha = 0.5; fabMenu.fabButton?.imageView?.transform = .init(rotationAngle: 45); } completion: { weak self in //self?.blurView.isHidden = false; }

        //    fabMenu.fabButton?.animate(.rotate(45))
        fabMenu.fabButton?.animate(.rotate(25));
    }
    
    func fabMenuWillClose(fabMenu: FABMenu) {
        self.blurView.alpha = 0.5;
        UIView.animate(withDuration: 0.3, delay: 0) { [weak self] in
            self?.blurView.alpha = 0;
            fabMenu.fabButton?.imageView?.transform = CGAffineTransform.identity;
        } completion: { [weak self](_) in
            self?.blurView.isHidden = true;
        }
        
        fabMenu.fabButton?.animate(.rotate(0));
    }
    

    }`

    Screen Shot 2020-09-28 at 4 50 00 PM

    Material Version is 3.1.8

    Help Me, Please. Thank you.

    opened by kofsiwon 0
  • check for Touch event before closing menu

    check for Touch event before closing menu

    Under catalyst, as you move the mouse around, it hit tests with UIHoverEvent

    these currently trigger closing the menu before you're able to move the mouse up to actually click on anything

    we could test explicitly for .hover events and ignore them, but they're not available in earlier versions of iOS, so it's easier to just check for .touches events. This also means that shake, remote control events, etc won't close the menu (though I don't know if they trigger a hit test anyway)

    opened by ConfusedVorlon 2
  • TextField does't refresh detailLabel

    TextField does't refresh detailLabel

    If you try to change the color and text in the textField.detailLabel.text, you won't see the change if you dont change the textField.text or focusing the field.

    It occurs when the field is not focused and you change the detail text from code.

    Pod version: Material 3.1.8 MaterialComponents 109.4.0

    This is my workaround to resolve temporarily my problem:

        guard let lastChar = textField.text!.last else {
            textField.deleteBackward()
            return
        }
       textField.deleteBackward()
        textField.text = textField.text! + String(lastChar)
    

    Have a good day. Best regards.

    opened by titopalito 0
Releases(3.1.8)
Owner
Cosmicmind
Build Dreams Together
Cosmicmind
Modular and customizable Material Design UI components for iOS

Material Components for iOS Material Components for iOS (MDC-iOS) helps developers execute Material Design. Developed by a core team of engineers and

Material Components 4.6k Dec 29, 2022
Material design components for iOS written in Swift

MaterialKit NOTE: This project is unmaintained. Material design components (inspired by Google Material Design) for iOS written in Swift Please feel f

Le Van Nghia 2.5k Jan 5, 2023
Blobmorphism is a brand new design language I've created to break free of the material overload in iOS, built in SwiftUI. Everything feels smooth and fluid.

Blobmorphism is a brand new design language I've created to break free of the material overload in iOS, built in SwiftUI. Everything feels smooth and fluid.

Ethan Lipnik 89 Nov 29, 2022
A Swift material design UI module which paints over the parent view when the switch is on.

:octocat: ?? RAMPaperSwitch is a Swift material design UI module which paints over the parent view when the switch is turned on. iOS library by @Ramotion

Ramotion 2.9k Dec 29, 2022
Full configurable spreadsheet view user interfaces for iOS applications. With this framework, you can easily create complex layouts like schedule, gantt chart or timetable as if you are using Excel.

kishikawakatsumi/SpreadsheetView has moved! It is being actively maintained at bannzai/SpreadsheetView. This fork was created when the project was mov

Kishikawa Katsumi 34 Sep 26, 2022
UI framework that allows developers to integrate an amazing selection interface into their applications

UI framework that allows developers to integrate an amazing selection interface into their applications! Each bubble has a set of parameters, which could be configured individually.

AJIJIi 5 Jul 12, 2022
Custom Beautiful UIView For Handling IDs in iOS

IDView Custom Beautiful UIView For Handling IDs in iOS Setup Set the placeholder images for the front and back faces. override func viewDidLoad()

Omar Labib 6 Aug 21, 2021
AGCircularPicker is helpful component for creating a controller aimed to manage any calculated parameter

We are pleased to offer you our new free lightweight plugin named AGCircularPicker. AGCircularPicker is helpful for creating a controller aimed to man

Agilie Team 617 Dec 19, 2022
A SwiftUI Library for creating resizable partitions for View Content.

Partition Kit Recently Featured In Top 10 Trending Android and iOS Libraries in October and in 5 iOS libraries to enhance your app! What is PartitionK

Kieran Brown 230 Oct 27, 2022
Creating a blurred window background in Mac Catalyst

TransparentChrome In response to a developer question, I looked for the easiest way to provide a translucent full-window chrome with a blurred backgro

Steven Troughton-Smith 37 Dec 2, 2022
Creating a simple selectable tag view in SwiftUI is quite a challenge. here is a simple & elegant example of it.

SwiftUI TagView Creating a simple selectable tag view in SwiftUI is quite a challenge. here is a simple & elegant example of it. Usage: Just copy the

Ahmadreza 16 Dec 28, 2022
DesafioMobile2You - This project consists of creating a replica of a TodoMovies screen

DesafioMobile2You Swift IOS Este projeto consiste na criação da réplica de uma t

Leonardo P M 0 Feb 3, 2022
Beautiful flag icons for usage in apps and on the web.

FlagKit Beautiful flag icons for usage in apps and on the web. All flags are provided as stand-alone PNG and SVG files. FlagKit also provides an Asset

Bowtie 2.9k Dec 29, 2022
Beautiful animated placeholders for showing loading of data

KALoader Create breautiful animated placeholders for showing loading of data. You can change colors like you want. Swift 4 compatible. Usage To add an

Kirill Avery 105 May 2, 2022
A beautiful radar view to show nearby items (users, restaurants, ...) with ripple animation, fully customizable

HGRippleRadarView Example To run the example project, clone the repo, and run pod install from the Example directory first. This project is inspired b

Hamza Ghazouani 352 Dec 4, 2022
⚡️ A library of widgets and helpers to build instant-search applications on iOS.

By Algolia. InstantSearch family: InstantSearch iOS | InstantSearch Android | React InstantSearch | InstantSearch.js | Angular InstantSearch | Vue Ins

Algolia 567 Dec 20, 2022
A draggable modal for iOS Applications.

Mantle Modal Draggable Modal, PopUp or Menu written in Swift. Description A simple modal resource that uses a UIScrollView to allow the user to close

Ricardo Canales 89 Feb 25, 2022
Easily use UIKit views in your SwiftUI applications. Create Xcode Previews for UIView elements

SwiftUIKitView Easily use UIKit views in SwiftUI. Convert UIView to SwiftUI View Create Xcode Previews from UIView elements SwiftUI functional updatin

Antoine van der Lee 682 Dec 29, 2022