make percentage bar chart in android-CodePudding

I'm looking for making percentage chart that looked like this: click here

any ideas how to make this out in android?

CodePudding user response：

There must be a library out there but you can also use linear layout and change its weight on run time for example:

<LinearLayout
    android:id="@ id/attendance_layout"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:layout_margin="10dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/button_second"
    android:orientation="horizontal"
    android:weightSum="100">
    <LinearLayout
        android:id="@ id/absent_layout"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="50"
        android:background="@color/purple_200"
        android:gravity="center"
        android:orientation="horizontal" >
        <TextView
            android:id="@ id/text_absent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/white"
            android:text="50%"
            />
    </LinearLayout>
    <LinearLayout
        android:id="@ id/present_layout"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="30"
        android:gravity="center"
        android:background="@color/teal_200"
        android:orientation="horizontal">
        <TextView
            android:id="@ id/text_present"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/white"
            android:text="30%"
            />
    </LinearLayout>
    <LinearLayout
        android:id="@ id/late_layout"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="20"
        android:gravity="center"
        android:background="@color/teal_700"
        android:orientation="horizontal">
        <TextView
            android:id="@ id/text_late"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/white"
            android:text="20%"
            />
    </LinearLayout>

</LinearLayout>

CodePudding user response：

It is very easy in your xml you need this:

<LinearLayout
    android:id="@ id/attendance_layout"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:orientation="horizontal"
    android:weightSum="100">
    <LinearLayout
        android:id="@ id/absent_layout"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="50"
        android:background="@color/purple_200"
        android:gravity="center"
        android:orientation="horizontal" >
        <TextView
            android:id="@ id/text_absent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/white"
            android:text="50%"
            />
    </LinearLayout>
    <LinearLayout
        android:id="@ id/present_layout"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="30"
        android:gravity="center"
        android:background="@color/teal_200"
        android:orientation="horizontal">
        <TextView
            android:id="@ id/text_present"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/white"
            android:text="30%"
            />
    </LinearLayout>
    <LinearLayout
        android:id="@ id/late_layout"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="20"
        android:gravity="center"
        android:background="@color/teal_700"
        android:orientation="horizontal">
        <TextView
            android:id="@ id/text_late"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/white"
            android:text="20%"
            />
    </LinearLayout>

</LinearLayout>

This is taken from answer by Answer by Waqar but with a bit more modifications.

You might want to set the data dynamically right? You can do it this way:

LinearLayout.LayoutParams param = new LinearLayout.LayoutParams(
    LayoutParams.MATCH_PARENT,
    LayoutParams.MATCH_PARENT,
    100f /* This is the value of the width. You change it by getting value fro database or so. */
);
late_layout.setLayoutParams(param);

You can use this code for all the sections