wake-up-neo.com

Wie entferne ich die Auffüllung (oder den Rand?) Um Knöpfe in Android?

Derzeit habe ich den folgenden unteren Login-Button.

Wenn die Taste nicht gedrückt wird

 enter image description here

Wenn die Taste gedrückt wird

 enter image description here

Das XML sieht so aus

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

Ich möchte die Polsterung entfernen (oder sollte ich sie als Rand bezeichnen? Bitte beachten Sie den Abschnitt mit den meisten P/s), wenn Sie die Taste drücken.

Ich schaue auf Wie entferne ich die Tastenbelegung in Android?

Ich hatte es versucht

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

Es funktioniert nicht und hat keine Wirkung.


Ich versuche es weiter

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

Kein Auffüllen mehr beim Drücken. Das Material, das mit dem gedrückten visuellen Effekt gestaltet wurde, wird jedoch auch verschwinden.

Kann ich wissen, wie die Taste am besten während des Drucks entfernt werden kann, während das Material den gedrückten visuellen Effekt behält?

P/S

Ich weiß nicht wirklich, ob ich es Padding oder Margin nennen sollte. Was ich erreichen möchte, ist, dass beim Drücken auf den unteren Bereich die Änderung des visuellen Effekts beim Drücken auf den gesamten 100% unteren Balkenbereich (@+id/sign_in_bottom_nav_bar) und nicht auf den aktuellen 95% unteren Balkenbereich angewendet werden sollte.

17
Cheok Yan Cheng

Eine Standardschaltfläche sollte nicht bei full width verwendet werden, weshalb Sie dies erfahren.

Hintergrund

Wenn Sie sich den Material Design - Button Style anschauen, werden Sie feststellen, dass eine Schaltfläche einen Klickbereich mit einer Höhe von 48 dp hat, aber aus irgendeinem Grund als 36 dp Höhe angezeigt wird.

Dies ist die Hintergrundkontur, die Sie sehen, die nicht den gesamten Bereich der Schaltfläche selbst abdeckt.
Es hat abgerundete Ecken und etwas Polsterung und soll von selbst anklickbar sein, den Inhalt einwickeln und nicht die gesamte Breite am unteren Rand des Bildschirms überspannen.

Lösung

Wie oben erwähnt, möchten Sie einen anderen Hintergrund. Keine Standardschaltfläche, sondern ein Hintergrund für einen auswählbaren Gegenstand mit diesem schönen Ripple-Effekt.

Für diesen Anwendungsfall gibt es das Motivattribut ?selectableItemBackground, das Sie für Ihre Hintergründe verwenden können (insbesondere in Listen).
Es wird eine Plattform-Standardwelligkeit (oder eine Liste der Farbzustände auf <21) hinzugefügt und die aktuellen Designfarben verwendet.

Für Ihre Verwendung können Sie einfach Folgendes verwenden:

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

Es ist auch nicht erforderlich, Layout-Gewichtungen hinzuzufügen, wenn Ihre Ansicht die einzige ist und sich über den gesamten Bildschirm erstreckt.

Wenn Sie eine andere Vorstellung davon haben, wie Ihr Hintergrund aussehen soll, müssen Sie selbst ein benutzerdefiniertes Zeichenelement erstellen und dort die Farbe und den Zustand festlegen.

19
David Medenjak

Im styles.xml

<style name="MyButtonStyle" parent="Base.Widget.AppCompat.Button">
    <item name="Android:background">@drawable/selector</item>
    <item name="Android:textColor">@Android:color/black</item>
</style>

Im values/drawable:

my_drawable.xml

<?xml version="1.0" encoding="utf-8"?>
<shape Android:shape="rectangle" xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <corners Android:radius="2dp" />
    <!-- specify your desired color here -->
    <solid Android:color="#9e9b99" />
</shape>

selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:state_focused="true" Android:drawable="@drawable/my_drawable"/>
    <item Android:state_pressed="true" Android:drawable="@drawable/my_drawable"/>
    <item Android:drawable="@Android:color/transparent"/>
