CODEWITHSUNDEEP
androidxmllayout
jbenowitz
jbenowitz

Reputation: 1815

Children in Linear Layout with equal padding

I am currently designing a ButtonBar with 5 buttons (they will all be ImageButtons, but for now, only 3 of them are). This is my first android project so I'm learning as I go along. I'm trying to weight each button equally, without scaling them (have equal padding rather than equal width). This is my code so far:

<LinearLayout
 android:id="@+id/back"
 android:orientation="horizontal"
 android:layout_height="50dip"
 android:layout_width="fill_parent" 
 android:layout_alignParentBottom="true" 
 android:background="#000000"
 style="@android:style/ButtonBar"
 android:weightSum="5"
 >

  <ImageButton
    android:id="@+id/info_button"
    android:padding="20dp"
    android:background="@drawable/info"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:layout_weight="1"
    />
  <Button 
    android:id="@+id/wishlist_button" 
    android:text="@string/wish_label"
    android:layout_height="wrap_content" 
    android:layout_width="wrap_content"
    android:layout_weight="1"
    android:padding="20dp"
    android:textSize="15dip"
    android:textColor="#b7b7b7"></Button>
  <Button 
    android:id="@+id/buy_button"
    android:text="@string/buy_label"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:layout_weight="1"
    android:padding="20dp"
    android:textSize="15dip"
    android:textColor="#b7b7b7"/>
  <ImageButton
    android:id="@+id/dislike_button"
    android:padding="20dp"
    android:background="@drawable/dislike_button"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:layout_weight="1"
  />
  <ImageButton
    android:id="@+id/like_button"
    android:padding="20dp"
    android:background="@drawable/like_button"
    android:layout_height="wrap_content" 
    android:layout_width="wrap_content"
    android:layout_weight="1"
   />

This is what it looks like now: stretched weighted: https://i.sstatic.net/kFsag.png

This is what I want it to look like (closely): non-stretched equally padded: https://i.sstatic.net/cUdQi.png

Thank you for helping. I've been searching for the answer for a while and have tried so much already.

Upvotes: 5

Views: 5374

Answers (3)

Rico Yao
Rico Yao

Reputation: 991

You could add a spacer element in between each of the images/buttons and assign the layout_weight to the spacer elements instead of the images/buttons. So it would look something like this:

<LinearLayout
 android:id="@+id/back"
 android:orientation="horizontal"
 android:layout_height="50dip"
 android:layout_width="fill_parent" 
 android:layout_alignParentBottom="true" 
 android:background="#000000"
 style="@android:style/ButtonBar"
 >

  <ImageButton
    android:id="@+id/info_button"
    android:padding="20dp"
    android:background="@drawable/info"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    />
      <LinearLayout
        android:layout_height="wrap_content"            
        android:layout_weight="1" />
  />
  <Button 
    android:id="@+id/wishlist_button" 
    android:text="@string/wish_label"
    android:layout_height="wrap_content" 
    android:layout_width="wrap_content"
    android:padding="20dp"
    android:textSize="15dip"
    android:textColor="#b7b7b7"></Button>
      <LinearLayout
        android:layout_height="wrap_content"            
        android:layout_weight="1" />
  <Button 
    android:id="@+id/buy_button"
    android:text="@string/buy_label"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:padding="20dp"
    android:textSize="15dip"
    android:textColor="#b7b7b7"/>
      <LinearLayout
        android:layout_height="wrap_content"            
        android:layout_weight="1" />
  <ImageButton
    android:id="@+id/dislike_button"
    android:padding="20dp"
    android:background="@drawable/dislike_button"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
  />
      <LinearLayout
        android:layout_height="wrap_content"            
        android:layout_weight="1" />
  <ImageButton
    android:id="@+id/like_button"
    android:padding="20dp"
    android:background="@drawable/like_button"
    android:layout_height="wrap_content" 
    android:layout_width="wrap_content"
   />
</LinearLayout>

This may not be the most elegant solution since it adds several views to your layout, but it's worked for me in the past.

Upvotes: 1

BrainCrash
BrainCrash

Reputation: 13182

Here it is:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/back"
    android:orientation="horizontal"
    android:layout_height="50dip"
    android:layout_width="fill_parent" 
    android:layout_alignParentBottom="true" 
    android:background="#000000"
    style="@android:style/ButtonBar"
    android:gravity="center"
    >
   <ImageButton
    android:id="@+id/info_button"
    android:background="@null"
    android:src="@drawable/info"
    android:layout_height="wrap_content"
    android:layout_width="fill_parent"
    android:layout_weight="1"
    />
  <Button 
    android:id="@+id/wishlist_button" 
    android:text="@string/wish_label"
    android:background="@null"
    android:layout_height="wrap_content" 
    android:layout_width="fill_parent"
    android:layout_weight="1"
    android:textSize="15dip"
    android:textColor="#b7b7b7"></Button>
  <Button 
    android:id="@+id/buy_button"
    android:text="@string/buy_label"
    android:background="@null"
    android:layout_height="wrap_content"
    android:layout_width="fill_parent"
    android:layout_weight="1"
    android:textSize="15dip"
    android:textColor="#b7b7b7"/>
  <ImageButton
    android:id="@+id/dislike_button"
    android:background="@null"
    android:src="@drawable/dislike_button"
    android:layout_height="wrap_content"
    android:layout_width="fill_parent"
    android:layout_weight="1"
  />
  <ImageButton
    android:id="@+id/like_button"
    android:background="@null"
    android:src="@drawable/like_button"
    android:layout_height="wrap_content" 
    android:layout_width="fill_parent"
    android:layout_weight="1"
   />
</LinearLayout>

I don't know how style="@android:style/ButtonBar" is set, so if it doesn't show properly try remove it.

Upvotes: 6

Snicolas
Snicolas

Reputation: 38168

You should consider using only image button with equal size images with equal weight inside your LinearLayout.

Regards, Stéphane

Upvotes: 0

Related Questions