Make Image Button Size a square always. Android

Question

I have a Image Button. I can replace this with a custom view if required. I need to specify the height of the Image Button as Fill_parent. So that the image stretches to the available height in the screen. When doing this i do not want to loose the width. I want it to be a minimum as the height and if greater than height, then it is not a problem. I do not want it this and long. While I do this I also want to maintain the aspect ratio. Please let me know the parameters I need to adjust to get this kind of view. Any kind of help in this regards is appreciated. Thank you for your help and time.

Edit: Below is the complete xml in which I am trying to have a horizontal scroll view with height as fill_parent and am trying to fill it with images which fits to its height and expands or contracts the width as per the aspect ratio. Even if the image is small, i want to scale up so that the height always occupies the Horizontal scroll view.

<LinearLayout  xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" android:layout_height="fill_parent"
    android:orientation="vertical">

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent" android:layout_height="fill_parent"
        android:orientation="vertical" android:layout_weight="3"
        android:background="#666666">
    </LinearLayout>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent" android:layout_height="fill_parent"
        android:orientation="vertical" android:layout_weight="7"
        android:background="#888888">
        <HorizontalScrollView android:id="@+id/horizontalScrollView1"
            android:layout_width="fill_parent" android:layout_height="fill_parent">
            <LinearLayout android:id="@+id/linearLayout1"
                android:layout_width="fill_parent" android:layout_height="fill_parent"
                android:orientation="horizontal">

                <ImageView android:src="@drawable/image1"
                    android:layout_weight="1" android:layout_width="wrap_content"
                    android:layout_height="fill_parent" android:adjustViewBounds="true"
                    android:id="@+id/attachimagebutton_2" />

                <ImageView android:src="@drawable/image2"
                    android:layout_weight="1" android:layout_width="wrap_content"
                    android:layout_height="fill_parent" android:adjustViewBounds="true"
                    android:id="@+id/attachimagebutton_2" />

            </LinearLayout>
        </HorizontalScrollView>
    </LinearLayout>
</LinearLayout>

Solution 1

Well, there's no need for it to be an ImageButton since you can make anything in android a button...

You can add an ImageView in your XML, give it an id, the image source, the height as fill_parent, the width as wrap_content and you fix the aspect ratio with android:adjustViewBounds="true". Then you can also add android:clickable="true" and find it in code by your id. Then you can add the onClickListener.

Hope it works

Solution 2

I recommend taking a different approach, have the parent layout apply gravity="center_horizontal" and the next step is having a custom view extending the ImageButton class to set its size as square, it's really simple.

So create the new class, let's name it SquareImageButton, and extend ImageButton. add the default constructor with the context and attributes and let it call the super function, you don't need to add anything else.

Now override the onMeasure() method (which gives you measured width and height in int values), take the minimum value, and (as the method requires) call setMeasuredDimension(w, h) with the new minimum value so it will be square. It worked for me, and here's the code if you are kinda lost:

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int minDimension = Math.min(widthMeasureSpec, heightMeasureSpec);
    setMeasuredDimension(minDimension, minDimension);
}

Comments

[CodeKrieger]

have you tried what I wrote? If I understand what you are saying, that code should do... I mean, the adjustViewBounds along with the wrap_content in the layout_width propert will fix the width in a scaled manner

[CodeKrieger]

But how can you stretch your image to 300x300 if the container is 300x72... In that case it will be always 72x72 as it fills the smallest length first.... Why do you have it as 300x72? Can you make it bigger? You can't have different heights and widths since you have a square and youre maintaining the aspect ratio, think again what you point

[Vinod]

I meant like the result i saw with the above setting was 300x72. This is not the desired result. The desired result is 300x300. I have the height set to "fill_parent". This is around 300. and the width is set to wrap_content. I wish the image expands to 300x300 from 72x72. If the image is 600x800 I want it to set to 300x400 as the max height is 300. But there is no max width in my requirement. Can this be done? Also want to mention that the height is approx 300. It has to be set to fill_parent and not specific dp as i need to set for all kind of screen sizes.

[CodeKrieger]

Could you edit your post and show me your whole XML? Its seems you are doing something wrong, as it should work...

[Vinod]

I have edited with the whole xml I am using. Please let me know if anything is wrong. Thank you.

[CodeKrieger]

Well, it is quite a mess but anyway it could be the weights you assign to the imageviews... take them out from your code and see what happens... If it gives you unexpected results, use weights of 50 on both images... If that still doesn't work... Use a relative layout instead of your parent linear layout and align the second image to the left of the first, and tell what happens... hope it works...

[Armando]

Exactly, if you take the max one then you might create a button with, say, larger height than the allowed drawing area. EDIT: I get what you said but it has worked for me on different layouts, it shouldn't return the display dimention but the area assigned to the View