How to display Stacked Bar graph/chart in android studio?

Question

I have to create a Stack-bar graph and my requirement is to graph should look like this.

I have checked many graph libraries but no one is providing this type of UI. is this possible to achieve?

Answer 1

So I finally found a way for that.

Step 1: Add 3 views with respective colors and a button like in below XML:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <View
        android:layout_width="75sp"
        android:layout_height="15sp"
        android:layout_marginTop="100sp"
        android:layout_marginStart="10sp"
        android:background="#ff0000"
        android:id="@+id/viewOverdue"/>

    <View
        android:layout_width="75sp"
        android:layout_height="15sp"
        android:layout_marginTop="100sp"
        android:layout_marginStart="2sp"
        android:background="#FFDD00"
        android:layout_toEndOf="@+id/viewOverdue"
        android:id="@+id/viewActive"/>

    <View
        android:layout_width="75sp"
        android:layout_height="15sp"
        android:layout_marginTop="100sp"
        android:layout_marginStart="2sp"
        android:background="#00FF00"
        android:layout_toEndOf="@+id/viewActive"
        android:id="@+id/viewDone"/>

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="Enter Overdue"
        android:id="@+id/editOverdue"
        android:layout_below="@+id/viewActive"
        android:layout_marginTop="100sp"/>

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="Enter Active"
        android:layout_below="@+id/editOverdue"
        android:id="@+id/editActive"
        android:layout_marginTop="2sp"/>

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="Enter Done"
        android:layout_below="@+id/editActive"
        android:id="@+id/editDone"
        android:layout_marginTop="2sp"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="submit"
        android:id="@+id/btnSubmit"
        android:layout_below="@id/editDone"
        android:layout_marginTop="20sp"/>
</RelativeLayout>

This is how it will Look: Do note that views are set to invisible initially.

Step 2: The coding part:

MainActivity.java

public class MainActivity extends AppCompatActivity {

    private EditText typeActive, typeDone, typeOverdue;
    private Button btnSubmit;
    private View viewDone, viewOverDue, viewActive;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        typeActive = findViewById(R.id.editActive);
        typeDone = findViewById(R.id.editDone);
        typeOverdue = findViewById(R.id.editOverdue);

        btnSubmit = findViewById(R.id.btnSubmit);

        viewDone = findViewById(R.id.viewDone);
        viewActive = findViewById(R.id.viewActive);
        viewOverDue = findViewById(R.id.viewOverdue);

        viewDone.setVisibility(View.INVISIBLE);
        viewOverDue.setVisibility(View.INVISIBLE);
        viewActive.setVisibility(View.INVISIBLE);

        //Type all the number of tasks and press the submit button
        btnSubmit.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                final String tasksActive = typeActive.getText().toString();
                final String tasksDone = typeDone.getText().toString();
                final String tasksOverdue = typeOverdue.getText().toString();

                int intTaskActive = Integer.parseInt(tasksActive);
                int intTaskDone = Integer.parseInt(tasksDone);
                int intTaskOverdue = Integer.parseInt(tasksOverdue);

                int totalTasks = intTaskActive + intTaskOverdue + intTaskDone;

                float percentageActive = (intTaskActive*100.0f)/totalTasks;
                float percentageDone   = (intTaskDone*100.0f)/totalTasks;
                float percentageOverdue = (intTaskOverdue*100.0f)/totalTasks;

                int intPercActive = (int)percentageActive;
                int intPercDone = (int)percentageDone;
                int intPercOverdue = (int)percentageOverdue;

                viewDone.setVisibility(View.VISIBLE);
                viewOverDue.setVisibility(View.VISIBLE);
                viewActive.setVisibility(View.VISIBLE);

                viewDone.setLayoutParams(new RelativeLayout.LayoutParams(intPercDone*10, 50));
                viewActive.setLayoutParams(new RelativeLayout.LayoutParams(intPercActive*10, 50));
                viewOverDue.setLayoutParams(new RelativeLayout.LayoutParams(intPercOverdue*10, 50));

            }
        });

    }
}

This is the output after execution:

So how this works is you type the number of tasks in the edittext. It doesn't matter how you get the number of tasks but you need to convert it to percentage of total length of the stackBar or whatever you call it. So finally you just assign each view the respective width as per the number.