web-dev-qa-db-fra.com

Comment supprimer correctement le rembourrage (ou la marge?) Autour des boutons dans Android?

Actuellement, j'ai le bouton de connexion inférieur en bas.

Lorsque le bouton n'est pas enfoncé

 enter image description here

Quand le bouton est enfoncé

 enter image description here

Le XML ressemble à ceci

<LinearLayout
    Android:background="?attr/welcomeBottomNavBarBackground"
    Android:orientation="horizontal"
    Android:id="@+id/sign_in_bottom_nav_bar"
    Android:layout_width="fill_parent"
    Android:layout_height="wrap_content"
    Android:layout_alignParentBottom="true">
    <Button
        style="?android:attr/buttonBarButtonStyle"
        Android:id="@+id/sign_in_button"
        Android:layout_width="0dp"
        Android:width="0dp"
        Android:layout_weight="1.0"
        Android:layout_height="48dp"
        Android:gravity="center"
        Android:layout_gravity="center"
        Android:enabled="true"
        Android:textAllCaps="true"
        Android:text="@string/log_in" />
</LinearLayout>

Je voudrais supprimer le rembourrage (Ou devrais-je l'appeler la marge? S'il vous plaît se référer à ma section plus bas p/s) autour du bouton lorsque vous appuyez dessus.

Je regarde Comment supprimer le rembourrage autour des boutons dans Android?

J'avais essayé

<Button
    ...
    ...
    Android:minHeight="0dp"
    Android:minWidth="0dp" />

Cela ne fonctionne pas et n'a aucun effet.

J'essaie encore

<Button
    ...
    ...
    Android:background="@null"
    Android:minHeight="0dp"
    Android:minWidth="0dp" />

Pas plus de rembourrage lorsque vous appuyez dessus. Cependant, l'effet visuel pressé conçu pour le matériau disparaîtra également.

Puis-je savoir quel est le meilleur moyen d’éliminer le rembourrage des boutons lors du pressage tout en conservant l’effet visuel pressé du matériau?

P/S

Je ne sais pas vraiment si je devrais appeler ça padding ou margin. Ce que je souhaite, c’est que, lorsque nous appuierons sur la zone inférieure, nous appuierons sur le changement des effets visuels sur la totalité de la zone de barre inférieure (@+id/sign_in_bottom_nav_bar), au lieu des 95% actuels.

javaandroidandroid-layoutandroid-viewandroid-button
17
Cheok Yan Cheng

Un bouton standard n'est pas censé être utilisé à pleine largeur, c'est pourquoi vous rencontrez ce problème.

Contexte

Si vous jetez un coup d'œil au Conception de la matière - Style du bouton , vous verrez qu'un bouton a une zone de clic d'une hauteur de 48dp mais sera affiché sous la forme d'une hauteur de 36dp pour une raison quelconque.

C’est l’arrière-plan que vous voyez, qui ne couvre pas toute la surface du bouton.
Il a des coins arrondis et un peu de rembourrage et est supposé être cliquable tout seul, envelopper son contenu et ne pas couvrir toute la largeur en bas de votre écran.

Solution

Comme mentionné ci-dessus, vous voulez un background différent. Pas un bouton standard, mais un fond pour un élément sélectionnable avec cet effet d’ondulation sympa.

Pour ce cas d'utilisation, il existe l'attribut thème ?selectableItemBackground que vous pouvez utiliser pour vos arrière-plans (en particulier dans les listes).
Il ajoutera une ondulation standard de la plate-forme (ou une liste d’états de couleur sur <21) et utilisera les couleurs de votre thème actuel.

Pour votre cas d'utilisation, vous pouvez simplement utiliser les éléments suivants:

<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 -->

Il n'est pas non plus nécessaire d'ajouter des poids de mise en page si votre vue est la seule et couvre tout l'écran

Si vous avez une idée différente de ce à quoi devrait ressembler votre arrière-plan, vous devez créer vous-même un dessin personnalisable, puis gérer la couleur et l'état à cet endroit.

19
David Medenjak

J'ai vécu ce que vous vivez. En résumé, vous ne pouvez pas le faire proprement avec une balise <Button> seule, tout en assurant la compatibilité avec les versions antérieures.

La méthode la plus simple et la plus répandue consiste à utiliser une sous-couche <RelativeLayout>, autour d'un <Button>.

Code du bouton: 

        <RelativeLayout
            Android:id="@+id/myButtonUnderlay"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:background="@color/colorPrimary"
            Android:visibility="visible">

            <Button
                Android:id="@+id/myButton"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:background="?attr/selectableItemBackgroundBorderless"
                Android:text="I am as cute as a Button"/>

        </RelativeLayout>

Partout où vous devez utiliser un bouton, vous utilisez ce code complet.

