Как правильно удалить дополнения (или маржа?) Вокруг кнопок в Android?

В настоящее время у меня есть следующая нижняя кнопка входа в систему.

Когда кнопка не нажата

Когда кнопка нажата

XML выглядит так

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

Я хотел бы удалить отступы (или я должен назвать это полем? Пожалуйста, обратитесь к моему самому нижнему разделу p/s) вокруг кнопки, когда она нажата.

Я смотрю на Как удалить отступы вокруг кнопок в Android?

Я пытался

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

Это не работает и не имеет никакого эффекта.

Я еще попробую

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

Нет больше отступов при нажатии. Тем не менее, материал, разработанный пресс-визуальный эффект тоже пропал.

Могу ли я узнать, каков наилучший способ убрать отступы кнопок при нажатой клавише, но при этом сохранить материал с разработанным нажатием визуальным эффектом?

P/S

Я действительно не знаю, должен ли я назвать это отступом или полем. Чего я хочу добиться, так это то, что когда мы нажимаем на нижнюю область, изменение визуальных эффектов должно охватывать всю 100% нижнюю полосу (@+id/sign_in_bottom_nav_bar) вместо текущей 95% нижней полосы.

Ответ 1

Стандартная кнопка не должна использоваться на полную ширину, поэтому вы испытываете это.

Фон

Если вы посмотрите на Material Design - Button Style, то увидите, что кнопка имеет область щелчка высотой 48dp, но по какой-то причине будет отображаться как 36dp высоты.

Это фоновый контур, который вы видите, который не будет покрывать всю область самой кнопки.
Он имеет закругленные углы и некоторые отступы, и предполагается, что он сам по себе кликабелен, оборачивает содержимое и не охватывает всю ширину в нижней части экрана.

Решение

Как уже упоминалось выше, вам нужен другой фон. Не стандартная кнопка, а фон для выбираемого элемента с этим приятным эффектом ряби.

Для этого варианта использования есть атрибут темы ?selectableItemBackground который вы можете использовать для фона (особенно в списках).
Он добавит стандартную рябь платформы (или некоторый список состояний цветов на <21) и будет использовать ваши текущие цвета темы.

Для вашего случая использования вы можете просто использовать следующее:

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

Также нет необходимости добавлять вес макета, если ваш вид является единственным и охватывает весь экран.

Если у вас есть какое-то иное представление о том, как должен выглядеть фон, вы должны сами создать собственный чертеж и управлять им цветом и состоянием.

Ответ 2

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

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

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

В макете:

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

Результат API 19:

Результат API 21:

Исходный код

Ответ 3

Я думаю, что лучшим решением для этого является создание собственного Ripple Effect. Отступ при нажатии кнопки соответствует стандарту Ripple Effect компонента.

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

Или вы можете попробовать изменить стиль своей кнопки на style="?android:textAppearanceSmall"

Помните: этот эффект отображается только на Android Lollipop (API 21) или выше.

Ответ 4

Я прошел через то, что вы переживаете. Короче говоря, вы просто не можете сделать это чисто с тегом <Button> самостоятельно, обеспечивая при этом обратную совместимость.

Самый простой и наиболее распространенный метод - использовать подложку <RelativeLayout> вокруг <Button>.

Код кнопки:

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

Если вам нужно использовать кнопку, вы используете этот полный код.

Вот разбивка:

События OnClick будут подключены к myButton.
Управляйте размерами вашей кнопки, изменяя атрибуты myButtonUnderlay.
В myButton, android:background="?attr/selectableItemBackgroundBorderless". Это сделает прозрачную кнопку только с текстом и обратной совместимостью.
В myButtonUnderlay вы сделаете все остальные фоновые приложения, например, установите цвет кнопки, поля, paddings, границы, градиенты и тени и т.д.
Если манипулирование видимостью кнопки (программной или нет) является желанием, вы делаете это на myButtonUnderlay.

Примечание.. Чтобы обеспечить обратную совместимость, убедитесь, что вы используете

android:background="?attr/selectableItemBackgroundBorderless" и НЕ

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

Ответ 5

Как ответ @David Medenjak, вы можете прочитать дизайн Google Material Button-style на свой сайт разработчика. Используйте стиль кнопки, как объяснил @David Medenjak в своем ответе. Вы также можете сделать следующее: Это не дополнение или маржа, но на самом деле это фоновой эффект кнопки. Если вы хотите удалить это, вы можете сделать следующее.

Вариант 1:

Шаг 1: Поместите приведенный ниже код в 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>

Шаг 2. Создайте новый файл XML в папке drawables и добавьте следующий код: Я назвал свой XML файл как 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>

Шаг 3: используйте стиль и вытащите его в своей кнопке следующим образом.

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

Вариант 2:

С поддержкой библиотеки v7 все стили на самом деле уже определены и готовы к использованию, для стандартных кнопок доступны все эти стили. Таким образом, вы можете установить стиль своей кнопки, как этот

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

