How to reduce the space around rating bar in android - android

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.

Related

set actionbar icon height to match actionbar height

see the problem here, the grey checkbox leaves room from the top and bottom of the action bar:
styles.xml
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="CustomActionBarTheme" parent="Theme.Base.AppCompat.Light">
<item name="android:windowContentOverlay">#null</item>
<item name="android:actionButtonStyle">#style/ActionButtonStyle</item>
</style>
<!--<style name="ActionButtonStyle" parent="#android:style/Widget.Holo.Light.ActionButton">-->
<style name="ActionButtonStyle" >
<item name="android:height">#dimen/abc_action_bar_default_height</item>
<item name="android:layout_height">#dimen/abc_action_bar_default_height</item>
</style>
i set the item like so:
getMenuInflater().inflate(R.menu.submit_action, menu);
submit_action looks like:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item android:id="#+id/action_submit"
android:icon="#drawable/check"
app:showAsAction="always" />
</menu>
and finally, attached is the #drawable/check being used.
any idea how i can get the check to fill the actionbar?
The reason your icon doesn't fill the ActionBar is due to how the ActionMenuItemView measures the icon.
The ActionMenuItemView invokes a maximum size of 32dp when it sets the bounds for your icon
So, it makes so difference how large your image is, the system will always resize it.
any idea how i can get the check to fill the actionbar?
You should use a action layout for your MenuItem, a check mark icon with no background, and change the background color of the action layout parent as you see fit. Here's an example:
layout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
style="?android:attr/actionButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#e8e8e8"
android:clickable="true"
android:contentDescription="#string/cd" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#null"
android:scaleType="centerInside"
android:src="#drawable/ic_action_tick" />
</RelativeLayout>
MenuItem
<item
android:id="#+id/action_submit"
android:actionLayout="#layout/your_action_layout"
android:showAsAction="always"/>
Accessibility
It's important to make sure your MenuItem is accessible. Normally when you long press an item in the ActionBar a short Toast will display the content description for you, but when you're using a custom MenuItem it's up to you to implement this pattern. An easy way to do this is by using Roman Nurik's CheatSheet. If you're unsure how to use it, you should refer to my answer here that goes into much more detail on creating custom MenuItem layouts.
Alternatively
If you want to use that background color for every MenuItem you have, you could create a custom style and apply it using the android:actionButtonStyle attribute. Here's an example of that:
Your style
<style name="Your.ActionButton" parent="#android:style/Widget.Holo.Light.ActionButton">
<item name="android:background">#e8e8e8</item>
</style>
Your theme
<style name="Your.Theme" parent="#android:style/Theme.Holo.Light">
<item name="android:actionButtonStyle">#style/Your.ActionButton</item>
</style>
Results
Here's what I do with Icons in Android to get the sizing correct. You have an existing project with the res/drawable- folders. You have to put the correct Icon into the correct folder.
Start a new project wizard and when you get to the launcher icon put in the Icon you want to use in your existing project. finish the wizard. The wizard will make the various sizes of Icons for you. Then I manually copy the Icons from the res/drawable-xdpi res/drawable-ldpi etc to the corresponding folder on my existing project. Delete the new project it is no longer needed.

Compound drawable in a TextView is stretching beyond the image size

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).

indeterminateProgressBar in ActionBar styling - padding issue

