Adding background to button breaks sizing - android

I have an icon I would like to scale down to 48dp and use as a button (no background). However, adding the android:background attribute (to make the background transparent) seems to break the sizing I have applied to the button and it displays at its full size:
Desired size but with ugly background:
<ImageButton
android:id="#+id/composition_send"
android:layout_width="48dp"
android:layout_height="match_parent"
android:layout_alignParentEnd="true"
android:scaleType="fitCenter"
android:src="#drawable/ic_send_black_48dp"/>
Full (wrong) size, but with no background (desired):
<ImageButton
...
android:background="?android:selectableItemBackground"/>
Why does adding that one line ruin the sizing?

try to add
android:src="#drawable/ic_send_black_48dp
android:backgroundTint="#0000"
to ImageButton, it will make the background transparent and then you can set the image on it.

When you don't set the background property for the Imagebutton, the Imagebutton will use the default Imagebutton background of Android. And this background contains the padding so your image is smaller.
So when you set the background for Imagebutton by a color or resource that doesn't contain padding, your image will look larger
You can find the default background of the Imagebutton and another View in
..\Android\sdk\platforms\android-23\data\res\drawable\
(Some resource in this is not public)
For example
If you compile your project with API 23, the default background of ImageButton is btn_default_material
<ImageButton
...
android:background="#android:drawable/btn_default_material"
android:src="#drawable/ic_send_black_48dp"/>
<ImageButton
...
android:src="#drawable/ic_send_black_48dp"/>
So you set the android:background="#android:drawable/btn_default_material" or don't use background property, 2 ImageButton will look same (note: btn_default_material is not public for use)
Hope this help

If you don't want that ugly background in imagebutton,then you can use an imageview as button and set onClickListener on it. It will behave like a button.
This Link will be helpful to you.

Related

Android Widget ImageView (vector). Set tint (programmatically) RemoteViewsCompat

I'm currently developing an Android widget containing an ImageView which is a Vector.
Now I need to set the tint of this ImageView (In best cast programmatically).
As a workaround (if this is not working), I could set the color within the ImageView, but not NOT within the image asset itself as described here.
app:tint="#color/colorPrimary" within the ImageView seems to be ignored.
The following seems to work:
<ImageView
android:id="#+id/item_plus_symbol"
android:layout_width="16sp"
android:layout_height="16sp"
android:layout_marginStart="2dp"
android:layout_marginTop="3dp"
android:src="#drawable/ic_plus_filled"
android:tint="#color/colorPrimary"
tools:ignore="UseAppTint" />
But is obviously not the best solution (tools:ignore="UseAppTint").
Afterward, I could multiply the ImageView and set the color using the visibility of the different ImageViews.
But as said before, I actually want to set the color programmatically.

Card View background color affects shadow color

I have my Card View set up like this:
android:layout_marginTop="2dp"
android:layout_marginLeft="6dp"
android:layout_marginRight="6dp"
card_view:cardCornerRadius="2dp"
card_view:cardElevation="6dp"
card_view:cardUseCompatPadding="true"
card_view:contentPadding="10p"
Without a background color my Card View looks perfect like this:
However, when I add the simple property:
card_view:cardBackgroundColor="#xxxxxxxx"
the shadows change significantly in terms of color, transparency, blur etc.
How might I go about fixing this? I tried using a RelativeLayout as the background and changing the color there, so it wouldn't affect the shadows... but that affected the rounded corners.
Any ideas? Thanks for the help!
I ran into the exact same problem and solved it by removing the alpha portion of my hex code.
Example: #AA333333 removing the AA. Of course use the hex color that you need without the alpha.
Your idea of RelativeLayout is a good one. Instead of placing the card view in RelativeLayout, add RelativeLayout as CardView child, and than add its content to RelativeLayout, in your case it look like you got single child: TextView.
So change your TextView background color or place it in a RelativeLayout and change RelativeLayout background color.
As a workaround, since the alpha is the problem, you can try to brigthen the card color (or blend it with the underlying color)
ColorUtils.blendARGB(yourCardColor, Color.WHITE, 0.2f)
Instead of that, set android:background="#hexColor"