</selector>

Im values/drawable-v21:

my_drawable.xml

<?xml version="1.0" encoding="utf-8"?>
<shape Android:shape="rectangle"
       Android:tint="?attr/colorButtonNormal"
       xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <corners Android:radius="2dp" />
    <solid Android:color="@Android:color/white" />
</shape>

selector.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:Android="http://schemas.Android.com/apk/res/Android"
        Android:color="?attr/colorControlHighlight">
    <item Android:id="@Android:id/mask"
          Android:drawable="@drawable/my_drawable" />
</ripple>

Im Layout:

<Button
    Android:id="@+id/button"
    style="@style/MyButtonStyle"
    Android:layout_width="match_parent"
    Android:layout_height="100dp"
    Android:text="Test"/>

Ergebnis auf API 19:

enter image description here

Ergebnis auf API 21:

enter image description here

Quellcode

4
azizbekian

Ich habe durchgemacht, was du durchmachst. Um es kurz zu machen: Mit einem <Button>-Tag allein können Sie es nicht sauber machen und gleichzeitig die Abwärtskompatibilität gewährleisten.

Die einfachste und am weitesten verbreitete Methode ist die Verwendung einer <RelativeLayout>-Unterlage um einen <Button> herum.

Tastencode:

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

Wo immer Sie eine Schaltfläche verwenden müssen, verwenden Sie diesen vollständigen Code.

Hier ist die Aufteilung:


  1. OnClick-Ereignisse werden an myButton angehängt.
  2. Steuern Sie die Abmessungen Ihrer Schaltfläche, indem Sie die Attribute von myButtonUnderlay ändern.
  3. In myButton, Android:background="?attr/selectableItemBackgroundBorderless". Dies macht es zu einer transparenten Schaltfläche, die nur den Text und abwärtskompatible Wellen enthält.
  4. In myButtonUnderlay werden Sie alle anderen Hintergrundanwendungen ausführen, z. B. die Farbe der Schaltfläche, die Ränder, Auffüllungen, Ränder, Verläufe, Schatten usw. festlegen.
  5. Wenn die Manipulation der Sichtbarkeit der Schaltfläche (programmatisch oder nicht) gewünscht wird, führen Sie sie für myButtonUnderlay aus.

Hinweis: Stellen Sie sicher, dass Sie die Rückwärtskompatibilität verwenden 

Android:background="?attr/selectableItemBackgroundBorderless" undNICHT 

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

2
Abdul Wasae

Ich denke, die beste Lösung, um das zu lösen, ist die Erstellung eines eigenen Ripple Effect. Beim Auffüllen der Schaltfläche wird beim Auffüllen der Standardwert Ripple Effect der Komponente berücksichtigt.

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

Oder Sie können versuchen, den Stil Ihrer Schaltfläche in style="?android:textAppearanceSmall" zu ändern.

Denken Sie daran: Dieser Effekt wird nur bei Android Lollipop (API 21) oder höher angezeigt.

Nachdem ich viele Lösungen ausprobiert hatte, kam ich zu dem Schluss, dass wir mit tag alleine dies nicht erreichen können. Um diesen unerwünschten Platz um die Schaltfläche zu entfernen, ist meine Lösung wie folgt:

 <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

Legen Sie den Button-Hintergrund als Android:background="?selectableItemBackground" fest.

<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

Ich schlage vor, Sie schauen sich dies an, nur für alle Fälle.

Wenn dies nicht funktioniert, würde ich Ihnen vorschlagen, Ihren eigenen Stil (wie Azizbekian vorschlagen) mit Android-Xml-Zeichensätzen und Zeichnungszuständen zu erstellen, um gepresste/nicht-komprimierte Dateien zu unterscheiden.

