One MCSS line replaces several lines of code on Java and Swift at the same time

Converting a square image to a circle

Ilustration phone

Without MCSS

Swift (iOS)

Without MCSS

Java + XML
(Android)

With

Logo MCSS
border-radius: 100%; 
                                
profileImage.layer.borderColor = UIColor.clear.cgColor 
                                    
profileImage.layer.borderWidth = 1 
                                    
profileImage.layer.masksToBounds = true 
                                    
let cornerValue = 
                                    
    min(profileImage.bounds.size.with, 
                                    
        profileImage.bounds.size.height) / 2 
                                    
profileImage.layer.cornerRadius = cornerValue 
                                    
@Override 
                                    
protected void onCreate(Bundle savedInstanceState) { 
                                    
    super.onCreate(savedInstanceState); 
                                    
    setContentView(R.layout.activity_main); 
                                    
    ImageView imageView = findViewById(R.id.myImage); 
                                    
    imageView.setImageBitmap(getRoundedCornerImage(getResources().getDrawable(R.drawable.ic_launcher_background), 200)); 
                                    
} 
                                    
public static Bitmap getRoundedCornerImage(Bitmap bitmap, int pixels) { 
                                    
    Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.config.ARGB_8888); 
                                    
    Canvas canvas = new Canvas(output); 

                                    
    final Paint paint = new Paint(); 
                                    
    final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight()); 
                                    
    final RectF rectF = new RectF(rect); 
                                    
    final float roundPx = pixels; 
                                    
    paint.setAntiAlias(true); 
                                    
    canvas.drawARGD(0, 0, 0, 0); 
                                    
    paint.setColor(color); 
                                    
    canvas.drawRoundRect(rectF, roundPx, roundPx, paint); 
                                    
    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN)); 
                                    
    canvas.drawBitmap(bitmap, rect, rect, paint); 
                                    
    return output; 
                                    
} 
                                    

MCSS allows the use of

style sheets directly in a

Native Mobile App Project

Learn more in

MCSS DOCS

What is MCSS?

MCSS stands for Mobile Cascading Style Sheets

  • MCSS is a framework developed in SWIFT & JAVA that allows style sheets to be applied to native iOS and Android apps simultaneously keeping the same structure, design and aesthetics between platforms
  • MCSS stands for Mobile Cascading Style Sheets
  • MCSS describes how native mobile components are displayed on Android and iOS devices
  • MCSS allows to create complex native graphics and components within a native app and at the same time on Android and iOS by using classes and ids (like CSS)
  • MCSS allows to modify all components within an app or a group of components by using selectors with a single line of MCSS instruction
  • MCSS saves a lot of work. It can control the layout, design and aesthetics of multiple views all at once and simultaneously on Android and iOS
  • MCSS style sheets can be stored locally in the native project or referenced by a url allowing real time changes and updates on the app views for the end users (No need to submit to the stores for users to update their apps for aesthetics changes)
  • MCSS can be used in any native IDE like Xcode, Android Studio, Eclipse and more
MCSS stands for Mobile Cascading Style Sheets

Why MCSS

MCSS is developed in SWIFT/JAVA that allows style sheets to be applied to native iOS and Android apps simultaneously keeping the same structure, design and aesthetics between platforms

MCSS saves a lot of work. It can control the layout, design and aesthetics of multiple views all at once and simultaneously on Android and iOS

Why MCSS

MCSS is developed in SWIFT/JAVA that allows style sheets to be applied to native iOS and Android apps simultaneously keeping the same structure, design and aesthetics between platforms

MCSS saves a lot of work. It can control the layout, design and aesthetics of multiple views all at once and simultaneously on Android and iOS

Discover the power of MCSS

Build smarter and faster native mobile apps with the power of the only Mobile Cascading Style Sheets technology.

Start using MCSS in just 3 simple steps

Start using MCSS in just 3 simple steps

How easy is to integrate MCSS into a production app?

