CODEWITHSUNDEEP
androidandroid-layouttablelayoutandroid-buttonandroid-tablelayout
arcaderob
arcaderob

Reputation: 491

need buttons to spread out dynamically according to screen width

I am working on an app that originally had it's button layout configured statically. What happens now is that on wider screens (SIII, Note, Tablets etc.) the table layout remains the same size on all of them and doesn't "spead out" dynamically. How can this code be adjusted to accomplish this?

<TableLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="0dp"
    android:gravity="center_vertical"
    android:orientation="vertical" >

    <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:gravity="center_horizontal" >

        <RelativeLayout
            android:id="@+id/stoolRelative"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="15px"
            android:gravity="center_horizontal" >

            <ImageButton
                android:id="@+id/stoolmenu"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#00000000"
                android:src="@drawable/menustool" >
            </ImageButton>

            <TextView
                android:id="@+id/stoolText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/stoolmenu"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="5px"
                android:gravity="center_horizontal"
                android:text="@string/stoolmenu"
                android:textSize="11dp"
                android:textStyle="bold" >

            </TextView>
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/foodRelative"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="15px"
            android:gravity="center_horizontal" >

            <ImageButton
                android:id="@+id/foodmenu"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#00000000"
                android:src="@drawable/menufood" >
            </ImageButton>

            <TextView
                android:id="@+id/foodText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/foodmenu"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="5px"
                android:gravity="center_horizontal"
                android:text="@string/foodmenu"
                android:textSize="11dp"
                android:textStyle="bold" >

            </TextView>
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/PainRelative"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="15px" >

            <ImageButton
                android:id="@+id/painmenu"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#00000000"
                android:src="@drawable/menupain" >
            </ImageButton>

            <TextView
                android:id="@+id/painText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/painmenu"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="5px"
                android:gravity="center_horizontal"
                android:text="@string/painmenu"
                android:textSize="11dp"
                android:textStyle="bold" >

            </TextView>
        </RelativeLayout>
    </TableRow>

    <TableRow
        android:id="@+id/tableRow2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="15px"
        android:gravity="center_horizontal" >

        <RelativeLayout
            android:id="@+id/moodRelative"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="15px" >

            <ImageButton
                android:id="@+id/moodmenu"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#00000000"
                android:src="@drawable/menumood" >
            </ImageButton>

            <TextView
                android:id="@+id/moodText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/moodmenu"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="5px"
                android:gravity="center_horizontal"
                android:text="@string/moodmenu"
                android:textSize="11dp"
                android:textStyle="bold" >

            </TextView>
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/medsTakeRelative"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="15px"
            android:gravity="center_horizontal" >

            <ImageButton
                android:id="@+id/medstakemenu"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#00000000"
                android:src="@drawable/menumeds" >
            </ImageButton>

            <TextView
                android:id="@+id/medsTakeText"
                android:layout_width="70px"
                android:layout_height="wrap_content"
                android:layout_alignLeft="@+id/medstakemenu"
                android:layout_alignRight="@+id/medstakemenu"
                android:layout_below="@+id/medstakemenu"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="5px"
                android:gravity="center_horizontal"
                android:lines="2"
                android:maxLines="2"
                android:minLines="2"
                android:singleLine="false"
                android:text="@string/medstakenmenu"
                android:textSize="11dp"
                android:textStyle="bold" >

            </TextView>
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/otherIssuesRelative"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="15px" >

            <ImageButton
                android:id="@+id/othermenu"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#00000000"
                android:src="@drawable/menuother" >
            </ImageButton>

            <TextView
                android:id="@+id/otherIssuesText"
                android:layout_width="100px"
                android:layout_height="wrap_content"
                android:layout_below="@+id/othermenu"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="5px"
                android:gravity="center_horizontal"
                android:lines="2"
                android:maxLines="2"
                android:minLines="2"
                android:singleLine="false"
                android:text="@string/otherissuesmenu"
                android:textSize="11dp"
                android:textStyle="bold" >

            </TextView>
        </RelativeLayout>
    </TableRow>

    <TableRow
        android:id="@+id/tableRow3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="15px"
        android:gravity="center_horizontal" >

        <RelativeLayout
            android:id="@+id/historyRelative"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="15px" >

            <ImageButton
                android:id="@+id/historymenu"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#00000000"
                android:src="@drawable/menuhistory" >
            </ImageButton>

            <TextView
                android:id="@+id/historyText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/historymenu"
                android:layout_centerHorizontal="true"
                android:gravity="center_horizontal"
                android:layout_marginTop="5px"
                android:text="@string/historymenu"
                android:textSize="11dp"
                android:textStyle="bold" >

            </TextView>
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/historyRelative"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="15px"
            android:gravity="center_horizontal" >

            <ImageButton
                android:id="@+id/academymenu"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#00000000"
                android:src="@drawable/menuacademy" >
            </ImageButton>

            <TextView
                android:id="@+id/academyText"
                android:layout_width="120px"
                android:layout_height="wrap_content"
                android:layout_below="@+id/academymenu"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="5px"
                android:gravity="center_horizontal"
                android:lines="2"
                android:maxLines="2"
                android:minLines="2"
                android:singleLine="false"
                android:text="@string/ibdacademymenu"
                android:textSize="11dp"
                android:textStyle="bold" >

            </TextView>
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/myPassPortRelative"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="15px"
            android:gravity="center_horizontal" >

            <ImageButton
                android:id="@+id/mypassportmenu"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#00000000"
                android:src="@drawable/menupassport" >
            </ImageButton>

            <TextView
                android:id="@+id/myPassportTextUp"
                android:layout_width="80dp"
                android:layout_height="wrap_content"
                android:layout_below="@+id/mypassportmenu"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="5px"
                android:gravity="center_horizontal"
                android:lines="2"
                android:maxLines="2"
                android:minLines="2"
                android:singleLine="false"
                android:text="@string/myibdpassportmenu"
                android:textSize="11dp"
                android:textStyle="bold" >

            </TextView>
            <!--
        <TextView 
        android:layout_below="@+id/myPassportTextUp"
        android:text="Passport" android:layout_height="wrap_content" 
        android:layout_width="wrap_content" android:id="@+id/myPassportTextDown" 
        ></TextView>
            -->
        </RelativeLayout>
    </TableRow>