Ich denke, dass die Verwendung Ihres eigenen Stils die beste Antwort sein kann, da Sie dadurch mehr Kontrolle darüber haben, wie Ihre App angezeigt wird. Durch die Verwendung von Android-Standardthemen und -stilen können Sie jedoch auch benutzerdefinierte Stile verwenden, was eine gute Idee ist. Sie können jedoch nicht jeden benutzerdefinierten Stil testen, so dass Sie nicht überprüfen können, ob Ihre App bei ALLEN benutzerdefinierten Stilen richtig angezeigt wird. Daher können bei einigen dieser Modelle Probleme auftreten.

0
Feuby

Die Auffüllung und der Rand können auf die ursprünglichen Ressourcen der Schaltfläche zurückzuführen sein.

Sie können also versuchen, die verwendeten Ressourcen mithilfe eines Selektors zu ändern:

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

Dies würde die Standardbilder/-formen für Ihre Schaltflächen ändern. Sie können also drawables verwenden und jedes Element auf drawable setzen. Das Zeichen kann entweder eine Bitmap oder eine .xml-Datei (Stildatei) sein, die das Aussehen der Schaltfläche in ihrem aktuellen Zustand definiert. Ich gehe davon aus, dass noch einige native Styles enthalten sind, auch wenn Sie den Button-Style selbst festgelegt haben. Dies kann daran liegen, dass Sie kein benutzerdefiniertes Design verwenden. Das Problem kann also auch durch Defing gelöst werden

theme="@style/myNewTheme"

dabei ist myNewTheme Ihr Thema und es sollte übergeordnete Elemente enthalten (parent="" sollte nicht definiert werden).

Nehmen Sie ein beliebiges Thema (von Google/Android für eine Instanz Theme.AppCompat. [Name]) entworfen, es enthält auch einen buttonStyle. Dies ist ein Teil von 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>

Wie Sie sehen, definiert dieses Thema, wie Ihre Schaltflächen in grundlegenden Funktionen aussehen bzw. funktionieren. Sie können Teile davon überschreiben, aber Sie haben die wichtigen Teile (ButtonStyle und ähnliches) nicht überschrieben. Wenn Sie also selbst ein neues Thema erstellen und es nach Ihren Wünschen gestalten und das Thema festlegen (über theme = "themename") und dieses Thema kein Thema erbt, sollten Sie in der Lage sein, Ihre Schaltflächen ohne Bedenken zu gestalten über die Standardstile im Design

Grundsätzlich gilt:

aufrufen von padding/margin = "0dp" hilft nicht. Das vom Design definierte Standard-Zeichnungselement hat diese Funktion in der Schaltfläche, die Sie ändern können. Sie müssen also entweder den Schaltflächenstil oder das Thema vollständig ändern. Stellen Sie sicher, dass das Thema keine übergeordneten Elemente hat, da viele Themen den Schaltflächenstil definieren. Sie möchten nicht, dass der Schaltflächenstil vom Design definiert wird.

0
Zoe

Als Antwort von @David Medenjak können Sie das Google Material Design Button-style auf der Entwicklerseite lesen. Verwenden Sie den Button-Stil, wie @David Medenjak in seiner Antwort erläutert. Sie können dies auch auf folgende Weise tun: __. Es handelt sich nicht um eine Auffüllung oder einen Rand, sondern um einen Hintergrundeffekt der Schaltfläche . Wenn Sie das entfernen möchten, können Sie Folgendes tun.

Option 1:

Schritt 1: Fügen Sie den folgenden Code in styles.xml ein

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

Schritt 2: Erstellen Sie eine neue XML-Datei im Ordner drawables und fügen Sie den folgenden Code hinzu: Ich benannte meine XML-Datei als 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>

Schritt 3: Verwenden Sie den Stil und die Zeichenweise Ihres Buttons wie folgt.

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

Mit der Support Library v7 sind alle Stile bereits definiert und einsatzbereit. Für die Standardschaltflächen stehen alle diese Stile zur Verfügung. Sie können also Ihren Schaltflächenstil so einstellen

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

Weitere Informationen zum Button-Stil finden Sie in check this answer

Ich denke, du wirst diese Antwort auch überprüfen. Ich hoffe, Sie erhalten Ihre Lösung.

0
Shailesh