CODEWITHSUNDEEP
androidandroid-studioresponsive
user14248042
user14248042

Reputation:

Make table in android studio half the height of the screen

Basically, I have a table with a bunch of buttons and I've realized that the height stays fixed on multiple screen sizes. Is there a unit for height that is a percentage of the screen size or is there some other way? Here's the XML for the table. So right now, I want the height of the table to be half the screen size it's on. On most pixel devices, it's fine, but for tablets on portrait mode, it's only a 4th of the screen. The height for the table layout rn is wrap content but im fine if u can change it.

<TableLayout
        android:id="@+id/tableLayout2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/input"
        app:layout_constraintVertical_bias="1.0">

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <Button
                android:id="@+id/clearBTN"
                style="@style/Widget.AppCompat.Button.Borderless"
                android:layout_width="0dp"
                android:layout_height="70dp"
                android:layout_weight="1"
                android:background="#ff4757"
                android:fontFamily="@font/raleway_medium"
                android:onClick="clearBTN"
                android:text="@string/clear"
                android:textColor="#ffffff"
                android:textSize="36sp"
                app:backgroundTint="#ff4757" />

            <Button
                android:id="@+id/paranthesisBTN"
                style="@style/Widget.AppCompat.Button.Borderless"
                android:layout_width="0dp"
                android:layout_height="70dp"
                android:layout_weight="1"
                android:background="#ff4757"
                android:fontFamily="@font/raleway_medium"
                android:onClick="paranthesisBTN"
                android:text="@string/parantheses"
                android:textColor="#ffffff"
                android:textSize="36sp"
                android:textStyle="bold"
                app:backgroundTint="#ff4757" />

            <Button
                android:id="@+id/exponentBTN"
                style="@style/Widget.AppCompat.Button.Borderless"
                android:layout_width="0dp"
                android:layout_height="70dp"
                android:layout_weight="1"
                android:background="#ff4757"
                android:fontFamily="@font/raleway_medium"
                android:onClick="exponentBTN"
                android:text="@string/exponent"
                android:textColor="#ffffff"
                android:textSize="36sp"
                android:textStyle="bold"
                app:backgroundTint="#ff4757" />

            <Button
                android:id="@+id/divideBTN"
                style="@style/Widget.AppCompat.Button.Borderless"
                android:layout_width="0dp"
                android:layout_height="70dp"
                android:layout_weight="1"
                android:background="#ff4757"
                android:fontFamily="@font/raleway_medium"
                android:onClick="divideBTN"
                android:text="@string/divide"
                android:textColor="#ffffff"
                android:textSize="36sp"
                android:textStyle="bold"
                app:backgroundTint="#ff4757" />

        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <Button
                android:id="@+id/sevenBTN"
                style="@style/Widget.AppCompat.Button.Borderless"
                android:layout_width="0dp"
                android:layout_height="70dp"
                android:layout_weight="1"
                android:fontFamily="@font/nunito_bold"
                android:gravity="center"
                android:onClick="sevenBTN"
                android:text="@string/seven"
                android:textColor="#ffffff"
                android:textSize="36sp"
                app:backgroundTint="#505050" />

            <Button
                android:id="@+id/eightBTN"
                style="@style/Widget.AppCompat.Button.Borderless"
                android:layout_width="0dp"
                android:layout_height="70dp"
                android:layout_weight="1"
                android:fontFamily="@font/nunito_bold"
                android:onClick="eightBTN"
                android:text="@string/eight"
                android:textColor="#ffffff"
                android:textSize="36sp"
                app:backgroundTint="#505050" />

            <Button
                android:id="@+id/nineBTN"
                style="@style/Widget.AppCompat.Button.Borderless"
                android:layout_width="0dp"
                android:layout_height="70dp"
                android:layout_weight="1"
                android:fontFamily="@font/nunito_bold"
                android:onClick="nineBTN"
                android:text="@string/nine"
                android:textColor="#ffffff"
                android:textSize="36sp"
                app:backgroundTint="#505050" />

            <Button
                android:id="@+id/multiplyBTN"
                style="@style/Widget.AppCompat.Button.Borderless"
                android:layout_width="0dp"
                android:layout_height="70dp"
                android:layout_weight="1"
                android:background="#ff9500"
                android:fontFamily="@font/nunito_bold"
                android:onClick="multiplyBTN"
                android:text="@string/multiply"
                android:textColor="#ffffff"
                android:textSize="36sp"
                android:textStyle="bold"
                app:backgroundTint="#ff9500" />
        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <Button
                android:id="@+id/fourBTN"
                style="@style/Widget.AppCompat.Button.Borderless"
                android:layout_width="0dp"
                android:layout_height="70dp"
                android:layout_weight="1"
                android:fontFamily="@font/nunito_bold"
                android:onClick="fourBTN"
                android:text="@string/four"
                android:textColor="#ffffff"
                android:textSize="36sp"
                app:backgroundTint="#505050" />

            <Button
                android:id="@+id/fiveBTN"
                style="@style/Widget.AppCompat.Button.Borderless"
                android:layout_width="0dp"
                android:layout_height="70dp"
                android:layout_weight="1"
                android:fontFamily="@font/nunito_bold"
                android:onClick="fiveBTN"
                android:text="@string/five"
                android:textColor="#ffffff"
                android:textSize="36sp"
                app:backgroundTint="#505050" />

            <Button
                android:id="@+id/sixBTN"
                style="@style/Widget.AppCompat.Button.Borderless"
                android:layout_width="0dp"
                android:layout_height="70dp"
                android:layout_weight="1"
                android:fontFamily="@font/nunito_bold"
                android:onClick="sixBTN"
                android:text="@string/six"
                android:textColor="#ffffff"
                android:textSize="36sp"
                app:backgroundTint="#505050" />

            <Button
                android:id="@+id/subtractBTN"
                style="@style/Widget.AppCompat.Button.Borderless"
                android:layout_width="0dp"
                android:layout_height="70dp"
                android:layout_weight="1"
                android:background="#ff4757"
                android:fontFamily="@font/nunito_bold"
                android:onClick="subtractBTN"
                android:text="@string/subtract"
                android:textColor="#ffffff"
                android:textSize="36sp"
                android:textStyle="bold"
                app:backgroundTint="#ff9500" />
        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <Button
                android:id="@+id/oneBTN"
                style="@style/Widget.AppCompat.Button.Borderless"
                android:layout_width="0dp"
                android:layout_height="70dp"
                android:layout_weight="1"
                android:fontFamily="@font/nunito_bold"
                android:onClick="oneBTN"
                android:text="@string/one"
                android:textColor="#ffffff"
                android:textSize="36sp"
                app:backgroundTint="#505050" />

            <Button
                android:id="@+id/twoBTN"
                style="@style/Widget.AppCompat.Button.Borderless"
                android:layout_width="0dp"
                android:layout_height="70dp"
                android:layout_weight="1"
                android:fontFamily="@font/nunito_bold"
                android:onClick="twoBTN"
                android:text="@string/two"
                android:textColor="#ffffff"
                android:textSize="36sp"
                app:backgroundTint="#505050" />

            <Button
                android:id="@+id/threeBTN"
                style="@style/Widget.AppCompat.Button.Borderless"
                android:layout_width="0dp"
                android:layout_height="70dp"
                android:layout_weight="1"
                android:fontFamily="@font/nunito_bold"
                android:onClick="threeBTN"
                android:text="@string/three"
                android:textColor="#ffffff"
                android:textSize="36sp"
                app:backgroundTint="#505050" />

            <Button
                android:id="@+id/addBTN"
                style="@style/Widget.AppCompat.Button.Borderless"
                android:layout_width="0dp"
                android:layout_height="70dp"
                android:layout_weight="1"
                android:background="#ff4757"
                android:fontFamily="@font/nunito_bold"
                android:onClick="addBTN"
                android:text="@string/add"
                android:textColor="#ffffff"
                android:textSize="36sp"
                android:textStyle="bold"
                app:backgroundTint="#ff9500" />
        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <Button
                android:id="@+id/plusMinusButton"
                style="@style/Widget.AppCompat.Button.Borderless"
                android:layout_width="0dp"
                android:layout_height="70dp"
                android:layout_weight="1"
                android:fontFamily="@font/nunito_bold"
                android:onClick="plusMinusBTN"
                android:text="@string/plusMinus"
                android:textColor="#ffffff"
                android:textSize="36sp"
                android:textStyle="bold"
                app:backgroundTint="#505050" />

            <Button
                android:id="@+id/zeroBTN"
                style="@style/Widget.AppCompat.Button.Borderless"
                android:layout_width="0dp"
                android:layout_height="70dp"
                android:layout_weight="1"
                android:fontFamily="@font/nunito_bold"
                android:onClick="zeroBTN"
                android:text="@string/zero"
                android:textColor="#ffffff"
                android:textSize="36sp"
                android:textStyle="bold"
                app:backgroundTint="#505050" />

            <Button
                android:id="@+id/pointBTN"
                style="@style/Widget.AppCompat.Button.Borderless"
                android:layout_width="0dp"
                android:layout_height="70dp"
                android:layout_weight="1"
                android:fontFamily="@font/nunito_bold"
                android:onClick="pointBTN"
                android:text="@string/point"
                android:textColor="#ffffff"
                android:textSize="36sp"
                android:textStyle="bold"
                app:backgroundTint="#505050" />

            <Button
                android:id="@+id/equalsBTN"
                style="@style/Widget.AppCompat.Button.Borderless"
                android:layout_width="0dp"
                android:layout_height="70dp"
                android:layout_weight="1"
                android:background="@drawable/ic_launcher_background"
                android:onClick="equalsBTN"
                android:text="@string/equals"
                android:textColor="#ffffff"
                android:textSize="36sp"
                android:textStyle="bold"
                app:backgroundTint="#ff9500" />
        </TableRow>
    </TableLayout>

Thanks in advance

Upvotes: 1

Views: 376

Answers (1)

Ben P.
Ben P.

Reputation: 54214

There are two common strategies for getting a percentage of the screen (or really, of the parent layout):

  • Use LinearLayout plus layout_weight
  • Use ConstraintLayout plus Guideline

LinearLayout

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

    <Space
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

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

    </TableLayout>

</LinearLayout>

Here we combine a height of 0dp with a weight of 1 on both views. This will cause the space to be split evenly between the two, and since the first view is a Space (invisible view), the outcome will be the table being half of the screen.

You can use any value you want for weight. If you wanted 66% of the screen, you would give the Space a weight of 1 and the TableLayout a weight of 2; the ratio is all that matters.

ConstraintLayout

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.5"/>
    
    <TableLayout
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintTop_toBottomOf="@id/guideline"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        ...>

    </TableLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

Here we put a Guideline (an invisible "anchor") into the ConstraintLayout. By setting its percent to 0.5, we put it right in the middle of the screen. After that, we just position the TableLayout relative to the guideline.

If you wanted to make the table larger or smaller, all you'd have to do is move the guideline.

Upvotes: 1

Related Questions