android - style - ¿Cómo crear botones estándar sin bordes(como en la guía de diseño mencionada)?

styles buttons android studio

Question

Estaba comprobando las pautas de diseño y preguntándome sobre los botones sin bordes. Eché un vistazo y traté de encontrarlo en la fuente, pero no puedo reunirlo solo. ¿Es este el widget de Botón normal pero agrega un estilo personalizado (predeterminado de Android)? ¿Cómo hacer estos botones sin bordes (por supuesto, puedes configurar el fondo para que esté vacío, pero no tengo el divisor)?

Aquí enlaces a las pautas de diseño:

• http://developer.android.com/design/building-blocks/buttons.html
• http://developer.android.com/guide/topics/ui/controls/button.html#Borderless

Answer 1

Agregando a la respuesta superior también puede usar vistas con un color de fondo gris oscuro en un diseño lineal como ese.

<View
    android:layout_width="match_parent"
    android:layout_height="1dip"
    android:layout_marginBottom="4dip"
    android:layout_marginLeft="4dip"
    android:layout_marginRight="4dip"
    android:layout_marginTop="4dip"
    android:background="@android:color/darker_gray"/>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="4dip"
    android:orientation="horizontal"
    android:weightSum="1">

    <Button
        android:id="@+id/button_decline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_weight="0.50"
        android:background="?android:attr/selectableItemBackground"
        android:padding="10dip"
        android:text="@string/decline"/>

    <View
        android:layout_width="1dip"
        android:layout_height="match_parent"
        android:layout_marginLeft="4dip"
        android:layout_marginRight="4dip"
        android:background="@android:color/darker_gray"/>

    <Button
        android:id="@+id/button_accept"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dp"
        android:layout_weight="0.50"
        android:background="?android:attr/selectableItemBackground"
        android:padding="10dip"
        android:text="@string/accept"/>
</LinearLayout>

Si su línea es horizontal, querrá establecer la altura en 1 punto y el ancho para que coincida con el elemento primario y viceversa si la línea es vertical.

Answer 2

Así es como se crea un botón sin bordes (plano) mediante programación sin usar XML

ContextThemeWrapper myContext = new ContextThemeWrapper(this.getActivity(), 
   R.style.Widget_AppCompat_Button_Borderless_Colored);

Button myButton = new Button(myContext, null, 
   R.style.Widget_AppCompat_Button_Borderless_Colored);

Answer 3

Desde la fuente de la aplicación iosched , surgió esta clase ButtonBar :

/**
 * An extremely simple {@link LinearLayout} descendant that simply reverses the 
 * order of its child views on Android 4.0+. The reason for this is that on 
 * Android 4.0+, negative buttons should be shown to the left of positive buttons.
 */
public class ButtonBar extends LinearLayout {

    public ButtonBar(Context context) {
        super(context);
    }

    public ButtonBar(Context context, AttributeSet attributes) {
        super(context, attributes);
    }

    public ButtonBar(Context context, AttributeSet attributes, int def_style) {
        super(context, attributes, def_style);
    }

    @Override
    public View getChildAt(int index) {
        if (_has_ics)
            // Flip the buttons so that "OK | Cancel" becomes "Cancel | OK" on ICS
            return super.getChildAt(getChildCount() - 1 - index);

        return super.getChildAt(index);
    }

    private final static boolean _has_ics = Build.VERSION.SDK_INT >= 
                                        Build.VERSION_CODES.ICE_CREAM_SANDWICH;
}

Este será el LinearLayout que LinearLayout los LinearLayout "Aceptar" y "Cancelar", y se encargará de ponerlos en el orden apropiado. Luego, coloque esto en el diseño en el que desea que estén los botones:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:divider="?android:attr/dividerHorizontal"
          android:orientation="vertical"
          android:showDividers="middle">
    <!--- A view, this approach only works with a single view here -->
    <your.package.ButtonBar style="?android:attr/buttonBarStyle"
        android:id="@+id/buttons"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:weightSum="1.0">
        <Button style="?android:attr/buttonBarButtonStyle"
            android:id="@+id/ok_button"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.5"
            android:text="@string/ok_button" />
        <Button style="?android:attr/buttonBarButtonStyle"
            android:id="@+id/cancel_button"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.5"
            android:text="@string/cancel_button" />
    </your.package.ButtonBar>
</LinearLayout>

Esto le da la apariencia del diálogo con botones sin bordes. Puede encontrar estos atributos en res en el marco. buttonBarStyle hace el divisor vertical y el relleno. buttonBarButtonStyle se establece como buttonBarButtonStyle para el tema Holo, pero creo que esta debería ser la forma más robusta de mostrarlo, ya que el framework desea mostrarlo.

Answer 4

Mire en los atributos del tema buttonBarStyle , buttonBarButtonStyle , y buttonBarButtonStyle .

Answer 5

Otra solución que debería funcionar tanto en la plataforma android más vieja y más nueva es usar

android:background="@android:color/transparent"

atributo para la vista de botones. Pero después de agregar el botón de la línea anterior no proporcionará comentarios táctiles.

Para proporcionar comentarios táctiles, agregue el siguiente código a la clase de Actividad

button.setOnTouchListener(new View.OnTouchListener() {          
    @Override
    public boolean onTouch(View view, MotionEvent event) {
        switch (event.getAction())
        {
            case MotionEvent.ACTION_DOWN:    
                ((Button)view).setBackgroundColor(Color.LTGRAY);
                break;
            case MotionEvent.ACTION_UP:
                ((Button)view).setBackgroundColor(Color.TRANSPARENT);
        }
        return false;
    }
});

esta trabajando bien para mi.

Answer 6

Para aquellos que quieren crear botones sin bordes programáticamente para API> = 8

ImageButton smsImgBtn = new ImageButton(this);
//Sets a drawable as the content of this button
smsImgBtn.setImageResource(R.drawable.message_icon);    
//Set to 0 to remove the background or for bordeless button
smsImgBtn.setBackgroundResource(0);

Answer 7

Para cualquiera que todavía esté buscando:

hereda tu propio estilo para las barras de botones Holo:

<style name="yourStyle" parent="@android:style/Holo.ButtonBar">
  ...
</style>

o Holo Light:

<style name="yourStyle" parent="@android:style/Holo.Light.ButtonBar">
  ...
</style>

y para botones Holo sin bordes:

<style name="yourStyle" parent="@android:style/Widget.Holo.Button.Borderless.Small">
  ...
</style>

o Holo Light:

<style name="yourStyle" parent="@android:style/Widget.Holo.Light.Button.Borderless.Small">
  ...
</style>

Answer 8

Para despejar la confusión:

Esto se hace en 2 pasos: configurar el atributo de fondo del botón en android: attr / seleccionableItemBackground crea un botón con comentarios pero sin fondo.

android:background="?android:attr/selectableItemBackground"

La línea para dividir el botón sin bordes del resto de su diseño se realiza mediante una vista con el fondo android: attr / dividerVertical

android:background="?android:attr/dividerVertical"

Para una mejor comprensión aquí hay un diseño para una combinación de botones OK / CANCELAR sin márgenes en la parte inferior de la pantalla (como en la imagen de la derecha de arriba).

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_alignParentBottom="true">
        <View
            android:layout_width="match_parent"
            android:layout_height="1dip"
            android:layout_marginLeft="4dip"
            android:layout_marginRight="4dip"
            android:background="?android:attr/dividerVertical"
            android:layout_alignParentTop="true"/>
        <View
            android:id="@+id/ViewColorPickerHelper"
            android:layout_width="1dip"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="4dip"
            android:layout_marginTop="4dip"
            android:background="?android:attr/dividerVertical" 
            android:layout_centerHorizontal="true"/>
        <Button
            android:id="@+id/BtnColorPickerCancel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:layout_toLeftOf="@id/ViewColorPickerHelper"
            android:background="?android:attr/selectableItemBackground"
            android:text="@android:string/cancel" 
            android:layout_alignParentBottom="true"/>
        <Button
            android:id="@+id/BtnColorPickerOk"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true"
            android:background="?android:attr/selectableItemBackground"
            android:text="@android:string/ok" 
            android:layout_alignParentBottom="true" 
            android:layout_toRightOf="@id/ViewColorPickerHelper"/>
    </RelativeLayout>

Answer 9

Para el que quiere botones sin bordes pero aún animado cuando hace clic. Agregue esto en el botón.

style="?android:attr/borderlessButtonStyle"

Si quería un divisor / línea entre ellos. Agregue esto en el diseño lineal.

style="?android:buttonBarStyle"

Resumen

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:orientation="horizontal"
   style="?android:buttonBarStyle">

    <Button
        android:id="@+id/add"
        android:layout_weight="1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/add_dialog" 
        style="?android:attr/borderlessButtonStyle"
        />

    <Button
        android:id="@+id/cancel"
        android:layout_weight="1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/cancel_dialog" 
        style="?android:attr/borderlessButtonStyle"
        />

</LinearLayout>

Answer 10

Para estilo de material, agregue style="@style/Widget.AppCompat.Button.Borderless" cuando use la biblioteca de AppCompat.

Answer 11

Por alguna razón, ni style="Widget.Holo.Button.Borderless" ni android:background="?android:attr/selectableItemBackground" funcionó para mí. Para ser más preciso, Widget.Holo.Button.Borderless hizo el trabajo en Android 4.0 pero no funcionó en Android 2.3.3. Lo que hizo el truco para mí en ambas versiones fue android:background="@drawable/transparent" y este XML en res / drawable / transparent.xml:

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle" >
</shape>

Plain cabeza a través del enfoque de la pared.

Answer 12

Puede usar la Biblioteca de soporte de AppCompat para el botón sin bordes.

Puedes hacer un botón sin bordes como este:

<Button
    style="@style/Widget.AppCompat.Button.Borderless"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="16dp" 
    android:text="@string/borderless_button"/>

Puede hacer que el Botón de color sin bordes sea así:

<Button
    style="@style/Widget.AppCompat.Button.Borderless.Colored"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="16dp" 
    android:text="@string/borderless_colored_button"/>

Answer 13

Respuesta tardía, pero muchas vistas. Como las API <11 aún no están muertas, para los interesados ​​aquí hay un truco.

Deje que su contenedor tenga el color deseado (puede ser transparente). Luego, dele a sus botones un selector con color transparente predeterminado y un poco de color cuando lo presione. De esta forma, tendrá un botón transparente, pero cambiará de color cuando se presione (como holo). También puede agregar algunas animaciones (como holo). El selector debería ser algo como esto:

res/drawable/selector_transparent_button.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" 
          android:exitFadeDuration="@android:integer/config_shortAnimTime">
     <item android:state_pressed="true"
         android:drawable="@color/blue" />

   <item android:drawable="@color/transparent" />
</selector>

Y el botón debería tener android:background="@drawable/selector_transparent_button"

PD: deja que tu contenedor tenga los divisores ( android:divider=''@android:drawable/... para API <11)

PS [Newbies]: debe definir esos colores en values ​​/ colors.xml

Answer 14

Si quieres lograr lo mismo programáticamente:

(esto es C # pero fácilmente transatable a Java)

Button button = new Button(new ContextThemeWrapper(Context, Resource.Style.Widget_AppCompat_Button_Borderless_Colored), null, Resource.Style.Widget_AppCompat_Button_Borderless_Colored);

Partido

    <Button
       style="@style/Widget.AppCompat.Button.Borderless.Colored"
    .../>

Answer 15

Simplemente agregue el siguiente atributo de estilo en su etiqueta de Button :

    style="?android:attr/borderlessButtonStyle"

fuente: http://developer.android.com/guide/topics/ui/controls/button.html#Borderless

Luego puedes agregar divisores como en la respuesta de Karl .

Answer 16

También puede hacer botones sin bordes a través del código:

TypedValue value= new TypedValue();
getApplicationContext().getTheme().resolveAttribute(android.R.attr.selectableItemBackground, value, true);
 myButton.setBackgroundResource(value.resourceId);

Answer 17

Una gran presentación de diapositivas sobre cómo lograr el efecto deseado de Googles Nick Butcher (comience en la diapositiva 20). Él usa el estándar @attr para @attr el botón y el divisor.

Answer 18

Use el siguiente código en su archivo xml. Use android: background = "# 00000000" para tener el color transparente.

<Button
   android:id="@+id/btnLocation"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:background="#00000000"
   android:text="@string/menu_location"
   android:paddingRight="7dp"
/>