CODEWITHSUNDEEP
androidandroid-layoutandroid-linearlayout
asenovm
asenovm

Reputation: 6517

Positioning views so that each one of them takes the same space

I'm trying to a position a couple of views(let's say N) in a line, so that each one of them will take 1/N of the width of the screen. I'm aware how to achieve this using LinearLayout(layoutWeight), but the thing is that I need to have another layouts that will appear below certain views that are in this line. The thing is that since all these views are wrapped into a LinearLayout I can't place my additional layouts inside this layout (for obvious reasons), and I can't refer to a particular view from the LinearLayout and place my views below it. Some visual aid in order to help explaining myself:

enter image description here

So I want to display the grey box exactly below the third box above. Currently I achieve this by getting the screen width and dividing it into N equal parts and setting the appropriate margin to this view. However, I don't like this very much. Is there a better way to achieve it?

Upvotes: 0

Views: 136

Answers (2)

Renard
Renard

Reputation: 6929

so you want to have one View or ViewGroup positioned so that its center is directly below the center of the third box?

Its possible but not very elegant:

The idea is to use a table layout and android:layout_span to join 3 cells in the second row and use a centered view inside that table span.

Example table layout:

<TableRow>

    <TextView
        android:layout_column="0"
        android:gravity="center"
        android:padding="3dip"
        android:text="0" />

    <TextView
        android:layout_column="1"
        android:gravity="center"
        android:padding="3dip"
        android:text="1" />

    <TextView
        android:layout_column="2"
        android:gravity="center"
        android:padding="3dip"
        android:text="2" />

    <TextView
        android:layout_column="3"
        android:gravity="center"
        android:padding="3dip"
        android:text="3" />

    <TextView
        android:layout_column="4"
        android:gravity="center"
        android:padding="3dip"
        android:text="4" />
</TableRow>

<TableRow>

    <TextView
        android:layout_column="0"
        android:gravity="center"
        android:padding="3dip"
        android:text="0" />

    <RelativeLayout
        android:layout_span="3"
        android:padding="3dip" >

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:gravity="center"
            android:text="Button 1,2,3" />
    </RelativeLayout>

    <TextView
        android:layout_column="4"
        android:gravity="center"
        android:padding="3dip"
        android:text="4" />
</TableRow>

Upvotes: 1

sdfwer
sdfwer

Reputation: 1042

So this is my idea since xml on android is really hard.

Inside the linear layout create 2 parts inside of it 1 linear layout and the other a relative layout use LayoutWeight to separate both of them using the original linear layout.

Upvotes: 1

Related Questions