ImageButton: Force square icon (height = WRAP_CONT

Question

In my horizontal LinearLayout I have a TextEdit and an ImageButton. The ImageButton is as high as the TextEdit.

I'd like that the ImageButton is exactly as wide as it's long.

At the moment it looks like the width of the ImageButton is like when there is no scaling (ImageButton width [px] = unscaled drawable width [px]):

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

    <EditText
        android:id="@+id/txtName"
        android:layout_width="1dp"
        android:layout_height="wrap_content"
        android:layout_weight="1" />

    <ImageButton
        android:id="@+id/btSet"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:scaleType="fitEnd"
        android:src="@drawable/pin2" />

</LinearLayout>

How it should look like:

Answer 1

try adding

adjustViewBounds="true"

to the ImageButton, that should clip the excess width

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

    <EditText
        android:id="@+id/txtName"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1" />

    <ImageButton
        android:id="@+id/btSet"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:src="@drawable/pin" />
</LinearLayout>

Answer 2

I might be a bit late to the party. However there's an easy way to achieve this behavior by overriding the onMeasure(). Here's how it'd look like :

public class MySquareImageButton extends ImageButton {
    public MySquareImageButton(Context context) {
        super(context);
    }

    public MySquareImageButton(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public MySquareImageButton(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        //(1)if you want the height to match the width
        super.onMeasure(widthMeasureSpec, widthMeasureSpec);
        //(2)if you want the width to match the height
        //super.onMeasure(heightMeasureSpec, heightMeasureSpec);
    }
}

And then you'd simply replace your XML's ImageButton with this custom one :

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

    <EditText
        android:id="@+id/txtName"
        android:layout_width="1dp"
        android:layout_height="wrap_content"
        android:layout_weight="1" />

    <com.whatever_your_package.MySquareImageButton
        android:id="@+id/btSet"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:scaleType="fitEnd"
        android:src="@drawable/pin2" />

</LinearLayout>

You'd simply put wrap_content to width or height, depending on which one you want to dictate the size of your button. In the case you want your button to wrap its height to the image, and that the width simply matches the height, you'd use

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

and use

        //(2)if you want the width to match the height
        //super.onMeasure(heightMeasureSpec, heightMeasureSpec);

Answer 3

Just add the following line to your ImageButton and the extra background will fade away:

android:layout_gravity="center|clip_horizontal"

hope this works

Answer 4

I tried myself,it works

Simply do the Following...

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

    <EditText
        android:id="@+id/editText1"
        android:layout_width="0dp"
        android:layout_weight="5"
        android:layout_height="wrap_content"
        android:inputType="text"/>

    <ImageButton
        android:id="@+id/imageButton"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="match_parent" />

</LinearLayout>

Use Layout Weight ratio 5:1 inside a LinearLayout for EditText and ImageButton

Answer 5

Use

android:scaleType="fitCenter"

or android:scaleType="centerInside"

in the ImageButton in xml File.

Answer 6

<LinearLayout
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:orientation="horizontal"
 android:weightSum="1.0" >

<EditText
   android:id="@+id/txtName"
   android:layout_weight="0.75" // this work like percentage adjust as u want 70 or 75
   android:layout_height="wrap_content"
   android:layout_width="0dp" 
   android:inputType="text"
   android:singleLine="true"/>

<ImageButton
   android:id="@+id/btSet"
   android:layout_weight="0.25" // this work like percentage adjust as u want 25 or 30
   android:layout_height="wrap_content"
   android:layout_width="0dp"
   android:scaleType="fitEnd"
   android:src="@drawable/pin2" />

</LinearLayout>