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
Related
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.
This is a project that I whipped together to show developers how to implement a floating window type popup for their apps. An example usage would be quick reply to a sms message, email, or any other times quick reply would come in handy. It isn't limited to just that though, using this method, you will be able to completely recreate any activity in windowed form with very little code edits.
{
"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"
}
My brother an I have used this to create a quick reply for our app, Sliding Messaging Pro. The idea is basically the exact same as Halo, with almost the exact same implementation. We do it by extending the MainActivity in a pop up class, then using an overrode setUpWindow() function to set up your MainActivity in the window.
The full source is availible on my GitHub, found here: Floating Window GitHub
Play Store Link: Floating Window Demo
So now to the actual steps to creating your own "floating window popup" out of your apps MainActivity:
1.) First, we should add the styles that we are going to use to the styles.xml sheet.
These are the styles for the animation, of course you can define your own animation if you choose, these will bring the window up from the bottom of the screen and the close it to the bottom of the screen.
Code:
<style name="PopupAnimation" parent="@android:style/Animation">
<item name="android:windowEnterAnimation">@anim/activity_slide_up</item>
<item name="android:windowExitAnimation">@anim/activity_slide_down</item>
</style>
Now, this style is for the actual popup dialog box. You can play with the different values here all you want. We end up overriding some of these when we set up the window anyways, such as the dimming.
Code:
<style name="Theme.FloatingWindow.Popup" parent="@android:style/Theme.Holo.Light" >
<item name="android:windowIsFloating">false</item>
<item name="android:windowSoftInputMode">stateUnchanged</item>
<item name="android:windowContentOverlay">@null</item>
<item name="android:windowActionModeOverlay">true</item>
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowFrame">@null</item>
<item name="android:windowAnimationStyle">@style/PopupAnimation</item>
<item name="android:windowCloseOnTouchOutside">true</item>
<item name="android:backgroundDimEnabled">false</item>
</style>
2.) Now that your styles are set up, lets go ahead and add the new Popup activity to the manifest. You can see that we used the Theme.FloatingWindow.Popup style that we just defined in the last step. You will also have to add
Code:
xmlns:tools="http://schemas.android.com/tools"
to the xmlns declarations at the top of the manifest.
Code:
<activity
android:name="PopupMainActivity"
android:label="@string/app_name"
android:theme="@style/Theme.FloatingWindow.Popup"
android:configChanges="orientation|screenSize"
android:windowSoftInputMode="adjustResize|stateAlwaysHidden"
android:clearTaskOnLaunch="true"
android:exported="true"
tools:ignore="ExportedActivity" />
3.) One more thing that we have to put in before you have resolved all the errors here, the animations. Just copy and paste these two animations in separate files under the res/anim folder. Name one activity_slide_down.xml and the other activity_slide_up.xml
activity_slide_down.xml
Code:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate android:fromXDelta="0%" android:toXDelta="0%"
android:fromYDelta="0%" android:toYDelta="100%"
android:duration="300"/>
</set>
activity_slide_up.xml
Code:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate android:fromXDelta="0%" android:toXDelta="0%"
android:fromYDelta="100%" android:toYDelta="0%"
android:duration="300"/>
</set>
4.) Now that everything should be set up, we will make the actual popup activity! You can view my full code for this from the GitHub link, but basically, we are going to make a PopupMainActivity.java class and extend the MainActivity class. If you understand inheritance at all with java, you will know what this is doing. It is going to allow this PopupMainActivity class, when started, to override methods from the MainActivity to produce different outcomes.
The method that actually makes the windowed pop up I have named setUpWindow(). This means that whenever this activity is called instead of the main activity, it will use this method instead of the main activities setUpWindow() method. This is very convieniet since we don't want to do any extra work than we need to in this class. So here is the code for that class:
Code:
/**
* This method overrides the MainActivity method to set up the actual window for the popup.
* This is really the only method needed to turn the app into popup form. Any other methods would change the behavior of the UI.
* Call this method at the beginning of the main activity.
* You can't call setContentView(...) before calling the window service because it will throw an error every time.
*/
@Override
public void setUpWindow() {
// Creates the layout for the window and the look of it
requestWindowFeature(Window.FEATURE_ACTION_BAR);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND,
WindowManager.LayoutParams.FLAG_DIM_BEHIND);
// Params for the window.
// You can easily set the alpha and the dim behind the window from here
WindowManager.LayoutParams params = getWindow().getAttributes();
params.alpha = 1.0f; // lower than one makes it more transparent
params.dimAmount = 0f; // set it higher if you want to dim behind the window
getWindow().setAttributes(params);
// Gets the display size so that you can set the window to a percent of that
Display display = getWindowManager().getDefaultDisplay();
Point size = new Point();
display.getSize(size);
int width = size.x;
int height = size.y;
// You could also easily used an integer value from the shared preferences to set the percent
if (height > width) {
getWindow().setLayout((int) (width * .9), (int) (height * .7));
} else {
getWindow().setLayout((int) (width * .7), (int) (height * .8));
}
}
You can see what it does from the comments, but basically, it just initializes your main activity in a windowed for, exactly what we are trying to do!
5.) Now to actually have this method override something in the MainActivity, you must add the same method there. In my example, The method is just blank and has no implementation because i don't want it to do anything extra for the full app. So add this activity and the error that "your method doesn't override anything in the super class" will go away. Then you actually have to call this method from your MainActivity's onCreate() method so that it will set up the windowed app when it is suppose to.
Code:
/**
* Called when the activity is first created to set up all of the features.
*/
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
context = this;
// If the user is in the PopupMainActivity function, the setUpWindow function would be called from that class
// otherwise it would call the function from this class that has no implementation.
setUpWindow();
// Make sure to set your content view AFTER you have set up the window or it will crash.
setContentView(R.layout.main);
// Again, this will call either the function from this class or the PopupMainActivity one,
// depending on where the user is
setUpButton();
}
As you can see from the code, I called this method before i set the content view for the activity. This is very important, otherwise you will get a runtime exception and the app will crash every time.
After you are done with that, you have successfully set up a program that will change from a windowed state to a full app state depending on which class is called. For example, if you set up an intent to open the floating window app, it would look something like this:
Code:
Intent window = new Intent(context, com.klinker.android.floating_window.PopupMainActivity.class);
window.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
startActivity(window);
You are still able to call the MainActivity class like you normally would then. with an intent like this:
Code:
Intent fullApp = new Intent(context, MainActivity.class);
fullApp.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
startActivity(fullApp);
That is just about it, obviously my solution and demo are very simple implementations of what it can do. You can see from the demo app that I simply go back and forth between the activities with a button, then i have an edittext at the bottom to demonstrate how the window resizes.
You can literally do anything with this though. It will work with any layouts you have set up and is a very cool way for your users to experience your app in a different light. If you want to change how something works in the popup part of the app, all you have to do is function that portion of code out, then override that method from the popup activity, so the possibilities are endless with what can be done here.
Credit for this goes to the Paranoid Android team of course for inspiring the idea, then Jacob Klinker (klinkdawg) and myself (Luke Klinker) for the implementation without framework tweaks or custom roms. This should work for any users, no matter the phone, android version, or custom rom.
I honestly have no clue if it will work on anything below 4.0, but if you test and find out, sound off in the comments!
Thanks and enjoy! I hope to see lots of dynamic and awesome popups in the future because it really is just that simple, it won't take you more than a half hour to get this working!
I love your Sliding Messaging app. Really awesome work. The BEST messaging app out there. I'm in the beta group. Thank you for this information!
Sent from my XT875 using Tapatalk
I assume that this tutorial works with gingerbread..?
aniket.lamba said:
I assume that this tutorial works with gingerbread..?
Click to expand...
Click to collapse
It says at the bottom of the article that I don't know if it will work on anything below ICS. It relies on a dialog theme, which obviously existed pre ICS, but I have no way of checking if it works the same or not. Try it and let me know I guess!
Thank you for your sharing.
I used your example to add this amazing feature into Telepatch, an Open Source project, fork of Telegram
Thanks again!
[Idea] Create FloatingActivity type
This is an extremely awesome project, easy to implement, and very light weight, however, the only problem is that when i call the floating activity for example from a notification or whatever, the background activity closes, and i haven't been able to get around it
However, just an idea, which is what i did, create a separate Activity and put the setUpWindow() method in it, and override the onCreate() method and setUpWindow() in it, and after that, you can just create any activity and extends the FloatingActivity class and you're done, just make sure that you call super.onCreate() if you (probably) overrided the onCreate() method:laugh:
Hi, I've tried your solution. It works perfectly!
But when we touch homescreen button, the app is minimized. How can we make it persistent?
How to make truecaller like floating window..for incoming calls
Hey guys this is the image which I would like to set at the top of every layout below the action bar...I dont want to include and set it in each and every layout.
So any alternatives for the same. I want this image to be displayed in all oof my 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"
}
coolbud012 said:
Hey guys this is the image which I would like to set at the top of every layout below the action bar...I dont want to include and set it in each and every layout.
So any alternatives for the same. I want this image to be displayed in all oof my application.
Click to expand...
Click to collapse
If it is just one view, you can do it similar to the dividers in the third answer to this question. Have a style for the list heading (probably referencing the system or support library resources, depending on the lowest API you use) and then just add the small view wherever you want it. There is also another way using the <include> tag, so you can use a separate xml file to declare your header layout.
SimplicityApks said:
If it is just one view, you can do it similar to the dividers in the third answer to this question. Have a style for the list heading (probably referencing the system or support library resources, depending on the lowest API you use) and then just add the small view wherever you want it. There is also another way using the <include> tag, so you can use a separate xml file to declare your header layout.
Click to expand...
Click to collapse
I dont want to go with include even that way I would have to put the include in every layout.
Should I go with and put this into BaseActivity.java so that it would be loaded with each activity.
Code:
View view = new View(this);
view.setLayoutParams(new LayoutParams(2,LayoutParams.FILL_PARENT));
view.setBackgroundColor(Color.BLACK);
layout.add(view);
Or should I go with this only :
Code:
<style name="Divider">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">1dp</item>
<item name="android:background">?android:attr/listDivider</item>
</style>
Then in my layouts is less code and simpler to read.
<View style="@style/Divider"/>
But the main issues with using the style is that I am using 1 style for layouts in which I am repeating the layout...and I cant use 2 styles for 1 ViewGroup...
I want to know the most optimized way...
coolbud012 said:
I dont want to go with include even that way I would have to put the include in every layout.
Should I go with and put this into BaseActivity.java so that it would be loaded with each activity.
Code:
View view = new View(this);
view.setLayoutParams(new LayoutParams(2,LayoutParams.FILL_PARENT));
view.setBackgroundColor(Color.BLACK);
layout.add(view);
Or should I go with this only :
Code:
<style name="Divider">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">1dp</item>
<item name="android:background">?android:attr/listDivider</item>
</style>
Then in my layouts is less code and simpler to read.
<View style="@style/Divider"/>
But the main issues with using the style is that I am using 1 style for layouts in which I am repeating the layout...and I cant use 2 styles for 1 ViewGroup...
I want to know the most optimized way...
Click to expand...
Click to collapse
Well I don't think there is an easy way to get around putting one line in every layout. So I assume that you want to use a single ImageView to show the image, so create a
Code:
<style name="header">
<item name="android:scr">@drawable/yourimage</item>
<!-- additional information like scale Type and such -->
</style>
And then in each layout, just add
<ImageView style="header"/>
Wherever you need it. I think that's the simplest way to do it.
SimplicityApks said:
Well I don't think there is an easy way to get around putting one line in every layout. So I assume that you want to use a single ImageView to show the image, so create a
Code:
<style name="header">
<item name="android:scr">@drawable/yourimage</item>
<!-- additional information like scale Type and such -->
</style>
And then in each layout, just add
<ImageView style="header"/>
Wherever you need it. I think that's the simplest way to do it.
Click to expand...
Click to collapse
Ok thanks for the suggestion...what about the first way I have described above?
else will follow what you have instructed...
coolbud012 said:
Ok thanks for the suggestion...what about the first way I have described above?
else will follow what you have instructed...
Click to expand...
Click to collapse
Ah you're right, you could also do it programmatically. Not sure what the best way would be, but you could create an abstract class HeaderActivity that would contain the code in the onCreate() so all your activities could extend that class instead of Activity or FragmentActivity. You would need to have one ID for all your top level layout, to call findViewById(R.id.top_view).addView(imageView, 0);
In the HeaderActivity. And you could also set your layout directly in its onCreate with an abstract method getLayoutId.
SimplicityApks said:
Ah you're right, you could also do it programmatically. Not sure what the best way would be, but you could create an abstract class HeaderActivity that would contain the code in the onCreate() so all your activities could extend that class instead of Activity or FragmentActivity. You would need to have one ID for all your top level layout, to call findViewById(R.id.top_view).addView(imageView, 0);
In the HeaderActivity. And you could also set your layout directly in its onCreate with an abstract method getLayoutId.
Click to expand...
Click to collapse
seems to be a great idea but...I had dropped out the idea of header and instead simplified the app header a bit...
Have a look at https://play.google.com/store/apps/details?id=com.droidacid.apticalc
U can create one Base Activity which extends "FragmentActivity" or "SherlockFragmentActivity"(if u use it) and then put that header on the top...below it create a fragment and in the whole app just replace that fragment and stay in one activity only..then u just need to have only one layout for the header and you can do the rest very easily....
I occasionally read a book or a longer text on the EPD of my YP2, usually with the YotaReader app. That works ok, but there's a small issue that annoys me: it's the jagged edges of the characters, which makes the appearance of the text less nice.
Yota uses a black & white only (2 color) mode of the EPD to provide maximum frames per second (8) without flashing, which allows for relatively smooth interaction with the EPD screen. The technique comes in handy when scrolling webpages, turning YotaReader pages without flickering, and many interactive screens, like navigating Apps in mirroring mode. By using dithering the 2 colors are used to simulate grey colors. This works great on pictures, but less well on text.
The EPD can also draw in 16 colors, which is used for the Yota panels screens, and e.g. the YotaSnap picture viewer. With 16 colors, it provides far nicer quality than the 2 color mode, at the expense of slower drawing, extra flashing and no interactive scrolling etc.
Here's an example of the difference in quality between 2 and 16 colors:
2 colors (with dithering):
{
"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"
}
16 colors (possibly also with dithering, but less obvious):
(The 16 color photo is a bit blurry, both are actual photos of the screen taken with a cheap macro filter)
Text rendered in 16 colors looks much prettier. I'd like to be able to read a book like that!
I've been thinking for a while about a gesture (like a 3 or 4 finger tap) that would allow the current 2 color screen contents to be re-rendered at 16 colors. So imagine browsing a web page on the EPD, or reading a book and when you're done scrolling/turning a page to a location you actually want to read or look at for longer, you'd make the gesture and the screen would 'beautify' itself into 16 colors. You could not interact with it smoothly anymore at that point, but reading or showing pictures etc would be nicer. Maybe it would be possible to flash the screen and return to 2 color mode when starting to scroll again etc.
Not sure how to go about this, but using xposed it would be possible to hook into the JNI calls that ultimately dither and draw stuff onto the back screen, or maybe at a higher level like the backscreen manager.
There are alternatives, like adapting FBReader for the EPD, with optional 16 color mode, but the gesture solution could in theory apply to anything on the screen, not just a reader app.
Anyone interested to help dig into this?
I like this idea, but I don't have the time to work on this.
What you are looking for, though, is changing the waveform from one to another: http://mwiki.yotaphone.com/wiki/Waveforms
The class EinkUtils inside the SDK has a lot of interesting methods which are responsible for updating the screen. Maybe using xposed one could switch the waveform on the fly when one of those methods are called, or even do a manual refresh with the desired waveform.
Jeopardy said:
I like this idea, but I don't have the time to work on this.
What you are looking for, though, is changing the waveform from one to another: http://mwiki.yotaphone.com/wiki/Waveforms
The class EinkUtils inside the SDK has a lot of interesting methods which are responsible for updating the screen. Maybe using xposed one could switch the waveform on the fly when one of those methods are called, or even do a manual refresh with the desired waveform.
Click to expand...
Click to collapse
Ok! Thanks for the pointer. (I know about waveforms and update modes, but thought it was a bit too technical for a post to gauge interest in such a feature in the YotaPhone General forum.)
My time is limited too, I'll see if I can manage some experiments.
SteadyQuad said:
Ok! Thanks for the pointer. (I know about waveforms and update modes, but thought it was a bit too technical for a post to gauge interest in such a feature in the YotaPhone General forum.)
My time is limited too, I'll see if I can manage some experiments.
Click to expand...
Click to collapse
I wonder if the use of xposed is even necessary? Maybe it would be possible to create some service which would listen for some event, maybe volume up button or something, and that would just refresh the whole screen using the most detailed waveform. Not sure if this is possible, as at least the partial refresh functions wanted a reference to a specific view which is to be updated.. I don't have the API/SDK at hand right now, but one would think that there is some static function for updating the entire screen.
the backscreen framebuffer always contains a 16grey bitmap, so I fooled around with the epd sysfs interface (/sys/kernel/epd) to re-render the screen with different parameters, but no definite success so far. I can flash the screen that way and make it redraw, but not with 16 cols. For activation I was going to snoop how e.g. three finger tap is handled (configurable for sleeping) probably in windowmanager class. (not near a pc right now either).
Using the EPD kernel interface you can make the screen update like this, but it doesn't seem to actually change the waveform/number of colors.
[email protected]:/ # echo 2 > /sys/kernel/epd/waveform
[email protected]:/ # echo 51 > /sys/kernel/epd/update_mode
[email protected]:/ # echo 1 > /sys/kernel/epd/updateImage
The update modes:
UPD_INIT 50
UPD_FULL 51
UPD_FULL_AREA 52
UPD_PART 53
UPD_PART_AREA 54
The waveforms:
WF_MODE_INIT 0
WF_MODE_DU 1
WF_MODE_GC16 2
WF_MODE_GL16 3
WF_MODE_GLR16 4
WF_MODE_GLD16 5
WF_MODE_A2 6
WF_MODE_DU4 7
SteadyQuad said:
Using the EPD kernel interface you can make the screen update like this, but it doesn't seem to actually change the waveform/number of colors.
...
Click to expand...
Click to collapse
So what it does in practice is it draws each view using its own waveform, which makes sense. According to wiki the default waveform for a view is A2, which is black and white.
There is a method called EinkUtils.setViewWaveform(anyView, waveform) which can be used to set the waveform for any given view, and that is what needs to be overridden before calling refresh. That sounds like a job for xposed. Maybe the constant of WAVEFORM_A2 could be momentarily switched to WAVEFORM_GC_FULL and back or something? Then the individual views could remain untouched.
SteadyQuad said:
Using the EPD kernel interface you can make the screen update like this, but it doesn't seem to actually change the waveform/number of colors.
[email protected]:/ # echo 2 > /sys/kernel/epd/waveform
[email protected]:/ # echo 51 > /sys/kernel/epd/update_mode
[email protected]:/ # echo 1 > /sys/kernel/epd/updateImage
The update modes:
UPD_INIT 50
UPD_FULL 51
UPD_FULL_AREA 52
UPD_PART 53
UPD_PART_AREA 54
The waveforms:
WF_MODE_INIT 0
WF_MODE_DU 1
WF_MODE_GC16 2
WF_MODE_GL16 3
WF_MODE_GLR16 4
WF_MODE_GLD16 5
WF_MODE_A2 6
WF_MODE_DU4 7
Click to expand...
Click to collapse
how do i do this//access the kernel? And how can i set the waveform for all views to A2? My YP2 is rooted. regards
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