Change spinning wheel style from ProgressBar Android - android

I have a ProgressBar with the attribute
style="?android:attr/progressBarStyleLarge"
which shows the next spinning wheel:
But to keep the same style in all my application, I wanted to use, in my ProgressBar, the spinning wheel shown on SwipeRefreshLayout by default:
How can I achieve this? Thanks!
[ADDED]
I'm looking for the spinning style, its movement and how is it shown. It works something like this:
while turning around, the black "bar" gets longer and then shorter and then again longer and so on,.. changes its size always in the same direction that the bar moves (really difficult to explain how it works, that's why I refered to SwipeRefreshLayout's spinning wheel)

Try using this persons progress bar
https://android-arsenal.com/details/1/1141
you will need to call .Spin() in your code to start it.
Add This to you gradle build file as followed
repositories {
maven { url "https://jitpack.io" }
compile 'com.pnikosis:materialish-progress:1.7'
}

If you just want to change the color / style, try this (Android Lollipop + ) :
progCircle.getIndeterminateDrawable().setColorFilter(getResources().getColor(R.color.myXMLColor), PorterDuff.Mode.SRC_IN);
More information about PorterDuff here

I think this is what you are looking for
style="#style/Base.Widget.AppCompat.ProgressBar"

Related

How to make a filled circular progress bar? (without using external libraries)

I want to make a circular filled progress bar in Android Studio.
My goal is to achieve something like this;
The first image would have the progress value of for example, 100, then every second a bit of the circle will disappear until its nothing left.
I tried this but I couldn't get my repositories to work, therefore I'm looking for a more "non external" way to do it.
With the Material Components library you can use the official CircularProgressIndicator.
Something like:
<com.google.android.material.progressindicator.CircularProgressIndicator
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:trackThickness="20dp"
/>
If you are using jetpack Compose you can use CircularProgressIndicator:
CircularProgressIndicator(
strokeWidth = 20.dp,
progress = animatedProgress.value)

Change thumb color from a seekbar

I have a seekbar and i am trying to change the thumb color. I found two photos that describes what i actually want to do.
I have this seekbar (default) :
and i am trying to change it's color thumb like this.. :
(I know how to change background progress color but not the thumb color)..
seekBar1calling.getProgressDrawable().setColorFilter(Color.WHITE, Mode.SRC_IN);
Is there any way to achieve this using java code? Thanks in advance!!
I just used an online style generator which gave me what i needed
http://android-holo-colors.com/
Just choose the widget and color you want and you are ready! ;)
Just use:
mySeekbar.getThumb().setColorFilter(myColor, PorterDuff.Mode.MULTIPLY);
Edit: method getThumb is only available since API 16+ (Jelly Bean).
The other answers are old and didn't work for me, this did.
seekbar.setThumbTintList(ContextCompat.getColorStateList(this, R.color.disabled));
Here is a quick and easy solution which worked for me as expected. Just implement this code after you initialized the seekbar to avoid NPE's.
You have to define the color itself under res/values/colors.xml
int blue = ContextCompat.getColor(context, R.color.seekbar_blue);
filterSeekBar.getThumb().setColorFilter(blue, PorterDuff.Mode.SRC_ATOP);
filterSeekBar.getProgressDrawable().setColorFilter(blue, PorterDuff.Mode.SRC_ATOP);
That's all!
Note: The color of the Progress-Background is not as dark as the Button / Thumb itself.
If you want to know more about the PorfuerDuff part check this answer on Stackoverflow:
Phasmal & Lee's answer to PorfuerDuff modes

How do I create the semi-transparent grey tutorial overlay in Android?

You know when you run an Android device for the first time (something you see a lot if you use the emulator) that there's a helpful little tutorial about how to use the launcher and add widgets, etc. I'm trying to find an example of this on Google, but I can't. I'm hoping you know what I mean. It's the one with the blue "okay" buttons at each step.
Anyway, I want to create one for my app, but I'm not sure which is the best way to go about doing it.
Do I create a Fragment that I can make semi-transparent on top of my regular activity and have it show up on only the first run?
Do I make a semi-transparent .png for each section of the tutorial and overlay it over the regular launcher activity on the first run?
If I do the latter, how can I adjust for all the various screen sizes? I could just render the image in Photoshop to various dimensions, but that won't cover all of them. If I go the fragment route, I can just say "match_parent" and not worry about it. But then I have to figure out how Fragments work, and they confuse the hell out of me.
I think this open-source library is exactly what you're looking for:
Showcase View
You can grab the source code and setup instructions from GitHub.
Use a hexadecimal color code, which consists of two digits for alpha and six for the color itself, like this:
android:background="#22FFFFFF"
It'll make it semi-transparent.
android:background="#c0000000" for more darkness
Edited
Generally hexadecimak color code structure is like '#FFFF'
For attaining transparency add two digits after '#' to any color code.
Eg : #110000, #220000, #330000.
The greater those two digits, the lesser transparency.
You can try something like this
<LinearLayout ... >
<!-- your Normal layout goes here -->
<RelativeLayout android:id="#+id/tutorialView" android:background="#D0000000"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView android:src="#drawable/hint_menu" android:layout_alignParentLeft="true"
android:layout_centerVertical="true" android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
</LinearLayout>
And in your onCreate method
View tutorialView = findViewById(R.id.tutorialView);
boolean tutorialShown = PreferenceManager.getDefaultSharedPreferences(MainActivity.this).getBoolean(Constants.PREF_KEY_TUT_MAIN, false);
if (!tutorialShown) {
tutorialView.setVisibility(View.VISIBLE);
} else {
tutorialView.setVisibility(View.GONE);
}
tutorialView.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
v.setVisibility(View.GONE);
PreferenceManager.getDefaultSharedPreferences(MainActivity.this).edit().putBoolean(Constants.PREF_KEY_TUT_MAIN, true).commit();
}
});
There is an award-winning library for this called "FancyShowcaseView":
https://github.com/faruktoptas/FancyShowCaseView
Add to your project like this:
In the top-level build.gradle (not the module level):
allprojects {
repositories {
...
maven { url "https://jitpack.io" }
}
}
In the module-level (app) build.gradle
dependencies {
compile 'com.github.faruktoptas:FancyShowCaseView:1.0.0'
}
Then you can call:
new FancyShowCaseView.Builder(this)
.focusOn(view)
.title("Focus on View")
.build()
.show();
You don't need to use Photoshop. You can Use for example a LinearLayout with android:background="#50134BE8". This will make it transparent blue. You can place the layout on top of everything and hide it when the user is done. You can use any background color, but to make it transparent, place a number from 01 to FE, after the "#" symbol to change its transparency. Set the width and the height to fill_parent to occupy the whole area. Place this view directly in the main layout. Hope this helps.

