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?

Answer 1

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...