Implementación de etiquetas flotantes en línea (con EditText?)
Las directrices de campo de texto de diseño de material de Google presentan etiquetas flotantes para la introducción de texto:
Con etiquetas flotantes en línea, cuando el usuario se activa con el campo de entrada de texto, las etiquetas se mueven para flotar sobre el campo.
Simple pregunta: ¿cuál es la mejor manera de implementar etiquetas flotantes (en Android 5.0+)? ¿Se puede hacer fácilmente con componentes estándar como EditText , y si es así, cómo? ¿O es más fácil ir con una tercera parte lib?
- Cómo hacer en la animación del botón de botón Al igual que en la aplicación de Google Android botón Volver?
- Compatibilidad con versiones anteriores del diseño del material: colorAccent requiere el nivel 21 de API cuando se utiliza appcompat7
- Cambiar el relleno de TextView en TabLayout
- Deslizar hacia abajo para actualizar el diseño del material
- Cómo dar color de texto personalizado para un solo elemento de menú en un NavigationView?
- Efecto de ondulación de material oculto por otra vista en el diseño
- Translúcido StatusBar con el color dinámico ActionBar en Android
- Barra de estado de degradado en Android Lollipop
Ahora puede utilizar la Biblioteca oficial de Android DESIGN (disponible en la biblioteca de soporte 22.2.0)
http://android-developers.blogspot.dk/2015/05/android-design-support-library.html
Agregue esta dependencia para comenzar a usar la biblioteca:
compile 'com.android.support:design:22.2.0'
Envuelva el EditText en un TextInputLayout.
<android.support.design.widget.TextInputLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="32dp" android:layout_marginLeft="32dp" app:hintTextAppearance="@style/TextAppearence.App.TextInputLayout">
puede personalizar el estilo TextInputLayout
<style name="TextAppearence.App.TextInputLayout" parent="@android:style/TextAppearance"> <item name="android:textColor">@color/accentColor</item> </style>
Puede utilizar esta biblioteca AndroidFloatLabel :
Para la mayoría de los usos, simplemente puede usar la vista personalizada en su diseño XML, especificando una etiqueta para usar como la sugerencia de EditText y la etiqueta TextView con la propiedad android: hint. Ejemplo:
<com.iangclifton.android.floatlabel.FloatLabel android:id="@+id/float_label_1" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/example_label" />También puede establecer dinámicamente la etiqueta con
floatLabel.setLabel("Custom Label")ofloatLabel.setLabel(R.string.custom_label).Diseño personalizado
Si desea especificar un diseño personalizado para usar, puede hacer algo como esto:
<com.iangclifton.android.floatlabel.FloatLabel android:id="@+id/float_label_custom_layout_1" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/example_label" android:layout="@layout/custom_float_label" />Su diseño personalizado debe incluir una etiqueta TextView (id / float_label) y un EditText (id / edit_text). En este momento, los diseños personalizados son extremadamente limitados porque FloatLabel simplemente establece la etiqueta y el EditText e ignora todas las demás vistas. Esto es muy eficiente, pero también le impide crear un diseño mucho más complejo. He aquí un ejemplo:
<?xml version="1.0" encoding="utf-8"?> <merge xmlns:android="http://schemas.android.com/apk/res/android" > <TextView android:id="@id/float_label" android:layout_width="match_parent" android:layout_height="wrap_content" android:lines="1" android:textIsSelectable="true" android:textAppearance="?android:attr/textAppearanceSmall" /> <EditText android:id="@id/edit_text" android:layout_width="match_parent" android:layout_height="wrap_content" android:inputType="text|textAutoCorrect|textCapSentences|textAutoComplete" /> </merge>
prueba esto,
en main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto" android:orientation="vertical" android:background="#4644aa"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:background="#3FFF" android:layout_width="match_parent" android:layout_height="wrap_content" /> <com.github.florent37.materialtextfield.MaterialTextField android:layout_width="300dp" android:layout_gravity="center_horizontal" android:layout_height="wrap_content" android:layout_marginLeft="4dp" android:layout_marginRight="4dp" android:layout_marginTop="20dp" app:mtf_cardCollapsedHeight="4dp" app:mtf_image="@drawable/ic_mail_grey600_24dp" > <!-- app:mtf_animationDuration="1000" app:mtf_cardColor="@color/cardview_dark_background" app:mtf_labelColor="@android:color/holo_red_dark" app:mtf_openKeyboardOnFocus="true" --> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:textColor="#333" android:hint="Email" android:textColorHint="#666" android:textSize="15sp" /> </com.github.florent37.materialtextfield.MaterialTextField> </LinearLayout>
y en Main.java
import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.Toolbar; //import com.crashlytics.android.Crashlytics; //import io.fabric.sdk.android.Fabric; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // Fabric.with(this, new Crashlytics()); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); toolbar.setTitleTextColor(0xFFFFFFFF); getSupportActionBar().setDisplayHomeAsUpEnabled(true); } }
y u también usan esta biblioteca.