Come rimuovere l'imbottitura attorno ai pulsanti in Android?


184

Nella mia app Android, ho questo layout:

<?xml version="1.0" encoding="utf-8" ?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:orientation="vertical">

    <fragment
         android:id="@+id/map"
         android:layout_width="match_parent"
         android:layout_height="0dp" 
         android:layout_weight="1" 
         class="com.google.android.gms.maps.SupportMapFragment"/>

    <Button
        android:id="@+id/button_back"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:onClick="CloseActivity"
        android:padding="0dp"
        android:text="@+string/back" />

</LinearLayout>

Nell'anteprima e al telefono, sembra che:

Come puoi vedere sul pulsante nella parte inferiore, c'è qualche imbottitura lì.

Come posso liberarmene e lasciare che il pulsante riempia completamente l'area inferiore?


6
La risposta di DATerre è stata corretta per due anni. Puoi contrassegnarlo come tale?
— JohnnyLambada,

1
Questa domanda richiede che la modifica abbia un titolo migliore. È diventato il primo risultato in Ricerca Google anche se in realtà non risponde alla domanda.
— SOF,

Risposte:


435

Per me il problema si è rivelato essere minHeight e minWidth su alcuni dei temi Android.

Sull'elemento Button, aggiungi:

<Button android:minHeight="0dp" android:minWidth="0dp" ...

O nello stile del tuo pulsante:

<item name="android:minHeight">0dp</item>
<item name="android:minWidth">0dp</item>

5
Ci è voluto un po 'fino a quando ho capito che non ho a che fare con uno strano comportamento di imbottitura ma piuttosto con minHeight.
— Pijusn,

7
Non credo che questa risposta risponda effettivamente alla domanda originale. Ma sono ancora felice di essermi imbattuto perché non riuscivo a capire perché Buttonstavo ancora occupando così tanto spazio anche dopo averlo impostato android:background="@null". Il fatto che lo Buttonstile predefinito sia responsabile è un ottimo suggerimento.
— Tony Chan,

È importante utilizzare sia android: minHeight = "0dp" android: minWidth = "0dp", e non solo uno di essi.
— Ricardo,

Questo rimuove l'angolo arrotondato e l'effetto ondulazione dal pulsante su Android Nougat, hai idea di cosa potrebbe causare questo comportamento?
— rraallvv,

Questa risposta ha risolto un problema con un GridLayout contenente pulsanti con opzioni autoSize sul testo impazzito mentre cercavo di ottenere più pulsanti per adattarli a righe / colonne. Risposta semplice che mi ci è voluto molto tempo per trovare ...
— Mike Hanafey,

72

La mia soluzione è stata impostata su 0 le proprietà insetTop e insetBottom.

<android.support.design.button.MaterialButton
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:insetTop="0dp"
        android:insetBottom="0dp"
        android:text="@string/view_video"
        android:textColor="@color/white"/>

1
Questo è ciò che ha risolto il problema anche per me! Grazie!
— SPM

funziona per me
— Ankit Saini

46

Questa non è un'imbottitura, è l'ombra attorno al pulsante nel suo disegno di sfondo. Crea il tuo sfondo e scomparirà.


6
L'ho fatto. non è scomparso.
— Hasan

Come si possono misurare le sue dimensioni?
— Iman Akbari,

Eccolo, @Behr, cambiando lo sfondo con il colore del pulsante
— Ramon

Ho appena realizzato che la mia immagine di sfondo ha un'imbottitura trasparente
— Fruit

22

Una soluzione alternativa potrebbe essere quella di provare a utilizzare i -vevalori per i margini come il seguente:

<Button
    android:id="@+id/button_back"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:onClick="CloseActivity"
    android:padding="0dp"
    android:layout_marginLeft="-5dip"
    android:layout_marginRight="-5dip"
    android:layout_marginTop="-5dip"
    android:layout_marginBottom="-5dip"
    android:text="@string/back" />

Farà svanire quello spazio. Voglio dire che puoi scegliere il dipvalore appropriato , che lo fa andare via. Ha funzionato per me. Spero che funzioni per te.


4
Starei attento a usare questa soluzione. Quello che fa è semplicemente nascondere lo sfondo del pulsante (bordo + ombre) usando i margini negativi. Che cosa sono i cambiamenti di stile e border + shadow richiede più di 5dp? Preferirei usare la soluzione Delyan / Casey Murray per essere al sicuro.
— lenrok258,

Inoltre, i margini negativi non sono ufficialmente supportati in Android, quindi anch'io lo eviterei
— Tim Kist,

14

Per rimuovere l'imbottitura attorno al pulsante di attivazione / disattivazione, è necessario impostare minWidth e minHeight 0dp.android:minWidth="0dp" android:minHeight="0dp"

  <ToggleButton
        android:id="@+id/toggle_row_notifications"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:minWidth="0dp"
        android:minHeight="0dp"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:padding="@dimen/_5sdp"
        android:textOn=""
        android:textOff=""
        android:background="@android:color/transparent"
        android:button="@drawable/toggle_selector"
        />

imposta il tuo file disegnabile sull'attributo button come: android:button="@drawable/toggle_selector"

Di seguito è il mio toggle_selecter.xmlfile

<?xml version="1.0" encoding="utf-8"?>
     <selector xmlns:android="http://schemas.android.com/apk/res/android">
            <item android:drawable="@drawable/notifications_toggle_on" 
                  android:state_checked="true"/>
            <item android:drawable="@drawable/notifications_toggle_off" 
                  android:state_checked="false"/>
     </selector>

