Convert Figma logo to code with AI

navasmdc logoMaterialDesignLibrary

This is a library with components of Android L to you use in android 2.2

8,991
2,226
8,991
253

Top Related Projects

The iconic SVG, font, and CSS toolkit

Material Design icons by Google (Material Symbols)

😍 A beautiful, fluid, and extensible dialogs API for Kotlin & Android.

A curated list of awesome Android UI/UX libraries

11,849

Image Cropping Library for Android

A circular ImageView for Android

Quick Overview

MaterialDesignLibrary is an Android library that provides UI components following Google's Material Design guidelines. It offers a collection of custom views and widgets to help developers create visually appealing and consistent Android applications with Material Design aesthetics.

Pros

  • Easy integration of Material Design elements into Android apps
  • Wide range of customizable UI components
  • Helps maintain consistency with Google's design guidelines
  • Reduces development time for creating Material Design interfaces

Cons

  • Not actively maintained (last update was in 2015)
  • May not be fully compatible with the latest Android versions and Material Design updates
  • Limited documentation and examples
  • Some reported issues with certain components

Code Examples

  1. Creating a Material Design Button:
Button button = new ButtonFlat(this);
button.setText("FLAT BUTTON");
button.setBackgroundColor(Color.parseColor("#1E88E5"));
  1. Implementing a Material Design Switch:
Switch switchView = new Switch(this);
switchView.setChecked(true);
switchView.setOnCheckedChangeListener(new OnCheckedChangeListener() {
    @Override
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
        // Handle switch state change
    }
});
  1. Adding a Material Design Progress Bar:
ProgressBarCircularIndeterminate progressBar = new ProgressBarCircularIndeterminate(this);
progressBar.setBackgroundColor(Color.parseColor("#1E88E5"));
layout.addView(progressBar);

Getting Started

  1. Add the JitPack repository to your build file:
allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}
  1. Add the dependency to your app's build.gradle file:
dependencies {
    implementation 'com.github.navasmdc:MaterialDesignLibrary:1.5'
}
  1. Sync your project with Gradle files and start using the library components in your layouts or Java code.

Competitor Comparisons

The iconic SVG, font, and CSS toolkit

Pros of Font-Awesome

  • Extensive icon library with over 7,000 icons
  • Regular updates and new icon additions
  • Wide browser and device compatibility

Cons of Font-Awesome

  • Larger file size due to comprehensive icon set
  • Requires additional CSS for styling and customization
  • Not specifically designed for Material Design principles

Code Comparison

MaterialDesignLibrary:

MaterialButton button = new MaterialButton(this);
button.setText("BUTTON");
button.setBackgroundColor(Color.parseColor("#1E88E5"));

Font-Awesome:

<i class="fas fa-user"></i>
<button class="btn btn-primary">
  <i class="fas fa-save"></i> Save
</button>

Summary

Font-Awesome is a comprehensive icon library with frequent updates and wide compatibility. It offers a vast selection of icons but may have a larger file size. MaterialDesignLibrary focuses on Material Design components for Android, providing a more specific set of UI elements. Font-Awesome is primarily used for icons and requires additional styling, while MaterialDesignLibrary offers pre-styled Material Design components out of the box.

Material Design icons by Google (Material Symbols)

Pros of Material Design Icons

  • Official Google repository, ensuring consistency with Material Design guidelines
  • Extensive collection of icons covering a wide range of use cases
  • Regular updates and maintenance by Google's design team

Cons of Material Design Icons

  • Limited to icons only, not a full UI component library
  • Requires additional implementation effort to integrate into Android applications

Code Comparison

MaterialDesignLibrary:

Button button = (Button) findViewById(R.id.button);
button.setBackgroundColor(Color.parseColor("#1E88E5"));
button.setTextColor(Color.WHITE);

Material Design Icons:

<ImageView
    android:layout_width="24dp"
    android:layout_height="24dp"
    android:src="@drawable/ic_favorite_24px" />

Summary

MaterialDesignLibrary offers a comprehensive set of UI components implementing Material Design principles, making it easier to create consistent Material Design interfaces in Android applications. It provides ready-to-use widgets and custom views.

Material Design Icons, on the other hand, focuses solely on providing a vast collection of high-quality icons that adhere to Material Design guidelines. While it doesn't offer UI components, it serves as an excellent resource for developers who need standardized icons for their applications.

The choice between these repositories depends on the specific needs of the project. If a full Material Design implementation is required, MaterialDesignLibrary might be more suitable. For projects that only need icons or want to use official Google-designed icons, Material Design Icons is the better option.

😍 A beautiful, fluid, and extensible dialogs API for Kotlin & Android.

Pros of material-dialogs

  • More actively maintained with frequent updates and bug fixes
  • Extensive documentation and examples for easier implementation
  • Wider range of customizable dialog types and options

