If you need to display graphs and/or charts in your application in a stylish, holo-compliant way, this is your go-to library.
I especially needed the BarGraph view for a project I am preparing for the Samsung Smart App Challenge 2013, but unfortunately, the base library by Daniel Nadeau was hardcoding the prepended $ unit, while my project requires several different other units to be displayed.
So I forked the library and added a couple features (I will be adding more over time), so I thought I would share:
Defining the unit programmatically, using BarGraph.setUnit(String unit)
Code:
// Example
BarGraph bg = (BarGraph) findViewById(R.id.bargraph);
bg.setUnit("m");
Appending or prepending the unit programmatically using #BarGraph.appendUnit(Boolean doAppend)
Code:
// Example
BarGraph bg = (BarGraph) findViewById(R.id.bargraph);
bg.appendUnit(true);
==> The result would be :
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
Additionnally, I converted the library for proper compatibility with Gradle & Android Studio (IntelliJ).
You can find my fork on Github at the following url: https://github.com/Androguide/HoloGraphLibrary
If you haven't heard of this library before, it currently offers the following views:
You can use them in your project as follows:
LineGraph:
XML
Code:
<com.echo.holographlibrary.LineGraph
android:layout_width="match_parent"
android:layout_height="200dp"
android:id="@+id/graph" />
Java
Code:
Line l = new Line();
LinePoint p = new LinePoint();
p.setX(0);
p.setY(5);
l.addPoint(p);
p = new LinePoint();
p.setX(8);
p.setY(8);
l.addPoint(p);
p = new LinePoint();
p.setX(10);
p.setY(4);
l.addPoint(p);
l.setColor(Color.parseColor("#FFBB33"));
LineGraph li = (LineGraph)findViewById(R.id.graph);
li.addLine(l);
li.setRangeY(0, 10);
li.setLineToFill(0);
BarGraph:
XML
Code:
<com.echo.holographlibrary.BarGraph
android:layout_width="match_parent"
android:layout_height="200dp"
android:id="@+id/graph" />
Java
Code:
ArrayList<Bar> points = new ArrayList<Bar>();
Bar d = new Bar();
d.setColor(Color.parseColor("#99CC00"));
d.setName("Test1");
d.setValue(10);
Bar d2 = new Bar();
d2.setColor(Color.parseColor("#FFBB33"));
d2.setName("Test2");
d2.setValue(20);
points.add(d);
points.add(d2);
BarGraph g = (BarGraph)findViewById(R.id.graph);
g.setBars(points);
g.setUnit("$");
g.appendUnit(true);
PieGraph:
XML
Code:
<com.echo.holographlibrary.PieGraph
android:layout_width="match_parent"
android:layout_height="200dp"
android:id="@+id/graph" />
Java
Code:
PieGraph pg = (PieGraph)findViewById(R.id.graph);
PieSlice slice = new PieSlice();
slice.setColor(Color.parseColor("#99CC00"));
slice.setValue(2);
pg.addSlice(slice);
slice = new PieSlice();
slice.setColor(Color.parseColor("#FFBB33"));
slice.setValue(3);
pg.addSlice(slice);
slice = new PieSlice();
slice.setColor(Color.parseColor("#AA66CC"));
slice.setValue(8);
pg.addSlice(slice);
If you guys have ideas or feature requests, please share. Pull-requests are obviously welcome.
BTW, anyone else participating in the SSAC this year? The $800k prize-money is mindblowing.
1st place is $200k. Considering the fact that it's Samsung, I would expect a higher prize, but I guess it's a specific contest with the Chord SDK. The venture capital pitch and marketing promotion are equally valuable imo.
This is very cool! Thank you for sharing!
Hi this is a cool library. As you asked for feature requests. How about stacked bar charts. So one is able to show a distribution of values in a group over time or categories?
Gesendet von meinem Nexus 7 mit Tapatalk 4 Beta
mickru said:
Hi this is a cool library. As you asked for feature requests. How about stacked bar charts. So one is able to show a distribution of values in a group over time or categories?
Gesendet von meinem Nexus 7 mit Tapatalk 4 Beta
Click to expand...
Click to collapse
That's a very good idea, I'll try to implement it as soon as I have some time. Thanks.
I'll also soon add the possibility to add a dynamic line chart, updated every X milliseconds cleanly in a separate thread
I've added this library to one of my apps that I'm working on. Here is a quick screenshot.
I've had to modify the LineGraph to be able to show the range lines between max and min.
I see a lot more apps and even infographics using the pie graph format. I personally think it looks more clean and easier to digest. I was looking at the challenge you're looking into, and it sounds interesting enough. It might be a perfect opportunity to enter, and just to learn about the whole process of bringing an app to market. We haven't integrated the Chord SDK, but I think it can be easily implemented since our game concept is related to live interactions. I'm more interested in the Venture Capital pitch with Samsung VC - that company has ridiculous amounts of money - it's ridiculous!
Great post!:good:
H3R3T1C said:
I've added this library to one of my apps that I'm working on. Here is a quick screenshot.
I've had to modify the LineGraph to be able to show the range lines between max and min.
Click to expand...
Click to collapse
Nice, very clean UI.
If you feel like submitting a pull-request for your LIneGraph modifications please do so.
Androguide.fr said:
Nice, very clean UI.
If you feel like submitting a pull-request for your LIneGraph modifications please do so.
Click to expand...
Click to collapse
I plan on sharing my code for the graph as soon as I clean up the code and add some more stuff !
Edit: pull request sent!
This looks great - don't have the need for it at the moment but have favourited it for future use! Thanks!
I there anyone figured out how to add bars to barGraph in a loop ? I click on a item from a listview in left slidingmenu, then retrieve data by this dateItem from database and put values in to arrays. than in a loop, I add bar data to points, and eventually setting this points as bars. But graph doesn't changes. anyone got idea ?
Wow, I have been using this lib and I had to do what you have done for showing some other units.
But this lib has a strange behavior in some devices, it's like it doesn't get the screen sizes or layout sizes correctly and shows out of scale characters and wierd shapes on pie charts sometimes (I'm talking about the original HoloGraph lib).
Someone has an a idea of why this happens?
Help using your lib
Hi,
I downloaded your library and sample project from Github but when I'm not able to see the jar file under the library folder. Can you please tell me how to use your library?
Thanks
is there is any onclick listner or event trigrring on click
Hi,
This is realy looking very clean and nice UI graph presentation, i am going to use it in my next project, but before that want ot confirm that,
does it supports events, i mean i want to give an option like drill down for detail reports.
so like on home page, just bar or pie chart with data, and on click of any of the bar, i can open the other activity with Detail information on the selected bar. is it possible to do that using this Lib ???
anyway i will be trying by myself in some time and post my findings.
yogi.306 said:
Hi,
This is realy looking very clean and nice UI graph presentation, i am going to use it in my next project, but before that want ot confirm that,
does it supports events, i mean i want to give an option like drill down for detail reports.
so like on home page, just bar or pie chart with data, and on click of any of the bar, i can open the other activity with Detail information on the selected bar. is it possible to do that using this Lib ???
anyway i will be trying by myself in some time and post my findings.
Click to expand...
Click to collapse
Amazing library, anyone knows how many "lines" its the max to draw? im using LineGraph, but seems dont draw all the lines i need, so what should i do? Thanks
Thanks
Nice job! Very nice
I'll try it soon
Nice very good library
Can I use it for commercial useage?
I am new to Android programming. How do I import this library to a new sample project in Android Studio?
Hi, can I ask if its possible to add a feature where you can click on the individual bars on a Bar Graph? A simple click listener for the bars will do, I just need to display more detail per point in the bar.
Thanks a lot for your library.
Related
Hi guys,
I don't know if this is the right forum, so please forgive me if it isn't
During the development of Minimalistic Text I came across the lack of a good color picker view for Android.
In the first attempt I used the one from the samples (The "Ring").
The second attempt has been to integrate this one and add the possibility to change the alpha channel.
In the end I decided to build my own.
To let you use this color picker and - if you like to and are able to - improve it, I've extracted it into an Android library project and made it open source.
It's hosted at Google Code:
http://code.google.com/p/devmil-android-color-picker/
The code has almost no code comments. I will add them if I have time.
At the moment it is localized to German and English.
Please let me know what you think and write me an email if you want to contribute.
Thanks
Devmil
Here are some screenshots (in German):
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
I guess you never found hxxp://code.google.com/p/color-picker-view/ which has been around for a while now. It got an optional alpha slider too.
But on the other hand it doesn't support HEX input or RGB sliders like yours.
afzkl said:
I guess you never found hxxp://code.google.com/p/color-picker-view/ which has been around for a while now. It got an optional alpha slider too.
But on the other hand it doesn't support HEX input or RGB sliders like yours.
Click to expand...
Click to collapse
no, I haven't found this one. But the one I have used before is quite similar. I added the alpha slider to it.
The main difference for the new selector is the choice between the three input methods.
Working on project created ColorPickerPreference.
Shared it here github.com/attenzione/android-ColorPickerPreference (sorry, can't post links)
Why not RGB sliders or HEX input field?
because regular users will not use them. this is our project group opinion
OP Thanks, this is just what i was looking for. I wanted a color picker where you could choose a color like in photoshop but also input exact values for the more advanced users. Is it alright if i take a look at the code and see if I can get it all on one tab. Ill probably just end up using your stock one though.
Smasher816 said:
OP Thanks, this is just what i was looking for. I wanted a color picker where you could choose a color like in photoshop but also input exact values for the more advanced users. Is it alright if i take a look at the code and see if I can get it all on one tab. Ill probably just end up using your stock one though.
Click to expand...
Click to collapse
Yes, of course! This is why it is open source
Devmil
Thank you!
When I was programming for WM in c# I had occasion to need a colour picker, but never really found one and couldn't be bothered to create it myself (the program was intensive enough by itself not to want to add something like this to it). Now I have transitioned to android I'm sure that I'll need this at one point. so thank you for sharing this! I might never need it (although I'm pretty sure I will use it), but if and when I do, I'll be damn thankful that you put in the effort!
So again, thanks!
-edit-
I'm having some trouble getting the code...seems I need some kind of version control software, but I wouldn't know which one (Mercurial?). Could you add a source download (.zip or .rar) for me to download so I could use (link/include) it in Eclipse? Or am I really being a noob at this (I have successfully used other libraries in c#, so I'm not a total noob ).
On further inspection: I can access the sourcecode, but I guess I just don't know code.google.com AT ALL. I can create a server side clone (don't want to do that, I think), and I can go through all the files in the source and copy/paste to local files, but do I really have to do that to integrate this? Could someone tell me (or point to a tutorial) the best way to get all the code local so I cn use it? Or is the best way just to check out the source online (source file by source file) and copy/paste it into my own project as and how I need it?
Sorry for being a noob, but as I mentioned, I come from c# and have zero experience with code.google.com. I know enough to get everything into my Eclipse project through copy/paste, but there must be a better way!
PS: on winxp sp3, eclipse 3.6 (android 2.2, targetting 1.6, but that's beside the point, if I'm at all in the right ballpark )
Awesome library! I hacked it up a bit, adding a recent colors list, turning it into a activity, and added it to my app https://market.android.com/details?id=com.rj.pixelesque
Amazing Work
Thanks so much for the color picker, this improved the function of my app if a big way. Thanks YOU!
can i use this in my paid app??
Yes, you can use it for whatever you like. Including paid apps.
a stupid question but how to include it in my code??
You can download the source code using a Mercurial client.
I have pushed a compiled library into the downloads section. So if you don't want to have the source code and build it on your own you can simply use the library.
thnx for the help and the color picker
I've just checked the download section, but there is no compiled library. AND is there the chance to have a sample app, how to use it simply?
noob question
op , how to use this as library after downloading ?
Some other ROMs have started to package Omniswitch in their releases. But so far I haven't seen anyone else integrate Omniswitch into the ROM so there is an option to use it to replace the default Recent Apps switcher. And there is no setting for this in Omniswitch itself. Is there something the enduser could change to accomplish this? I even tried decompilng the settings.apk from OmniROM and looking at the appropriate smali but I'm not too familar with the dex format.
On the Oppo Find 5 version of Omni, the option to use omniswitch instead of the default recent is in the "Interface/more... " part of the ROM settings.
Sent from my Find 5 using XDA Premium 4 mobile app
Well yeah, that's OmniROM it's built in to Omni's settings.apk/moreinterfacesettings.smali. I want to know know if there's a way to manually change the recents apps switcher to Omniswitch.
bobbarker2 said:
Well yeah, that's OmniROM it's built in to Omni's settings.apk/moreinterfacesettings.smali. I want to know know if there's a way to manually change the recents apps switcher to Omniswitch.
Click to expand...
Click to collapse
Omni switch is so fluid and smooth..
I even dont know why it is so smoth on Nexus 5 :cyclops:
As AngryHapposai pointed out, the feature is already available and source code is in the repository.
---
Posted from whatever phone booted today
Ok that's one avenue for me to explore. But I was looking for a solution that's more along the lines of directly modifying a setting in an Android system that's already up and running. I'm an enduser not a developer, and It would be a lot less overhead for me to do that as oppose to trying to merge and compile source. I'll take a look at the source and see if I can make heads or tails of what it's doing.
Edit: Could someone point me in a direction of which package to look? I grep'd through settings and couldn't find any relevant strings. I figured if I could find what is changed when "Use Omniswitch for Recent Apps" is checked I could find what I'm looking for.
Look into the OmniGears repo for the settings part.
Sent from my N1 using Tapatalk
maxwen said:
Look into the OmniGears repo for the settings part.
Sent from my N1 using Tapatalk
Click to expand...
Click to collapse
Well yes as I' said already I've established that much but I haven't been able to find the relevant code in android_packages_apps_OmniGears-android-4.4\src\org\omnirom\omnigears\interfacesettings\MoreInterfaceSettings.java. This doesn't look like the area where the settings are actually applied and I don't know java very well where I can easily eyeball where the code goes. So I could use a bit more specific direction.
Someone please port it for xperia neo
Sent from my Xperia Neo using XDA Premium 4 mobile app
bobbarker2 said:
Well yes as I' said already I've established that much but I haven't been able to find the relevant code in android_packages_apps_OmniGears-android-4.4\src\org\omnirom\omnigears\interfacesettings\MoreInterfaceSettings.java. This doesn't look like the area where the settings are actually applied and I don't know java very well where I can easily eyeball where the code goes. So I could use a bit more specific direction.
Click to expand...
Click to collapse
https://github.com/omnirom/android_frameworks_base/commit/2fe1f0f24e23d84df1f321a9ded28b3a25256f22
maxwen said:
https://github.com/omnirom/android_frameworks_base/commit/2fe1f0f24e23d84df1f321a9ded28b3a25256f22
Click to expand...
Click to collapse
Thank you for the link, I saw tis already after looking through the gerrit. The relevant code is this:
Code:
private boolean isOmniSwitchEnabled() {
// TODO no user specific value here
int settingsValue = Settings.System.getInt(
mContext.getContentResolver(), Settings.System.RECENTS_USE_OMNISWITCH, 0);
boolean omniSwitchStarted = false;
if (mOmniSwitchStarted.containsKey(mCurrentUserId)){
omniSwitchStarted = mOmniSwitchStarted.get(mCurrentUserId);
}
return (settingsValue == 1) && omniSwitchStarted;
}
It doesn't look it's setting anything here but it does show where Omni stores the flag that tells it to use Omniswitch for Recent Apps. Is the Settings.System table accessible through means other than programmatically? Is that all there is to it, set a flag in a table and Omniswitch knows to use itself for Recent Apps? I grep'd through the Omniswitch code and didn't find any references to recents_use_omniswitch so I don't know how the flag is checked and then the preference enforced.
Ok the Settings.System table is located in data\data\com.android.providers.settings\databases\settings.db.
I tried adding "RECENTS_USE_OMNISWITCH" = 1 record to the "system" table and "global" table in the settings.db, but no joy. I'm running out of threads to follow trying to trace this. Would love someone more experienced than me to help out.
You should write some real code for this
Sent from my N1 using Tapatalk
maxwen said:
You should write some real code for this
Sent from my N1 using Tapatalk
Click to expand...
Click to collapse
Nice idea but need to know what to do before you write code....
bobbarker2 said:
Nice idea but need to know what to do before you write code....
Click to expand...
Click to collapse
the answer is already in the code I linked above
OmniSwitch can be "remoteley controlled" by using broadcast intents
this will "toggle" OmniSwitch
Code:
Intent showIntent = new Intent(OmniSwitchConstants.ACTION_TOGGLE_OVERLAY);
mContext.sendBroadcastAsUser(showIntent, UserHandle.CURRENT);
Since sendBroadcastAsUser requires priviledged system permissions
you can only do that from a system app by default
maxwen said:
the answer is already in the code I linked above
OmniSwitch can be "remoteley controlled" by using broadcast intents
this will "toggle" OmniSwitch
Code:
Intent showIntent = new Intent(OmniSwitchConstants.ACTION_TOGGLE_OVERLAY);
mContext.sendBroadcastAsUser(showIntent, UserHandle.CURRENT);
Since sendBroadcastAsUser requires priviledged system permissions
you can only do that from a system app by default
Click to expand...
Click to collapse
Hi @maxwen, I'm a complete noob regarding intents and activities, I am trying to create a shortcut that toggles omniswitch, can you please tell me what should I fill in the app?, attached screenshot.
Thanks for your help and patience.
Edit: I can use Llama and select to start action, service or broadcast but I am lost on the proper values for the fields Like action, activity, etc.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
Sent from my GT-I9300 using Tapatalk
I am also looking for a method to launch Omniswitch (not the settings) from the NavBar. Has anyone found a solution?
I found the implementation
I found the implementation on omnirom implementation here: https://github.com/omnirom/android_frameworks_base/commit/13d9f74a72136786a8ddcf3fd02bf07ab2a02073
And other change here(not merged): https://github.com/omnirom/android_frameworks_base/commit/2fe1f0f24e23d84df1f321a9ded28b3a25256f22
But you need recompile frameworks_base of your rom with this modifications.
I made a alternative...
Looking in this link: https://github.com/omnirom/android_f...2bf07ab2a02073 we can see how ominirom system call ominiswitch overlay. Thinking that I did a app that call the overlay and and you can use in a custom gesture of your launcher.
If can help improve this alternite, help me on github: https://github.com/augustoicaro/Toggle-OmniSwitch
Note: Its only work if you really use omniswitch app(org.omnirom.omniswitch)
kikuto said:
The unique problem for this solution is when I call the app its go to home(Like press the home button) and afterbthat call the overlay.
Click to expand...
Click to collapse
This is because you are calling finish()
Just let the activity run in the background
FABulous
So, Material Design is here and its beautiful. But wait. Its not here yet. And its not for everyone either. So while Google does its thing and squashes bugs and whatnot, why not give your pre-L apps a Material look? Making the ActionBar 56dp high is the most obvious way to go. But why not take it a step further and add the floating action button like the one that the Google+ app has? Too complicated? This library has got you covered. With just a few lines of code, FABulous allows you to add the button and customize its color and drawable too.
Download
https://github.com/FaizMalkani/FloatingActionButton
Instructions:
Place the FAB in a FrameLayout and add your layouts above the FAB view. For best results, keep the FAB height and width at 72dp and in the bottom right of the FrameLayout
Code:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--
Your layouts here. Do not put anything below the FAB layout
-->
<com.faizmalkani.floatingactionbutton.sample.Fab
android:id="@+id/fabbutton"
android:layout_width="72dp"
android:layout_height="72dp"
android:layout_gravity="bottom|right"
android:layout_marginBottom="16dp"
android:layout_marginRight="16dp" />
</FrameLayout>
Initialize your FAB in your activity's onCreate()
Code:
Fab mFab = (Fab)findViewById(R.id.fabbutton);
Initialize your FAB in your activity's onCreate()
Fab mFab = (Fab)findViewById(R.id.fabbutton);
If needed, call the other methods of the FAB
Code:
mFab.hideFab();
mFab.showFab();
mFab.setAlpha();
mFab.setOnClickListener();
Nice one, what's holding this back from being used on pre jb devices?
Can Sherlock be used to solve some of the comparability dependencies?
Hi @Faiz Malkani
I managed to backport this to 2.1+, sources are here:
https://github.com/Quinny898/FloatingActionButton-Compat
Here's what the sample project looks like (not included, it's the same + AppCompat, which is complicated to add):
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
Thanks Faiz!
One question: it auto-hides while scrolling the page? (the sample app doesn't let me be sure of that)
Jeeko said:
Thanks Faiz!
One question: it auto-hides while scrolling the page? (the sample app doesn't let me be sure of that)
Click to expand...
Click to collapse
You can do something like this, with a scrollview or a list view if you like:
http://android-ed.blogspot.co.uk/2013/09/hiding-bottom-actionbar-during-scrolling.html
Replace the setVisibility calls with show and hide though
This app had it before them https://play.google.com/store/apps/details?id=ee.ioc.phon.android.arvutaja
Laur3nt1u said:
I don't know how Google came with this button but this app had it before them https://play.google.com/store/apps/details?id=ee.ioc.phon.android.arvutaja
Click to expand...
Click to collapse
tho that button looks bad XD, google does copy a lot of stuff from different sources so dont worry bout it
this is probably a dumb question, but could somebody give me a easier tutorial on how to do this? i would really like to try it but i dont really understand how it should be done. im all new to android again after som years with crapple.
thanks in advanced
Thanks for the library, the sample apk looks great.
Importing in Android Studio (I tried many ways) I always have this error, looks like corrupted .png's
Someone else?
h**p://i.gyazo.com/2d17ddabae4e5502bd6fed109e788d68.png
Try copying the FAB Class to your projects src.
Alternatively, if you can wait a few days, I'll be merging a pull request that adds Gradle support
Quinny899 said:
Hi @Faiz Malkani
I managed to backport this to 2.1+, sources are here:
https://github.com/Quinny898/FloatingActionButton-Compat
Here's what the sample project looks like (not included, it's the same + AppCompat, which is complicated to add):
Click to expand...
Click to collapse
great work
looks FABULOUS :laugh: using it in my next app .. thanks :good:
Idea
Hey, thank you for your effort. The FAB looks really good.
To further follow the new design guideline I would suggest that you extend your
Code:
setFabDrawable(Drawable fabDrawable)
method by one line.
Code:
public void setFabDrawable(Drawable fabDrawable)
{
Drawable myDrawable = fabDrawable;
mBitmap = ((BitmapDrawable) myDrawable).getBitmap();
[COLOR="Red"]mBitmap = Bitmap.createScaledBitmap(mBitmap, dpToPx(24), dpToPx(24), true);[/COLOR]
invalidate();
}
This makes the fabIcon as big as it should be regardless the source.
Thanks anyways.
Thanks
For some reason I keep getting this error, although I think all files are in the right place..
"Rendering Problems The following classes could not be found:
-*com.faizmalkani.floatingactionbutton.Fab (Fix Build Path, Create Class)
Tip: Try to build the project. "
What could I do to fix this?
Thanks for your contribution.
But can you teach me how to import the class?
I have imported the jar but I can't use the Fab in .XML file.
There is no mistake but log told me that 1. com.faizmalkani.floatingactionbutton.FloatingActionButton failed to instantiate
and 2. Paint.setShadowLayer is not supported...
So I need a hand. Can anyone help me?
I can test an apk if its ready. drop me a load don't be shy
ywwynm said:
Thanks for your contribution.
But can you teach me how to import the class?
I have imported the jar but I can't use the Fab in .XML file.
There is no mistake but log told me that 1. com.faizmalkani.floatingactionbutton.FloatingActionButton failed to instantiate
and 2. Paint.setShadowLayer is not supported...
So I need a hand. Can anyone help me?
Click to expand...
Click to collapse
It's working, it just doesn't render in the XML builder
Sent from my Nexus 7 using Tapatalk
Faiz Malkani said:
FABulous
So, Material Design is here and its beautiful. But wait. Its not here yet. And its not for everyone either. So while Google does its thing and squashes bugs and whatnot, why not give your pre-L apps a Material look? Making the ActionBar 56dp high is the most obvious way to go. But why not take it a step further and add the floating action button like the one that the Google+ app has? Too complicated? This library has got you covered. With just a few lines of code, FABulous allows you to add the button and customize its color and drawable too.
Click to expand...
Click to collapse
It seems you completely miss to recycle the typed array with a try finally block in the constructor of your custom view.
Problem with Android Studio
Hey, thank you very much for this library, on eclipse all works fine, but in android studio, the little image in the floating action button doesn't display, this is a part of my xml layout file:
Code:
<com.faizmalkani.floatingactionbutton.FloatingActionButton
android:id="@+id/fabbutton"
android:layout_width="72dp"
android:layout_height="72dp"
android:layout_gravity="bottom|end"
android:layout_marginBottom="16dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:onClick="fabClicked"
android:drawable="@drawable/ic_action_new"/>
All this is at the end of a framelayout, where is the error? Thank you in advance
Sorry for my bad english
Hi Xda, I've been working on this library for past few months. At last I managed to finish most of functionality and I would like to share it with you. I would like to see what you think about it and I hope someone will will find it useful.
Library is based on InteractiveChartView sample available on Google Developers page: http://developer.android.com/training/gestures/scale.html
Github project page: http://github.com/lecho/hellocharts-android
Apache License 2.0.
Features:
- Line chart
- Column chart
- Pie chart
- Bubble chart
- Combo chart
- Preview charts(for column chart and line chart)
- Zoom(pinch to zoom, double tap zoom), scroll and fling
- Custom and auto-generated axes
- Animations
Few screens from demo application:
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
Basic usage:
Every chart view can be defined in layout xml file:
Code:
<lecho.lib.hellocharts.view.LineChartView
android:id="@+id/chart"
android:layout_width="match_parent"
android:layout_height="match_parent" />
or created in code and added to layout later:
Code:
LineChartView chart = new LineChartView(context);
layout.addView(chart);
Every chart has its own method to set chart data and its own data model, example for line chart:
Code:
List<PointValue> values = new ArrayList<PointValue>(numValues);
values.add(new PointValue(0, 2));
values.add(new PointValue(1, 4));
values.add(new PointValue(2, 3));
values.add(new PointValue(3, 4));
Line line = new Line(values).setColor(Color.Blue).setCubic(true);
List<Line> lines = new ArrayList<Line>(1);
lines.add(line);
LineChartData data = new LineChartData();
data.setLines(lines);
LineChartView chart = new LineChartView(context);
chart.setLineChartData(data);
Hello,
Your work seems great !
I will try your library when I will need charts in my next applications and I will make you a feedback .
Sylvain
This charts look awesome! Maybe I try to use it in my math app anytime
Congratulations..!
You are on portal now...
Congratulations.!
By the way nice Work...Thanks for sharing.:good:
Keep coming like this..
So beautiful!
Thx
Wow, thanks, really nice to see that you like it
Hi,
After doing some research about charting lib on the internet, I decide to use your lib on my project. Thank you for your work.
On my project, I want to implement time series on X axis. And the gap between time nodes may be different.
Here's a sample:
flickr.com/photos/[email protected]/15540381266/in/photostream/lightbox
Hi,
I'm glad you noticed this library. .
On my project, I want to implement time series on X axis. And the gap between time nodes may be different.
Click to expand...
Click to collapse
That should be possible to do with HelloCharts. Auto-generated axis tries to keep gaps between axis values equal so for this problem custom axis will be needed. You can pass to custom axis list of AxisValues with values that represents some date or time(for example each AxisValue could hold day number). To define axis labels use AxisValue.setLabel() or AxisValue.setFormatter() methods.
You may need to use method Axis.setMaxLabelChars() to define how much space should be taken by single label. Unfortunately if label is longer than maxLabelCharts it will not be truncated.
Sample code:
Code:
List<AxisValue> axisValues = new ArrayList<AxisValues>();
//fill list with your custom values
//Create new Axis with your custom values
Axis axis = new Axis(values);
//optionaly set max characters for axis labels
axis.setMaxLabelChars(4);
//set axis as bottom horizontal axis
chartData.setAxisXBottom(axis);
That's great to hear it. Okay I'll try to do it as u said.
Thanks for your help.
Can I ask u sth?
1. Is it able to swipe the chart to right/left if the X axis is too long ?
2. Is it able to break line in X axis value? (Ex: 15:00\n12.Oct) ?
3. How to use value formatter?
Thanks in advance.
1. Is it able to swipe the chart to right/left if the X axis is too long ?
Click to expand...
Click to collapse
Yes, for example if you have chart with X values from 0 to 100 you can configure viewport to show values only from 0 to 50, and user will have to scroll/fling to see rest of that chart.
Code:
//create chart view and set chart data
//now configure viewport
Viewport v = new Viewport(chart.getMaximumViewport());
v.left = 0;
v.right = 50;
//chart.setMaximumViewport(v); //Sorry!, that was mistake, you don't have to change maximum viewport in this case.
chart.setCurrentViewport(v, false);
2. Is it able to break line in X axis value? (Ex: 15:00\n12.Oct) ?
Click to expand...
Click to collapse
Unfortunately for now not, text measurement and wrapping is slow and problematic so I decided to not do that.
3. How to use value formatter?
Click to expand...
Click to collapse
If you need your own formatter(you have some logic that decides what label should be displayed) , create class that implements ValueFormatter interface or extends SimpleValueFormatter, for example look at HeightValueFormater class in SpeedChartActivity.java file in samples project(available on github).
If you need to display some numbers with text SimpleValueFormatter should be enough:
Code:
//Example of SimpleValueFormatter usage that displays Foo<some_number>Bar on X axis
//first parameter means how many digits after comma should be visible
ValueFormatter formatter = new SimpleValueFormatter(1, false, "Foo".toCharArray(), "Bar".toCharArray());
Axis xAxis = new Axis(someValues);
xAxis.setFormatter(formatter )
#1: I could fling to see the rest of the chart but it isn't smooth and also very slow. Is that normal ?
#2: I implement this line chart in a ViewPager. When I fling in the chart, it move to the next screen instead of showing the rest of the chart. How can I fix it?
#1. I've tested LineChart with 500 points and viewport set to (0, 50), it works ok, and fling is smooth. Tested on Samsung Galaxy SII(Android 4.1) and Nexus 7/2013(Android 4.4).
How many points do you have on your chart and how many are visible without scrolling?
What device/android version do you use for testing?
Some additional explanation
LineChart is slower than other charts because it uses hardware acceleration only to draw axes, lines unfortunately are drawn on not accelerated bitmap because I experienced glitches when I was drawing lines with hardware acceleration on some devices and some canvas methods don't work with HW.
Other things that can slow down chart:
- every chart will be rendered a little slower on bigger screens and resolutions, depends on device CPU/GPU
- drawing value labels is relatively slow so for big charts it is good idea to not enable it
- drawing labels for axes is a little faster then drawing value labels
- if you use custom ValueFormatter try to make it as fast ass possible, use constants values and char arrays when you can
- cubic lines are a little slower than normal lines
- filled chart(filled area below lines) is very slow, don't use it if you need to display a lot of points on chart(I would say about 25 values is safe for filled area).
- every chart will be rendered much slower on devices with android older than honeycomb(3.0) because there is no hardware accelerations on pre-3.0 android.
#2: Try to use Chart.setContainerScrollEnabled() method, for example:
Code:
//Optionally set horizontal-only zoom type
columnChartView.setZoomType(ZoomType.HORIZONTAL);
//Chart is within ViewPager so enable container scroll mode., horizontal because ViewPager swipes horizontally.
chart.setContainerScrollEnabled(true, ContainerScrollType.HORIZONTAL);
Ps. I committed small change on github, now max zoom is 20 instead of 14 so you will be able to set smaller current viewport.
Ps2. Sorry for late reply, I have busy week.
362
#1: Solved. I used the old jar (hellocharts-library-1.0.jar). I have changed to the newest version on github. Everything is perfect now.
#2: I did it.
Thank you very much.
Hi,
#1: I'm working on pie chart. Am I able to set String labels on it?
#2: As you can see from the screen shot photo. The space in the top and bottom is missing. How can I fix it?
https://www.flickr.com/photos/[email protected]/15653865581
Here's my code:
Code:
<RelativeLayout
android:id="@+id/linear_layout_pie_container"
android:layout_width="match_parent"
android:layout_height="@dimen/dimen_200" >
<lecho.lib.hellocharts.view.PieChartView
android:id="@+id/pie_chart"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</lecho.lib.hellocharts.view.PieChartView>
</RelativeLayout>
Thank you.
Hi,
#1: Yes, you can set String labels for values, for example
Code:
arcValue.setLabel("label".toCharArray());
#2: To leave more space outside of circle for labels change circle fill ratio:
Code:
pieChart.setCircleFillRatio(0.7f); //use values from 0.0f to 1.0f
I know it would be better if PieChart will do this automatically but all staff related to text measuring/drawing on android is a little complicated.
LtP410 said:
Hi,
#1: I'm working on pie chart. Am I able to set String labels on it?
#2: As you can see from the screen shot photo. The space in the top and bottom is missing. How can I fix it?
https://www.flickr.com/photos/[email protected]/15653865581
Thank you.
Click to expand...
Click to collapse
Can I set label both inside and outside the pie chart ?
No, PieChart supports only one label type at the time, inside or outside.
Displaying labels inside and outside at the same time seems to be nice idea, I can't promise but maybe I will add that option.
LtP410 said:
Can I set label both inside and outside the pie chart ?
Click to expand...
Click to collapse
Well, I implement pie chart in ViewPager again, like I did with the line chart above.
Although I try to use this method but I still can swipe in the pie chart at the same time I rotate the chart. Is there any way to solve this problem?
Code:
chart.setContainerScrollEnabled(true, ContainerScrollType.VERTICAL);
chart.setContainerScrollEnabled(true, ContainerScrollType.HORIZONTAL);
There is problem with PieChart because I have no way to determine when user wants to rotate chart and when he wants to change ViewPager page. When PieChart is within ViewPager it should rotate with "more-vertical" gesture and allow user to change page with "move-horizontal" gesture. That worked quite OK on my devices but if there is still a problem you can disable PieChart rotation:
Code:
pieChart.setChartRotationEnabled(false);
Btw. on some devices there is a problem with touch interceptions within support library ViewPager and DrawerLayout so just in case you may use HackyViewPager from lecho.lib.hellocharts.view.hack package. More info: https://github.com/lecho/hellocharts-android/issues/5
LtP410 said:
Well, I implement pie chart in ViewPager again, like I did with the line chart above.
Although I try to use this method but I still can swipe in the pie chart at the same time I rotate the chart. Is there any way to solve this problem?
Code:
chart.setContainerScrollEnabled(true, ContainerScrollType.VERTICAL);
chart.setContainerScrollEnabled(true, ContainerScrollType.HORIZONTAL);
Click to expand...
Click to collapse
A Beginner's Guide to Make Android Apps
Most of the tutorials out in blogs and YouTube say you need not have any kind of programming experience to make apps. Well, that's not the truth. To make apps, you've got to have basic knowledge of programming, let it be some easy programming language like #C, Java Basics, XML, HTML, etc.
If you don't have any kind of programming experience, visit this link to learn or if I find time, I'll post a few links and educational sites to learn making apps for free.
Click to expand...
Click to collapse
How did I learn to make apps and how long it took?
I was a member in the Xperia 2011 device line up and loved porting apps, making ROMS for those lineup. However, my goal was to code apps and make UX. The main difficulty was to find resources and the next one was understanding it without a classroom experience. After all this managing time was another headache. So I used to give up learning new things easily.
Once I started seeing a downfall in the development for the devices, I made up my mind to learn making better UI/UX. That's when I got into making Zooper Widgets and Homscreen Designs. This was just a drill to understand how can someone make their Android Homescreen look beautiful. Things changed and I had to move to the United States and stopped making Homescreens.
Later, I started referring to java concepts even though I knew how to code. Brushed my XML and HTML coding techniques and gave it a shot and it paid off! Since then (2015 October) till date, I've been making apps for my school and personal use with no intentions to upload them to play store.
Click to expand...
Click to collapse
The below image shows our journey to become a professional android app developer. However, one cannot become a professional app developer over night or by going through this guide. You can almost reach half way through if you're understanding and practicing things right.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
To finish the other half, I'd recommend learning it from code camps or attending school or may be by researching things and learning it from other developers or by yourself.
Step1:
Let's not get into writing the code itself first. We first need to understand what are views, layouts, modifying the views and also positioning the views.
I will try my best to refer https://developers.google.com/ resources the most here to make things easy for everyone.
View: A View is a rectangular area visible on the screen. It has a width and height, and sometimes a background color.
ImageView: An ImageView displays an image such as an icon or photo
TextView: A TextView displays text
Button: A Button is a TextView that is sensitive to touch: tap it with your finger and it will respond
ViewGroup: ViewGroup is a big View—often invisible—that contains and positions the smaller Views inside of it.
To understand better with an example visit this linkand start typing in the above definitions in the grey search box
Click to expand...
Click to collapse
Now I assume that everyone's gone through the above link and searched for each item and how does it look like. To implement a view/layout we need a place to code and a language to make the computer understand that we are coding to implement a view.
The place where we code or simply the IDE we will be using is strictly Android Studio. Why is it only Android Studio? You can use any alternative IDE. However, Using Android Studio makes life easier to manage both SDK, the android projects and the IDE helps you finish the code by actively prompting.
The language in which we will be writing the code is XML. XML stands for Extended Markup Language.
Let's take up an example to write a code for a TextView in XML and how does it look as a view.
Code:
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello XDA!"
android:textSize="40sp"/>
If the above code is executed, the TextView Looks like this,
Before we even go and talk about the things that are present in the code, Let's understand the syntax of xml. Syntax is nothing but rules to define what a valid XML is. If the syntax isn't right, it wouldn't even show up on your android device.
Here's the syntax for xml
Code:
<ViewName
attribute: "attribute_value"/>
If you carefully observe the syntax, the xml tag/code opens with a opening angle brackets "<" followed by the ViewName in "Camel Case"
The next line has a attribute. attributes must always be lowercase. if you enter it camel case or any other format, you end up with errors.
For every attribute, you'll have a attribute value assigned within "quotes"
You can have any number of attributes as long as they are valid.
The close the xml code. You'll use a forward slash "/" and a closing angle bracket ">"
In the above shown example for a text view, the type of xml code we used is called as a "Self-Closing" tag. An xml can be closed in many different ways. One of the way is "Self-Closing" and the other one is by having "children tags". An example for that tag is shown below.
Code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.aneel.xda.MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello XDA!"
android:textSize="40sp"/>
</RelativeLayout>
If we observe. the ViewType in the beginning says "<RelativeLayout" and the end of declaring the "Relative Layout" is just done by using a ">" not a "/>" this is because, ">" indicates there is something after that or in simple words, it's not the end of XML. Right below that there is a child tag for "TextView" which ends right there followed by the "</RelativeLayout". So this means, the "TextView" is a part of "RelativeLayout"
we can close an xml either by "/>" or </ViewName>"
Styling the views
Step2: Styling the views
Now that we know how the code looks for TextView/ButtonView/ImageView, Let's get into styling the views as per our choice.
Code:
<View
android:layout_width="100px"
android:layout_height="100dp"
android:background="#4E4B4F" />
The above code generates a line instead of a box. WE usually make polygons and shapes in px. However, there is a very special reason why we shouldn't be using px (pixels). Every screen is covered by pixels and to understand better, See the image below and look how 2px width and 2px height looks like on different devices.
The dimesnion 2px x 2px in a mdpi device is good to touch and see. the same resolution in a hdpi is also good to see and touch, but when it comes to a xhdpi device we barely can see the pixels. This is the reason why we should use dp (density independent pixels) if we are defining the dimensions of any view.
Lets see the same devices with 2dp x 2dp and see how it looks.
Voila! The 2dp is evenly spread out on all the devices unlike the 2px.
Let's learn a few layout based definitions to understand the code. I'm taking the definitions from developer.google.com again to make it easy for everyone to refer in the future.
wrap_content: We can specify the width or height of a View as a given distance. Alternatively, we can specify it as the special value wrap_content to shrink-wrap the View around its content.
match_parent: To allow a View to expand horizontally to occupy the full width of its parent, we set the View’s layout_width attribute to the special value match_parent. Similarly, to let a View expand vertically to occupy the full height of its parent, we set its layout_height to match_parent.
Click to expand...
Click to collapse
Now let's learn how to set a text size in a ViewType. Just like giving dimensions to a view as "dp" we use "sp"(scale independent pixels) to set the size of text.
Let's look at an example code.
Code:
<TextView
android:textSize="50sp"/>
We can add this line to any view which has text in it. By using "sp" the text looks consistent in all types of devices.
Here's a reference to the material design's typography styles. https://material.google.com/style/typography.html#typography-styles
Please check back in a few hours for more content.
reserved for Daniel Radcliff's magic
Wait, don't forget about Kevin Hart's post here
P.S: Apologies to the moderators. Reserving a lot of place for the guide. Just one more.
reserved
Kudos for the nice guide. http://tutorialspoint.com/ is also another great place to learn.
Sent from my HTC Desire 626s using Tapatalk