What I need to do is have the background image just fill up the natural size of the button, as when no background is specified and the default grey background image is shown. But instead, my button scales up to the size of the background image rather than the text.
There was a previous question, but nobody had a solution.
The button:
<Button
android:id="#+id/morebtn"
style="#style/CustomButton"
android:text="More" />
I have this custom button style (greybutton is a 9-patch):
<resources>
<style name="CustomButton" parent="#android:style/TextAppearance">
<item name="android:textColor">#FFFFFF</item>
<item name="android:layout_marginLeft">10dip</item>
<item name="android:layout_marginRight">10dip</item>
<item name="android:layout_marginBottom">10dip</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_centerInParent">true</item>
<item name="android:background">#drawable/greybutton</item>
<item name="android:textSize">20sp</item>
</style>
</resources>
Right now it fills up the screen widthwise, despite being told to wrap_content. When I remove android:background from the Button style, the button shrinks down to wrap the text as expected.
Does anyone see why my background image isn't behaving like the default Button background?
Why don't you use ImageButton instead:
<ImageButton android:src="#drawable/greybutton"
android:scaleType="fitCenter" android:layout_width="wrap_content"
android:layout_height="wrap_content" />
then you can adjust the scaling with the scaleType attribute.
The only downside is you can't set any text.
Damnit. I had an hdpi drawable that hadn't been converted to 9patch, and for some reason that was getting applied instead of the one in the mdpi drawables folder even on my mdpi screen. The background scaling actually does work as expected after all. Sorry!
(So if you're browsing this question with a similar problem, check your drawables folder to make sure you're drawing what you think you are. Also: may wish to be sure the content boundaries in your nine-patch are of the appropriate size. Note that they aren't the same as the stretchable boundaries.)
You could try hard coding the height and width of the buttons using dip. That will be an issue if you need the Text on the buttons to change but it should work to restrain the button from expanding to the size of the image. Of course a large image will make the button larger.. the width / height is wrap_content, and the image is clearly part of the content... try hardcoding width / height parameters.
Add these two items to your CustomButton style
<item name="android:minWidth">0dp</item>
<item name="android:minHeight">0dp</item>
Related
In my Splash Screen, I have an image that spreads all over the screen and because of this, the image is not looking good - like it got stretched.
I wanted to fix this by adding "android:height" attribute to the Splash Screen style and change the image height but the image remains stretched.
Apparently, the android:height attribute is affecting all of the views that inside the layout that related to the Splash Screen
This is my style for the splash screen:
<style name="splashScreenTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowBackground">#mipmap/app_icon</item>
<item name="android:height">100dp</item>
</style>
Any ideas on why android:height affect the layout views and not the Splash Screen image?
note:
I saw this question talking about different images for different screen sizes, but the difference is that I don't want the image to spread all over the screen.
You using <item name="android:height">100dp</item> for root view of the Activity. Its not instance of View class, it smth else. And you cant set height for it, Activity should match available area.
To fix stretched image, try this. Set background not a bitmap, but the drawable
<style name="splashScreenTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowBackground">#drawable/shape_background_splash</item>
</style>
and create this drawable
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#android:color/white"/>
<item>
<bitmap
android:gravity="center"
android:src="#mipmap/app_icon"/>
</item>
</layer-list>
if you have a bitmap for all scales it should looks good
In my application, I need to change the background color of a button in response to certain events. That works fine by setting creating a drawable, setting its paint and using that drawable as the button background:
ShapeDrawable drawable = new ShapeDrawable(roundRectShape);
drawable.getPaint().setColor(color);
b.setBackground(drawable);
Now, I want to overlay an alpha mask onto that drawable, creating a "striped" button. Here's how it should look like for a blue and a black button (assuming white as the background color, but these sections should really be 100% transparent):
I made this alpha mask in Inkscape, and successfully imported it as a vector asset. I might need to convert it to a bitmap of sorts, but I'm not sure.
I've read a bunch of articles and SO questions mentioning PorterDuff matrices to apply, but haven't been able to translate these into solving my current problem.
Anyone know how to do this?
Here's another visualization, hopefully making things clearer. The background color of the parent view of the button is pale pink here, and the button border is outlined in red (but should really be invisible in the end product):
//This will help.
ImageView img = (ImageView) findViewById(R.drawable.yourimage);
img.setAlpha(100);
//Transparent is between 0 and 255;
//If you want to use Bitmap
Bitmap b = BitmapFactory.decodeResources(getResources(), R.drawable.yourimage);
img.setImageBitmap(b);
img.setAlpha(100);
So, I figured out how to do this, albeit not using an SVG - too many issues there.
First, I switched from using a Button to ImageButton. Then I applied the following style:
<style name="stripedButton">
<item name="android:layout_gravity">left</item>
<item name="android:layout_height">match_parent</item>
<item name="android:stateListAnimator">#null</item>
<item name="android:clickable">true</item>
<item name="android:elevation">0dp</item>
<item name="android:longClickable">true</item>
<item name="layout_widthPercent">70%</item>
<item name="android:src">#drawable/fade_in_bars</item>
<item name="android:tint">#color/RED</item>
<item name="android:background">#null</item>
<!-- Stretch image to fill entire button. -->
<item name="android:scaleType">fitXY</item>
</style>
fade_in_bars is just the png version of the alpha mask shown in the original question. The color can be set in XML or programmatically using the tint attribute. I don't quite understand why I need to set the background to null, but it looks strange otherwise. Finally, setting the scaleType to fitXY is needed so that all the stripes are shown, regardless of the size of the button on a particular display.
Here's what it looks like:
I have included a rating bar in android, and now I need to place a text view to immediate right if the rating bar.But I failed to do the same since, there is a lot of unwanted space (rectangular blue box) around the rating bar, which prevents me from placing the textview to its immediate right side. Is there any way to reduce this space around the rating bar , so that both the textview and the rating bar comes in same line and textview is placed next to the rating bar without a gap.Please help me with a good support! Thanks in advance! Here is my xml code for it.
<RatingBar
android:id="#+id/overall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="70dp"
android:numStars="5"
android:rating="0.0"
android:scaleX="0.4"
android:scaleY="0.4"
android:stepSize="0.01" />
You can use android default styles, Like:
style="#android:style/Widget.Holo.Light.RatingBar.Small"
in you xml layout. I am using above and have no space around it.
You can check variants here
I tried to use different suggestion but i was unsuccessful with the Android Rating bar removal of extra padding. All i did downloaded ic icons from https://material.io/icons/ and use star and star bordered icon and programmed them with switch cases.
While using the base style for the RatingBar, set the minHeight to 0dp. The base minHeight in the style itself was preventing the view from scaling down. Setting it to 0 should work as you expect a normal view (we set ours to wrap_content).
Tried to use the base (#android:style/Widget.RatingBar) and small (#android:style/Widget.DeviceDefault.RatingBar.Small and #android:style/Widget.Holo.Light.RatingBar.Small) but both fixed/limited the size of the the RatingBar regardless of what icon is used. Looking at their codes, it was no surprise.
<style name="Widget.RatingBar">
<item name="indeterminateOnly">false</item>
<item name="progressDrawable">#drawable/ratingbar_full</item>
<item name="indeterminateDrawable">#drawable/ratingbar_full</item>
<item name="minHeight">57dip</item>
<item name="maxHeight">57dip</item>
<item name="thumb">#null</item>
<item name="mirrorForRtl">true</item>
</style>
<style name="Widget.Material.RatingBar.Small" parent="Widget.RatingBar.Small">
<item name="progressDrawable">#drawable/ratingbar_small_material</item>
<item name="indeterminateDrawable">#drawable/ratingbar_small_material</item>
<item name="minHeight">16dp</item>
<item name="maxHeight">16dp</item>
</style>
<style name="Widget.Holo.Light.RatingBar.Small" parent="Widget.RatingBar.Small">
<item name="progressDrawable">#drawable/ratingbar_small_holo_light</item>
<item name="indeterminateDrawable">#drawable/ratingbar_small_holo_light</item>
<item name="minHeight">16dip</item>
<item name="maxHeight">16dip</item>
</style>
Setting the scales didn't work right either.
I am creating a menu in an Android app with several list items and corresponding icons. The problem that I'm having is that the icons are being stretched beyond the image size for some reason. I have created a menu like this before without such a problem, and I essentially copied the code over to this new project, primarily only changing the image names and string names.
Here is the code from the menu layout for a single list item:
<TextView
android:id="#+id/listItemCardTransactions"
style="#style/NavigationMenuItem"
android:drawableLeft="#drawable/ic_card_transaction_menu_icon_normal"
android:text="#string/card_transactions" />
Here is the NavigationMenuItem style:
<style name="NavigationMenuItem">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:paddingTop">#dimen/menu_list_item_padding</item>
<item name="android:paddingBottom">#dimen/menu_list_item_padding</item>
<item name="android:paddingLeft">#dimen/menu_list_item_padding</item>
<item name="android:drawablePadding">#dimen/menu_list_item_left_padding</item>
<item name="android:gravity">center_vertical</item>
<item name="android:clickable">true</item>
<item name="android:background">#drawable/selector_navigation_item</item>
<item name="android:textSize">#dimen/text_size_menu_item</item>
</style>
Here are the dimensions:
<dimen name="text_size_menu_item">18sp</dimen>
<dimen name="menu_list_item_padding">6dip</dimen>
<dimen name="menu_list_item_left_padding">12dip</dimen>
And here is what the menu looks like right now (I know there are several other problems but those aren't my concern right now). You can see the stretching problem best when you drag-and-drop the image to get the full view:
And what the icon is supposed to look like (this one is grey since I wasn't sure how to easily make the white one visible on a white background):
Anyone know what might be causing the image to stretch past its dimensions like this?
I would follow Barry's advise in the comments, ie use an ImageView + TextView inside a LinearLayout for each item. However, to solve the "the height of the list item is smaller", you could try adding the following attribute to the ImageView:
android:adjustViewBounds="true"
If I'm not mistaken, this should effectively make sure that the view bounds is actually based on the content of the image, and not the aspect ratio (ie, it won't change the height beyond the maximum height of the image itself due to "scaling").
Hope that helps (and also makes a bit sense).
I'm starting with a fully working app, with all the buttons in the right locations and the right sizes... but now I wanted to try out using styles for the first time. In particular I wanted to have the text colour in my buttons a dark blue and the background white. So I wrote the following in styles.xml in res/values ->
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="mybut" parent="#android:style/Widget.Button">
<item name="android:textColor">#color/dblue</item>
<item name="android:background">#ffffffff</item>
</style>
</resources>
I modified my button code as follows:
<Button
android:id="#+id/spec"
style="#style/mybut" <-- I added this line here
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.12"
android:text="#string/spec" />
In eclipse's XML viewer, the new button looked right in every way. But then at run time, on my android device, the button's height had shrunk by about a third! Any ideas?
EDIT: I'm not very confident about the parent="#android:style/Widget.Button" bit. I'm suspicious that perhaps I'm somehow already using some other style?/theme? and perhaps the line should look something akin to parent="#android:otherstyle/Widget.Button" or parent="#android:style/other.Widget.Button"... or similar.
EDIT: FYI... I'm trying this out on a kind of "home screen" activity which just contains two big buttons. I added the style="#style/mybut" to just one of the two buttons. They are now clearly very different sizes.
EDIT: I noticed that in the manifest I have android:theme="#android:style/Theme.NoTitleBar.Fullscreen" ... does that mean I need to make my button's parent android:theme="#android:style/Theme.NoTitleBar.Fullscreen.Widget.Button" ?? or something like that?
By default, a Button has a 9-patch background, not a simple color. This image has padding and a content area which alters the actual size of the button.
When you change the background, you're stripping that padding, and it appears smaller. The correct way to do this is to create a new 9-patch, based on the old, but with the colors changed.
The problem must be here:
android:layout_weight="0.12"
If you have an action_bar or something like that when you run your app the button is going to shrink. In your preview the action_bar doesn't appear (I'm just guessing).
EDIT:
Here is a sample of a custom button that I use in my app, I put a min height and width.
Instead of using: parent="#android:style/Widget.Button" I use: parent="android:Widget.Button"
<style name="ButtonCustom" parent="android:Widget.Button">
<item name="android:background">#drawable/btn_default_holo_light</item>
<item name="android:minHeight">48dip</item>
<item name="android:minWidth">64dip</item>
<item name="android:textColor">#fff</item>
</style>