Custom seek bar with thumb and progressDrawable - android

I try to customize seek bar like below
But problem is that
-thumb image not set with text
-thumb position can not set above seekbar.
-android:progressDrawable should not repeat as below
My Code is as below:
<SeekBar
android:id="#+id/volume_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:max="100"
android:progress="20"
android:progressDrawable="#drawable/bar"
android:secondaryProgress="0"
android:thumb="#drawable/greenarrow" />

I've tried doing this, but I ran into problems with response time the way I did it. Having to move the margins took a lot of processing power and time. It was close to 400-500ms. So I had to remove it.
However, here are the steps I took:
First, I would suggest creating a frame layout to hold both the SeekBar and a TextView. Then, depending on the percentage of the progress bar, you can set the TextViews layout property margins.
Does that make sense?
If you would like specific code, I can get that to you, but google does pretty good too. :)
Option B: Android seekbar with custom thumb having dynamic text inside it

Related

Transparent or Invisible

I'm trying to use an ImageView without any background. I know that I can use
imageView.setVisibility(INVISIBLE);
and
imageView.setBackgroundColor(Color.TRANSPARENT);
I was wondering which one is more efficient? or any extra solution?
The two lines don't have the same purpose, so you don't really have to compare their efficiency.
The first one changes the view visibility, so the entire view is still drawn, takes the space in the layout, but is not visible at the moment.
On the other hand, an ImageView with an invisible background can still be visible if it has an android:src that is not null.
Here is a random example that uses the two together: it's an imageview with a transparent background, but with a source image, for which the visibility changes based on a certain condition, so it can be INVISIBLE or VISIBLE:
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:visibility="#{!obj.mealbox}"
android:background="#android:color/transparent"
android:src="#drawable/ic_list_sorting_close"
app:tint="#color/dish_icon_color" />
Since your purpose is to
use an ImageView without any background.
only the second option will work.
you can use imageView.setAlpha(127);

Rating scale continuous bar

I have seen that a rating scale is always a several star or any other drawable image.
I want to make a continuous bar line from 0-10 taht the user will hit on some point of it and I get the colses rate
Look into the SeekBar documentation. You can add one to your layout and allow the user to drag the slider to give their "rating". In your XML layout file, add something like this:
<SeekBar
android:id="#+id/seekbar"
android:width="match_parent"
android:height="wrap_content"
android:min="0"
android:max="10"
android:progress="5" />
(The android:progress sets the initial state of the SeekBar, which in this case is exactly in the middle. The user can then change it as desired by sliding the "thumb".)
Then, in your code, set an OnSeekBarChangeListener and react accordingly when the user changes the rating. Or just call getProgress() on the SeekBar object to get the rating once the user is done with your form.

Would it be possible to let the user customize the color of a .9 drawable?

Pretty much what the title says. I'm wanting the user to have the choice to customize the boarder of a 9 drawable I have. Is something like that possible or do I need to use a different method? Right now, I think it won't work and it will mess up the 9 patch.
Can you post a picture of your 9-patch? It might be possible to extract parts of it to another type of drawable, then layer the customizable part (drawn with user defined color) under the fixed portions using a layer-list.
[Update] Based on the pic you posted, I'd trash the layer list idea, but we can still work something out. The idea would be to remove the colored border and internal dark background from the 9-patch entirely (fill that area in with the shadow color and opacity). Then nest 3 layouts in each other. The first would use the 9-patch as a background. The second would use the user-defined color as a background. The third would use your panel color as a background. The 9-patch would provide the proper margins to position the second (user-color) layout, and then you'd just add a layout_margin attribute to the second panel to position the inner most layout a few dps in.
<LinearLayout
android:id="#+id/PanelOuter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/shadow_nine_patch">
<LinearLayout
android:id="#+id/PanelUserBorder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/custom_border_width"
android:background="#color/dialog_border_color_default">
<LinearLayout
android:id="#+id/PanelContent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/custom_dialog_content_margin"
android:background="#color/dialog_inner_color">
</LinearLayout>
</LinearLayout>
</LinearLayout>
Of course, you'd be responsible for finding the PanelUserBorder view in code and calling setBackgroundColor() with the proper user-defined color.
maybe you could tint it by putting a 50% transparent view overtop the button.
after thinking about it i thought maybe you could transform the color by bitmap:
How to change Bitmap image color in android?

How can I get an image button's dimensions to make sense in android?

First of all, can I just say, I find laying out android UI's to be a frustrating experience? I used to think the XML layouts were simple and clean and awesome but every time I try to make anything with it I spend hours trying to do the simplest things!
In this particular instance I'm trying to make a simple horizontal bar that contains an image button of fixed size on the right and to the left of it I want an ImageView that takes up the rest of the available width. I see similar constructs all the time in the UI: the search box that appears at the top of the screen when searching, the text area and send button for composing text/googletalk messages, etc.
I've tried both a horizontal linear layout and a relative layout, and I can't get the button to look right in either one. My latest attempt has the following layout code:
It looks like this:
Using the hiearchyviewer indicates that both the imageview and the button have the same height (45px). And it shows the view dimensions and positions to be exactly what I'm looking for. Same height (differing widths of course since the ImageView is much wider). And they butt right up next to each other, centered in the Relative Layout. However the button as drawn on screen is obviously not taking up the full ImageButton view. I'm thinking it's something weird about the android system 9patch drawable used for the ImageButton background. But what do I know? I can't get it to look right no matter what I try.
How did you set up your RelativeLayout? Try to set it up like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="wrap_content">
<ImageButton android:layout_width="wrap_content" android:src="#drawable/icon" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:id="#+id/imgButton"></ImageButton>
<ImageView android:id="#+id/imageView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:src="#drawable/red_button" android:scaleType="fitXY" android:layout_alignBottom="#+id/imgButton" android:layout_alignTop="#+id/imgButton" android:layout_toLeftOf="#+id/imgButton"></ImageView>
</RelativeLayout>
Hope this helps.
If dimensions are exactly how you are looking for , then in ImageButton and ImageView , use android:scaleType="fitXY" and check.
For simple case , I might use linearlayout with horizontal orientation with two buttons in it with proper weights.

Is there a black progress bar to be visible on a white background?

The default progress wheel on Android doesn't display well when the background is white, it's barely visible. How can I fix this?
If you look at the built in styles.xml file and poke around the platform's built in drawables, it turns out the solution is pretty simple. You can use the "style" attribute to use the inverse progress bar:
<ProgressBar
android:id="#+id/progress_bar"
android:layout_width="40dip"
android:layout_height="40dip"
android:padding="6dp"
android:indeterminate="true"
style="?android:attr/progressBarStyleInverse"
/>
Be sure if you have a white background to set the theme in your manifest to #android:style/Theme.Light. This provides resources for all of the widgets to go with a light background.
I dont think there is way to fix this since the progressbar is sdk dependant. orange on 1.5, white on 1.6 etc... green on some devices, etc etc...
Your would have to implement/override it with your own graphics to change it.
I had the similar problem, i solved it by setting a constrasting background on the progressbar. (50% transparent black)
Here is similar issue using the horisontal progressbar implementing a custom color:
How to change progress bar's progress color in Android
The circular is abit diffrent i think, but probably not impossible ;-)

Categories

Resources