When using a custom thumb drawable with a SeekBar view, the thumb drawable is clipped at the left and right edges of the view.
How can I fix this behavior?
You should be able to fix this by setting paddingLeft and paddingRight on your SeekBar to half the thumb width (remember to use density-independent units). You can also control the space allowed at the edges for a seek bar's thumb by calling setThumbOffset.
I ran into this issue myself, and I believe the "correct" decision would be to modify android:thumbOffset as the default style for a SeekBar sets it to 8px.
For default SeekBar I used these settings and it works fine:
android:paddingLeft="6dp"
android:paddingRight="6dp"
android:thumbOffset="8dp"
Just for clarification.
On some places I have seen
android:thumbOffset="8dp"
and some
android:thumbOffset="8px"
so I looked at the source code. this is the original style
<style name="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">20dip</item>
<item name="android:maxHeight">20dip</item>
<item name="android:thumb">#android:drawable/seek_thumb</item>
<item name="android:thumbOffset">8dip</item>
<item name="android:focusable">true</item>
</style>
from
https://android.googlesource.com/platform/frameworks/base/+/refs/heads/master/core/res/res/values/styles.xml
I was getting the bottom of my default seekbar thumb clipped. None of the fixes here worked. I ended up using
android:clipToPadding="false"
on the parent view. This solved issue.
<androidx.appcompat.widget.AppCompatSeekBar
android:id="#+id/progress_loan_period"
android:layout_width="#dimen/dp_0"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/dp_15"
android:progressDrawable="#drawable/seek_bar"
android:thumb="#drawable/ic_slider"
android:paddingStart="#dimen/dp_0"
android:paddingEnd="#dimen/dp_0"
android:thumbOffset="-0dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/label_loan_period" />
This gets the job done
Nothing worked for me but I just changed the color of the thumb different then the background color of the parent layout and it worked for me.
Related
I am having a hard time to change the text size of a switch compact thumb.
Here's my layout:
<android.support.v7.widget.SwitchCompat
android:id="#+id/switch_compat2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:checked="true"
android:switchTextAppearance="#style/MyStyle"
android:text="SwitchCompat (SDK v7+)"
app:showText="true" />
and the style:
<style name="MyStyle">
<item name="android:textColor">#229922</item>
<item name="android:textSize">10sp</item>
</style>
yet, no matter what I do on "MyStyle", the switch always look like this:
Ideally I want have it look like this:
Anyone would be willing to share their drawables to I can try to match the image above?
I am looking into these threads but not matching properly. It is making it look worse.
How to change the size of a Switch Widget
thank you!
Actually you need to use
app:switchTextAppearance="#style/MyStyle"
Result:
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 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"
I'm having a little problem when using a custom rating bar style. I've read other topics on this, but the proposed solutions/answers are not solving the problem.
Android seems to be stretching part of the star image, creating this strange effect:
This strange effect is even visible in the graphical layout preview tool in eclipse:
The star "sprites" are: and
This is the custom style:
<style name="ratingBar" parent="#android:style/Widget.RatingBar">
<item name="android:progressDrawable">#drawable/rating_bar</item>
<item name="android:minHeight">#dimen/ratingBarHeight</item>
<item name="android:maxHeight">#dimen/ratingBarHeight</item>
</style>
And this is the xml code in the layout:
<RatingBar
android:layout_width="wrap_content"
android:layout_height="#dimen/ratingBarHeight"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:numStars="5"
android:stepSize="1.0"
style="#style/ratingBar" />
The height is defined as follows:
<dimen name="ratingBarHeight">32dip</dimen>
I had the same problem. The reason was that my drawable was smaller than #dimen/ratingBarHeight, it was 22 pixels. Changing #dimen/ratingBarHeight to 22dip fixed it for me, the strange effect disappeared.
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>