CODEWITHSUNDEEP
androidxmlandroid-layoutandroid-activityandroid-fragments
wbk727
wbk727

Reputation: 8408

Multiple layouts on top of each other

I'm trying to draw a diagram like the one below. However the main problem I am currently experiencing is trying to place the numbers and red squares on top. What would be the most efficient way of achieving this in XML only? Below is my XML where I have successfully created everything except for the numbers and red squares. In addition the image below the code is what mine looks like at the moment.

diagram

my XML

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    <View
        android:id="@+id/colored_bar"
        android:layout_width="10dp"
        android:layout_height="50dp"
        android:background="@color/central" />
    <View
        android:id="@+id/c1"
        android:layout_width="10dp"
        android:layout_height="50dp"
        android:background="@color/grey"
        android:layout_weight=".25" />
    <View
        android:id="@+id/car_separator0"
        android:layout_width="2dp"
        android:layout_height="50dp"
        android:background="@color/black" />
    <View
        android:id="@+id/c2"
        android:layout_width="10dp"
        android:layout_height="50dp"
        android:background="@color/grey"
        android:layout_weight=".25" />
    <View
        android:id="@+id/car_separator1"
        android:layout_width="2dp"
        android:layout_height="50dp"
        android:background="@color/black" />
    <View
        android:id="@+id/c3"
        android:layout_width="10dp"
        android:layout_height="50dp"
        android:background="@color/grey"
        android:layout_weight=".25" />
    <View
        android:id="@+id/car_separator2"
        android:layout_width="2dp"
        android:layout_height="50dp"
        android:background="@color/black" />
    <View
        android:id="@+id/c4"
        android:layout_width="10dp"
        android:layout_height="50dp"
        android:background="@color/grey"
        android:layout_weight=".25" />
    <View
        android:id="@+id/end_bar"
        android:layout_width="10dp"
        android:layout_height="50dp"
        android:background="@color/central" />
</LinearLayout>

my diagram

Upvotes: 0

Views: 245

Answers (1)

Marija Milosevic
Marija Milosevic

Reputation: 516

You can make a number of layouts instead of just Views, and insert numbers there. Something like this:

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    <RelativeLayout
        android:id="@+id/colored_bar"
        android:layout_width="10dp"
        android:layout_height="50dp"
        android:background="@color/central" />
        <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="number1"
           android:centerInParent="true"/>
    </RelativeLayout>
    <LinearLayout>
    <LinearLayout
        android:id="@+id/colored_bar"
        android:layout_width="10dp"
        android:layout_height="50dp"
        android:background="@color/central"
        android:alignParentTop="true" />
        <ImageView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:src="R.drawable.red_square"
           />
  <LinearLayout
        android:id="@+id/colored_bar"
        android:layout_width="10dp"
        android:layout_height="50dp"
        android:background="@color/central"
        android:alignParentBottom="true" />
        <ImageView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:src="R.drawable.red_square"
           />
    </LinearLayout>

</RelativeLayout>

I have put just one element in three layouts, and you should add more according to your image.. Hope this helps

Upvotes: 1

Related Questions