Listview with a MPAndroidChart(or whatever) below

Question

Edit: I changed the title because isn't about MPAndroidChart, the same issue would happen with another view below the ListView.

I am trying to set a layout for an activity in my android app. This activity consist on 2 elements, a ListView and a MPAndroidChart.

What I would like to achieve is to place the ListView at top, taking the height that it needs (wrap_content) and below it the chart with a fixed height.

I'm newbie on android, so the first thing I made was make a RelativeLayout with the list on the top and below that, the chart. This seemed fine in 'portrait' (the list had few element) but when I tried it on 'landscape' the chart disappeared...

So then I made a ScrollView wrapping the whole content (that it's a RelativeLayout) but I experimented some strange behavior (I guess because of the dynamic height of the listview). But anyway, the idea of having two different 'scrolls' (one for the list, another one for the whole activity) doesn't seem very nice.

Well, what I'm doing now is divide the height in two and have on the top part, the list, and on the bottom, the chart, like this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout  xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" >


    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:weightSum="2"
        android:orientation="vertical" >

        <ListView
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:id="@+id/list"
            android:listSelector="@android:color/transparent"
            android:layout_alignParentTop="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true">

        </ListView>

        <com.github.mikephil.charting.charts.LineChart
            android:id="@+id/chart"
            android:layout_width="match_parent"
            android:layout_below="@+id/list"
            android:layout_height="0dp"
            android:layout_weight="1"/>

    </LinearLayout>

</RelativeLayout>

But I don't really like it.

So, any thoughts on how to do this?

Answer 1

Try this code

Portrait Mode

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#22bbcc"
    android:orientation="vertical">

    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_margin="4dp"
        android:layout_weight="0.50"
        android:background="#ccbb22" />

    <LinearLayout
        android:id="@+id/LinearLayout_chart"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_margin="4dp"
        android:layout_weight="0.50"
        android:background="#ddaaaa"
        android:orientation="horizontal">

        <!--You can have your chart here -->
    </LinearLayout>
</LinearLayout>

Landscape Mode

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="4dp"
    android:background="#22bbcc"
    android:orientation="horizontal">

    <ListView
        android:id="@+id/listView"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_margin="4dp"
        android:layout_weight="0.50"
        android:background="#ccbb22" />

    <LinearLayout
        android:id="@+id/LinearLayout_chart"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_margin="4dp"
        android:layout_weight="0.50"
        android:background="#ddaaaa"
        android:orientation="horizontal">

        <!--You can have your chart here -->
    </LinearLayout>

</LinearLayout>

if possible add the PieChart dynamically to the LinerLayout

private PieChart mChart;
private float[] yData = {5, 4, 5, 2}; 
private String[] xData = {"Item_one", "Item_two", "Item_Three","Item_Four"};
linearLayoutTwo = (LinearLayout)findViewById(R.id.LinearLayout_chart);
mChart = new PieChart(this);

    // configure pie chart
    mChart.setUsePercentValues(true);
    mChart.setDescription("");


    // enable hole and configure
    mChart.setDrawHoleEnabled(false);
    mChart.setHoleColorTransparent(true);
    mChart.setHoleRadius(0);
    mChart.setTransparentCircleRadius(0);

    // enable rotation of the chart by touch
    mChart.setRotationAngle(0);
    mChart.setRotationEnabled(false);

    ArrayList<Entry> yVals1 = new ArrayList<Entry>();

    for (int i = 0; i < yData.length; i++)
        yVals1.add(new Entry(yData[i], i));

    ArrayList<String> xVals = new ArrayList<String>();

    for (int i = 0; i < xData.length; i++)
        xVals.add(xData[i]);

    // create pie data set
    PieDataSet dataSet = new PieDataSet(yVals1, "");
    dataSet.setSliceSpace(0);
    dataSet.setSelectionShift(1);

    // add many colors
    ArrayList<Integer> colors = new ArrayList<Integer>();

    for (int c : new int[]{Color.rgb(124, 185, 232), Color.rgb(178, 132, 190), Color.rgb(201, 255, 229),
            Color.rgb(100, 148, 143)}) {
        colors.add(c);
    }


    colors.add(ColorTemplate.getHoloBlue());
    dataSet.setColors(colors);

    // instantiate pie data object now
    PieData data = new PieData(xVals, dataSet);
    data.setValueFormatter(new PercentFormatter());
    data.setValueTextSize(9f);
    data.setValueTextColor(Color.BLACK);

    mChart.setData(data);

    // undo all highlights
    mChart.highlightValues(null);

    // update pie chart
    mChart.invalidate();
    linearLayoutTwo.addView(mChart);
    // customize legends
    Legend l = mChart.getLegend();

    l.setPosition(Legend.LegendPosition.RIGHT_OF_CHART);
    l.setXEntrySpace(4);
    l.setYEntrySpace(4);

Answer 2

Finally I found a solutions that make what I wanted.

I post this solution here, maybe helps someone.

What I have done is just insert the chart as a footer of the ListView, so I have just the scroll of the listview and at the end de MPAndroidChart (as I wanted).

To achieve that I have made a new layout file, chartlayout.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="match_parent">

    <com.github.mikephil.charting.charts.LineChart
        android:id="@+id/chart"
        android:layout_width="match_parent"
        android:layout_height="200dp"/>
</RelativeLayout>

And so in my activity java file I take the layout from chartlayout with the inflater service, then I get the chart view and finally I add it to the list as footer:

    //get layout
    chartLayout = ((LayoutInflater) this.getSystemService(Context.LAYOUT_INFLATER_SERVICE)).inflate(R.layout.chartlayout, null, false);

    //get view
    mChart = (LineChart) chartLayout.findViewById(R.id.chart);

    /*  
    *   chart stuff
    */

    ...

    mylistView.addFooterView(chartLayout);