I made a customised seekbar that looks like this
the thing is that it is pretty hard to grab the slider. so what i wanted to to is to increase the hitbox of the thumb to make it easier. i tried a few things, but always messed up the seekbar look. any ideas how i could do that?
layout.xml
<SeekBar
android:id="#+id/xxx"
style="#style/SeekBar"
android:layout_width="#dimen/pixel_130dp"
android:layout_below="#+id/name_textview"
android:layout_centerHorizontal="true" />
styles.xml
<style name="SeekBar">
<item name="android:layout_height">#dimen/pixel_20dp</item>
<item name="android:maxHeight">#dimen/pixel_20dp</item>
<item name="android:minHeight">#dimen/pixel_20dp</item>
<item name="android:thumb">#drawable/seek_bar_thumb</item>
<item name="android:paddingLeft">#dimen/pixel_5dp</item>
<item name="android:paddingRight">#dimen/pixel_5dp</item>
<item name="android:paddingTop">#dimen/pixel_2dp</item>
<item name="android:paddingBottom">#dimen/pixel_2dp</item>
<item name="android:progressDrawable">#drawable/seek_bar_progress_drawable</item>
</style>
seek_bar_thumb.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape>
<size
android:height="#dimen/pixel_16dp"
android:width="#dimen/pixel_25dp" />
<solid android:color="#android:color/transparent" />
</shape>
</item>
<item android:drawable="#drawable/slider_thumb"/>
</layer-list>
Alright, since there are apparently no smarter ways to do that, here is what I did now; only solution I found was to add a transparent area around the thumb image. I doubled its size and added the thumbOffset parameter to the Seekbar. That doesn't seem to be the best solution, but at least it works in my case.
The TouchDelegate class seems to be a good place to start.
See this tutorial on how you can use it.
Related
I am implementing the "cold start" splash screen that Google is recommending
Source:
https://www.bignerdranch.com/blog/splash-screens-the-right-way/ https://plus.google.com/+AndroidDevelopers/posts/Z1Wwainpjhd
https://material.io/guidelines/patterns/launch-screens.html
However, on devices with pure Android 7.1 (Nexus 5X) the splash screen background is not resized correctly, creating black bars.
The gray square is just to hide the logo since the app is not a published yet
This is my background_splash.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:gravity="center"
android:drawable="#drawable/background_img"/>
<item>
<bitmap
android:gravity="center"
android:src="#drawable/logo_img"/>
</item>
</layer-list>
And this is my theme:
<style name="SplashTheme" parent="Theme.AppCompat.NoActionBar">
<item name="android:windowBackground">#drawable/background_splash</item>
<item name="android:fitsSystemWindows">true</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowActionBar">false</item>
<item name="android:windowFullscreen">true</item>
<item name="android:windowContentOverlay">#null</item>
</style>
By adding the attribute android:tileMode="clamp" in the bitmap element I was able to fix the problem.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<bitmap
android:tileMode="clamp"
android:gravity="center"
android:src="#drawable/hartwall_arena_bg"/>
</item>
<item>
<bitmap
android:gravity="center"
android:src="#drawable/hartwall_arena_logo"/>
</item>
</layer-list>
I do not have a good explanation for the "solution", so if someone explains it better I will mark it as the right response instead of mine : )
In my case adding the option android:tileMode="clamp" solve the problem with the black border, but the background image have distorted because according the documentation: https://developer.android.com/guide/topics/resources/drawable-resource
the clamp option Replicates the edge color if the shader draws outside of its original bounds so could look better with solid color backgrounds.
After 'solve' the black border issue using the clamp option but get the image distorted I know that the issue is on bitmap item in layer-list. So I add the bitmap as below and solve the issue :D
<item>
<bitmap
android:gravity="fill_horizontal|fill_vertical"
android:src="#drawable/background"/>
</item>
<item>
<bitmap
android:gravity="center"
android:src="#drawable/logo_img"/>
</item>
Assign scaleType in this code if possible.
I am trying to set a custom background to the spinner:
<Spinner
android:id="#+id/spinner"
android:layout_width="wrap_content"
android:background="#drawable/spinner_bg"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"/>
spinner_bg.xml:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#ff0000"/>
<item android:drawable="#00ff00"/>
</selector>
I saw a lot of tutorials and articles that are doing such thing, but in my case it
somehow doesn't work, I just got plain text without any states and backgorund, if I set color or 9-patch to the background all works fine. What am I doing wrong?
Edit: I have tried all suggestions, but it doesn't help, also Android Studio pointing out that something is wrong, but no hint available.
Edit2: I found the problem. I missed .xml extension for the spinner_bg file in my source. Also Mou had right correction that I should use drawable instead of color, so I marked his answer as correct.
The problem is in spinner_bg.xml.
android:drawable must be a reference to a drawable and not a color.
Try creating a shape drawable or another drawable (9-path) and setting it correctly in the xml.
EDIT:
Something like this:
spinner_bg_color.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#FFFF0000"/>
</shape>
And setting this drawable like background drawable in spinner_bg.xml
Change
android:drawable="#00ff00"
to
android:color="#00ff00"
like so:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:color="#ff0000"/>
<item android:color"#00ff00"/>
</selector>
i have a trouble with custom seekBar .I used http://android-holo-colors.com/ to give images of seekBar .The problem is a vague beginning of seekBar . How can i solve this problem?!
ScreenShot:
this code (i check , images are the same as the default except for colors.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background"
android:drawable="#drawable/scrubber_track_red" />
<item android:id="#android:id/secondaryProgress">
<scale android:scaleWidth="100%"
android:drawable="#drawable/scrubber_secondary_red" />
</item>
<item android:id="#android:id/progress">
<scale android:scaleWidth="100%"
android:drawable="#drawable/scrubber_primary_red" />
</item>
</layer-list>
and SeekBar
<SeekBar
android:id="#+id/seekTrack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:progressDrawable="#drawable/scrubber_progress_red"
android:thumb="#drawable/scrubber_control_red"
android:indeterminate="false"
android:layout_weight="1"
style="?android:attr/progressBarStyleHorizontal"/>
Images i got from aforementioned service (android holo colors)
Check your drawables, there's probably a gradient in there somewhere as opposed to a solid color. I'd guess that the problem is in #drawable/scrubber_progress_red. Replace it temporarily with something like #android:color/holo_green_light. If the gradient goes away, we'll know that the scrubber_progress_red drawable is the problem.
Also, what is the name of the file that the layer-list is in?
I have set thumb image of a seek bar but my thumb looks little below of seek bar. How to set thumb at proper position of a seekbar. Have a look on the attached image
<SeekBar android:id="#+id/PP_Player_SeekBar"
android:thumb="#drawable/music_player_playerhead"
android:paddingLeft="8dip"
android:paddingRight="8dip"
android:progressDrawable="#drawable/seekbar_drawable_xml_background"
android:layout_width="236dip"
android:layout_centerHorizontal="true"
android:layout_height="wrap_content"
android:layout_marginTop="47dip"></SeekBar>
Thanks
Sunil Kumar Saoo
Set minHeight and maxHeight same as the height of seekbar. eg
<SeekBar
android:id="#+id/PP_Player_SeekBar"
android:thumb="#drawable/music_player_playerhead"
android:paddingLeft="8dip"
android:paddingRight="8dip"
android:progressDrawable="#drawable/seekbar_drawable_xml_background"
android:layout_width="236dip"
android:layout_centerHorizontal="true"
android:layout_height="wrap_content"
android:layout_marginTop="47dip"
android:minHeight="11dip"
android:maxHeight="11dip" />
See the following url
http://qtcstation.com/2011/05/android-how-to-fix-seekbar-bar-thumb-centering-issues/
In fact, it is enough to define maxHeight to a big number like 1000dp.
This also has the benefit of working with height=wrap_content and height=match_parent.
For me, the issue is more related to the vertical centering of the background (track drawable). This is the flawed drawable code I used originally (which generated the problem), as suggested by Android developer and other StackOverflow entries:
<item
android:id="#android:id/background"
android:drawable="#drawable/seekbar_track"/>
<item android:id="#android:id/secondaryProgress">
<scale
android:drawable="#drawable/seekbar_progress2"
android:scaleWidth="100%" />
</item>
<item android:id="#android:id/progress">
<scale
android:drawable="#drawable/seekbar_progress"
android:scaleWidth="100%" />
</item>
The problem here is the first item, which relates to the background of the SeekBar. Many entries will tell you to set the layout_minHeight feature to some large value to avoid a vertical spatial disconnect between the thumb and its track. This was not the solution for me - when viewed on a tablet, the background was still drawing to its smaller phone-based size - so the track was consistently positioned well above the center of the SeekBar track. The solution is to remove this entry in the SeekBar drawable, so it now looks like this:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="#android:id/secondaryProgress">
<scale
android:drawable="#drawable/seekbar_progress2"
android:scaleWidth="100%" />
</item>
<item android:id="#android:id/progress">
<scale
android:drawable="#drawable/seekbar_progress"
android:scaleWidth="100%" />
</item>
</layer-list>
Then, in the style definition of the SeekBar, set the layout_background to the the track drawable. Mine looks like this:
<style name="styleSeekBar" parent="#android:style/Widget.SeekBar">
<item name="android:padding">#dimen/base_0dp</item>
<item name="android:background">#drawable/seekbar_track</item>
<item name="android:progressDrawable">#drawable/abratingbar</item>
<item name="android:minHeight">#dimen/base_29dp</item>
<item name="android:maxHeight">#dimen/base_29dp</item>
<item name="android:layout_marginLeft">#dimen/base_10dp</item>
<item name="android:layout_marginRight">#dimen/base_10dp</item>
<item name="android:layout_marginTop">#dimen/base_10dp</item>
<item name="android:layout_marginBottom">#dimen/base_10dp</item>
<item name="android:scaleType">fitXY</item>
</style>
(Previously, the background setting here was just a color [white].).
This is the entry in my layout, which uses both the style and the drawables:
<SeekBar
android:id="#+id/seekbar_page_number"
style="#style/styleSeekBar"
android:layout_width="match_parent"
android:layout_height="#dimen/base_29dp"
android:minHeight="#dimen/base_29dp"
android:maxHeight="#dimen/base_29dp"
android:layout_marginLeft="#dimen/base_230dp"
android:layout_gravity="bottom|right"
android:progress="1"
android:max="20"
android:progressDrawable="#drawable/abseekbar"
android:thumb="#drawable/abseekbar_thumb"/>
So, to summarize, do not set the background (track) feature in your custom SeekBar drawable, set it in the layout_background feature of your custom SeekBar style. This ensures the track is always vertically centered in a horizontal SeekBar.
I simply resolved the misaligned horizontal seekbar thumb by setting layout_height of the seekbar to wrap_content instead of match_parent
I have a 30px x 30px png file that i would like to use as an android:src rather than an android:background. By using it as the background, and mentioning "wrap_content" for both the height and the width, the final result looks more like a 45px x 45 px.
Ideally, what i need is a mix of ImageButton and ToggleButton. I would like to have the feature of setting an android:src of ImageButton and the feature of toggling where states are saved automatically for me.
Any solution or workaround?
TIA.
Hi, It does not seem to help creating another style. The src still appears much bigger that it's original 30px x 30px.
In main.xml:
<ToggleButton android:id="#+id/blah"
style="#style/myToggle"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</ToggleButton>
In Styles.xml
<style name="myToggle">
<item name="android:textOn">""</item>
<item name="android:textOff">""</item>
<item name="android:disabledAlpha">?android:attr/disabledAlpha</item>
<item name="android:background">#drawable/my_btn_toggle_bg</item>
</style>
In my_btn_toggle_bg.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+id/myBackground" android:drawable="#android:drawable/btn_default_small" />
<item android:id="#+id/myToggle" android:drawable="#drawable/my_btn_toggle" />
</layer-list>
In my_btn_toggle.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false" android:drawable="#drawable/pausebutton" />
<item android:state_checked="true" android:drawable="#drawable/playbutton" />
</selector>
playbutton.png and pausebutton.png are 30px x 30px each. But they appear much bigger when i see it laid out on the device
You can make the toggle button look like whatever you want. You just need to create a style. Have a look in the /platforms//data/res/values/styles.xml and search for Widget.Button.ToggleButton It looks like this:
<style name="Widget.Button.Toggle">
<item name="android:background">#android:drawable/btn_toggle_bg</item>
<item name="android:textOn">#android:string/capital_on</item>
<item name="android:textOff">#android:string/capital_off</item>
<item name="android:disabledAlpha">?android:attr/disabledAlpha</item>
</style>
So if you go find the btn_toggle_bg drawable you find this:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+android:id/background" android:drawable="#android:drawable/btn_default_small" />
<item android:id="#+android:id/toggle" android:drawable="#android:drawable/btn_toggle" />
</layer-list>
Which shows you that it uses the standard Button background and a drawable called btn_toggle for the src. btn_src.xml looks like this:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false" android:drawable="#drawable/btn_toggle_off" />
<item android:state_checked="true" android:drawable="#drawable/btn_toggle_on" />
</selector>
Which are the two drawables that are used to show the state of the button. They are actually called btn_toggle_{on/off}.9.png since they are 9 Patch images so they stretch to match the button size.
I figured out how to do this (centering a smaller background image inside a large ToggleButton) using ScaleDrawable:
Set your ToggleButton to use a selector Drawable, as normal:
<selector xmlns:android="http://schemas.android.com/apk/res/android"
android:variablePadding="true">
<item android:drawable="#drawable/ic_star_selected_centered"
android:state_checked="true" />
<item android:drawable="#drawable/ic_star_default_white_centered"
android:state_pressed="true" />
<item android:drawable="#drawable/ic_star_default_black_centered" />
</selector>
Then, make a ScaledDrawable for each of the items' drawables above, which points to your ACTUAL image file. e.g. ic_star_selected_centered.xml:
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="#drawable/ic_star_selected"
android:scaleGravity="center"
android:scaleHeight="100%"
android:scaleWidth="100%"
/>
Finally, there is a bug in Android that makes any ScaledDrawables invisible at first, until you set their level. So when inflating your view, call setLevel() from 1-10000 (1 is smallest scale, 10000 is full-sized):
StateListDrawable star = (StateListDrawable) myToggleButton.getBackground();
star.setLevel(5000); // centers the image at half size. shame on Android for using magic numbers!
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true">
<inset android:insetLeft="15dp" android:insetRight="15dp" android:insetTop="15dp" android:insetBottom="15dp">
<bitmap android:src="#drawable/ic_star_selected_centered" />
</inset>
</item>
<item android:state_pressed="true" >
<inset android:insetLeft="15dp" android:insetRight="15dp" android:insetTop="15dp" android:insetBottom="15dp">
<bitmap android:src=" android:src="#drawable/ic_star_default_white_centered" />
</inset>
</item>
<item >
<inset android:insetLeft="15dp" android:insetRight="15dp" android:insetTop="15dp" android:insetBottom="15dp">
<bitmap android:src="#drawable/ic_star_default_black_centered" />
</inset>
</item>
</selector>
In addition to what #caseyB had to say (look at the comments), i had to change the theme of the activity to achieve the intended effect. I think this is an issue on HoneyComb Xoom and may not be seen on phones.
Thanks for everyone for looking at my question and helping.
"Quick and dirty" way of achieving this is to use relative layout and place your ImageView on top of the ToggleButton. Set android:layout_centerInParent="true" and set your onClick listener on the toggle
Said that - the other solution by CaseyB (customizing background files) is the right approach