Currently, I have the following bottom log in button.
The XML looks like this
<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>
I would like to remove the padding (Or should I call it margin? Please refer to my bottom most p/s section) around button when it is being pressed.
I look at How to remove padding around buttons in Android?
I had tried
<Button ... ... android:minHeight="0dp" android:minWidth="0dp" />
It doesn't work and has no effect.
I further try
<Button ... ... android:background="@null" android:minHeight="0dp" android:minWidth="0dp" />
No more padding when pressed. However, the material designed pressed visual effect will gone too.
May I know what is the best way to remove button padding during pressed, yet retain the material designed pressed visual effect?
I don't really know whether I should call it padding or margin. What I wish to achieve is that, when we press on the bottom region, press visual effect change should be covered entire 100% bottom bar region (@+id/sign_in_bottom_nav_bar
), instead of current 95% bottom bar region.
You can remove the padding around the button by using setting the minWidth and minHeight to 0.
Padding can be used to offset the content of the view by a specific number of pixels. For instance, a left padding of 2 will push the view's content by 2 pixels to the right of the left edge.
android:layout_marginTop Specifies extra space on the top side of this view. This space is outside this view's bounds. Margin values should be positive. May be a dimension value, which is a floating point number appended with a unit such as " 14.5sp ".
A standard button is not supposed to be used at full width which is why you experience this.
If you have a look at the Material Design - Button Style you will see that a button has a 48dp height click area, but will be displayed as 36dp of height for...some reason.
This is the background outline you see, which will not cover the whole area of the button itself.
It has rounded corners and some padding and is supposed to be clickable by itself, wrap its content, and not span the whole width at the bottom of your screen.
As mentioned above, what you want is a different background. Not a standard button, but a background for a selectable item with this nice ripple effect.
For this use case there is the ?selectableItemBackground
theme attribute which you can use for your backgrounds (especially in lists).
It will add a platform standard ripple (or some color state list on < 21) and will use your current theme colors.
For your usecase you might just use the following:
<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 -->
There is also no need to add layout weights if your view is the only one and spans the whole screen
If you have some different idea on what your background should look like you have to create a custom drawable yourself, and manage color and state there.
As simple, use the inset
property like:
android:insetTop="0dp" android:insetBottom="0dp" android:insetRight="0dp" android:insetLeft="0dp"
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With