Cons of material-dialogs

  • Larger library size, potentially increasing app size
  • Steeper learning curve due to more complex API

Code Comparison

MaterialDesignLibrary:

Dialog dialog = new Dialog(this, "Title", "Content");
dialog.show();

material-dialogs:

MaterialDialog(this).show {
    title(text = "Title")
    message(text = "Content")
    positiveButton(text = "OK")
}

Summary

material-dialogs offers more features and customization options, making it suitable for complex dialog requirements. It has better documentation and community support. However, it may increase app size and require more time to learn.

MaterialDesignLibrary provides a simpler API for basic dialog needs, with a smaller footprint. It's easier to implement quickly but offers fewer customization options and less frequent updates.

Choose material-dialogs for feature-rich, highly customizable dialogs in actively maintained projects. Opt for MaterialDesignLibrary for simpler dialog needs in smaller projects or those with stricter size constraints.

A curated list of awesome Android UI/UX libraries

Pros of awesome-android-ui

  • Comprehensive collection of UI libraries and components
  • Regularly updated with new contributions from the community
  • Categorized for easy navigation and discovery

Cons of awesome-android-ui

  • Not a standalone library, requires additional implementation
  • May include outdated or deprecated libraries
  • Potential inconsistency in quality across different libraries

Code comparison

MaterialDesignLibrary:

Button button = (Button) findViewById(R.id.button);
button.setBackgroundColor(Color.parseColor("#1E88E5"));
button.setTextColor(Color.WHITE);

awesome-android-ui (using a library from the collection, e.g., Material):

MaterialButton button = findViewById(R.id.button);
button.setBackgroundTintList(ColorStateList.valueOf(ContextCompat.getColor(this, R.color.colorPrimary)));
button.setTextColor(ContextCompat.getColor(this, R.color.white));

Summary

MaterialDesignLibrary is a standalone library focusing on Material Design components, while awesome-android-ui is a curated list of various UI libraries. MaterialDesignLibrary offers a more cohesive experience but may have limited options. awesome-android-ui provides a wider range of choices but requires more effort to implement and maintain consistency across different libraries.

11,849

Image Cropping Library for Android

Pros of uCrop

  • Specialized image cropping library with advanced features
  • Active development and maintenance
  • Comprehensive documentation and examples

Cons of uCrop

  • Limited to image cropping functionality
  • Larger file size due to specialized features
  • Steeper learning curve for advanced customizations

Code Comparison

uCrop:

UCrop.of(sourceUri, destinationUri)
    .withAspectRatio(16, 9)
    .withMaxResultSize(maxWidth, maxHeight)
    .start(this);

MaterialDesignLibrary:

Button button = new ButtonRectangle(this);
button.setText("Button");
layout.addView(button);

uCrop focuses on image cropping with a fluent API, while MaterialDesignLibrary provides a broader set of UI components with simpler implementation. uCrop offers more specialized functionality, whereas MaterialDesignLibrary aims for a wider range of Material Design elements.

uCrop is actively maintained and updated, ensuring compatibility with newer Android versions and addressing issues promptly. MaterialDesignLibrary, on the other hand, has not seen recent updates, which may lead to compatibility issues with newer Android versions.

While uCrop excels in image cropping tasks, MaterialDesignLibrary offers a more diverse set of UI components, making it suitable for projects requiring various Material Design elements beyond image manipulation.

A circular ImageView for Android

Pros of CircleImageView

  • Focused functionality: Specifically designed for creating circular image views
  • Lightweight: Small library size, minimal impact on app performance
  • Easy integration: Simple to implement with minimal configuration

Cons of CircleImageView

  • Limited scope: Only provides circular image functionality
  • Less customization: Fewer options for modifying appearance compared to MaterialDesignLibrary
  • No additional Material Design components: Focused solely on circular images

Code Comparison

CircleImageView:

<de.hdodenhof.circleimageview.CircleImageView
    android:layout_width="96dp"
    android:layout_height="96dp"
    android:src="@drawable/profile"
    app:civ_border_width="2dp"
    app:civ_border_color="#FF000000"/>

MaterialDesignLibrary:

<com.gc.materialdesign.views.ButtonFlat
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#1E88E5"
    android:text="Button"/>

CircleImageView provides a straightforward implementation for circular images, while MaterialDesignLibrary offers a wider range of Material Design components. CircleImageView is ideal for projects requiring only circular image functionality, whereas MaterialDesignLibrary is better suited for comprehensive Material Design implementations.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Material design library logo

Material Design Android Library

Android app on Google Play

Android Arsenal

How to use

If you want use this library, you only have to download MaterialDesign project, import it into your workspace and add the project as a library in your android project settings.

If you prefer it, you can use the gradle dependency, you have to add these lines in your build.gradle file:

repositories {
    jcenter()
}

