CODEWITHSUNDEEP
androidandroid-linearlayoutimagebuttonandroid-imagebutton
Hilikus
Hilikus

Reputation: 10331

How to evenly space round ImageButtons with LinearLayout

I have found how to create round ImageButtons using a Shape background and I have found how to evenly space buttons in a LinearLayout by setting the width to 0dp and the weight to 1. But I can't combine both, so either the round buttons are not evenly spaced
round but not evenly spaced

or they are evenly spaced but not round
enter image description here

It seems the extra space is going to the inside button instead of to the margins. How can I make a LinearLayout allocate the new empty space to margins and not to the view?

This is the layout that gives me the second image above

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

    <ImageButton
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/ic_add_black_24dp"
            android:background="@drawable/rounded"/>

    <ImageButton
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/ic_add_black_24dp"
            android:background="@drawable/rounded"/>

    <ImageButton
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/ic_add_black_24dp"
            android:background="@drawable/rounded"/>
</LinearLayout>

And this is the background

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
  <solid android:color="#33DDFF" />
  <corners android:radius="4dp"/>
</shape>

Upvotes: 2

Views: 2178

Answers (2)

Android Geek
Android Geek

Reputation: 9225

Try this:

Step 1: Set the android:layout_width="0dp" Step 2: Set the android:layout_weight equally among all button with sum equal to 1.0

<LinearLayout android:id="@+id/linearLayout3"
android:layout_height="wrap_content" 
android:orientation="horizontal"
android:layout_width="match_parent">

<ImageButton 
  android:layout_height="wrap_content"
  android:id="@+id/clear"
  android:layout_width="0dp"
  android:layout_weight=".5" />

 <ImageButton 
 android:layout_height="wrap_content"
 android:id="@+id/submit" 
 android:layout_width="0dp"
 android:layout_weight=".5" />
 </LinearLayout>

Upvotes: 3

Hilikus
Hilikus

Reputation: 10331

A solution I found was to use empty Spaces around and in between the buttons and have those take the extra space

    <Space
            android:layout_width="0dp"
            android:layout_height="1dp"
            android:layout_weight="1" >
    </Space>

I had to remove the weight from the actual buttons and set the width to wrap_content

 <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/ic_add_black_24dp"

            android:background="@drawable/rounded"
            android:contentDescription="@string/speak_button_desc"/>

Upvotes: 4

Related Questions