Learn More
  • 1.

    Open the application project in the preferred native IDE

  • 2.

    Download the MCSS framework

  • 3.

    Identify the components within the app by adding classes and IDs

  • 4.

    Write MCSS rules to create the desired design (if using the design from a website, adapt the website CSS files)

  • 5.

    Run the apply method in the views

  • 6.

    That's it. MCSS makes native mobile development easy and cost effective

Learn More

MCSS offers a list of pre-designed themes built to edit the appearance of all components within an app like buttons, textbox, labels, fonts, etc.

CSS classes and ids can be set to control the aesthetics of a group of components by a single MCSS line. Set and control buttons as primary or secondary, or selecting a light or a dark background for a pop up is now possible with a single line of MCSS.

In addition to the pre-designed theme, the developer can add several custom style sheets to the project for better control the aesthetics of all components, groups, and organization of the entire app.

How to add .mcss files to your project

Avoids releasing new app versions to the App stores for aesthetic changes

By storing and editing the MCSS files on an URL, any changes to the style and look of the app will be reflected almost instantaneously to the users. No need for the users to update apps on the devices.

Info MCSS

MCSS Advantages

Your app is still Native!
Your app is still Native!

It is not a hybrid technology based on web development so the full potential of native languages such as swift or java can be used.

What’s more, you can continue working in your usual native IDE (XCode, Android Studio, Visual Studio, Etc) by adding the library to your project.

Cut development time by at least 40%
Cut development time by at least 40%

Create and/or update all components or a group of components within a view and/or all views within the entire app and simultaneously for Android and iOS with a single line of MCSS code.

Familiar with CSS syntax?
Familiar with CSS syntax?

The design of aesthetics is developed by a variant of CSS metalanguage called MCSS. As simple as writing a Cascade Style Sheet to build, control and modify the different components on a view and the views itself by pointing selectors and properties specified in the .mcss file.

Want to apply your website design?
Want to apply your website design?

You can use your website CSS files. MCSS will recognize more than 70% of the CSS file and apply it to your native mobile app.

Your app changes instantly!
Your app changes instantly!

The Style sheets can be provided through an external URL. Aesthetic components and views of an app in production can be modified quickly and be available to the end users in virtually real time without uploading a new app version to the app or play store for revision.

Keep a more organized development project
Keep a more organized development project

You can create multiple .mcss files to keep your project organized just like you do on a HTML website.

Your app is still Native!

It is not a hybrid technology based on web development so the full potential of native languages such as swift or java can be used.

What’s more, you can continue working in your usual native IDE (XCode, Android Studio, Visual Studio, Etc) by adding the library to your project.

Cut development time by at least 40%

Create and/or update all components or a group of components within a view and/or all views within the entire app and simultaneously for Android and iOS with a single line of MCSS code.

Familiar with CSS syntax?

The design of aesthetics is developed by a variant of CSS metalanguage called MCSS. As simple as writing a Cascade Style Sheet to build, control and modify the different components on a view and the views itself by pointing selectors and properties specified in the .mcss file.

Want to apply your website design?

You can use your website CSS files. MCSS will recognize more than 70% of the CSS file and apply it to your native mobile app.

Your app changes instantly!

The Style sheets can be provided through an external URL. Aesthetic components and views of an app in production can be modified quickly and be available to the end users in virtually real time without uploading a new app version to the app or play store for revision.

Keep a more organized development project

You can create multiple .mcss files to keep your project organized just like you do on a HTML website.

GET MCSS NOW!

DEVELOP SMARTER AND FASTER

Start using MCSS and power up your applications

REGISTER NOW

MCSS has +1000 custom and original icons to use in your apps

GET MCSS-ICONS NOW
Icons Docs MCSS

How MCSS Works?

MCSS allows to create and modify the aesthetics and design of all components of a native mobile app and its views; editing properties such as colors, thickness, style of borders, background images, fonts, and more, is now possible by simply modifying a style sheets.