dependencies {
    compile 'com.github.navasmdc:MaterialDesign:1.5@aar'
}

Some components have custom attributes, if you want use them, you must add this line in your xml file in the first component:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:materialdesign="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
</RelativeLayout>

If you are going to use a ScrollView, it is recommended that you use the CustomScrollView provided in this library to avoid problems with the custom components. To use this component:

<com.gc.materialdesign.views.ScrollView 
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:materialdesign="http://schemas.android.com/apk/res-auto"
   android:id="@+id/scroll"
   android:layout_width="match_parent"
   android:layout_height="match_parent">
</com.gc.materialdesign.views.ScrollView>

##Components

####Buttons

######Flat Button

flat button

<com.gc.materialdesign.views.ButtonFlat
                android:id="@+id/buttonflat"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#1E88E5"
                android:text="Button" />

######Rectangle Button

rectangle button

<com.gc.materialdesign.views.ButtonRectangle
                android:id="@+id/button"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#1E88E5"
                android:text="Button" />

######Float Button

float button

It is recommended to put this component in the right-bottom of the screen. To use this component write this code in your xml file. If you don`t want to start this component with animation set the animate attribute to false. Put your icon in the icon attribute to set the drawable icon for this component.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:materialdesign="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <!-- ... XML CODE -->
    <com.gc.materialdesign.views.ButtonFloat
                android:id="@+id/buttonFloat"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_alignParentBottom="true"
                android:layout_marginRight="24dp"
                android:background="#1E88E5"
                materialdesign:animate="true"
                materialdesign:iconDrawable="@drawable/ic_action_new" />
</RelativeLayout>

######Float small button

float small button

<com.gc.materialdesign.views.ButtonFloatSmall
                android:id="@+id/buttonFloatSmall"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#1E88E5"
                materialdesign:iconDrawable="@drawable/ic_action_new" />

####Switches

######CheckBox checkbox

<com.gc.materialdesign.views.CheckBox
                android:id="@+id/checkBox"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#1E88E5"
                materialdesign:check="true" />

######Switch switch

<com.gc.materialdesign.views.Switch
                android:id="@+id/switchView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#1E88E5"
                materialdesign:check="true" />

####Progress indicators

######Progress bar circular indeterminate progress bar circular indeterminate

<com.gc.materialdesign.views.ProgressBarCircularIndeterminate
                android:id="@+id/progressBarCircularIndeterminate"
                android:layout_width="32dp"
                android:layout_height="32dp"
                android:background="#1E88E5" />

######Progress bar indeterminate progress bar indeterminate

<com.gc.materialdesign.views.ProgressBarIndeterminate
                android:id="@+id/progressBarIndeterminate"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:background="#1E88E5" />

######Progress bar indeterminate determinate Progress bar indeterminate determinate

<com.gc.materialdesign.views.ProgressBarIndeterminateDeterminate
                android:id="@+id/progressBarIndeterminateDeterminate"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:background="#1E88E5" />

If you begin progrees, you only have to set progress it

progressBarIndeterminateDeterminate.setProgress(progress);

######Progress bar determinate Progress bar determinate

<com.gc.materialdesign.views.ProgressBarDeterminate
                android:id="@+id/progressDeterminate"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:background="#1E88E5" />

You can custom max and min progress values with materialdesign:max="50" and materialdesign:min="25" attributes.

######Slider Slider

<com.gc.materialdesign.views.Slider
                android:id="@+id/slider"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:background="#1E88E5"
                materialdesign:max="50"
                materialdesign:min="0"
                 />

######Slider with number indicator Slider with number indicator

<com.gc.materialdesign.views.Slider
                android:id="@+id/slider"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:background="#1E88E5"
                materialdesign:max="50"
                materialdesign:min="0"
                materialdesign:showNumberIndicator="true"/>

##Widgets

####SnackBar

Snackbar

SnackBar snackbar = new SnackBar(Activity activity, String text, String buttonText, View.OnClickListener onClickListener);
snackbar.show();

If you don't want to show the button, put null in buttonText attribute

####Dialog

Dialog

Dialog dialog = new Dialog(Context context,String title, String message);
dialog.show();

You can set the accept and cancel button on the event listener or change it's text

// Set accept click listenner
dialog.setOnAcceptButtonClickListener(View.OnClickListener onAcceptButtonClickListener);
// Set cancel click listenner
dialog.setOnCancelButtonClickListener(View.OnClickListener onCancelButtonClickListener);
// Acces to accept button
ButtonFlat acceptButton = dialog.getButtonAccept();
// Acces to cancel button
ButtonFlat cancelButton = dialog.getButtonCancel();

####Color selector

Color selector

ColorSelector colorSelector = new ColorSelector(Context context,int intialColor, OnColorSelectedListener onColorSelectedListener);
colorSelector.show();