Search code examples
androidxmlbuttontextviewandroid-tablelayout

Android Custom Button (custom Text) using XML and TableLayout

I wanted to create a Custom Button with 4 independent TextViews in XML using Android Studio. (The button should have the option of a normal centered TextView which I can setVisible() when needed.)

However, I played around with the layout heights, but didn't find the proper solution yet. The goal is, that my buttons.xml will show the Custom Button 6 times on the right half of the screen (see buttons.xml) using a TableLayout. This just worked perfectly when I used normal Buttons directly in the TableLayout. (See UNDO Button for reference, this is the correct size)

As soon as I tried to <include> my custom_button.xml within the TableLayout, they were either too big and one button would use more than 75% of the screen height (using match_parent), or the custom buttons were too small (using wrap_content).

Here are listed the mentioned xml-files, prepared for usage without colors.xml, strings.xml or dimens.xml:

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="com.test.app.testapp.MainActivity"
    android:id="@+id/relativeLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000000">

<!-- Other stuff like background image, toolbar and bottom info tableLayout -->

<include
    android:id="@+id/buttons"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    layout="@layout/buttons"
    />

</RelativeLayout>

buttons.xml:

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/buttons"
    android:background="#000000"

    >

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight=".16666666">

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight=".5"
            android:layout_marginLeft="5dp"
            android:layout_marginBottom="5dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"
            android:textSize="15sp"
            android:id="@+id/text_01"
            />

        <include
            android:id="@+id/button_01"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            layout="@layout/custom_button"
            android:layout_marginLeft="5dp"
            android:layout_marginBottom="0dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"
            android:layout_weight=".5"
            />


    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight=".16666666">

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight=".5"
            android:layout_marginLeft="5dp"
            android:layout_marginBottom="5dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"
            android:textSize="15sp"
            android:id="@+id/text_02"
            />

        <include
            android:id="@+id/button_02"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            layout="@layout/custom_button"
            android:layout_marginLeft="5dp"
            android:layout_marginBottom="0dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"
            android:layout_weight=".5"
            />

    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight=".16666666">

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight=".5"
            android:layout_marginLeft="5dp"
            android:layout_marginBottom="5dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"
            android:textSize="15sp"
            android:id="@+id/text_03"
            />

        <include
            android:id="@+id/button_03"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            layout="@layout/custom_button"
            android:layout_marginLeft="5dp"
            android:layout_marginBottom="0dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"
            android:layout_weight=".5"
            />

    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight=".16666666">

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight=".5"
            android:layout_marginLeft="5dp"
            android:layout_marginBottom="5dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"
            android:textSize="15sp"
            android:id="@+id/text_04"
            />

        <include
            android:id="@+id/button_04"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            layout="@layout/custom_button"
            android:layout_marginLeft="5dp"
            android:layout_marginBottom="0dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"
            android:layout_weight=".5"
            />

    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight=".16666666">

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight=".5"
            android:layout_marginLeft="5dp"
            android:layout_marginBottom="5dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"
            android:textSize="15sp"
            android:id="@+id/text_05"
            />

        <!-- Wrap content makes the buttons too small, they should
        be evenly sized over the screen -->
        <include
            android:id="@+id/button_05"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            layout="@layout/custom_button"
            android:layout_marginLeft="5dp"
            android:layout_marginBottom="0dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"
            android:layout_weight=".5"
            />

    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight=".16666666">

        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginLeft="5dp"
            android:layout_marginBottom="5dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"
            android:layout_weight=".5"
            android:enabled="false"

            android:background="#546752"
            android:text="UNDO"

            android:id="@+id/button_07"/>

        <!-- I tried match_parent for height here but it didn't work  -->
        <include
            android:id="@+id/button_06"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            layout="@layout/custom_button"
            android:layout_marginLeft="5dp"
            android:layout_marginBottom="0dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"
            android:layout_weight=".5"
            />

    </TableRow>    
</TableLayout>

custom_button.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#000000"
    android:id="@+id/custom_button"
    >

    <!-- I think wrap_content is wrong, but match_parent makes all of
    those too big in the buttons.xml -->
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="onClick"
        android:background="#55546752"/>

    <TextView
        android:id="@+id/text_view_button_normal"
        android:textSize="20sp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_centerVertical="true"
        android:text="TEXT"
        android:background="@null"
        android:textColor="#FFFFFF" />

    <!-- How to make this tablelayout the same height like the two
    things above??

    How to CENTER the 4 TextViews not just horizontally, but also
    vertically?? -->
    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/button_table">

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="0.5">
            <TextView
                android:id="@+id/text_view_button_label_1"
                android:layout_weight=".5"
                android:textSize="10sp"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="TEXT"
                android:background="@null"
                android:textColor="#FFFFFF" />

            <TextView
                android:id="@+id/text_view_button_label_2"
                android:layout_weight=".5"
                android:textSize="15sp"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="TEXT"
                android:background="@null"
                android:textColor="#FFFFFF" />

        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="0.5">
            <TextView
                android:id="@+id/text_view_button_label_3"
                android:layout_weight=".5"
                android:textSize="10sp"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="TEXT"
                android:background="@null"
                android:textColor="#FFFFFF" />

            <TextView
                android:id="@+id/text_view_button_label_4"
                android:layout_weight=".5"
                android:textSize="15sp"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="TEXT"
                android:background="@null"
                android:textColor="#FFFFFF" />

        </TableRow>
    </TableLayout> 
</RelativeLayout>

Output:

You can see, the first 5 buttons on the right site are too small and the custom TextViews are not aligned correctly (vertical center). The sixth button on the right site uses match_parent for height and has a mixed size of being correct, but it's content is still too small (due to wrap_content). The only Button being displayed correctly is the UNDO-Button.

(Give me reputation so I can include images directly): Screenshot

If you can provide a solution for a custom Button like this one, and the TableLayout I would be grateful!

Solution

  • Thanks for some random guy from the Uni for the solution!!

    Solution

    buttons.xml:

    <?xml version="1.0" encoding="utf-8"?>
<?xml version="1.0" encoding="utf-8"?>
<TableLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/buttons"
    android:background="#000000"

    >

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight=".16666666">

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight=".5"
            android:layout_marginLeft="5dp"
            android:layout_marginBottom="5dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"
            android:textSize="15sp"
            android:id="@+id/text_01"
            />

        <include
            android:id="@+id/button_01"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            layout="@layout/custom_button"
            android:layout_marginLeft="5dp"
            android:layout_marginBottom="0dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"
            android:layout_weight=".5"
            android:layout_gravity="center"

            />


    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight=".16666666">

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight=".5"
            android:layout_marginLeft="5dp"
            android:layout_marginBottom="5dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"
            android:textSize="15sp"
            android:id="@+id/text_02"

            />

        <include
            android:id="@+id/button_02"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            layout="@layout/custom_button"
            android:layout_marginLeft="5dp"
            android:layout_marginBottom="0dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"
            android:layout_weight=".5"
            android:layout_gravity="center"

            />

    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight=".16666666">

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight=".5"
            android:layout_marginLeft="5dp"
            android:layout_marginBottom="5dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"
            android:textSize="15sp"
            android:id="@+id/text_03"
            />

        <include
            android:id="@+id/button_03"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            layout="@layout/custom_button"
            android:layout_marginLeft="5dp"
            android:layout_gravity="center"

            android:layout_marginBottom="0dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"
            android:layout_weight=".5"
            />

    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight=".16666666">

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight=".5"
            android:layout_marginLeft="5dp"
            android:layout_marginBottom="5dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"

            android:textSize="15sp"
            android:id="@+id/text_04"
            />

        <include
            android:id="@+id/button_04"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            layout="@layout/custom_button"
            android:layout_marginLeft="5dp"
            android:layout_marginBottom="0dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"
            android:layout_weight=".5"
            android:layout_gravity="center"

            />

    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:id="@+id/lastTableRow"
        android:layout_weight=".16666666">

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight=".5"
            android:layout_marginLeft="5dp"
            android:layout_marginBottom="5dp"
            android:layout_marginRight="5dp"

            android:layout_marginTop="5dp"
            android:textSize="15sp"
            android:id="@+id/text_05"
            />

        <!-- Wrap content makes the buttons too small, they should
        be evenly sized over the screen -->
        <include
            android:id="@+id/button_05"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            layout="@layout/custom_button"
            android:layout_marginLeft="5dp"
            android:layout_marginBottom="0dp"
            android:layout_marginRight="5dp"
            android:layout_gravity="center"

            android:layout_marginTop="5dp"
            android:layout_weight=".5"
            />

    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight=".16666666">

        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginLeft="5dp"
            android:layout_marginBottom="0dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"
            android:layout_weight=".5"
            android:enabled="false"
            android:background="#546752"

            android:text="UNDO"
            android:id="@+id/button_07"/>

        <include
            android:id="@+id/button_06"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            layout="@layout/custom_button"
            android:layout_gravity="center"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"
            android:layout_marginBottom="0dp"
            android:layout_weight=".5"

            />

    </TableRow>
</TableLayout>

    custom_button.xml:

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#000000"
    android:id="@+id/custom_button"
    >

    <!-- I think wrap_content is wrong, but match_parent makes all of
    those too big in the buttons.xml -->
    <Button
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/button"
        android:onClick="onClick"
        android:background="#55546752"/>

    <TextView
        android:id="@+id/text_view_button_normal"
        android:textSize="20sp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_centerVertical="true"
        android:text="TEXT"
        android:background="@null"
        android:textColor="#FFFFFF" />

    <!-- How to make this tablelayout the same height like the two
    things above??

    How to CENTER the 4 TextViews not just horizontally, but also
    vertically?? -->
    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignBottom="@id/button"
        android:layout_weight="1"
        android:id="@+id/button_table">

        <TableRow
            android:layout_weight=".5"
            android:layout_width="match_parent"
            android:layout_height="0dp">
            <TextView
                android:id="@+id/text_view_button_label_1"
                android:layout_weight=".5"
                android:textSize="10sp"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:layout_gravity="center"
                android:text="TEXT"
                android:background="@null"
                android:textColor="#FFFFFF" />

            <TextView
                android:id="@+id/text_view_button_label_2"
                android:layout_weight=".5"
                android:textSize="15sp"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:layout_gravity="center"
                android:text="TEXT"
                android:background="@null"
                android:textColor="#FFFFFF" />

        </TableRow>

        <TableRow
            android:layout_weight=".5"

            android:layout_width="match_parent"
            android:layout_height="0dp">
            <TextView
                android:id="@+id/text_view_button_label_3"
                android:layout_weight=".5"
                android:textSize="10sp"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:layout_gravity="center"
                android:text="TEXT"
                android:background="@null"
                android:textColor="#FFFFFF" />

            <TextView
                android:id="@+id/text_view_button_label_4"
                android:layout_weight=".5"
                android:textSize="15sp"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:layout_gravity="center"
                android:text="TEXT"
                android:background="@null"
                android:textColor="#FFFFFF" />

        </TableRow>
    </TableLayout>
</RelativeLayout>

    Finally, it looks like this:

    Screenshot