I want to put an indeterminate progress bar inside my ActionBar (using ActionBarSherlock). Everything works, but I want it to be the small progress bar. I use following style:
<style name="IndeterminateProgress" parent="#android:style/Widget.ProgressBar.Small">
<item name="android:progressBarPadding">32dp</item>
<item name="progressBarPadding">32dp</item>
<item name="android:itemPadding">32dp</item>
<item name="itemPadding">32dp</item>
</style>
<style name="Widget.Styled.ActionBar.Tiles" parent="Widget.Sherlock.Light.ActionBar">
<item name="android:indeterminateProgressStyle">#style/IndeterminateProgress</item>
<item name="android:progressBarPadding">32dp</item>
<item name="progressBarPadding">32dp</item>
<item name="android:itemPadding">32dp</item>
<item name="itemPadding">32dp</item>
</style>
The problem is that I cannot set the padding on the progress bar. As you can see above, I've tried every possible combination of itemPadding and progressBarPadding, etc.
The result is always the same:
Any ideas?
I found a working solution how to set indeterminate progress bar with proper size and padding. My solution doesn't use workaround with setActionView(). It is solution for built-in progress bar functionality, supported by native action bar (ActionBarSherlock). Progress bar is enabled/disabled via setProgressBarIndeterminateVisibility(boolean) method. I tested it on Android 2, 3, 4 and ldpi, mdpi, xhdpi.
AndroidManifest.xml:
<application
...
android:theme="#style/Theme.Example">
/res/values/styles.xml:
<resources xmlns:android="http://schemas.android.com/apk/res/android">
...
<style name="Theme.Example" parent="Theme.Sherlock">
<item name="actionBarStyle">#style/Example.ActionBar</item>
<item name="android:actionBarStyle">#style/Example.ActionBar</item>
</style>
<style name="Example.ActionBar" parent="Widget.Sherlock.ActionBar">
<item name="indeterminateProgressStyle">#style/Example.ActionBar.IndeterminateProgressBar</item>
<item name="android:indeterminateProgressStyle">#style/Example.ActionBar.IndeterminateProgressBar</item>
</style>
<style name="Example.ActionBar.IndeterminateProgressBar" parent="#android:style/Widget.ProgressBar.Large.Inverse">
<item name="android:indeterminateDrawable">#drawable/layer_list_ab_indeterminate_progress_bar</item>
<item name="android:minWidth">#dimen/ab_indeterminate_progress_bar_size</item>
<item name="android:maxWidth">#dimen/ab_indeterminate_progress_bar_size</item>
<item name="android:minHeight">#dimen/ab_indeterminate_progress_bar_size</item>
<item name="android:maxHeight">#dimen/ab_indeterminate_progress_bar_size</item>
</style>
</resources>
/res/drawable/layer_list_ab_indeterminate_progress_bar.xml:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<!--
/res/drawable-mdpi/ab_indeterminate_progress_bar asset is taken from
/sdk/platforms/android-18/data/res/mdpi/spinner_white_48.png
and its content (optical square) is resized to ~0.6 (must be even number)
/res/drawable-mdpi-v14/ab_indeterminate_progress_bar asset is taken from
/sdk/platforms/android-18/data/res/mdpi/spinner_48_outer_holo.png
and its content (optical square) is resized to 0.75
-->
<rotate
android:drawable="#drawable/ab_indeterminate_progress_bar"
android:interpolator="#android:anim/linear_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:fromDegrees="0"
android:toDegrees="360" />
</item>
</layer-list>
/res/values/dimens.xml:
<dimen name="ab_indeterminate_progress_bar_size">48dp</dimen>
Finally I created progress bar assets. I used these two assets from Android SDK:
/sdk/platforms/android-18/data/res/mdpi/spinner_white_48.png for Honeycomb and older
/sdk/platforms/android-18/data/res/mdpi/spinner_48_outer_holo.png for ICS and newer
To get proper size and padding, we need to resize the assets. I resized spinner_white_48.png to ~0.6. For mdpi, it was 28px. It must be even number to be centrally symmetric. I resized only the content, not the whole icon. So icon in mdpi has still 48px, but its content (optical square) is smaller (28px). You can easily resize the content this way: first change "image size" to 28px X 28px, then change "canvas size" back to 48px X 48px. I resized spinner_48_outer_holo.png to 0.75. You can download the assets below.
Why do I use different assets for Honeycomb- and ICS+? Because if I'm using only Holo assets, the animation is little bit snatchy on some devices with Honeycomb-.
Tip: you can add another item with some animation to layer_list_ab_indeterminate_progress_bar.xml. For example standard Holo progress bar uses 2 animations with opposite direction and different degrees range. See progress_medium_holo.xml in SDK.
/res/drawable-mdpi/ab_indeterminate_progress_bar.png:
/res/drawable-mdpi-v14/ab_indeterminate_progress_bar.png (hardly visible on this page):
/res/drawable-hdpi/ab_indeterminate_progress_bar.png:
/res/drawable-hdpi-v14/ab_indeterminate_progress_bar.png (hardly visible on this page):
/res/drawable-xhdpi/ab_indeterminate_progress_bar.png:
/res/drawable-xhdpi-v14/ab_indeterminate_progress_bar.png (hardly visible on this page):
I don't know the exact answer but these settings worked for me..
This is my refresh_spinner.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center">
<ProgressBar android:layout_width="32dp"
android:layout_height="32dp"
android:layout_gravity="center"
android:layout_marginRight="12dp"
android:layout_marginLeft="12dp"
style="?indeterminateProgressStyle" />
</FrameLayout>
And this in the corresponding style xml
<style name="Widget.MyTheme.ActionBar" parent="Widget.Sherlock.ActionBar">
<item name="indeterminateProgressStyle">?android:attr/progressBarStyleSmallInverse</item>
</style>
These settings worked for me.
Please let me know if you have any doubts.
Regards
Parvaz Bhaskar
EDIT2 : since I was trying different methods I ended up using ?android:attr/progressBarStyleSmallInverse
as the only property in my style.xml which i later refrenced it from my spinner xml under style as style="?indeterminateProgressStyle"
EDIT:
keep a reference of your menuItem and whenever you want to show a refresh progressbar use setActionView(R.layout.your_layout), and change it to null when the need is over. onCreateOptionsMenu would be a good place to grab the menuItem at start.
I meet this today and find a solution for Android 3/4+
ProgressBar mProgressBarInActionBar = null;
Resources res = Resources.getSystem();
int id = res.getIdentifier("progress_circular", "id", "android");
View internal = findViewById(id);
if(internal != null && internal instanceof ProgressBar){
mProgressBarInActionBar = (ProgressBar)internal;
}
mProgressBarInActionBar.setPadding(0, 0, right, 0);
Set a suitable right :)
I had the same problem and I found an easy answer:
<style name="ActionBarProgressBar.MyStyle" parent="#android:style/Widget.Holo.ProgressBar.Large">
<item name="android:minWidth">56dp</item>
<item name="android:maxWidth">56dp</item>
<item name="android:minHeight">35dp</item>
<item name="android:maxHeight">35dp</item>
</style>
The Width is the standard Actionbar item width. If you change the minHeight and maxHeight, then the image will scale both ways.
And here is the Actionbar styling where you set the appearance of the Indeterminate Progress:
<style name="action_bar_theme" parent="#android:style/Widget.Holo.ActionBar">
<item name="android:indeterminateProgressStyle">#style/ActionBarProgressBar.MyStyle</item>
</style>
And the definition in the Theme you are using (don't forget to use it in your manifest):
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:actionBarStyle">#style/action_bar_theme</item>
</style>

How to increase height of ProgressBar in ICS/JB

I am using the Android progressbar in one of my widgets:
<ProgressBar
android:layout_width="fill_parent"
android:layout_height="wrap_content"
style="?android:attr/progressBarStyleHorizontal"
android:id="#+id/progressbar_Horizontal"
android:max="100"/>
In Android 2.x it looks well, like in the following picture. I have written the % on top of the bar itself.
But if I change in the Android Manifest
android:targetSdkVersion
to "15" the progressbar looks totaly different. It is now a thin blue line instead of a bar. The problem is that I have written above the progress bar some text, in particuallary % of the progress.
Thus as the bar is so thin this looks odd.
I cannot figure out how to increase the height of the bar again to e.g. 50dp. If I try android:layout_height="50dp" it stays still same thin.
First, you need to define the style of your progress bar in values->styles.xml of your project. something like:
<style name="tallerBarStyle" parent="#android:style/Widget.SeekBar">
<item name="android:indeterminateOnly">false</item>
<item name="android:progressDrawable">#android:drawable/progress_horizontal</item>
<item name="android:indeterminateDrawable">#android:drawable/progress_horizontal</item>
<item name="android:minHeight">8dip</item>
<item name="android:maxHeight">20dip</item>
</style>
Edit the maxHeight to your desired height.
Then in your ProgressBar add:
style="#style/tallerBarStyle"
You need to replace
style=”?android:attr/progressBarStyleHorizontal”
to
style="#android:style/Widget.ProgressBar.Horizontal"
and layout_height will work
android:layout_height="50dp"

Button scales to background image instead of content

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>

Categories

Resources