MaterialDesignLibrary

Material Design Android Library

• How to use
• Components
  • Buttons
    • Flat Button
    • Rectangle Button
    • Float Button
    • Float small button
  • Switches
    • CheckBox
    • Switch
  • Progress indicators
    • Progress bar circular indeterminate
    • Progress bar indeterminate
    • Progress bar indeterminate determinate
    • Progress bar determinate
    • Slider
    • Slider with number indicator
• Widgets
  • SnackBar
  • Dialog
  • Color selector

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 {
    maven {
        url "https://jitpack.io"
    }
}
dependencies {
compile 'com.github.IvanGarza07:MaterialDesignLibrary:1.0.2'
}

If you use other libraries requiring nineoldandroids and appcompat-v7 like MaterialEditText or MaterialSpinner make sure to exclude them :

compile ('com.github.IvanGarza07:MaterialDesignLibrary:1.0.2'){
        exclude group: 'com.nineoldandroids', module: 'library'
        exclude group: 'com.android.support', module: 'appcompat-v7'
}

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.ivan.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

<com.ivan.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

<com.ivan.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

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.ivan.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

<com.ivan.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

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

Switch

<com.ivan.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

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

Progress bar indeterminate

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

Progress bar indeterminate determinate

<com.ivan.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

<com.ivan.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

<com.ivan.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

<com.ivan.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 = 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 = 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

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

MaterialSpinner

Spinner with Material Design - Down to API 9

This library provides you a Spinner with the Material style. You can use it like any regular Spinner. Add floating label text, hint and error messages.

Screenshots

Usages

In the xml :

<com.ivan.materialdesign.widgets.MaterialSpinner
        android:id="@+id/spinner"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" 
        app:ms_multiline="false"
        app:ms_hint="hint"
        app:ms_enableFloatingLabel="false"
        app:ms_enableErrorLabel="false"
        app:ms_floatingLabelText="floating label"
        app:ms_baseColor="@color/base"
        app:ms_highlightColor="@color/highlight"
        app:ms_errorColor="@color/error"
        app:ms_typeface="typeface.ttf"
        app:ms_thickness="2dp"
        app:ms_hintColor="@color/hint"
        app:ms_arrowColor="@color/arrow"
        app:ms_arrowSize="16dp"
        app:ms_alignLabels="false"
        app:ms_floatingLabelColor="@color/floating_label"/>

You can set a hint and a floating label text. If no floating label text is provided, the hint will be set instead.

Java side, you use it like a regular spinner, setting an adapter to it.

 String[] ITEMS = {"Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6"};
 ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_spinner_item, ITEMS);
 adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
 spinner = (MaterialSpinner) findViewById(R.id.spinner);
 spinner.setAdapter(adapter);

If you need to set an error message, you can do it the same way than with an EditText :

 //Activate
 spinner.setError("Error");
 //Desactivate
 spinner.setError(null);

You can choose to have a scrolling animation or to set the error message on multiple lines with the "ms_multiline" attribute in xml (default is true).