</TableLayout>

EDIT: Here is a screenshot of the current layout

http://imgur.com/fHEFn1H

As the screen gets wider, the table remains this exact size and the margin on either side increases. ideas?

Upvotes: 1

Views: 425

Answers (2)

Michael Butscher
Michael Butscher

Reputation: 10959

For each TableRow change/add

android:layout_weight="1"
android:gravity="center_vertical"

For each RelativeLayout change/add

android:layout_weight="1"

Upvotes: 2

Vikram
Vikram

Reputation: 51571

You need to dynamically(programmatically) adjust the positioning of your layout elements. For example, if we have 2 TextViews inside a LinearLayout, we can add a OnGlobalLayoutListener to the LinearLayout:

myLinearLayout.getViewTreeObserver().addOnGlobalLayoutListener(ViewTreeObserver.OnGlobalLayoutListener)

Inside this listener, we can access the width and the height of the layout elements. So, if we need to position our TextViews (spread them equally across the screen-width), we'll do the following:

int width = myLinearLayout.getWidth();
int lMarginTextView = (width - myTextView1.getWidth() - myTextView2.getWidth()) / 3;
LinearLayout.LayoutParams paramsTV = new LinearLayout.LayoutParams(     
LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
paramsTV.leftMargin = lMarginTextView;

myTextView1.setLayoutParams(paramsTV);
myTextView2.setLayoutParams(paramsTV);

Upvotes: 0

Related Questions