Для более подробной информации о стиле кнопки проверьте этот ответ

Я думаю, вы также проверите этот ответ. Надеюсь, вы получите свое решение.

Ответ 6

Отступ и маржа могут быть результатом исходных ресурсов, используемых в кнопке.

Итак, вы можете попробовать изменить используемые ресурсы, используя селектор:

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

Это изменит изображения/фигуры по умолчанию для ваших кнопок, чтобы вы могли попробовать использовать чертежи и установить каждый элемент в drawable. Выбираемое существо является либо растровым, либо XML файлом (файл стиля), определяющим внешний вид кнопки в ее текущем состоянии. Я предполагаю, что все еще есть некоторые родные стили, даже если вы сами установили стиль кнопки. Возможно, это связано с тем, что вы не используете настраиваемую тему. Таким образом, проблема также может быть решена путем отказа от

theme="@style/myNewTheme"

где myNewTheme - ваша тема, и у нее должны быть родители (parent="" не следует определять).

Возьмите любую тему (разработанную Google/Android для экземпляра Theme.AppCompat. [name]), она также поставляется с кнопкой Button. Это часть 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>

Как вы видите, эта тема определяет, как ваши кнопки будут выглядеть/работать в основных функциях. Вы можете переопределить его части, но вы не переопределили важные части (будучи buttonStyle и тому подобное). Поэтому, если вы сами создаете новую тему и ставите ее по своему вкусу и задаете тему (используя тему = "имя-имя" ), и эта тема не наследует какую-либо тему, вы должны уметь стилизовать свои кнопки по своему вкусу, не беспокоясь о стилях по умолчанию в теме

В принципе:

вызов padding/margin = "0dp" не поможет. Выбранный по умолчанию вариант, заданный темой, имеет это в кнопке drawable, то есть вы не можете ее изменить. Таким образом, вам нужно либо изменить стиль кнопки, либо полностью изменить тему. Убедитесь, что тема не имеет родителей, потому что многие темы определяют стиль кнопки. Вы не хотите, чтобы стиль кнопки определялся темой.

Ответ 7

Я бы посоветовал вам взглянуть на этот на всякий случай раньше всех.

Тогда, если вы не работаете, я предлагаю вам создать свой собственный стиль (например, азизбекский), используя drawroid для android xml и выведенные состояния, чтобы различать нажатые/не нажатые.

Я думаю, что использование вашего собственного стиля может быть лучшим ответом, поскольку это еще больше даст вам больше контроля над тем, как отображается ваше приложение, но использование тем и стилей по умолчанию для Android также позволяет пользователю создавать пользовательские стили, что является хорошей идеей. Тем не менее, вы не можете протестировать каждый пользовательский стиль, чтобы вы не могли проверить правильность отображения вашего приложения во всех пользовательских стилях и, следовательно, могут столкнуться с проблемами с некоторыми.

Ответ 8

Установите фон Button как 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>

Ответ 9

Попробовав много решений, я наконец пришел к выводу, что с помощью одного тега мы не сможем этого достичь. чтобы удалить это нежелательное пространство вокруг кнопки, мое решение, как показано ниже:

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

Ответ 10

1.add файл ресурса с возможностью рисования с именем возможно button_background.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape>
            <solid android:color="#ff0000"/>
            <stroke android:width="5dp" android:color="#00ff00"/>
        </shape>
    </item>
    <item>
        <shape>
            <solid android:color="#00ff00"/>
        </shape>
    </item>
</selector>

2.Используйте кнопку button_background.xml в качестве фона кнопки, сделанного!

github

блог

Ответ 11

Я действительно не знаю, следует ли мне называть это дополнением или полями.

Кнопка запускает повышение поверхности для обеспечения визуальной обратной связи в ответ на прикосновение. Это одна из двух обратных связей, используемых для поверхностная реакция; первый - эффект пульсации. Например, приподнятая кнопка имеет положение состояния покоя 2dp и высоту подъема 8dp (см. Поднятую кнопку под Shadows). Кнопка встречает палец, когда он касается поверхности.

Могу ли я узнать, что является лучшим способом удалить отступы кнопок во время нажатия, но сохранить материал, созданный нажатым визуальным эффектом?

Отвечая на первую часть, я не думаю, что у вас есть все материальное оформление, если вы хотите удалить эффект повышения поверхности.

В любом случае, вот как удалить визуальную обратную визуализацию поверхности:

Добавить файл аниматора button_raise.xml в каталог аниматора в каталоге res, имеющем следующий код:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:state_enabled="true"
        android:state_pressed="true">

        <objectAnimator
            android:duration="@android:integer/config_shortAnimTime"
            android:propertyName="translationZ"
            android:valueTo="0dp"
            android:valueType="floatType" />
    </item>
</selector>

Обратитесь к новому создаваемому аниматору в кнопке с помощью свойства stateListAnimator:

<Button
    ...
    android:stateListAnimator="@animator/button_raise"
    ... />

Надеюсь, что это поможет.