How can I do scale the buttonsheight?

Question

I want to get 3 ImageButtons in one row with the same size.

I want something this like:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@color/black"
    android:orientation="vertical"
    android:paddingBottom="40dp"
    android:paddingTop="40dp" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal|fill_horizontal|center"
        android:gravity="fill_horizontal" >

        <LinearLayout
            android:id="@+id/dummy_005"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="horizontal" >
        </LinearLayout>

        <ImageButton
            android:id="@+id/button_scan"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="3"
            android:background="@drawable/image_button"
            android:focusableInTouchMode="true"
            android:scaleType="fitCenter"
            android:
            android:src="@drawable/scan_symbol" />

        <LinearLayout
            android:id="@+id/dummy_002"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="horizontal" >

        </LinearLayout>

        <ImageButton
            android:id="@+id/button_hitsorie"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="3"
            android:background="@drawable/image_button"
            android:src="@drawable/historie_symbol" />

        <LinearLayout
            android:id="@+id/dummy_003"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="horizontal" >
        </LinearLayout>

        <ImageButton
            android:id="@+id/button_2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="3"
            android:background="@drawable/image_button" />

        <LinearLayout
            android:id="@+id/dummy_004"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="horizontal" >

        </LinearLayout>

    </LinearLayout>

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

        <TextView
            android:id="@+id/textView_result"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textSize="@dimen/testTextSize" />

    </LinearLayout>
</LinearLayout>

I want the button to be quadtra (width == height). But the width is 0dp with weight: 3. But how can I do that the buttonsheight will be scaled?

subclass the ImageButton class and set the Height equal to the width, once the width is computed. Then use your custom ImageButton class instead of the stock one. — peshkira, Sep 02 '14 at 11:29
@peshkira has the right idea.. see my answer for working example code. — speedynomads, Sep 02 '14 at 12:09

score 2 · Accepted Answer · answered Sep 02 '14 at 12:02

You need to subclass the ImageButton class and set tell it to apply the widthMeasureSpec to both the width and height.

    public class SquareImageButton extends ImageButton {

    public SquareImageButton(Context context) {
        this(context, null);
    }

    public SquareImageButton(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public SquareImageButton(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, widthMeasureSpec);
    }
}

Then in your layout do something like this, obviously replacing the package name with the location of your custom view...

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

<com.example.domji84.quadtraimagebuttons.SquareImageButton
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"/>

<com.example.domji84.quadtraimagebuttons.SquareImageButton
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"/>

<com.example.domji84.quadtraimagebuttons.SquareImageButton
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"/>

</LinearLayout>

This will always set the height of your custom ImageButton to match its width when rendered on screen.

Be aware that this will not inherit the system theme styles, although there is a way of setting this in the custom view, it's better to choose your own styles and set a background color, image, text, selectors and anything else you need...

score 1 · Answer 2 · answered Sep 02 '14 at 11:51

I hope this will help you,

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="3" >

<ImageButton
    android:id="@+id/button_1"
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:layout_weight="1"
    android:background="@android:drawable/btn_default" />

 <ImageButton
    android:id="@+id/button_2"
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:layout_weight="1"
    android:background="@android:drawable/btn_default" />
  <ImageButton
    android:id="@+id/button_3"
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:layout_weight="1"
    android:background="@android:drawable/btn_default" />
  </LinearLayout>

you should use gridview for equal size concept not this imagebutton — RajeshVijayakumar, Sep 02 '14 at 12:12
Sure a gridview would provide the required effect but comes with extra overhead as you have to create an adapter and custom layouts and there is more to inflate when rendering the layout... if its just for one row of three square items, a custom imagebutton or other view is fine as a solution. — speedynomads, Sep 02 '14 at 13:15

raji ramamoorthi · Answer 3 · 2014-09-02T12:14:49.240

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <ImageButton
        android:id="@+id/imageButton1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/abc_ab_bottom_solid_dark_holo" />

    <ImageButton
        android:id="@+id/imageButton2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:src="@drawable/abc_ab_bottom_solid_dark_holo" />

    <ImageButton
        android:id="@+id/imageButton3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:src="@drawable/abc_ab_bottom_solid_dark_holo" />

</RelativeLayout>

What is this even trying to achieve? The code is missing lines and is badly formatted. — speedynomads, Sep 02 '14 at 12:08

How can I do scale the buttonsheight?

3 Answers3