Android Pull To Refresh ListView: eliminate arrow hint

I am using this library from Chris Banes (I will never thank this man enough). It has two different behaviors depending on the android version. I want to get rid of the graphical hint on the PullToRefresListView (circled in the image below) that is shown only on devices with android lower than 4.0.
Does anybody knows how to do it?
SOLUTION:
for anybody in the future searching for the same solution here it is: in the PullToRefreshAdapterViewBase class change getShowIndicatorInternal method from this:
private boolean getShowIndicatorInternal() {
return mShowIndicator && isPullToRefreshEnabled();
}
to this:
private boolean getShowIndicatorInternal() {
return false;
}
If you use a layout XML file, you can also specify ptr:ptrShowIndicator="false" inside the PullToRefreshView's declaration. For example:
<com.handmark.pulltorefresh.library.PullToRefreshListView
xmlns:ptr="http://schemas.android.com/apk/res-auto"
android:id="#+id/pullToRefreshListView"
android:layout_width="match_parent"
android:layout_height="match_parent"
ptr:ptrShowIndicator="false" >
</com.handmark.pulltorefresh.library.PullToRefreshListView>
For other attributes, you can refer to /res/values/attrs.xml in the library, which is self-documented.
You may also find the sample project worth looking at.
Quick and dirty- Simply replace the image file for arrow hint with a transparent image in res folder of library.
I'd say try to see if you can adjust the code to simply take it out.
I don't know if there are any methods added to do this for you, but if there are they should be easy to find.
Scrolling through the code a bit quickly, this might be something;
https://github.com/chrisbanes/Android-PullToRefresh/blob/master/library/src/com/handmark/pulltorefresh/library/internal/IndicatorLayout.java
Although i'm not sure if this is actually that arrow, since it doesn't show any hints in this class about being version-based.

How to make segmented seekbar/slider look like following?

I was wondering if anyone can provide hint or source to achieve following slider widget used in "Circle – Who's Around?" This is the first time I have ever came across this and I am not sure what to exactly name this widget.:
I was thinking of using custom seekbar background to do this but, I am not sure how do I figure out exact pixels that the seekbar will reach of next step. Since, that will be independent to devices. In my case I am planning to use images, rather than the indicators.
Please don't point to this link http://www.mokasocial.com/2011/02/create-a-custom-styled-ui-slider-seekbar-in-android/ because this is not what I want to achieve. They seem to have used static image footer to show D,W,K. I have tried that app and it doesn't even step to the exact dots or D,W,K. I have looked at AT&T Android Slider Controls but, they don't seem to provide any source for it. I have found some iOS devs achieving that but, I don't really understand obj C code in order to achieve that in Android.
This is just a seekbar with a custom thumb and background. You could use a 9patch for the background so it fills nicely and just set them in your styles
Following #Milanix answer using the library at https://github.com/karabaralex/android-comboseekbar here it is a minimum example code that worked for me:
<com.infteh.comboseekbar.ComboSeekBar
android:id="#+id/seekbar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
custom:color="#000"
custom:textSize="12sp"
custom:multiline="false"
/>
Then in the Activity
private ComboSeekBar mSeekBar;
List<String> seekBarStep = Arrays.asList("All","1","5","10","20");
mDistanceSeekBar.setAdapter(seekBarStep);
This will create a black segmented seekbar using default drawables. If you need to add some customization have a look at ComboSeekBar.onDraw(), CustomDrawable.draw() and CustomThumbDrawable.draw().
This project is all but finished but still a solid starting point.
#Giulio thank you for your post, I have the same problem as Ron Eskinder.
I heve fixed it by removing :"custom:color" , "custom:textsize" and "custom:multiline" in xml file. then in Java I put this:
mSeekBar = (ComboSeekBar) findViewById(R.id.seekbar);
List<String> seekBarStep = Arrays.asList("All","1","5","10","20");
mSeekBar.setAdapter(seekBarStep);
Hope this will help

Categories

Resources