CODEWITHSUNDEEP
androidgraphics
Lekensteyn
Lekensteyn

Reputation: 66465

How do I make a horizontal bar with multiple sections in it?

How do I make a bar in Android that has multiple sections? I've tried a ProgressBar, but I cannot get it to work and neither does it sound a correct application of ProgressBar. In HTML I'd just use something like:

<style>
#bar { width: 100px; }
.bar { height: 20px; }
.black { background-color: black; }
</style>
<div id="bar">
    <div class="bar"       style="width: 15px;"></div>
    <div class="bar black" style="width: 25%;"></div>
    <div class="bar"       style="width: 5%;"></div>
    <div class="bar black" style="width: 40%;"></div>
    <div class="bar"       style="width: 15%;"></div>
</div>

What the efficient equivalent in Android?

bar

Upvotes: 1

Views: 1023

Answers (1)

Jave
Jave

Reputation: 31846

Use a horizontal LinearLayout.
You can then create the views inside it and decide their relative size with the layout_weight attribute.

Here is an example that gives your desired result:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:weightSum="100" >
    <View
        android:layout_width="0px"
        android:layout_height="match_parent"
        android:layout_weight="15"
        android:background="#FFFF" />
    <View
        android:layout_width="0px"
        android:layout_height="match_parent"
        android:layout_weight="25"
        android:background="#F000" />

    <View
        android:layout_width="0px"
        android:layout_height="match_parent"
        android:layout_weight="5"
        android:background="#FFFF" />

    <View
        android:layout_width="0px"
        android:layout_height="match_parent"
        android:layout_weight="40"
        android:background="#F000" />
    <View
        android:layout_width="0px"
        android:layout_height="match_parent"
        android:layout_weight="15"
        android:background="#FFFF" />
</LinearLayout>

Note that the weights are floats. I just put whole numbers and a sum of 100 to correspond to your percent-based layout.

Upvotes: 5

Related Questions