it-swarm.com.ru

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

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

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

 enter image description here

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

 enter image description here

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% нижней полосы.

17
Cheok Yan Cheng

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

Фон

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

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

Решение

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

Для этого варианта использования есть атрибут темы ?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's all -->

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

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

19
David Medenjak

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

 enter image description here

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

 enter image description here

Исходный код

4
azizbekian

Я прошел через то, что вы проходите. Короче говоря, вы просто не можете сделать это чисто с помощью одного тега <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>

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

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


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

Примечание: Для обеспечения обратной совместимости, убедитесь, что вы используете 

Android:background="?attr/selectableItemBackgroundBorderless", иНЕ 

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

2
Abdul Wasae

Я думаю, что лучшее решение для этого - создать свой собственный 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) или выше.

2
Luiz Fernando Salvaterra

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

 <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

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

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

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

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

0
Feuby

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

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

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

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

theme="@style/myNewTheme"

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

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

В принципе:

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

0
Zoe

Как ответ @David Medenjak, вы можете прочитать дизайн Google Material Стиль кнопки на его сайте разработчика. Используйте стиль кнопок, как объяснил @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:

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

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

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

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

0
Shailesh