Back to Materialdesignlibrary

Material Design Android Library

index.html

1.37.9 KB
Original Source

Material Design Android Library

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:

text
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:

text
<RelativeLayoutxmlns: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:

text
<com.gc.materialdesign.views.ScrollViewxmlns: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

text
<com.gc.materialdesign.views.ButtonFlatandroid:id="@+id/buttonflat"android:layout\_width="wrap\_content"android:layout\_height="wrap\_content"android:background="#1E88E5"android:text="Button"/>
Rectangle Button

text
<com.gc.materialdesign.views.ButtonRectangleandroid: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.

text
<RelativeLayoutxmlns: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.ButtonFloatandroid: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

text
<com.gc.materialdesign.views.ButtonFloatSmallandroid:id="@+id/buttonFloatSmall"android:layout\_width="wrap\_content"android:layout\_height="wrap\_content"android:background="#1E88E5"materialdesign:iconDrawable="@drawable/ic\_action\_new"/>

Switches

CheckBox

text
<com.gc.materialdesign.views.CheckBoxandroid:id="@+id/checkBox"android:layout\_width="wrap\_content"android:layout\_height="wrap\_content"android:background="#1E88E5"materialdesign:check="true"/>
Switch

text
<com.gc.materialdesign.views.Switchandroid: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

text
<com.gc.materialdesign.views.ProgressBarCircularIndeterminateandroid:id="@+id/progressBarCircularIndeterminate"android:layout\_width="32dp"android:layout\_height="32dp"android:background="#1E88E5"/>
Progress bar indeterminate

text
<com.gc.materialdesign.views.ProgressBarIndeterminateandroid:id="@+id/progressBarIndeterminate"android:layout\_width="fill\_parent"android:layout\_height="wrap\_content"android:background="#1E88E5"/>
Progress bar indeterminate determinate

text
<com.gc.materialdesign.views.ProgressBarIndeterminateDeterminateandroid: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

source
progressBarIndeterminateDeterminate.setProgress(progress);
Progress bar determinate

text
<com.gc.materialdesign.views.ProgressBarDeterminateandroid: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

text
<com.gc.materialdesign.views.Sliderandroid: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

text
<com.gc.materialdesign.views.Sliderandroid: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

source
SnackBarsnackbar=newSnackBar(Activityactivity,Stringtext,StringbuttonText,View.OnClickListeneronClickListener);
snackbar.show();

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

Dialog

source
Dialogdialog=newDialog(Contextcontext,Stringtitle,Stringmessage);
dialog.show();

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

source
// Set accept click listennerdialog.setOnAcceptButtonClickListener(View.OnClickListeneronAcceptButtonClickListener);// Set cancel click listennerdialog.setOnCancelButtonClickListener(View.OnClickListeneronCancelButtonClickListener);// Acces to accept buttonButtonFlatacceptButton=dialog.getButtonAccept();// Acces to cancel buttonButtonFlatcancelButton=dialog.getButtonCancel();

Color selector

source
ColorSelectorcolorSelector=newColorSelector(Contextcontext,intintialColor,OnColorSelectedListeneronColorSelectedListener);
colorSelector.show();