Square buttons Screen Width and Weight Matching

Question

I have a layout which contains only a LinearLayour with 3 buttons inside.

I would want this 3 buttons to fill the screen vertically so I used "weigth=1" but I should also want the buttons to be square, that is, that their width is equal to their height.

Any way to do it?

Here's the .xml file

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="android.jose.se.Prueba"
    android:background="@drawable/bg"
    android:gravity="center">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical">

    <Button
        android:id="@+id/bHet"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@drawable/layer1"
        android:onClick="cambiarBoton"/>

    <Button
        android:id="@+id/bGay"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@drawable/layer2"
        android:onClick="cambiarBoton"/>

    <Button
        android:id="@+id/bLesbi"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@drawable/layer3"
        android:onClick="cambiarBoton"/>

</LinearLayout>
</RelativeLayout>

this might help: http://stackoverflow.com/questions/4656986/how-do-i-keep-the-aspect-ratio-on-image-buttons-in-android — Bill, Aug 03 '16 at 12:50

score 2 · Answer 1 · answered Aug 03 '16 at 12:57

2

I had similar issue and done it using Google's Percent Relative Layout that helps you manage view aspect ratio.

You can use it like this

 <android.support.percent.PercentRelativeLayout
         xmlns:android="http://schemas.android.com/apk/res/android"
         xmlns:app="http://schemas.android.com/apk/res-auto"
         android:layout_width="match_parent"
         android:layout_height="match_parent">
     <Button
         android:layout_width="match_parent"
         app:layout_aspectRatio="100%"/>
 </android.support.percent.PercentFrameLayout>

answered Aug 03 '16 at 12:57

Gio Gogiashvili

71
4

I've tried it but it says "layout height attribute should be defined" – Josemafuen Aug 03 '16 at 13:42
Ignore that error, it will work. Just build and try. It's a lint bug I think. – Ioane Sharvadze Aug 04 '16 at 07:59
And note that "layout_*" attributes are for layout only. So layout might not need "layout_height" at all, like in this case. – Ioane Sharvadze Aug 04 '16 at 08:00

score 0 · Accepted Answer · answered Aug 03 '16 at 14:55

The best way to do this, is to make a new Class called Square button and this class should extend Button. Then in the onMeasure of this class, simply make your heightSpec as WidthSpec.

public class SquareButton extends Button {

public SquareButton(Context context) {
    super(context);
}

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

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

@Override
protected void onMeasure(int WidthSpec, int HeightSpec){
    int newWidthSpec = HeightSpec ;

    super.onMeasure(newWidthSpec, HeightSpec);
 }}

Now you can use this SquareButton instead of a normal Button in your xml like this. The value of android:width attribute will be ignored.

<com.example.package.SquareButton
     android:height = "0dp"
     android:weight = "1"
     android:width = "0dp"
/>

Square buttons Screen Width and Weight Matching

2 Answers2