Nima
Nima

Reputation: 41

Android : buttons go off the edge of the screen

I have a table layout inside a linear layout after inflating 3 buttons in the table row the last button go off screen I mean the 3 buttons don't fit the screen width what should i do?

here is the code

<TableLayout
    android:id="@+id/buttonTableLayout"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:stretchColumns="0,1,2"
    android:layout_weight="1">

    <TableRow
        android:id="@+id/tableRow0"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
    </TableRow>

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

    <TableRow
        android:id="@+id/tableRow2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
    </TableRow>

</TableLayout>

Upvotes: 0

Views: 2694

Answers (1)

rubengees
rubengees

Reputation: 1850

The TableRow doesn't check if it's content fit the Screen Size. I guess your Buttons take all of the Space and therefore the last Buttons is outside of the Screen.

I can think of 2 Solutions for this issue:

  • Use a LinearLayout with weights for each Button:

    <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
    
            <Button
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_margin="8dp"
                android:layout_weight="1.0" />
    
            <Button
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_margin="8dp"
                android:layout_weight="1.0" />
    
    </LinearLayout>
    

    You can do this programmatically too of course. More about weights can be found here: https://developer.android.com/guide/topics/ui/layout/linear.html

  • Use a Flow-Layout. It automatically checks if your Views fit in the current line and places them in the next if there is not enough space. A good Open Source Library I use myself is this one: https://github.com/ApmeM/android-flowlayout

Upvotes: 1

Related Questions