Voici la ventilation:

  1. Les événements OnClick seront liés à myButton.
  2. Contrôlez les dimensions de votre bouton en modifiant les attributs de myButtonUnderlay.
  3. Dans myButton, Android:background="?attr/selectableItemBackgroundBorderless". Cela en fera un bouton transparent contenant uniquement le texte et des ondulations compatibles avec les versions antérieures.
  4. Dans myButtonUnderlay, vous effectuerez toutes les autres applications d'arrière-plan, telles que la définition de la couleur du bouton, des marges, des marges, des marges, des dégradés, des ombres, etc.
  5. Si vous souhaitez manipuler la visibilité du bouton (par programmation ou non), vous le faites le myButtonUnderlay.

Remarque: Pour garantir la compatibilité avec les versions antérieures, veillez à utiliser 

Android:background="?attr/selectableItemBackgroundBorderless", etNOT 

Android:background="?android:attr/selectableItemBackgroundBorderless"

2
Abdul Wasae

Je pense que la meilleure solution pour résoudre ce problème est de créer votre propre Ripple Effect. Le remplissage lorsque vous appuyez sur le bouton respecte le Ripple Effect par défaut du composant.

<ripple xmlns:Android="http://schemas.Android.com/apk/res/Android"
        Android:color="?attr/colorControlHighlight">
    <item Android:drawable="?attr/colorPrimary"/>
</ripple>

Ou vous pouvez essayer de changer le style de votre bouton en style="?android:textAppearanceSmall"

Rappelez-vous: cet effet n'apparaît que sur Android Lollipop (API 21) ou supérieur.

2
Luiz Fernando Salvaterra

Après avoir essayé beaucoup de solutions, je suis finalement parvenu à la conclusion qu’avec le seul tag, nous ne pouvons pas atteindre cet objectif. pour supprimer cet espace indésirable autour du bouton, ma solution est la suivante:

 <RelativeLayout
    Android:id="@+id/myButtonUnderlay"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:layout_gravity="bottom"
    Android:visibility="visible">
<Button
    Android:id="@+id/save_button"
    Android:layout_width="match_parent"
    Android:layout_height="50dp"
    Android:layout_marginTop="-5dp" 
    Android:layout_marginBottom="-5dp"
    Android:layout_above="@+id/content_scrollview"
    Android:layout_gravity="bottom"
    Android:background="@drawable/ripple_theme"
    Android:enabled="true"
    Android:text="SetUp Store"
    Android:textColor="#fff"
    Android:textSize="18sp"
    Android:visibility="gone"
    tools:visibility="visible"
    style="@style/MediumFontTextView" />
</RelativeLayout>
0
Sandeep Sankla

Définissez l’arrière-plan Button sur Android:background="?selectableItemBackground"

<LinearLayout
    Android:background="?attr/welcomeBottomNavBarBackground"
    Android:orientation="horizontal"
    Android:id="@+id/sign_in_bottom_nav_bar"
    Android:layout_width="fill_parent"
    Android:layout_height="wrap_content"
    Android:layout_alignParentBottom="true">

    <Button
        style="?android:attr/buttonBarButtonStyle"
        Android:background="?selectableItemBackground"
        Android:id="@+id/sign_in_button"
        Android:layout_width="0dp"
        Android:width="0dp"
        Android:layout_weight="1.0"
        Android:layout_height="48dp"
        Android:gravity="center"
        Android:layout_gravity="center"
        Android:enabled="true"
        Android:textAllCaps="true"
        Android:text="@string/log_in" />

</LinearLayout>
0
Deena

Je vous suggérerais de regarder ceci juste au cas où avant tout.

Ensuite, si cela ne fonctionne pas, je vous suggère de créer votre propre style (comme celui suggéré par azizbekian) à l’aide d’Android xml drawables et d’états pouvant être dessinés pour différencier les caractères pressés/non pressés.

Je pense que l’utilisation de votre propre style est peut-être la meilleure solution car elle vous donnera encore plus de contrôle sur l’affichage de votre application, mais l’utilisation des thèmes et des styles par défaut d’Android permet également à l’utilisateur d’avoir des styles personnalisés, ce qui est une bonne idée. Cependant, vous ne pouvez pas tester tous les styles personnalisés, vous ne pouvez donc pas vérifier que votre application s'affichera correctement sur TOUS les styles personnalisés. Par conséquent, vous risquez de rencontrer des problèmes avec certains.

0
Feuby

Le remplissage et la marge peuvent être le résultat des ressources d'origine utilisées dans le bouton.

Vous pouvez donc essayer de changer les ressources utilisées en utilisant un sélecteur:

<selector
  xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:state_pressed="true" Android:drawable="@drawable/btn_action_hover" />
    <item Android:state_selected="true" Android:drawable="@drawable/btn_action_hover" />
    <item Android:state_focused="true" Android:drawable="@drawable/btn_action_hover" />
    <item Android:drawable="@drawable/btn_action_normal" />
</selector>

Cela modifierait les images/formes par défaut pour vos boutons, vous pourrez donc essayer d’utiliser Drawables et définir chaque élément sur un dessin. Le dessinable étant soit un bitmap, soit un fichier .xml (fichier de style) définissant l'aspect du bouton dans son état actuel. Je suppose que certains styles natifs sont encore inclus même si vous avez défini le style du bouton vous-même. C'est peut-être parce que vous n'utilisez pas de thème personnalisé. Donc, le problème peut également être résolu en définissant

