简体   繁体   中英

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
圆形但间隔不均匀

or they are evenly spaced but not round
在此处输入图片说明

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>

A solution I found was to use empty Space s 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"/>

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>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM