How to create buttons with dynamic size in XML?

Asked

Viewed 2,514 times

0

I am creating a calculator for android with only the basic functions same. For this I am writing the Layout code directly in XML, however I can not make the buttons grow and occupy the screen both when flipping the device and it normal I am on time.. Well follow the code.

    <LinearLayout
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:orientation="vertical"
tools:context=".Main">

<TextView
    android:id="@+id/visor"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@color/green"
    android:gravity="right"
    android:text="@string/visor"
    android:textColor="@color/white"
    android:textSize="30dp" />

<TableLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <TableRow
        android:layout_height="fill_parent">

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

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

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

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

    <TableRow
        android:layout_height="fill_parent">

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

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

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

        <Button
            android:id="@+id/btnMul"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="*" />
    </TableRow>

    <TableRow
        android:layout_height="fill_parent">

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

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

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

        <Button
            android:id="@+id/btnSub"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="-" />
    </TableRow>

    <TableRow
        android:layout_height="fill_parent">

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

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

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

        <Button
            android:id="@+id/btnSum"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="=" />
    </TableRow>
</TableLayout>

Print of the current layout.

Print do Layout Atual

I’d like to leave something like this.

Print do Layout Desejado

android-layout

1 answer

1


There was a little problem in his Layout. I was defining your TableRow without the attribute layout_width, he soon assumed as wrap_content, and was using the layout_height with fill_parent, which does not work in this case.

I’ve made the following adaptations:

  1. I traded all the fill_parent's for match_parent, because it has been depreciated, it changes nothing, but it may be that in newer versions it no longer works.
  2. I gave weights to your lines and left with dynamic height, using the attribute layout_weight being 1 and layout_height being for each line. So it will divide the height 0dp. So all the time of TableLayout will be divided between your lines equally. If you add more lines, don’t forget to update the weightSum.
  3. I put their TextView's occupying all available space for it, using the layout_width as 0dp and layout_height being match_parent, and most importantly the layout_weight as 1. So he evenly distributes the space between the TextView's.
  4. Beware of the btn=, will generate error when compiling your Resources, use btnEq for example.

At the end your layout will be:

<LinearLayout
    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:orientation="vertical"
    tools:context=".Main">

    <TextView
        android:id="@+id/visor"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingBottom="16dp"
        android:paddingTop="16dp"
        android:background="#00ff00"
        android:gravity="right"
        android:text="FOCA"
        android:textColor="@color/white"
        android:textSize="30sp" />

    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:weightSum="4">

        <TableRow
            android:layout_height="0dp"
            android:layout_width="match_parent"
            android:layout_weight="1"
            android:weightSum="4">

            <Button
                android:id="@+id/btn7"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="7" />

            <Button
                android:id="@+id/btn8"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="8" />

            <Button
                android:id="@+id/btn9"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="9" />

            <Button
                android:id="@+id/btnDiv"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="/" />
        </TableRow>

        <TableRow
            android:layout_height="0dp"
            android:layout_width="match_parent"
            android:layout_weight="1"
            android:weightSum="4">

            <Button
                android:id="@+id/btn6"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="6" />

            <Button
                android:id="@+id/btn5"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="5" />

            <Button
                android:id="@+id/btn4"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="4" />

            <Button
                android:id="@+id/btnMul"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="*" />
        </TableRow>

        <TableRow
            android:layout_height="0dp"
            android:layout_width="match_parent"
            android:layout_weight="1"
            android:weightSum="4">

            <Button
                android:id="@+id/btn3"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="3" />

            <Button
                android:id="@+id/btn2"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="2" />

            <Button
                android:id="@+id/btn1"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="1" />

            <Button
                android:id="@+id/btnSub"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="-" />
        </TableRow>

        <TableRow
            android:layout_height="0dp"
            android:layout_width="match_parent"
            android:layout_weight="1"
            android:weightSum="4">

            <Button
                android:id="@+id/btn0"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="0" />

            <Button
                android:id="@+id/Cls"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="Clear" />

            <Button
                android:id="@+id/btnEq"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="9" />

            <Button
                android:id="@+id/btnSum"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="=" />
        </TableRow>
    </TableLayout>
</LinearLayout>

The result should be:

Resultado da alteração no layout

  • Oops, it worked out thank you so much. But, huh the fill_parent is really deprecated? I’m taking android class with a Java Champion, and kind he assured me that the difference between fill_parent and match_parent is just that the match only works on some layout types. Is he belittled or is he? I thank you.

  • 1

    Yes, it was renamed in version 8 (2.2): http://livroandroid.blogspot.com.br/2010/10/android-22-o-attributede-layout.html and http://developer.android.com/reference/android/view/ViewGroup.LayoutParams.html. Don’t forget that you can control weights using the attribute layout_weight and weightSum, if you want to customize.

Browser other questions tagged android-layout

You are not signed in. Login or sign up in order to post.