android - studio - ¿Cómo imitar el estilo de botón levantado de diseño de material, incluso para pre-Lollipop(menos los efectos especiales)?
material theme android (7)
Google ha mostrado algunas formas agradables de mostrar los botones en Lollipop here .
Estoy hablando tanto de los botones elevados como de los planos.
¿Cómo puedo imitarlos en versiones anteriores a Lollipop, a excepción de los efectos especiales (rizado, etc.)?
Estoy hablando de this y this .
Por supuesto, en Lollipop y superior, me gustaría usar los efectos especiales.
Sé que ya hay varias (e incluso muchas) publicaciones sobre esto, pero no veo ninguna que intente imitarlo por completo.
Además de la respuesta de @ spierce7, mejoré un poco ese diseño. Así que ahora tiene un diseño relativo, que establece nuestro TextView personalizado exactamente en el centro de CardView . Así que aquí está.
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
card_view:cardBackgroundColor="@color/colorPrimary"
card_view:cardCornerRadius="1dp"
card_view:cardElevation="3dp"
android:longClickable="false"
android:id="@+id/button">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="48dp"> //just my custom height
<com.example.admin.lanet_contactwork.MyTextView //for below 5.0
android:layout_width="wrap_content"
android:layout_height="wrap_content"
PipBoy:fontName="Roboto-Medium.ttf" //custom font
android:text="@string/enter"
android:textColor="@android:color/white"
android:textSize="14sp"
android:layout_centerInParent="true"
/>
</RelativeLayout>
</android.support.v7.widget.CardView>
Agregue la biblioteca de compatibilidad a su aplicación. (La versión más actual se puede encontrar here .) Haga esto agregando una dependencia dentro de su archivo build.gradle:
dependencies {
compile fileTree(dir: ''libs'', include: [''*.jar''])
compile ''com.android.support:appcompat-v7:21.0.3''
}
Declate tu tema de aplicación en un archivo styles.xml ubicado en el directorio de valores:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/theme_primary</item>
<item name="colorAccent">@color/theme_accent_1</item>
<item name="actionMenuTextColor">@color/theme_text</item>
</style>
</resources>
Establezca el estilo declarado como el que se usará para su aplicación en el archivo manifest.xml:
<application
android:icon="@drawable/ic_launcher"
android:theme="@style/AppTheme"/>
En sus diseños declare un botón elevado como sigue
<Button
android:id="@+id/addButton"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="@string/title_add" />
Declare un estilo de botón plano de la siguiente manera:
<Button
android:id="@+id/okbutton"
style="?android:attr/borderlessButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@android:string/ok" />
Resultado tanto en un dispositivo 4.4 (un teléfono) como en un dispositivo 5.0 (una tableta):
Los detalles se pueden encontrar en la documentación oficial: http://developer.android.com/training/material/theme.html
Este es hacky según Yigit (google dev en Cardview) pero hace un trabajo de descenso.
Puede usar números negativos para deshacerse del relleno y el margen dentro de CardView.
Probado en los emuladores api 15 nexus one y nexus 4. Esta solución funcionará en pre piruleta.
<android.support.v7.widget.CardView
android:id="@+id/elevated_button_card"
card_view:cardElevation="2dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardMaxElevation="8dp"
card_view:contentPadding="-2dp"
android:layout_marginBottom="-2dp"
card_view:cardCornerRadius="0dp">
<Button
android:id="@+id/elevated_button"
style="?android:attr/borderlessButtonStyle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Add New Exercise"/
</android.support.v7.widget.CardView>
Código:
final CardView cardView = (CardView) rootView.findViewById(R.id.elevated_button_card);
final Button button = (Button) rootView.findViewById(R.id.elevated_button);
button.setOnTouchListener(new View.OnTouchListener() {
ObjectAnimator o1 = ObjectAnimator.ofFloat(cardView, "cardElevation", 2, 8)
.setDuration
(80);
ObjectAnimator o2 = ObjectAnimator.ofFloat(cardView, "cardElevation", 8, 2)
.setDuration
(80);
@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
o1.start();
break;
case MotionEvent.ACTION_CANCEL:
case MotionEvent.ACTION_UP:
o2.start();
break;
}
return false;
}
});
Estoy trabajando en una biblioteca de compatibilidad de materiales. Escribí mi propia clase de botón con estilos similares a materiales, sombras animadas y el efecto de ondulación táctil. Aunque aún no es perfecto, puedes intentarlo here .
Logro el mismo efecto usando,
android:background="@android:drawable/dialog_holo_light_frame"
Mi salida probada:
Vea mi respuesta para obtener una solución que mantenga el borde y el efecto elevado en el pre-lollipop mientras mantiene el efecto de rizo en el lollipop sin inconveniente here
Respuesta actualizada: se recomienda que confíe en la biblioteca de aplicaciones de Google para respaldar los estilos de diseño de materiales a su aplicación. Parece que ya no hace backport el botón levantado (en lugar de usar botones planos), pero aún así es adecuado backports un botón que coincida con el estilo de diseño del material. Es mi recomendación que vayas con este enfoque.
Si aún desea realizar una copia inversa del efecto de botón elevado, deberá confiar en una biblioteca de diseño de material de terceros, o puede ver mi solución anterior a continuación utilizando CardView e implementar la suya propia.
Para configurar la biblioteca de appcompat con el puerto trasero oficial de Material Design de Google:
compile "com.android.support:appcompat-v7:+"
Entonces necesitas configurar el tema de tu aplicación en tu archivo styles.xml .
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
Y en tu AndroidManifest.xml asegúrate de que el tema de arriba esté configurado correctamente:
<application
android:allowBackup="false"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:supportsRtl="false"
android:theme="@style/AppTheme">
Después de la configuración anterior, asegúrese de que toda su Activity extienda desde AppCompatActivity , y desde allí todos los Button se inflarán con un estilo de Diseño de materiales.
Si está utilizando una implementación de Button personalizada en su proyecto, asegúrese de que, en lugar de extender el Button , extienda el Button AppCompatButton . Eso se AppCompatTextView a la mayoría de sus View personalizadas: AppCompatTextView , AppCompatEditText , etc ...
¿Como funciona? Todos sus diseños xml de Android se inflan utilizando algo llamado LayoutInflater . El LayoutInflater lo proporciona la Activity y tiene la opción de que se LayoutInflaterFactory proporcione un LayoutInflaterFactory para que pueda anular las implementaciones predeterminadas de los widgets estándar de Android, como Button y TextView . Cuando utiliza una AppCompatActivity , le proporciona un LayoutInflater no estándar, que está inflando instancias especiales de los widgets que admiten Material Design.
------------------------------------------------- Antiguo Respuesta: -------------------------------------------------- -
Así que Android nos ha dado el CardView para replicar tal comportamiento. Proporciona una vista con esquinas redondeadas, que aplica una sombra paralela. Probablemente también querrá ver el método #setCardElevation() .
Puede agregar la biblioteca de CardView a su proyecto de Gradle:
compile ''com.android.support:cardview-v7:+''
CardView utilizará la implementación de Lollipop para hacer esto si está disponible (ya que las sombras de Lollipops son mejores), de lo contrario, se replicará lo mejor posible.
Aquí hay una muestra:
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
card_view:cardBackgroundColor="#ffd9d9d9"
card_view:cardCornerRadius="2dp"
android:layout_margin="6dp"
card_view:cardElevation="6dp">
<TextView android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="8.5dp"
android:paddingBottom="8.5dp"
android:paddingLeft="12dp"
android:paddingRight="12dp"
android:textColor="#de000000"
android:fontFamily="sans-serif-medium"
android:text="NORMAL" />
</android.support.v7.widget.CardView>
El código anterior se ejecuta en 5.0:
El código anterior se ejecuta en 4.4.4:
Parece que hay una discrepancia en las fuentes, ya que en el sans-serif-medium tiene un peso de fuente diferente o no es compatible con 4.4.4, pero esto puede solucionarse fácilmente incluyendo la última versión de Roboto y anulando la fuentes en el TextViews.
La documentación del material que publica apunta a un "Botón elevado". CardView es cómo hacemos cualquier cosa "Elevada".