CODEWITHSUNDEEP
androidxmleclipseandroid-linearlayout
Philipp
Philipp

Reputation: 494

Android Grid with LinearLayout

I'm trying to build a grid with some linear layouts. Unfortunately the buttons inside the "grid" fill all the space and the "grid" isn't always the same size.

<ScrollView 
 xmlns:tools="http://schemas.android.com/tools"
 xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_height="wrap_content"
  android:id="@+id/scrollView1"
  android:layout_width="fill_parent"
  android:layout_weight="1"> 
<LinearLayout
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:gravity="center_horizontal"
  android:orientation="vertical" >

  <ImageView
  android:id="@+id/imageView1"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:src="@drawable/banner" 
  android:background="#80000000"
  android:contentDescription="@string/about"/>

  <LinearLayout
  android:layout_width="fill_parent"
  android:layout_height="wrap_content">
   <TextView
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:layout_weight="1"
   android:layout_marginTop="15dp"
   android:gravity="center_horizontal"
   android:text="@string/modi1"
   tools:context=".MenuActivity" />
   <TextView
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:layout_weight="1"
   android:layout_marginTop="15dp"
   android:gravity="center_horizontal"
   android:text="@string/modi2"
   tools:context=".MenuActivity" />
   </LinearLayout>

   <LinearLayout     
   android:layout_width="fill_parent"
   android:layout_height="wrap_content">
    <Button
    android:layout_marginTop="10dp"
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:gravity="center"
    android:text="@string/szen_diagramm" />
    <Button
    android:layout_marginTop="10dp"
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:gravity="center"          
    android:text="@string/szen_countdown" />
   </LinearLayout>
    <Button
    android:layout_marginTop="10dp"
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:gravity="center"
    android:text="@string/szen_diagramm" />
    <Button
    android:layout_marginTop="10dp"
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:gravity="center"          
    android:text="@string/szen_countdown" />
   </LinearLayout>
    <Button
    android:layout_marginTop="10dp"
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:gravity="center"
    android:text="@string/szen_diagramm" />
    <Button
    android:layout_marginTop="10dp"
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:gravity="center"          
    android:text="@string/szen_countdown" />
   </LinearLayout>
</LinearLayout>
</ScrollView>

It should look something like this with the buttons centered and at the size they need with the text inside.

Could anyone help me?

Upvotes: 0

Views: 7823

Answers (3)

rosco
rosco

Reputation: 939

I had a similar problem, solved inserting a LinearLayout in TableRow. Have a look to the posted xml code and verify if it fits your requirements. 

<TableRow
    android:layout_gravity="fill_horizontal"
    android:paddingTop="@dimen/table_row_padding_top" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="2"
            android:gravity="center_horizontal"
            android:orientation="vertical" >

            <ImageButton
                android:contentDescription="@string/str_phone"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:background="@drawable/icon_phone" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal"
                android:text="@string/str_phone"
                android:textColor="#000000"
                android:textSize="12sp" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="2"
            android:gravity="center_horizontal"
            android:orientation="vertical" >

            <ImageButton
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:background="@drawable/icon_car"
                android:contentDescription="@string/str_car" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal"
                android:text="@string/str_car"
                android:textColor="#000000"
                android:textSize="12sp" />
        </LinearLayout>

</TableRow>

Upvotes: 0

Beenal
Beenal

Reputation: 317

Try this.

<ScrollView xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/scrollView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >

<TableLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <TableRow>

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="#80000000"
            android:contentDescription="ImageView"
            android:layout_span="2"
            android:src="@drawable/banner" />
    </TableRow>

    <TableRow>

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dp"
            android:layout_weight="2"
            android:gravity="center_horizontal"
            android:text="modi1" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dp"
            android:layout_weight="2"
            android:gravity="center_horizontal"
            android:text="modi2" />
    </TableRow>

    <TableRow>

        <Button
            android:id="@+id/button1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:layout_weight="2"
            android:gravity="center"
            android:text="szen_diagramm" />

        <Button
            android:id="@+id/button2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:layout_weight="2"
            android:gravity="center"
            android:text="szen_countdown" />
    </TableRow>

    <TableRow>

        <Button
            android:id="@+id/button1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:layout_weight="2"
            android:gravity="center"
            android:text="szen_diagramm" />

        <Button
            android:id="@+id/button2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:layout_weight="2"
            android:gravity="center"
            android:text="szen_countdown" />
    </TableRow>

    <TableRow>

        <Button
            android:id="@+id/button1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:layout_weight="2"
            android:gravity="center"
            android:text="szen_diagramm" />

        <Button
            android:id="@+id/button2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:layout_weight="2"
            android:gravity="center"
            android:text="szen_countdown" />
    </TableRow>
</TableLayout>

enter image description here this is how it shows to me

Upvotes: 6

Laucia
Laucia

Reputation: 222

Remove the android:layout_weight="1" to avoid the button filling all the space.

You should try using a TableLayout and several TableRow to replace your LinearLayouts containing the buttons, thus creating a well formated grid

Upvotes: 1

Related Questions