Here is my ToggleButton:
<ToggleButton
android:id="#+id/bSmenuTopItems"
android:layout_width="wrap_content"
android:layout_height="48dp"
android:background="#drawable/master_button_selector"
android:drawableLeft="#drawable/flame_icon" />
I have no text in this image, I need a ToggleButton due to Active State.
EDIT: I think question was misunderstood. There is a drawable inside the Toggle Button (flame_icon) and it is set as background. I want it to be centered. There is no Text, just an image. I need a Toggle Button because I need to have an Active State when selected.
There is only drawableLeft, drawableRight, drawableTop, etc. I want a draweableMiddle that doesn't seem to exisit.
I revised the answer to answer your revised question.
The drawableLeft, drawableRight, and drawableTop button, as far as I can tell, control where the image is placed relative to the selector (a/k/a on/off) indicator. Top will place it above the indicator with left and right placing it to a specific side respectively. I do not believe you can remove the selector indicator as that would defeat the purpose of using a ToggleButton.
I was able to center 2 drawable in 2 ToggleButtons using the following layout. To center the images within the ToggleButton I used drawableTop so that the images appeared over the selection indicator. I then set both textOn and textOff to be an empty string. If you do not set this, then the default on/off text appears above the selector indicator and pushes the drawable to the side.
<LinearLayout
android:id="#+id/buttonContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal">
<ToggleButton
android:id="#+id/bSmenuTopItems"
android:layout_width="0"
android:layout_weight="1"
android:layout_height="75dp"
android:checked="false"
android:drawableTop="#drawable/flag"
android:textOn=""
android:textOff=""
android:layout_gravity="center"
android:textColor="#cecece" />
<ToggleButton
android:id="#+id/bSmenuTopItems2"
android:layout_width="0"
android:layout_height="75dp"
android:layout_weight="1"
android:checked="false"
android:textOn=""
android:textOff=""
android:drawableTop="#drawable/chaticon"
android:layout_gravity="center"
android:textColor="#cecece" />
</LinearLayout>
All you should have to do is adjust the height of the button to position your icon relative to the selector icon where you want it. My only other suggestion would be to control the size of the image you are using. If you can just adjust the dimensions of the image relative to the button, placing it with drawableTop should center it automatically.
I didn't have any luck with the accepted answer but maybe my scenario is subtly different. The other solution I've seen is to use the drawablePadding attribute to push the topDrawable toward the center of the button. That works to an extent but it assumes that the button's dimensions are fixed and even then, it's difficult to center the icon perfectly.
This is what I came up with instead. Don't specify the icon on the button itself. Instead, set the button's background to a layer-list drawable that draws the icon you want over the selector you want, like so:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/master_button_selector" />
<item>
<bitmap android:src="#drawable/flame_icon" android:gravity="center" />
</item>
</layer-list>
I used the android:drawableTop as described by Rarw, but as my button was tall and wide, it just hung at the top. Not really centred...so I fiddled around with the paddingTop and it might work here what I got:
<ToggleButton
android:id="#+id/togglebutton1"
android:paddingTop="50dp"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_gravity="center"
android:layout_weight="1"
android:drawableTop="#drawable/music_collection_small"
android:textOn=""
android:textOff=""
/>
I think it will work for my purposes
Maybe this will help you. Look at the bottom of the page for the solution from
zapl.
P.S didn't know how to link the specific answer, new here XD
Related
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" />
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);
I searched a lot but I didn't find how to remove the background color from the button which is appearing on the right and left side of button. Can anybody help?
My screen looks like
No matter what I try I am not able to remove the black portion.
Code:
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/btn_base"
android:text="#string/base"
android:layout_margin="2dp"
android:textColor="#000000"
android:background="#drawable/selector_button"
android:layout_weight="0.5"
android:layout_width="0dp"
android:layout_height="30dp"/>
<Button
android:id="#+id/btn_care"
android:text="#string/care"
android:layout_margin="2dp"
android:textColor="#000000"
android:background="#drawable/selector_button"
android:layout_weight="0.5"
android:layout_width="0dp"
android:layout_height="30dp"/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/btn_daily_prize"
android:layout_margin="2dp"
android:textColor="#000000"
android:background="#drawable/selector_button"
android:layout_weight="0.5"
android:layout_width="0dp"
android:layout_height="30dp"
android:text="#string/daily_prize" />
<Button
android:id="#+id/btn_winner"
android:layout_margin="2dp"
android:textColor="#000000"
android:background="#drawable/selector_button"
android:layout_weight="0.5"
android:layout_width="0dp"
android:layout_height="30dp"
android:text="#string/winner" />
</LinearLayout>
</LinearLayout>
#Drawable/selector_button
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true"
android:drawable="#drawable/pressed"> </item>
<item android:state_focused="true"
android:drawable="#drawable/focused"/>
<item android:drawable="#drawable/change"></item>
</selector>
this is the image used with name change.9.png
according to your scenario i can surely say that either you are not using a 9-patch image (an image with extension like .9.png ) or the 1 pixel borders of 9-patch at left and top are not drawn in correct manner. thats why the edges and the side border shade get expanded with the button with long width. either you should show what 9-patch button background you have used or try some correct 9-patch and check results for that.
Why don't you use some other control element like TextView instead of buttons? I just saw that TextView has onClickListner and so you can use it as sort-of button, though I have not done it; button is meant to aid you defining your layout, but as this seems to only be a problem for you, just do not use it).
By the way I seriously recommend you to use android styles, as you copy-paste a lot of attributes. If you use Eclipse for development, open your layout xml, select the item you want to extract the style of, press ctrl + 1 and then select extract style. That way you should avoid copy-pasting all these style attributes.
Try removing the android:textColor attribute. These can be misleading and sometimes alter the colour of more than just the text. If the text is supposed to be black then you don't need it.
I have a TextView with a background that declared as:
<TextView
android:id="#+id/questionText"
android:layout_width="250dp"
android:layout_height="100dp"
android:gravity="center"
android:textSize="26px"
android:textColor="#FFFFFF"
android:background="#drawable/blue"
/>
the problem is that the background image is like a frame, so i want the
text inside to have a margin from the background image dimensions.
Is this possible?
10X alot,
have a gr8 weekend :)
What you want sounds like padding.
<TextView
android:id="#+id/questionText"
android:layout_width="250dp"
android:layout_height="100dp"
android:gravity="center"
android:textSize="26px"
android:textColor="#FFFFFF"
android:background="#drawable/blue"
android:padding="5dp"
/>
This would put a 5 pixel border around the actual text showing the background through.
Incidentally, layout_margin is also a parameter and is used to put space between the entire view, background included, and other views.
I'd recommend to make 9-patch drawable. It defines where the text can be without specifying padding in the control.
Can anybody tell me how to resize the imageButton to fit the image exactly? This is the code that I tried, but the image is placed at the position that I am locating using android:scaleType, but I am not able to reduce the size of imageButton. Please help me out in rectifying this issue. The code that I tried is:
<ImageButton>
android:id="#+id/Button01"
android:scaleType="fitXY" // i have tried all the values for this attr
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:cropToPadding="false"
android:paddingLeft="10dp"
android:src="#drawable/eye"> // this is the image(eye)
</ImageButton>
android:background="#drawable/eye"
works automatically.
android:src="#drawable/eye"
was what I used with all the problems of resizing the image the the width and height of the button...
you are setting the image with the property "src"
android:src="#drawable/eye">
use "background" property instead "src" property:
android:background="#drawable/eye"
like:
<ImageButton
android:id="#+id/Button01"
android:scaleType="fitXY"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:cropToPadding="false"
android:paddingLeft="10dp"
android:background="#drawable/eye"> // this is the image(eye)
</ImageButton>
You're probably going to have to resize the button programmatically. You'll need to explicitly load the image in your onCreate() method, and resize the button there:
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
ImageButton myButton = (ImageButton) findViewById(R.id.button);
Bitmap image = BitmapFactory.decodeResource(R.drawable.eye);
myButton.setBitmap(image);
myButton.setMinimumWidth(image.getWidth());
myButton.setMinimumHeight(image.getHeight());
...
}
It's not guaranteed to work, according to the specifications for setMinimumX (since the width and height are still dependent on the parent view), but it should work pretty well for almost every situation.
Try to use ScaleType centerInside.
ScaleTypes are not properly rendered in Eclipse Layout designer, so test in your running app.
Did you try to give the layout_width and layout_height like the following? Since you are setting with wrap_content, the image button expands to the size of source image's height and width.
<blink>
<ImageButton>
android:id="#+id/Button01"
android:scaleType="fitXY"
android:layout_width="80dip"
android:layout_height="80dip"
android:cropToPadding="false"
android:paddingLeft="10dp"
android:src="#drawable/eye">
</ImageButton>
</blink>
You don't have to use it using src attribute
Wrong way (The image won't fit the button)
android:src="#drawable/myimage"
Right way is to use background atttribute
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#drawable/skin" />
where skin is an xml
skin.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- <item android:drawable="#drawable/button_disabled" android:state_enabled="false"/> -->
<item android:drawable="#drawable/button_pressed" android:state_pressed="true"/>
<!-- <item android:drawable="#drawable/button_focused" android:state_focused="true"/> -->
<item android:drawable="#drawable/button_normal"/>
</selector>
using button_pressed.png and button_normal.png
This will also help you in creating your skinned button with 4 states of pressed , normal , disabled and focussed.
Make sure to keep same sizes of all pngs
You can also set background is transparent. So the button looks like fit your icon.
<ImageButton
android:id="#+id/Button01"
android:scaleType="fitcenter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:cropToPadding="false"
android:paddingLeft="10dp"
android:background="#android:color/transparent"
android:src="#drawable/eye" />
I think you already solved this problem, and as other answers suggested
android:background="#drawable/eye"
is available. But I prefer
android:src="#drawable/eye"
android:background="00000000" // transparent
and it works well too.(of course former code will set image as a background and the other will set image as a image) But according to your selected answer, I guess you meant 9-patch.