The android:src property of ImageView doesn't support .9.png file?

I need to draw some divider line with some background image. I tried the ImageView control with the image as the value of android:src, but it didn't work. So I replaced the ImageView with a TextView with no text inside and specified the background image as its background. It indeed worked. Is there any better solution besides using a TextView?
Why not use the View Widget?
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#drawable/fixed_divider_horizontal_bright" >
</View>
NOTE: The dot you see right above this, is a 9-patch image (used in the code snippet). ;-)
i always just use a View and set the backgound.
I don't exactly understand your need. If you want use the ImageView as a divider, you can try this attribute android:scaleType="fitXY"

Android Application : Background Image over Background Color

I am new to android development and am developing my first android application. I have the background color of the View set in the layout's xml as follows.
android:background="#+color/bgColor"
Now, i have a full sized transparent background image that i want to lay over the background and then other Elements over that image.
is there a way i can use both background color and background image in the same layout.
Thanks in Advance.
You can use an ImageView with a background color:
<ImageView
layout_width="match_parent"
layout_height="match_parent"
src="#drawable/myImage"
background="#color/myBgColor" />
Another option is to set the background color in the root element of your layout, and keep the src in your ImageView.
I'm using AppCompatImageView. In this background color can be set using the below property.
android:backgroundTint="#color/colorPrimary"

Any way to remove the grey background from ImageButtons?

I have an ImageButton and I'd like to remove the ugly (IMHO) background that surrounds the Image. I could just add an ImageView, but they're very hard to get set perfectly in a Layout like the grey one pictured. [gravity "Center" doesn't make it go to the middle, just centers it Vertically.)
So any way to remove that?
Just use android:background="#0000"
(#0000 same with #00000000)
or
ImageButton imageButton = new ImageButton(this);
imageButton.setBackgroundDrawable(null);
The default background is not transparent.
So, just add the transparent color "#00000000" as you background, then you could solve it.
p.s. #00000000 is the transparent color
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon"
android:background="#00000000"
/>
You can keep the square box and just change its color like this:
android:backgroundTint="#color/colorPrimary"
works beautifully
I'm having the same problem but now it has been solved. If you are using "android:background="#null" it will resulted of no background at all and no button pressed animation will be appeared to the user.
Just adding this line of code to make an image button become flashing upon clicked. This is the proper way to alert the user an image button has been clicked.
"android:background="?android:selectableItemBackground"
just useandroid:background="#null" in your xml
if you set the
android:background
instead of
android:src
it should overwrite the gray background
Yeah. If you drag ImageButton that will usually ask for ImageSource. But the ImageSource(android:src) doesn't remove the gray background. It is an image that should be on top of background:
Instead of that try android:background in layout XML.
please use the Draw 9-patch format for the image b'use it is provided by SDK
1. From a terminal, launch the draw9patch application from your SDK /tools directory.
2. Drag your PNG image into the Draw 9-patch window (or File > Open 9-patch... to locate the file). Your workspace will now open.
The left pane is your drawing area, in which you can edit the lines for the stretchable patches and content area. The right pane is the preview area, where you can preview your graphic when stretched.
3. Click within the 1-pixel perimeter to draw the lines that define the stretchable patches and (optional) content area. Right-click (or hold Shift and click, on Mac) to erase previously drawn lines.
4. When done, select File > Save 9-patch...
Your image will be saved with the .9.png file name.
Use like this
android:background="#android:color/transparent"
android:src="#drawable/icon"
All proposed solutions remove the ripple animation (on tap)
Settings background tint mode to 'add' will remove the background and keep ripple animation:
android:backgroundTintMode="add"
If using Xamarin Forms it can be done like this in the xaml view. Set background to transparent.
<ImageButton BackgroundColor="Transparent"

Categories

Resources