Button gets bigger when background is set - How to make it small

Question

I want to make my button narrowed or back to normal before it was set with background.

I know using background tint will work on this with same background color but my problem is I am using a selector on background. When selector is set to button background, it became wider. When I switched background to backgroundtint, the color become different (e.g. for me is violet) and it is not changing color on pressed. Padding are not working as work around by setting the negative values nor positive values. What else can I do ? My goal is my button will change color when clicked but it's height is narrow/default size like in wrap content.

Here is my sample code of the button

<Button
    android:text="Add"
    android:fontFamily="@string/fontFamily"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:id="@+id/btnInformantsAdd"
    android:gravity="center"
    android:textColor="@color/white"
    android:textSize="@dimen/textSizeCommon"
    android:background="@drawable/ButtonSelectorBlue"
    android:paddingTop="-10dp"
    android:paddingBottom="-10dp"
    android:layout_gravity="center"
    android:layout_marginTop="@dimen/marginTop1"
    android:layout_marginBottom="@dimen/marginTop1" />

Selector XML Code

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_pressed="true">
    <layer-list>
      <item>
        <shape android:shape="rectangle">
          <solid android:color="@color/bluegreendark_light" />
          <padding android:left="10dp"
             android:top="@dimen/paddingSide1"
             android:right="10dp"
             android:bottom="@dimen/paddingSide1"/>
          <corners android:radius="5dp" />
        </shape>
      </item>
    </layer-list>
  </item>

  <item android:state_pressed="false">
    <layer-list>
      <item>
        <shape android:shape="rectangle">
          <solid android:color="@color/bluegreendark"/>
          <padding android:left="0dp"
             android:top="0dp"
             android:right="0dp"
             android:bottom="0dp"/>
          <corners android:radius="5dp" />
        </shape>
      </item>
    </layer-list>
  </item>
</selector>

Buttons have `minHeight` set to 48dp so they can be pressed easily. Don't change that. If you want them to *look* narrow, use an `` drawable (that's what the default drawable does). — Eugen Pechanec, Feb 23 '18 at 06:37
Hi @EugenPechanec. I tried to set minHeight to 48 but nothing happened. Then I set it to 10dp just to test something and it work out magically. Will it bother something in my code if I will make it stay like that? I tried to change text size to 50 and the button size matched the text size as if wrap_content is really working now — jace, Feb 23 '18 at 06:45
`minHeight="48dp"` is the default value, that's why nothing changed. If you set it to lower number the *clickable space* can be smaller. The height of button is calculated as max of `minHeight` and content height. But you don't want the clickable space smaller than 48dp, it would be hard to hit with finger. That's why you should keep `minHeight="48dp"`. Use `` drawable around your `` to add spacing around the actual button drawable. — Eugen Pechanec, Feb 23 '18 at 06:54

Robbit · Accepted Answer · 2018-02-26T03:23:57.820

Button gets bigger when background is set

The button doesn't get bigger.

Here is the button's default background, you can see that around it is a transparent color.

But when you change the button's background to your ButtonSelectorBlue file, there is no transparent color, so it makes you think it gets bigger.

You can see these codes:

<Button
    android:text="Add"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:id="@+id/btnInformantsAdd"
    android:gravity="center"
    android:textColor="#e7dbdb"
    android:textSize="20dp"
    android:background="@drawable/button_selector_blue"
    android:paddingTop="-10dp"
    android:paddingBottom="-10dp"
    android:layout_gravity="center"
    android:layout_marginTop="10dp"
    android:layout_marginBottom="10dp" />

<Button
    android:text="Add"
    android:id="@+id/bt"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:gravity="center"
    android:textColor="#282828"
    android:textSize="20dp"
    android:onClick="OnClick"
    android:layout_gravity="center" />

Two buttons, first background is your ButtonSelectorBlue file, second is default, and see this picture:

They are same in size.

So, you need add transparent color in the your selector file's periphery, like this:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_pressed="true">
    <layer-list>
      <item>
        <shape android:shape="rectangle">
          <solid android:color="@color/bluegreendark_light" />
          <stroke android:color="#00000000"
                  android:width="10dp"/>
          <padding android:left="10dp"
             android:top="@dimen/paddingSide1"
             android:right="10dp"
             android:bottom="@dimen/paddingSide1"/>
          <corners android:radius="5dp" />
        </shape>
      </item>
    </layer-list>
  </item>

  <item android:state_pressed="false">
    <layer-list>
      <item>
        <shape android:shape="rectangle">
          <solid android:color="@color/bluegreendark"/>
          <stroke android:color="#00000000"
                  android:width="10dp"/>
          <padding android:left="0dp"
             android:top="0dp"
             android:right="0dp"
             android:bottom="0dp"/>
          <corners android:radius="5dp" />
        </shape>
      </item>
    </layer-list>
  </item>
</selector>

Finally, preview:

result:

Button gets bigger when background is set - How to make it small

1 Answers1

Linked