Skip to content

Layout and Code Example

Froelich Stefan edited this page Mar 23, 2015 · 2 revisions

First, place your EditText's in the layout. You can drag and drop them, you just have to change the EditText to com.rengwuxian.materialedittext.MaterialEditText.

    <com.rengwuxian.materialedittext.MaterialEditText     // Be sure to use these custom ones and not EditText
        android:id="@+id/usernameField"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:ems="10"
        android:hint="@string/username_field_hint" // String that gets shown in/above the field
        android:inputType="textPersonName"
        app:met_maxCharacters="20" // Max Characters allowed
        app:met_floatingLabel="normal" // Label with gray color
        />

    <com.rengwuxian.materialedittext.MaterialEditText
        android:id="@+id/passwordField"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/usernameField"
        android:layout_alignStart="@+id/usernameField"
        android:layout_below="@+id/usernameField"
        android:layout_marginTop="28dp"
        android:ems="10"
        android:hint="@string/password_field_hint" // String that gets shown in/above the field
        android:inputType="textPassword"
        app:met_minCharacters="6" // Minimum of 6 Characters
        app:met_floatingLabel="highlight" // Label with BaseColor
        />

Android Studio will sadly not show you a Preview of your Layout. You will have to launch the emulator which will show you something like:

0

Now in our Activity's java class we are going to inject the MaterialEditText's with Butterknife and do some stuff with them:

[...] // Your other imports you may need

import com.rengwuxian.materialedittext.MaterialEditText;
import butterknife.ButterKnife;
import butterknife.InjectView;

public class LoginActivity extends ActionBarActivity {

    public static final int MIN_PASSWORD_LENGTH = 10;  // Define a constant pw length requirement

    @InjectView(R.id.usernameField) MaterialEditText mUsernameField;
    @InjectView(R.id.passwordField) MaterialEditText mPasswordField;
    // Annotates the MaterialEditTexts

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_login);
        ButterKnife.inject(this); // Injects the annotated MaterialEditTexts

        mUsernameField.setBaseColor(Color.parseColor("#FF00897B"));  // Set its base Color to some teal shade
        mPasswordField.setMinCharacters(MIN_PASSWORD_LENGTH); // Set its minimum password length to a constant
    }
}

This code will produce the following screen:

1

Clone this wiki locally