Java – Sets the size of the button as a percentage

Sets the size of the button as a percentage… here is a solution to the problem.

Sets the size of the button as a percentage

Take a look at the code below

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=". HomeScreen" >

<TableLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:stretchColumns="*"
        android:layout_alignParentTop="true" >

<TableRow
            android:id="@+id/tableRow1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

<Button
                android:id="@+id/button1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />

<Button
                android:id="@+id/button2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />

<Button
                android:id="@+id/button3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />

</TableRow>

<TableRow
            android:id="@+id/tableRow2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

<Button
                android:id="@+id/button4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />

<Button
                android:id="@+id/button5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />

<Button
                android:id="@+id/button6"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />

</TableRow>

<TableRow
            android:id="@+id/tableRow3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

<Button
                android:id="@+id/button7"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />

<Button
                android:id="@+id/button8"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />

<Button
                android:id="@+id/button9"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />

</TableRow>

<TableRow
            android:id="@+id/tableRow4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

<Button
                android:id="@+id/button10"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />

<Button
                android:id="@+id/button11"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />

<Button
                android:id="@+id/button12"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />

</TableRow>
    </TableLayout>

</RelativeLayout>

This produces the following output.

enter image description here

But that’s not what I need. I need these 12 buttons to fill the entire screen, keeping equal spacing from each other and being the same size. I don’t need to set a fixed size, such as hight=100, width=100, but should adjust the size according to the device screen size. This means that each button can have 8.3% of the space in the screen (100/12 = 8.3).

I tried setting the height of each button to 0dp and adding android:layout_weight = 0.083. But that doesn’t work because no buttons are displayed after that.

What should I do?

Solution

You can’t have the dynamic layout you want in XML…

In the activity/fragment where you load the layout: You must set the tableRow height yourself based on the screen size

To get the screen size, you can use

    DisplayMetrics metrics = new DisplayMetrics();
    Activity aActivity = (Activity)  container.getContext();
    aActivity.getWindowManager().getDefaultDisplay().getMetrics(metrics);

screen_Width = metrics.widthPixels;
    screen_Height = metrics.heightPixels;

Now you can set each table row width to totalHeight/NoOFRows - padding.

        tableRow.setMinimumHeight(calculatedHeight);

Similar calculations can be made for widths so that they fill correctly and remain the same size

Related Problems and Solutions