จะลบช่องว่างภายในปุ่มใน Android ได้อย่างไร

ในแอพ Android ของฉันฉันมีเลย์เอาต์นี้:

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

ในหน้าตัวอย่างและบนโทรศัพท์ดูเหมือนว่า:

อย่างที่คุณเห็นบนปุ่มด้านล่างมีช่องว่างภายในบ้าง

ฉันจะกำจัดสิ่งนั้นได้อย่างไรและปล่อยให้ปุ่มเต็มพื้นที่ด้านล่างจนสุด?

สำหรับฉันปัญหากลายเป็น minHeight และ minWidth ในบางธีม Android

ในองค์ประกอบปุ่มเพิ่ม:

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

หรือในสไตล์ปุ่มของคุณ:

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

โซลูชันของฉันถูกตั้งค่าเป็น 0 คุณสมบัติของ insetTop และ 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"/>

นั่นไม่ใช่ช่องว่างภายในเป็นเงารอบ ๆ ปุ่มในพื้นหลัง สร้างพื้นหลังของคุณเองและมันจะหายไป

วิธีแก้ปัญหาอาจลองใช้-veค่าสำหรับระยะขอบดังนี้:

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

มันจะทำให้พื้นที่นั้นหายไป ฉันหมายความว่าคุณสามารถเลือกdipค่าที่เหมาะสมซึ่งทำให้มันหายไป มันใช้งานได้สำหรับฉัน หวังว่ามันจะเหมาะกับคุณ

ในการลบช่องว่างภายในปุ่มสลับเราจำเป็นต้องตั้งค่า minWidth และ minHeight 0dpandroid: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"
        />

ตั้งค่าไฟล์ drawable ของคุณเป็นปุ่มเช่น: android:button="@drawable/toggle_selector"

ด้านล่างเป็นtoggle_selecter.xmlไฟล์ของฉัน

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

ฉันใหม่สำหรับ Android แต่ฉันมีสถานการณ์ที่คล้ายกัน ฉันทำสิ่งที่ @Delyan แนะนำและใช้ android: background = "@ null" ในไฟล์เลย์เอาต์ xml

หากต้องการลบการเติมเต็มด้านบนและล่าง

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

หากต้องการลบการขยายซ้ายและขวา

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

ในชุด XML ของปุ่ม android:includeFontPadding="false"

ฉันมีปัญหาเดียวกันและดูเหมือนว่าเป็นเพราะสีพื้นหลังของปุ่ม ลองเปลี่ยนสีพื้นหลังเป็นสีอื่นเช่น:

android:background="@color/colorActive"

และดูว่ามันใช้งานได้หรือไม่ จากนั้นคุณสามารถกำหนดสไตล์หากคุณต้องการให้ปุ่มใช้

มันไม่ได้เป็น แต่ padding หรือเงาของ drawable พื้นหลังหรือมีปัญหากับที่และminHeightminWidth

หากคุณยังคงต้องการระลอกคลื่นที่ดีคุณสามารถสร้างรูปแบบปุ่มของคุณเองโดยใช้?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>

และนำไปใช้กับปุ่ม:

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

ดูเหมือนว่าจะไม่มีการเว้นระยะขอบหรือความสูง / ความกว้าง การตั้งค่าandroid:background="@null"ปุ่มสูญเสียแอนิเมชั่นระบบสัมผัส แต่ปรากฎว่าการตั้งค่าพื้นหลังเป็นอะไรก็ได้ที่การแก้ไขทั้งหมดที่ขอบ

ฉันกำลังทำงานกับ:

minSdkVersion 19
targetSdkVersion 23

กำหนดพื้นหลังที่กำหนดเองให้กับปุ่มของคุณ: @ drawable / material_btn_blue

คุณสามารถทำได้ด้วยlayout_width(height)พารามิเตอร์

เช่นฉันได้ลบช่องว่างด้านบนและด้านล่างด้วยandroid:layout_height="18dp"รหัส