Without Logo MCSS

With Logo MCSS

Apply a background with a gradient color

SWIFT (iOS Native Code)
Java / XML (Android Native Code)
                  
let gradient: CAGradientLayer = CAGradientLayer()

let color1 = UIColor(red: 189/255, green: 121/255, blue: 240/255, alpha: 1)
let color2 = UIColor(red: 232/255, green: 157/255, blue: 184/255, alpha: 1)
let color3 = UIColor(red: 237/255, green: 162/255, blue: 174/255, alpha: 1)
gradient.colors = [color1, color2, color3]
gradient.locations = [0.0,0.5,1.0]

let angle = 45.0
let x = (1 * cos(angle*Double.pi/180))
let y = (1 * cos(angle*Double.pi/180))
gradient.startPoint = CGPoint(x: 0.0, y: 0.0)
gradient.endPoint = CGPoint(x: x, y: y)
gradient.frame =
  CGRect(x: 0.0, y: 0.0, with: self.view.frame.size.with, height: self.view.frame.size.height)
self.view.layer.insertSublayer(gradiend, at: 0)
                  
                
                
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ImageView ab = (ImageView) findViewById(r.id.imageView);
        ab.setBackgroundResource(R.drawable.color_gradient);
    }
}
                
              
                
background-image: linear-gradient(45deg, #a770ef, #cf8bf3, #fdb99d);
                
              

Without Logo MCSS

With Logo MCSS

Apply a background with a gradient color

SWIFT (iOS Native Code)
Java / XML (Android Native Code)
                  
let gradient: CAGradientLayer = CAGradientLayer()

let color1 = UIColor(red: 189/255, green: 121/255, blue: 240/255, alpha: 1)
let color2 = UIColor(red: 232/255, green: 157/255, blue: 184/255, alpha: 1)
let color3 = UIColor(red: 237/255, green: 162/255, blue: 174/255, alpha: 1)
gradient.colors = [color1, color2, color3]
gradient.locations = [0.0,0.5,1.0]

let angle = 45.0
let x = (1 * cos(angle*Double.pi/180))
let y = (1 * cos(angle*Double.pi/180))
gradient.startPoint = CGPoint(x: 0.0, y: 0.0)
gradient.endPoint = CGPoint(x: x, y: y)
gradient.frame =
  CGRect(x: 0.0, y: 0.0, with: self.view.frame.size.with, height: self.view.frame.size.height)
self.view.layer.insertSublayer(gradiend, at: 0)
                  
                
                
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ImageView ab = (ImageView) findViewById(r.id.imageView);
        ab.setBackgroundResource(R.drawable.color_gradient);
    }
}
                
              
                
background-image: linear-gradient(45deg, #a770ef, #cf8bf3, #fdb99d);
                
              

Without Logo MCSS

With Logo MCSS

Convert square image to a circle

SWIFT (iOS Native Code)
Java / XML (Android Native Code)
              
profileImage.layer.borderColor = UIColor.clear.cgColor
profileImage.layer.borderWidth = 1
profileImage.layer.masksToBounds = true
let cornerValue = min(profileImage.bounds.size.width,profileImage.bounds.size.height)/2
profileImage.layer.cornerRadius = cornerValue
              
            
                
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    ImageView imageView = findViewById(R.id.myImage);
    imageView.setImageBitmap(getRoundedCornerImage(getResources().getDrawable(R.drawable.ic_launcher_background), 200));
}
public static Bitmap getRoundedCornerImage(Bitmap bitmap, int pixels) {
    Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.config.ARGB_8888);
    Canvas canvas = new Canvas(output);

    final int color = 6xff424242;
    final Paint paint = new Paint();
    final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
    final RectF rectF = new RectF(rect);
    final float roundPx = pixels;
    paint.setAntiAlias(true);
    canvas.drawARGD(0, 0, 0, 0);
    paint.setColor(color);
    canvas.drawRoundRect(rectF, roundPx, roundPx, paint);
    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
    canvas.drawBitmap(bitmap, rect, rect, paint);

    return output;
}
                
              
                
border-radius:100%
                
              

Without Logo MCSS

With Logo MCSS

Convert square image to a circle

SWIFT (iOS Native Code)
Java / XML (Android Native Code)
              
profileImage.layer.borderColor = UIColor.clear.cgColor
profileImage.layer.borderWidth = 1
profileImage.layer.masksToBounds = true
let cornerValue = min(profileImage.bounds.size.width,profileImage.bounds.size.height)/2
profileImage.layer.cornerRadius = cornerValue
              
            
                
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    ImageView imageView = findViewById(R.id.myImage);
    imageView.setImageBitmap(getRoundedCornerImage(getResources().getDrawable(R.drawable.ic_launcher_background), 200));
}
public static Bitmap getRoundedCornerImage(Bitmap bitmap, int pixels) {
    Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.config.ARGB_8888);
    Canvas canvas = new Canvas(output);

    final int color = 6xff424242;
    final Paint paint = new Paint();
    final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
    final RectF rectF = new RectF(rect);
    final float roundPx = pixels;
    paint.setAntiAlias(true);
    canvas.drawARGD(0, 0, 0, 0);
    paint.setColor(color);
    canvas.drawRoundRect(rectF, roundPx, roundPx, paint);
    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
    canvas.drawBitmap(bitmap, rect, rect, paint);

    return output;
}
                
              
                
border-radius:100%
                
              

Without Logo MCSS

With Logo MCSS

Download an image and place it in a view

              
guard let url = URL(string:"www.cloud-image-example.com/bg-01.png")
else {
  return
}
DispatchQueue.global().async {
  do{
    let data = try Data(contentsOf: url)
    DispatchQueue.main.async {
      imageView.image = UIImage(data: data)
    }
  }catch{}
}
              
            
                
public class MainActivity extends AppCompatActivity {
    ImageView imageView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        imageView = findViewById(R.id.imageView);
        //do it in background
        try{
            java.net.URL url = new java.net.URL(spec: "www.cloud-image-example.com/bg-01.png");
            HttpURLConnection connection = (HttpURLConnection) url.openConnection();
            connection.setDoInput(true);
            connection.connect();
            InputStream input = connection.getInputStream();
            Bitmap myBitmap = BitmapFactory.decodeStream(input);
            imageView.setImageBitmap(myBitmap);
        }
        catch (Exception e){
            e.printStackTrace();
        }
    }
}
                
              
                
background: url("www.cloud-image-example.com/bg-01.png")
                
              

Without Logo MCSS

With Logo MCSS

Download an image and place it in a view

SWIFT (iOS Native Code)
Java / XML (Android Native Code)
              
guard let url = URL(string:"www.cloud-image-example.com/bg-01.png")
else {
  return
}
DispatchQueue.global().async {
  do{
    let data = try Data(contentsOf: url)
    DispatchQueue.main.async {
      imageView.image = UIImage(data: data)
    }
  }catch{}
}
              
            
                
public class MainActivity extends AppCompatActivity {
    ImageView imageView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        imageView = findViewById(R.id.imageView);
        //do it in background
        try{
            java.net.URL url = new java.net.URL(spec: "www.cloud-image-example.com/bg-01.png");
            HttpURLConnection connection = (HttpURLConnection) url.openConnection();
            connection.setDoInput(true);
            connection.connect();
            InputStream input = connection.getInputStream();
            Bitmap myBitmap = BitmapFactory.decodeStream(input);
            imageView.setImageBitmap(myBitmap);
        }
        catch (Exception e){
            e.printStackTrace();
        }
    }
}
                
              
                
background: url("www.cloud-image-example.com/bg-01.png")
                
              

Subscribe newsletter

You confirm that you agree to the processing of your personal data as described in the Privacy Statement .