Equally spaced fixed size buttons Android_问答_开发者

I have this xml document. I want to have these 93 by 93px button images equally spaced. At the moment the weight setting is making them stretch and hug each other so there are no spaces. But if I set weight to 0 they do the same hugging each other but fill up about half of the screen.

This is for landscape orientation by the way.

    <LinearLayout android:id="@+id/LinearLayout" android:layout_height="wrap_content"
  android:layout_width="fill_parent">
   <Button 
    android:background="@drawable/a" 
    android:layout_height="93px" 
    android:id="@+id/a"
    android:layout_width="93px" 
    android:layout_weight="1" 
    android:layout_marginLeft="20dip" 
    android:layout_marginTop="30dip"/>
  <Button 
    android:background="@drawable/b" 
    android:layout_height="93px" 
    android:id="@+id/b"
    android:layout_width="93px" 
    android:layout_weight="1"  
    android:layout_marginTop="30dip"/>

  <Button 
    android:background="@drawable/c" 
    android:layout_height="93px" 
    android:id="@+id/c" 
    android:layout_weight="1" 
    android:layout_width="93px"  
    android:layout_marginTop="30dip"/>
  <Button 
    android:background="@drawable/d" 
    android:layout_height="93px" 
    android:id="@+id/d"
    android开发者_StackOverflow中文版:layout_width="93px" 
    android:layout_weight="1" 
    android:layout_marginRight="20dip" 
    android:layout_marginTop="30dip" />
    </LinearLayout>

The solution is simple.

You have to keep each button into individual linear layout and keep weight=1 for each Linear Layout. Now buttons will be equally spaced, no matter whatever the resolution or orientation is.

EX:-

      <LinearLayout android:id="@+id/LinearLayout" android:layout_height="wrap_content"
      android:layout_width="fill_parent">
      <LinearLayout android:id=@+id/Button1Parent" android:layout_height="wrap_content" android_width="wrap_content" android:weight="1" gravity="center">  
       <Button 
        android:background="@drawable/a" 
        android:layout_height="93px" 
        android:id="@+id/takequiz"
        android:layout_width="93px" 
        android:layout_weight="1" 
        android:layout_marginLeft="20dip" 
        android:layout_marginTop="30dip"/>
</LinearLayout>
<LinearLayout android:id=@+id/Button2Parent" android:layout_height="wrap_content" android_width="wrap_content" android:weight="1" gravity="center">
      <Button 
        android:background="@drawable/b" 
        android:layout_height="93px" 
        android:id="@+id/random"
        android:layout_width="93px" 
        android:layout_weight="1"  
        android:layout_marginTop="30dip"/>
</LinearLayout>
<LinearLayout android:id=@+id/Button3Parent" android:layout_height="wrap_content" android_width="wrap_content" android:weight="1" gravity="center">

      <Button 
        android:background="@drawable/c" 
        android:layout_height="93px" 
        android:id="@+id/search" 
        android:layout_weight="1" 
        android:layout_width="93px"  
        android:layout_marginTop="30dip"/>
</LinearLayout>
<LinearLayout android:id=@+id/Button4Parent" android:layout_height="wrap_content" android_width="wrap_content" android:weight="1" gravity="center">

      <Button 
        android:background="@drawable/d" 
        android:layout_height="93px" 
        android:id="@+id/browse"
        android:layout_width="93px" 
        android:layout_weight="1" 
        android:layout_marginRight="20dip" 
        android:layout_marginTop="30dip" />
        </LinearLayout>
</LinearLayout>

Try this :

<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:background="#000000"
        android:id="@+id/linearLayout01"
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:orientation="horizontal"
    >
        <Button
            android:layout_width="0dp"
            android:id="@+id/btn1"
            android:layout_height="93px"
            android:layout_weight="1"
            android:layout_marginRight="5dp"
        ></Button>
        <Button
            android:layout_width="0dp"
            android:id="@+id/btn2"
            android:layout_height="93px"
            android:layout_weight="1"
            android:layout_marginRight="5dp"
        ></Button>
        <Button
            android:layout_width="0dp"
            android:id="@+id/btn3"
            android:layout_height="93px"
            android:layout_weight="1"
            android:layout_marginRight="5dp"
        ></Button>
        <Button
            android:layout_width="0dp"
            android:id="@+id/btn4"
            android:layout_height="93px"
            android:layout_weight="1"
        ></Button>
    </LinearLayout>

LinearLayout does not have an intrinsic notion of "equal spacing". You might consider using a layout designed for a "dashboard", such as https://gist.github.com/882650.

I tried updating your current LinearLayout to the following and had the square evenly spaced buttons - but they do not fit on my emulator's screen. So in my case it is the margins that you had set on the left and right that were squishing them in.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/LinearLayout" 
   android:layout_height ="wrap_content"
   android:layout_width  ="fill_parent" 
   android:orientation   ="horizontal"
   android:layout_gravity="center_horizontal">

   <Button  
    android:id="@+id/takequiz"  
    android:text="take quiz"
    android:layout_height="93px"
    android:layout_width ="93px" 
    android:layout_marginTop ="30dip"/>

  <Button 
    android:id="@+id/random" 
    android:text="random"
    android:layout_height="93px" 
    android:layout_width ="93px" 
    android:layout_marginTop="30dip"/>

  <Button 
    android:id="@+id/search" 
    android:text="search"
    android:layout_height="93px"
    android:layout_width="93px" 
    android:layout_marginTop="30dip"/>

  <Button
    android:id="@+id/browse"
    android:text="browse"
    android:layout_height="93px" 
    android:layout_width="93px" 
    android:layout_marginTop="30dip" />

 </LinearLayout>

Had you considered 2 rows? I have done a similar thing for a sound board type of app using TableLayout. Although these days I tend to use RelativeLayout more. Here is the table code.

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/LinearLayout" 
   android:layout_height ="fill_parent"
   android:layout_width  ="fill_parent" >
   <TableRow
      android:layout_height ="wrap_content"
      android:layout_width  ="fill_parent" 
      android:gravity       ="center">    
       <Button  
        android:id  ="@+id/takequiz"  
        android:text="take quiz"
        android:layout_height="93px"
        android:layout_width ="93px" />    
      <Button 
        android:id  ="@+id/random" 
        android:text="random"
        android:layout_height="93px" 
        android:layout_width ="93px" />
    </TableRow> 
    <TableRow
      android:layout_height ="wrap_content"
      android:layout_width  ="fill_parent" 
      android:gravity       ="center">    
        <Button 
          android:id  ="@+id/search" 
          android:text="search"
          android:layout_height="93px"
          android:layout_width ="93px" />       
        <Button
          android:id  ="@+id/browse"
          android:text="browse"
          android:layout_height="93px" 
          android:layout_width ="93px"  />
    </TableRow>
 </TableLayout>

Just set a margin left or margin right to any 1 of the buttons