There is some closeable view in my app and it has a close button in header. I want make this button borderless and small.The code:
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="?android:attr/borderlessButtonStyle"
android:layout_margin="0dp"
android:padding="0dp"
android:src="#android:drawable/ic_menu_close_clear_cancel"/>
In result the button is borderless but has much empty place around cross image (button is hitted on screenshot to make empty space visible)
How could I fix it?
You should use:
android:background="?selectableItemBackgroundBorderless"
Added
android:minHeight="0dp"
android:minWidth="0dp"
android:padding="2dp"
The result
Also I'll use negative margins to place the button closer to corner.
You can use the following on your ImageButton to remove the 'border':
android:background="#android:color/transparent"
or
android:background="#null"
If you would like change the background when the user clicks the button you can create a selector. Example ImageButton doesn't highlight on click with Transparent background.
With the introduction of ConstraintLayout, you can use constraints to reduce the width of the borderless ImageButton, that's way too wide by default, by constraining it to be as wide as the height:
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/my_closeable_view"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageButton
style="?android:attr/borderlessButtonStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:contentDescription="#string/action_close"
android:src="#android:drawable/ic_menu_close_clear_cancel"
app:layout_constraintDimensionRatio="w,1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
I don't recommend you to make it any smaller than this because the touch target needs to be at least 48dp x 48dp, as for Google's Material Design guidelines, otherwise a user would have a hard time trying to touch it.
If you really need it to look like it's closer to the edges of the view, you can always use an image that's not centered (has transparent padding on one or two sides), but I'd try my best to avoid doing this workaround and try rethinking my app's design in order to accommodate the button as it is.
use textView for that..
and use textview.OnTouchListener
finally onTouch change the color of text.. thats it
or else in your code just use
android:background="#null"
Related
I want to have four button under action bar like this. But the problem is I can not remove the space between the buttons. I used negative margin but it does not look like this. So my question is how can I achieve this design?
I did so far
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Sports"
android:id="#+id/sports"
android:layout_marginRight="-8dp"/>
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Political"
android:id="#+id/political"
android:layout_toRightOf="#+id/sports"/>
and the output is
You need to add to buttons borderless style.
style="?android:attr/borderlessButtonStyle"
It is a default system style, that using in themes, to create button bars.
Without it, always will be a small margin. You can read about it here, and here, from official documentation. It allows you to create button bars, like in your screenshot.
Try this :
Put all your buttons within Horizontal linear layout and set the width and height as follows,
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.25"
You can use linear layout for view button in same line. Using layout_weight
I think the title is pretty explicit about my problem... So here is my layout :
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="#+id/button_action"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Login" />
<ProgressBar
android:id="#+id/progress_bar"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerInParent="true"/>
</RelativeLayout>
On android SDKs < 21, no problem, the ProgressBar is correctly displayed over the Button and centered in the Button. But on Android 5.0, the ProgressBar is displayed behind the Button.
So you can see it's correctly positionned it when you activate the option "Show layout bounds" in Developer Options settings, but you can't see anything on the screen without that option.
Would anybody know how to fix this? I guess it's a matter of elevation recently introduced, but I really don't know how to take care of it.
For the record, I'm using the recently released Theme.AppCompat style from the support.v7.
EDIT:
I also tried to apply setElevation(0) and setTranslationY(0) to the Button programmatically but it didn't change anything. So I wonder if it has to deal with the elevation.
You can add the android:translationZ attribute to the ProgressBar:
<ProgressBar
android:id="#+id/progress_bar"
android:layout_width="50dp"
android:layout_height="50dp"
android:translationZ="2dp"
android:layout_centerInParent="true"/>
Same issue here, my simple "hack" was too wrap the Button into another FrameLayout.
This way I don't care about the api version and other elevation issue ;)
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" >
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="#+id/button_action"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Login" />
</FrameLayout>
<ProgressBar
android:id="#+id/progress_bar"
android:layout_width="50dp"
android:layout_height="50dp" />
</FrameLayout>
Same question being asked here, with a better explanation of the issue:
https://stackoverflow.com/a/27216368/235910
To quote #CommonsWare:
The problem appears Android 5.0's elevation property. Apparently,
the RelativeLayout Z-axis ordering is tied into elevation. If both
widgets have the same elevation, the RelativeLayout will determine
the Z-axis order -- you can see that if you were to switch your layout
to be both Button widgets, for example. However, if one widget
(Button) has an elevation, and another widget (ImageView) does
not, the elevation will take precedence.
You can remove the Button elevation via
android:stateListAnimator="#null" or by defining your own custom
animator. Or, you can add some elevation to your ImageView to
get it to be higher on the Z axis than is the Button.
It is better to set android:translationZ more than 2dp. Your view/widget will disappear when you press the button. I explained the reason here.
<!-- Elevation when button is pressed -->
<dimen name="button_elevation_material">1dp</dimen>
<!-- Z translation to apply when button is pressed -->
<dimen name="button_pressed_z_material">2dp</dimen>
Button have these two values and defined in the framework.
If you add 'androidx.core:core' to your build.gradle, you can use this code for API < 21:
ViewCompat.setTranslationZ(viewToElevate, 5);
By default, if you want to show a view on top of a Button, it should have an elevation of at least 2dp.
This is caused by the fact that the elevation of a button is governed by their stateListAnimator. So long as it has one, setting the elevation to the button itself doesn't do anything. The stateListAnimator of Widget.MaterialComponents.Button has a default elevation of #dimen/mtrl_btn_elevation (2dp), so that's the elevation you have to take into account.
Doing android:stateListAnimator="#null" will also work, but that will get rid of any shadow effects at the button.
I have this layout as my list items:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:gravity="center_vertical"
android:layout_width="match_parent"
android:orientation="horizontal"
android:minHeight="42.3dp"
android:layout_height="wrap_content">
<TextView android:id="#+id/txtTagName"
android:textColor="#color/White"
android:layout_width="wrap_content"
android:layout_height="32dp"
android:layout_marginLeft="10dp"
android:textSize="13sp"
android:gravity="center"
android:layout_gravity="left"
android:background="#drawable/tag"/>
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_action_discard"
android:layout_marginLeft="10dp"
android:layout_gravity="right"
android:gravity="center"
android:scaleType="center"
android:alpha="0.5"/>
</LinearLayout>
It looks like this:
The tag patch 9 looks like so:
I have 3 questions:
How to make the delete icon always on the right.
How to make the blurry part of the tag image scale properly? (its a patch 9)
Is it better to have a delete icon next to the tag, or use some sort of long click?
Thank you.
How to make the delete icon always on the right.
Use RelativeLayout instead of LinearLayout and use the property android:layout_alignParentRIght="true". left and right layout_gravity does nothing in a horizontal LinearLayout since that ViewGroup already lays Views out from left to right.
How to make the blurry part of the tag image scale properly? (its a patch 9)
Not sure without knowing more about the image but should be the same as the other image.
Is it better to have a delete icon next to the tag, or use some sort of long click?
This is relative to the users who will use your app, I suppose. The delete icon I think is fine and is more explicit. However, most users nowadays, especially younger ones may understand to long click depending on how your whole app works. However, since you have the room, I think the delete icon is probably good.
How to make the delete icon always on the right.
in your xml item layout, for your imageview of the delete icon, add android:layout_weight="0"
How to make the blurry part of the tag image scale properly? (its a patch 9)
sorry, no idea
Is it better to have a delete icon next to the tag, or use some sort of long click?
depends on the app, if there will be other options other than delete, then make all of them in long click, otherwise leave the icon, IMHO
I am trying to port my WP7 app to android.
Does anyone know how I can layout the text on a single button so that some text appears aligned left and other text appears aligned right? (See below). I need access to be able to dynamically change the percentage number on the right side using code but the text on the right is just static.
Anyone know the answer to this?
The image is here:
http://i.imgur.com/zW7YV.png
Yes you could make it two buttons.
Remove all padding and margin from between them.
Set the same background drawable.
And just ensure when the left is clicked it invokes the right's onPress method (so it looks as if they depress together).
Or wrap the buttons/imageviews/textviews in a layout and perform the onClick on that.
I would use a RelativeLayout for this.
<RelativeLayout
android:width="fill_parent"
android:height="wrap_content"
android:clickable="true"
android:background="#18a2e7"
android:padding="10dip">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Something" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_align_parentRight="true"
android:text="0%" />
</RelativeLayout>
I have a row of buttons with custom 9 patch images, and variable length text. I would like the buttons to be the same height. When the text is long enough to wrap, it expands the button size, making the button with wrapped text bigger than the others. I'm laying these buttons out in code in linear layouts. I can fix the size of the button, but then it just cuts off the bottom. How can I make the text take up more of the padding space of the button, so that the text butts up against the top line of the button?
9patch content area is just used to set a padding. If you change the button's padding you will override the one set by the 9patch.
edit
try something like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button android:text="ButtonButton"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingTop="0dp"
android:paddingBottom="10dp"/>
<Button android:layout_width="wrap_content" android:text="Button"
android:layout_height="match_parent"/>
<Button android:layout_width="wrap_content" android:text="Button"
android:layout_height="match_parent"/>
</LinearLayout>
this way the button will be as high as the others. Sadly, I don't know if it depends on the original button's 9patch that might have asymmetrical paddings, but I can't make the text align with that from other buttons (I think gravity is by default set to center). Maybe with your 9patch it works though. (EDIT: oh, but if you'll have two lines of text who cares about alignment)
Ultimately I was unable to find a nice way of doing this without creating a custom view class.