theme="@style/myNewTheme"

où myNewTheme est votre thème et qu'il devrait avoir des parents (parent="" ne devrait pas être défini).

Prenez n'importe quel thème (conçu par Google/Android, pour une instance Theme.AppCompat. [Nom]), il est également livré avec un buttonStyle. C'est une partie de Theme.Holo.Light:

    <!-- Button styles -->
    <item name="buttonStyle">@style/Widget.Holo.Light.Button</item>

    <item name="buttonStyleSmall">@style/Widget.Holo.Light.Button.Small</item>
    <item name="buttonStyleInset">@style/Widget.Holo.Light.Button.Inset</item>

    <item name="buttonStyleToggle">@style/Widget.Holo.Light.Button.Toggle</item>
    <item name="switchStyle">@style/Widget.Holo.Light.CompoundButton.Switch</item>
    <item name="mediaRouteButtonStyle">@style/Widget.Holo.Light.MediaRouteButton</item>

    <item name="selectableItemBackground">@drawable/item_background_holo_light</item>
    <item name="selectableItemBackgroundBorderless">?attr/selectableItemBackground</item>
    <item name="borderlessButtonStyle">@style/Widget.Holo.Light.Button.Borderless</item>
    <item name="homeAsUpIndicator">@drawable/ic_ab_back_holo_light</item>

Comme vous le voyez, ce thème définit l’apparence/le fonctionnement de vos boutons dans les fonctionnalités de base. Vous pouvez en remplacer certaines parties, mais vous n’avez pas omis de remplacer les parties importantes (buttonStyle et similaires). Donc, si vous créez vous-même un nouveau thème, que vous le personnalisez et que vous définissez le thème (avec theme = "themename") et que ce thème n'hérite d'aucun thème, vous devriez pouvoir personnaliser le style de vos boutons sans avoir à vous inquiéter. sur les styles par défaut dans le thème

Fondamentalement:

appeler padding/margin = "0dp" ne vous aidera pas. Le dessin par défaut défini par le thème a cela dans le bouton dessinable, ce qui signifie que vous ne pouvez pas le changer. Vous devez donc soit changer le style du bouton, soit changer complètement le thème. Assurez-vous que ce thème n’a pas de parents, car de nombreux thèmes définissent le style des boutons. Vous ne voulez pas le style de bouton défini par le thème.

0
Zoe

En tant que réponse de David Medenjak, vous pouvez lire la conception de Google Material style bouton sur son site de développement. Utilisez le style de bouton comme l'explique @ David Medenjak dans sa réponse. Vous pouvez également le faire de la manière suivante égalementIl n’est ni un marrage ni une marge mais c’est en fait un effet d’arrière-plan du bouton . Si vous souhaitez le supprimer, procédez comme suit.

Option 1:

Étape 1: Mettez le code ci-dessous dans styles.xml

<style name="myColoredButton">
        <item name="Android:textColor">#FF3E96</item>
        <item name="Android:padding">0dp</item>
        <item name="Android:minWidth">88dp</item>
        <item name="Android:minHeight">36dp</item>
        <item name="Android:elevation">1dp</item>
        <item name="Android:translationZ">1dp</item>
        <item name="Android:background">#FF0000</item>
    </style>

Étape 2: Créez un nouveau fichier XML dans le dossier drawables et ajoutez le code suivant: J'ai nommé mon fichier XML sous le nom button_prime.xml.

<ripple xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:color="@color/colorPrimary">
    <item>
        <shape xmlns:Android="http://schemas.Android.com/apk/res/Android">
            <corners Android:radius="1dp" />
            <solid Android:color="#8B8386" />
        </shape>
    </item>
</ripple>

Étape 3: Utilisez le style et dessinez dans votre bouton comme suit.

<Button
        style="@style/myColoredButton"
        Android:layout_width="250dp"
        Android:layout_height="50dp"
        Android:text="Cancel"
        Android:gravity="center"
        Android:background="@drawable/button_prime"
        Android:colorButtonNormal="#3578A9" />

Option 2:

Avec la bibliothèque de support technique v7, tous les styles sont en fait déjà définis et prêts à être utilisés. Pour les boutons standard, tous ces styles sont disponibles. Vous pouvez donc définir le style de bouton de cette manière.

<Button
    style="@style/Widget.AppCompat.Button.Borderless"
    Android:layout_width="match_parent"
    Android:layout_height="50dp"
    Android:text="BUTTON"
    Android:gravity="center"
    Android:minHeight="0dp"
    Android:minWidth="0dp"
    Android:background="@color/colorAccent"/>

Pour plus de détails sur le style du bouton, veuillez cocher cette réponse

Je pense que vous allez vérifier cette réponse également. J'espère que vous aurez votre solution.

0
Shailesh