9

Sono nuovo di Android ma ho avuto una situazione simile. Ho fatto ciò che @Delyan ha suggerito e utilizzato anche android: background = "@ null" nel file di layout XML.



6

Ho avuto lo stesso problema e sembra che sia a causa del colore di sfondo del pulsante. Prova a cambiare il colore di sfondo con un altro colore, ad esempio:

android:background="@color/colorActive"

e vedere se funziona. È quindi possibile definire uno stile se si desidera utilizzare il pulsante.


Ciò rimuove la capacità di evidenziazione / animazione del pulsante.
— Altus,

6

Per rimuovere l'imbottitura superiore e inferiore

<com.google.android.material.button.MaterialButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:minHeight="0dp"//to effect the following parameters, this must be added!
        android:insetTop="0dp"
        android:insetBottom="0dp"/>

Per rimuovere l'imbottitura sinistra e destra

<com.google.android.material.button.MaterialButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:minWidth="0dp"//to effect the following parameters, this must be added!
        android:insetLeft="0dp"
        android:insetRight="0dp"/>

4

Non è un'imbottitura ma o l'ombra dello sfondo disegnabile o un problema con minHeighte minWidth.

Se desideri ancora l'effetto di increspatura, puoi creare il tuo stile di pulsante usando ?attr/selectableItemBackground:

<style name="Widget.AppTheme.MyCustomButton" parent="Widget.AppCompat.Button.Borderless">
    <item name="android:minHeight">0dp</item>
    <item name="android:minWidth">0dp</item>
    <item name="android:layout_height">48dp</item>
    <item name="android:background">?attr/selectableItemBackground</item>
</style>

E applicalo al pulsante:

<Button 
    style="@style/Widget.AppTheme.MyCustomButton"
    ... />

2

Non sembra essere padding, margin o minheight / width. L'impostazione android:background="@null"del pulsante perde la sua animazione touch, ma si scopre che l'impostazione dello sfondo su qualsiasi cosa corregge quel bordo.


Attualmente sto lavorando con:

minSdkVersion 19
targetSdkVersion 23

1

Dai al tuo pulsante uno sfondo personalizzato: @ drawable / material_btn_blue


0

Puoi anche farlo con layout_width(height) parametri.

Ad esempio, ho eliminato lo spazio superiore e inferiore con il android:layout_height="18dp"codice.


0

Un pulsante standard non dovrebbe essere utilizzato a tutta larghezza, motivo per cui si verifica questo.

sfondo

Se dai uno sguardo al Material Design - Button Style vedrai che un pulsante ha un'area clic di altezza 48dp, ma verrà visualizzato come 36dp di altezza per ... qualche motivo.

Questo è il contorno dello sfondo che vedi, che non coprirà l'intera area del pulsante stesso.
Ha angoli arrotondati e alcune imbottiture e dovrebbe essere cliccabile da solo, avvolgere il suo contenuto e non coprire l'intera larghezza nella parte inferiore dello schermo.

Soluzione

Come accennato in precedenza, quello che vuoi è uno sfondo diverso . Non un pulsante standard, ma uno sfondo per un elemento selezionabile con questo piacevole effetto a catena.

Per questo caso d'uso c'è l' ?selectableItemBackgroundattributo tema che puoi usare per i tuoi sfondi (specialmente negli elenchi).
Aggiungerà un'ondulazione standard della piattaforma (o un elenco di stati dei colori su <21) e utilizzerà i colori del tema corrente.

Per il tuo caso d'uso potresti semplicemente usare quanto segue:

<Button
    android:id="@+id/sign_in_button"
    style="?android:attr/buttonBarButtonStyle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Login"
    android:background="?attr/selectableItemBackground" />
                   <!--  /\ that's all -->

Non è inoltre necessario aggiungere pesi di layout se la vista è l'unica e si estende su tutto lo schermo

Se hai un'idea diversa su come dovrebbe essere il tuo sfondo, devi creare un disegno personalizzato e gestire il colore e lo stato lì.

Questa risposta è stata copiata dalla domanda: come rimuovere correttamente l'imbottitura (o il margine?) Attorno ai pulsanti in Android?


0

Dopo ore passate a cercare più risposte ho finalmente trovato una soluzione che non utilizza un elemento diverso, manipola minHeighto minWidth, o addirittura avvolge Buttonun RelativeLayout.

<Button
    android:foreground="?attr/selectableItemBackground"
    android:background="@color/whatever" />

Il principale takeaway qui è l'impostazione del primo piano anziché dello sfondo, come prevedono molte delle risposte. La modifica dello sfondo stesso in selectableItemBackgroundsovrascriverà le eventuali modifiche apportate al colore / sfondo del pulsante, se presente.

La modifica del primo piano ti offre il meglio dei due mondi: elimina l'imbottitura "invisibile" e mantieni il design del tuo pulsante.


0

Puoi usare lo stile Borderless in AppCompatButton come di seguito. e usa Android: lo sfondo con esso.

style = "@ stile / Widget.AppCompat.Button.Borderless.Colored"

Codice pulsante

<androidx.appcompat.widget.AppCompatButton
        android:id="@+id/button_visa_next"
        android:background="@color/colorPrimary"
        style="@style/Widget.AppCompat.Button.Borderless.Colored"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/spacing_normal"
        android:text="@string/next"
        android:textColor="@color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

Produzione:

inserisci qui la descrizione dell'immagine

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.