ไม่ควรใช้ปุ่มมาตรฐานแบบเต็มความกว้างซึ่งเป็นสาเหตุที่คุณพบสิ่งนี้

พื้นหลัง

หากคุณได้ดูที่การออกแบบวัสดุ - รูปแบบปุ่มคุณจะเห็นว่าปุ่มนั้นมีพื้นที่คลิกสูง 48dp แต่จะแสดงเป็นความสูง 36dp ด้วยเหตุผลบางประการ

นี่คือโครงร่างพื้นหลังที่คุณเห็นซึ่งจะไม่ครอบคลุมพื้นที่ทั้งหมดของปุ่ม
มันมีมุมโค้งมนและมีช่องว่างภายในและควรคลิกได้ด้วยตัวเองห่อเนื้อหาและไม่ขยายความกว้างทั้งหมดที่ด้านล่างของหน้าจอของคุณ

สารละลาย

ดังกล่าวข้างต้นสิ่งที่คุณต้องการเป็นที่แตกต่างกันพื้นหลัง ไม่ใช่ปุ่มมาตรฐาน แต่เป็นพื้นหลังสำหรับรายการที่เลือกได้ด้วยเอฟเฟกต์คลื่นเล็ก ๆ นี้

สำหรับกรณีการใช้งานนี้มี?selectableItemBackgroundแอตทริบิวต์ของชุดรูปแบบที่คุณสามารถใช้สำหรับพื้นหลังของคุณ (โดยเฉพาะในรายการ)
มันจะเพิ่มระลอกมาตรฐานแพลตฟอร์ม (หรือบางรายการสถานะสีใน <21) และจะใช้สีชุดรูปแบบปัจจุบันของคุณ

สำหรับ usecase ของคุณคุณอาจใช้สิ่งต่อไปนี้:

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

นอกจากนี้ยังไม่จำเป็นต้องเพิ่มตุ้มน้ำหนักเลย์เอาต์หากมุมมองของคุณเป็นภาพเดียวและครอบคลุมทั้งหน้าจอ

หากคุณมีแนวคิดที่แตกต่างกันเกี่ยวกับพื้นหลังของคุณควรมีลักษณะอย่างไรคุณต้องสร้าง drawable แบบกำหนดเองด้วยตัวเองและจัดการสีและระบุไว้ที่นั่น

คำตอบนี้คัดลอกมาจากคำถาม:วิธีลบการขยาย (หรือระยะขอบ) อย่างถูกต้องรอบปุ่มใน Android ได้อย่างไร

หลังจากชั่วโมงของการขุดคำตอบหลายรอบในที่สุดผมก็พบวิธีแก้ปัญหาที่ไม่ได้ใช้เป็นองค์ประกอบที่แตกต่างกันจัดการกับminHeightหรือminWidthหรือแม้กระทั่งการตัดรอบButtonRelativeLayout

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

Takeaway ที่นี่หลักคือการตั้งค่าของเบื้องหน้าแทนพื้นหลังเป็นจำนวนมากของคำตอบที่กำหนด การเปลี่ยนพื้นหลังตัวเองเป็นselectableItemBackgroundเพียงจะเขียนทับการเปลี่ยนแปลงใด ๆ ที่คุณทำกับสี / พื้นหลังของปุ่มถ้ามี

การเปลี่ยนฉากหน้าจะช่วยให้คุณได้ทั้งสองสิ่งที่ดีที่สุด: กำจัดช่องว่างภายใน "ที่มองไม่เห็น" และรักษาการออกแบบปุ่มของคุณ

คุณสามารถใช้สไตล์ไร้ขอบในAppCompatButton ได้ดังนี้ และใช้android: พื้นหลังด้วย

style = "@ สไตล์ / Widget.AppCompat.Button.Borderless.Colored"

รหัสปุ่ม

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

เอาท์พุท: