-
Notifications
You must be signed in to change notification settings - Fork 1k
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:
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: