For some reason, I need to use a button with both icon and text. So I can't use ImageButton and thus I go for a solution to set the drawableTop of a normal Button.
The Button size is 140dp in square shape (please refer to the screenshot below)
The I was planning to use was 125x125 px and the asset itself is clear and crisp.
However, this 125px asset somehow being enlarged by the button, like the screenshot shown below.
The device is an xhdpi device.
As you can see, the icon inside the square button is blurry which looks like being somehow enlarged
Here I pasted my button XML
<Button
android:id="#+id/button_call_us"
android:layout_width="140dp"
android:layout_height="140dp"
android:layout_margin="#dimen/main_menu_button_margin"
android:adjustViewBounds="true"
android:background="#drawable/custom_button"
android:drawablePadding="-20dp"
android:drawableTop="#drawable/button_call_us_icon"
android:lines="2"
android:paddingTop="0dp"
android:scaleType="fitXY"
android:text="CALL US"
android:textColor="#color/white"
android:textSize="6pt" />
The android:background="#drawable/custom_button" is the purple colour background without any patterns.
The android:drawableTop="#drawable/button_call_us_icon" is the icon.
Except android:scaleType="fitXY", I have also tried centerInside and other options, still not getting the ideal result.
My question is:
Why the drawable inside a Button being enlarged? Is there any way to stop it?
Thanks
Since it's a button, and you want a drawable inside the button. Your probable solution would be to use an ImageButton which actually implements drawable properties. You can then call android:scaleType="fitCenter" and set some padding too
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/android_button" />
However, to get more freedom in terms of desing, you could use a simple layout instead of the button, something on the lines of this, just treat the LinearLayout as you would with a button, in terms of adding the onclicklistener:
<LinearLayout android:orientations="vertical"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:orientation="vertical"
android:background="#CCC"
android:padding="8dp"
android:gravity="center">
<ImageView android:src='#drawable/ic_launcher'
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView android:text="Lorem Ipsum"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
</LinearLayout>
Try this code
Drawable img = getResources().getDrawable( R.drawable.img );
img.setBounds( 0, 0, (int)(img.getIntrinsicWidth()),
(int)(img.getIntrinsicHeight()) );
button.setCompoundDrawables(null, img, null, null);
Related
my problem seems to be easy but I have no idea how to solve it.
I have a few buttons and all of them have a background image. The problem is, all images turns into blue color
It looks like this:
Original photo:
Here's a part of my xml code:
<Button
android:id="#+id/memory_button1"
android:layout_weight="1"
android:maxWidth="30dp"
android:maxHeight="30dp"
android:onClick="#{()->viewModel.showTile(1)}"
android:background="#{viewModel.button001}">
</Button>
Icons url:
https://www.flaticon.com/packs/restaurant-225
Better approach to use ImageView as button with ripple click effect would be
<ImageView
android:id="#+id/memory_button1"
android:layout_weight="1"
android:maxWidth="30dp"
android:maxHeight="30dp"
android:background="?selectableItemBackground"
android:clickable="true"
android:focusable="true"
android:onClick="#{()->viewModel.showTile(1)}"
android:src="#{viewModel.button001}"/>
Also you can even wrap it in a CardView
If you want to have the only image in your button. you can replace it with ImageView so that you can have full control of how the image is being drawn.
<ImageView
android:id="#+id/memory_button1"
android:layout_weight="1"
android:maxWidth="30dp"
android:maxHeight="30dp"
android:onClick="#{()->viewModel.showTile(1)}"
android:src="#{viewModel.button001}">
</ImageView>
You will option for scale type for ImageView's so that you can render image without stretching it.
I created a personal keyboard and set the background image to the one of the buttons, but after that button size (with my background) is different from one another.
<Button
android:id="#+id/buttonShift"
android:paddingTop="0dip"
android:textSize="22sp"
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1"
android:textStyle="bold" />
Set background:
<Button
android:id="#+id/buttonShift"
android:background="#drawable/sym_keyboard_shift_off"
android:paddingTop="0dip"
android:textSize="22sp"
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1"
android:textStyle="bold" />
Please, see the screen of the buttons
Before:
After:
Image size: 106x68
I would advise you to:
Change your drawable a bit - remove the orange rectangle background, keep only the arrow with transparent background (from now on I will use the name shift_off_arrow as a name of described drawable). The transparent background should be only as big as it is needed to keep the whole arrow. Not bigger.
Define a new color - the color of your orange background (from this moment I will assume you have defined it and I will be using name orange_background)
Use ImageButton instead of Button (just like satnam singh and Hamid Shatu said in a comments to your question)
Use code like this (manipulate with all paddings to get the size of the arrow exactly like you want):
<ImageButton
android:id="#+id/buttonShift"
android:background="#color/orange_background"
android:src="#drawable/shift_off_arrow"
android:paddingTop="0dip"
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1" />
I have a button where I put a picture ... I must try to resize the image inside the button ... how can I resize it? Can I do it directly from the xml code?
This is the xml code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_root"
android:orientation="vertical"
android:layout_width="250dp"
android:layout_height="180dp"
android:paddingLeft="4dip"
android:paddingRight="4dip"
android:background="#color/white_trasparent"
android:weightSum="1">
<TextView
android:layout_height="wrap_content"
android:id="#+id/text"
android:textColor="#color/grey"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_width="wrap_content"
android:layout_marginLeft="15dp">
</TextView>
<Button
android:layout_width="wrap_content"
android:text="Drawable Top"
android:id="#+id/Button03"
android:drawableTop="#drawable/icon"
android:layout_height="wrap_content"
android:textSize="10dp">
</Button>
</LinearLayout>
if my understanding of the drawableTop/left/bottom/right properties is correct that is not going to place your image inside your button, rather it is going to put it on top (north of) your button.
If you're looking to put an image inside a button check out ImageButton.
I don't think either of these things will let you just set the size of only your image though (they will let you change the size of the whole view, in this case the rectangle button box, and the image inside it.)
In order to change the size of the image without affecting the size of the button box graphic I think you'd have to shrink your resource image in photoshop or something.
i want to write an application where the user can change the color scheme. I have Imagebuttons and the images on the buttons are pngs and have transparent background. but when i place them on the buttons they are not transparent anymore. could anybody help me with some code?
thanks!
Anne
Are you ensuring that android:background="#null" is set? Otherwise you'll have the gray button background. For example:
<ImageButton
android:background="#null"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/my_transparent_png"
/>
write your layout for ImageButton as:
<ImageButton
android:src="#drawable/your_image"
android:id="#+id/your_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"/>
Hope this helps!
I want to have a button that has an image on top and some text on bottom. Both the image and text are decided during runtime, so I want to be able to combine ImageButton's setImageBitmap and Button's setText for each button.
Any ideas?
Thanks
Chris
Surround both image Button and text View code in .... to override text on image button's background. i.e:
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="69dp"
android:layout_marginTop="96dp"
android:background="#drawable/icon"
android:scaleType="fitXY" />
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Droid"
android:textColor="#ff0000"
android:textSize="24dip" >
</TextView>
</FrameLayout>
I finally found what I was looking for:
setCompoundDrawablesWithIntrinsicBounds lets me assign a bitmap/drawable for a Button, at the same time letting me use setText.
For eg: To set a bitmap image on top of the button, do something like
button.setCompoundDrawablesWithIntrinsicBounds(null, new BitmapDrawable(bitmapimage), null, null);
I don't think there is an easy way to do that.
I would create a custom-component.