From what I've seen, most tutorials relative to GraphView use direct Action
s. I wanted to use a Fragment
instead. Here are the steps I did (using the Android Studio):
Create a Layout Fragment
First, create a fragment (create a new Layout Resource File), based on a LinearLayout
. I ended up with a file named fragment_graph.xml with the following content:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/graph1"
android:background="#102f65" />
</LinearLayout>
The idea is pretty simple; the widget to be used by the Graph
is graph1
.
Create the Java Fragment
On the java side, I've added a new class GraphFragment
which extends the Fragment
class:
public class GraphFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_graph,
container, false);
populateGraphView(view);
return view;
}
}
This is a pretty standard fragment. The secret sauce is in the populateGraphView()
method. Here, we perform three operations:
-
First, we create the data set:
GraphViewSeries exampleSeries = new GraphViewSeries(new GraphViewData[] { new GraphViewData(1, 2.0d) , new GraphViewData(2, 1.5d) , new GraphViewData(3, 2.5d) , new GraphViewData(4, 1.0d) });
We do the dataset initialisation here because it's an example. You may want to do it somewhere else if you collect it off a remote service for example.
-
Build the
GraphView
:LineGraphView graphView = new LineGraphView( getActivity() // context , "GraphViewDemo" // heading );
and add the dataset:
graphView.addSeries(exampleSeries); // data
The Activity
required by the GraphView
constructor (in this case LineGraphView
) can be collected form the Fragment
instance via getActivity()
.
- Get the widget reference in the fragment and add the
GraphView
to it:
try {
LinearLayout layout = (LinearLayout) view.findViewById(R.id.graph1);
layout.addView(graphView);
} catch (NullPointerException e) {
// something to handle the NPE.
}
Incidentally, R.id.graph1
is our graph1
from the layout file.
The full code of the class is:
private void populateGraphView(View view) {
// init example series data
GraphViewSeries exampleSeries = new GraphViewSeries(new GraphViewData[] {
new GraphViewData(1, 2.0d)
, new GraphViewData(2, 1.5d)
, new GraphViewData(3, 2.5d)
, new GraphViewData(4, 1.0d)
});
LineGraphView graphView = new LineGraphView(
getActivity() // context
, "GraphViewDemo" // heading
);
graphView.addSeries(exampleSeries); // data
try {
LinearLayout layout = (LinearLayout) view.findViewById(R.id.graph1);
layout.addView(graphView);
} catch (NullPointerException e) {
// something to handle the NPE.
}
}
Add the Fragment to an Activity
Once the fragment is defined, all that's left to be done is to add it to an activity. If you have a sample activity-based project, you can end up with a layout file (activity_fragments.xml) similar to this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<fragment
android:id="@+id/listFragment"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
class="com.laurivan.fragmentexercise.fragmentize.GraphFragment" />
</LinearLayout>
Simple, isn't it?
HTH,
Member discussion: