How to make segmented seekbar/slider look like following? - android

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

Related

Android add partial layout inside layout

I have this fragment layout where some content needs to be animated (like showing/hiding input field).
Now I found out I could manage this by using a fancy animation (by using <item name="android:animateLayoutChanges">true</item> on a linear layout).
The problem I have here is that I need to add al content programmatically..
For example
LinearLayout timesheetsWrapper = (LinearLayout)inflatedView.findViewById(R.id.new_timesheet_wrapper);
EditText timeSheetName = new EditText(getContext());
timeSheetName.setHint("Name");
timesheetsWrapper.addView(timeSheetName);
Now image I need to add like 10 GUI components and style each one of them programmatically, which is a bit of a hassle to me.
Is there a way that I could add a partial layout .xml file into the 'wrapper'?
For instance:
LinearLayout partialLayout = ...??
timesheetsWrapper.addView(partialLayout);
Where the partialLayout.xml contains all the GUI components.
Already searched around but it all got a bit confusing to me!
I hope my question is a bit clear, if not (or additional info is needed) I'am happy to edit/provide.
Thanks in advance, regards an android noob

Is it possible to use fonts for Images/icons in Android

I Just know that we can use fonts for text only by using the TypeFace class. But can anyone please confirm me about images.
I have added all my custom fonts(.ttf) inside asset/fonts folder. Placed some ImageViews in their appropriate place in my app. And trying to use fonts to set images on them.
I have googled for a long time, but unfortunately unable to find any satisfied hint or help.
Can any one please help me to go forward from the current step.
Placed some ImageViews in their appropriate place in my app. And trying to use fonts to set images on them.
ImageView accepts images. Whatever set of pixels or vectors are in a font, they are not images from the standpoint of ImageView. The simplest way to display material from a custom font is through TextView, though you are welcome to implement your own Drawable and attempt to use that with an ImageView, or draw straight to the Canvas (e.g., in a custom widget).
You can use font awesome. Import the android-iconify/1.0.6 jar library from http://repo1.maven.org/maven2/com/joanzapata/android/android-iconify/1.0.6/
and you can use IconTextView
<IconTextView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:padding="10dp"
android:text="{fa-mobile}"
android:textColor="#9fd46c"
android:textSize="30dp"
/>

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.

Changing AppWidget's background dynamically with a 9 patch drawable

There is no setBackground() method in the RemoteViews class, so I've used the following workaround:
Created a FrameLayout for my app widget with an ImageView as the background view.
Changed the ImageView image using setImageViewResource() method.
Unfortunately, when it comes to 9-patch drawables this method does not work. Also when an ImageView's android:src attribute points to 9-patch - it doesn't work too. Is there any way to change the AppWidget's background image programatically using a 9-patch drawable? Thanks in advance.
EDIT
Settings the 9-patch as initial background in the XML:
<ImageView
android:id="#+id/small_widget_layout_bg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background_lime" />
When I use android:src="#drawable/background_lime" it doesn't stretch the image properly, this code works fine. And the code to change the background from the AppWidgetProvider onUpdate method:
views.setImageViewResource(R.id.small_widget_layout_bg,
R.drawable.backgroung_lime);
This does not stretch the image as a 9-patch.
This answer was diagnosed in the above comments...
RemoteView doesn't allow access to View.setBackground(), so your workaround of using the android:src property of an ImageView is good, providing that the android:scaleType property is set to fitXY.
ImageView won't stretch it's foreground image unless you tell it to.
Please ignore if u find this trivial or irrelevant, but canT you try (assuming you are dealing with widgets):
Declaring different layouts (xml)for your widget.
Change the remoteView's source (layout.id) instead of trying to make alterations to the selected layout.
AFAIK, this is the most common approach to solving such problems. This is not perfect for two simple things I could note myself:
What do you do if you have n different "states" / "views" in your widget?
But as long as your 9-patch files are also static resources, n is painful but still theoretically manageable.
It s tedious to keep track of the changes in these parallel files.
I'd also love to find an easy way for this one...
This approach may not be an option for you also because it is basically the hard way. But it s an option nonetheless.
Suggestion #2
Have you tried using the method?
public void setInt (int viewId, String methodName, int value)
remoteView.setInt(R.id.viewid, "setBackgroundResource", R.drawable.backgroung_lime);
From another question: Change remoteView ImageView background

Best way to program buttons/images

I am designing something that will have a homepage close to the Google+ android app.
I'm having trouble figuring out the best way to do this? Should I create a button with text and set the background as the image? Should I create an image with the text already programmed in the actual picture or should I program the text and picture to be buttons.
Any suggestions from you guys on past projects?
You can use a Button with text to whatever you like and then place the image for that button above the text (using android:drawableTop)like so:
<Button
android:id="#+id/imageButton"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Photos"
android:drawableTop="#drawable/button_image" />
replacing buttton_image with your actual image. If you want the image in a different position (i.e. below text etc) use:
android:drawableLeft
android:drawableRight
android:drawableBottom
This would be how I would and do do it...
Since I am a newbie in android development I may be wrong but I suggest why not use a Grid View with each grid item haaving a textview and imageview.
My suggest to layout:
If you want to try something new in Android 4.0 , you can try GridLayout to layout , it can reduce the complicate of the nested layout , check out the blog about GridLayout:
http://android-developers.blogspot.com/2011/11/new-layout-widgets-space-and-gridlayout.html
You should write Buttons this way: http://developer.android.com/resources/articles/layout-tricks-merge.html
I normally use RelativeLayout but this is not important.
Write a class myClass extends RelativeLayout and inflate the XML with
LayoutInflater.from(context).inflate(R.layout.myCustomLayout, this, true);
I think this is best practice by Google.
use a regular button and set the android:drawableTop="#drawable/icon_...." value
Having the text burnt into you image is most certainly not the way to go.
One option for you is a GridView. You could also do this through a combination of Image button and scrollview. In my opinion, GridView is best and involves the least amount of code with most flexibility.
Remember that you can replace the button's background image with a state list drawable.

Categories

Resources