title: Android Custom Button (custom Text) using XML and TableLayout
body: <p>I wanted to create a <strong>Custom Button</strong> with 4 independent <code>TextViews</code> in <strong>XML</strong> using <strong>Android Studio</strong>. (The button should have the option of a normal centered <code>TextView</code> which I can <code>setVisible()</code> when needed.)</p>
  
  <p>However, I played around with the <strong>layout heights</strong>, but didn't find the proper solution yet. The goal is, that my <code>buttons.xml</code> will show the <strong>Custom Button 6 times</strong> on the right half of the screen (see <code>buttons.xml</code>) using a <code>TableLayout</code>.
  This just worked perfectly when I used normal <code>Buttons</code> directly in the <code>TableLayout</code>. (See <strong>UNDO Button</strong> for reference, this is the correct size)</p>
  
  <p>As soon as I tried to <code>&lt;include&gt;</code> my <code>custom_button.xml</code> within the <code>TableLayout</code>, they were either too big and one button would use more than 75% of the screen height (using <code>match_parent</code>), or the custom buttons were too small (using <code>wrap_content</code>).</p>
  
  <p>Here are listed the mentioned <code>xml</code>-files, prepared for usage without <code>colors.xml</code>, <code>strings.xml</code> or <code>dimens.xml</code>:</p>
  
  <hr>
  
  <h3><strong><code>activity_main.xml</code></strong>:</h3>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;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"&gt;
  
  &lt;!-- Other stuff like background image, toolbar and bottom info tableLayout --&gt;
  
  &lt;include
      android:id="@+id/buttons"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      layout="@layout/buttons"
      /&gt;
  
  &lt;/RelativeLayout&gt;
  </code></pre>
  
  <hr>
  
  <h3><strong><code>buttons.xml</code></strong>:</h3>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;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"
  
      &gt;
  
      &lt;TableRow
          android:layout_width="match_parent"
          android:layout_height="0dp"
          android:layout_weight=".16666666"&gt;
  
          &lt;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"
              /&gt;
  
          &lt;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"
              /&gt;
  
  
      &lt;/TableRow&gt;
  
      &lt;TableRow
          android:layout_width="match_parent"
          android:layout_height="0dp"
          android:layout_weight=".16666666"&gt;
  
          &lt;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"
              /&gt;
  
          &lt;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"
              /&gt;
  
      &lt;/TableRow&gt;
  
      &lt;TableRow
          android:layout_width="match_parent"
          android:layout_height="0dp"
          android:layout_weight=".16666666"&gt;
  
          &lt;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"
              /&gt;
  
          &lt;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"
              /&gt;
  
      &lt;/TableRow&gt;
  
      &lt;TableRow
          android:layout_width="match_parent"
          android:layout_height="0dp"
          android:layout_weight=".16666666"&gt;
  
          &lt;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"
              /&gt;
  
          &lt;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"
              /&gt;
  
      &lt;/TableRow&gt;
  
      &lt;TableRow
          android:layout_width="match_parent"
          android:layout_height="0dp"
          android:layout_weight=".16666666"&gt;
  
          &lt;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"
              /&gt;
  
          &lt;!-- Wrap content makes the buttons too small, they should
          be evenly sized over the screen --&gt;
          &lt;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"
              /&gt;
  
      &lt;/TableRow&gt;
  
      &lt;TableRow
          android:layout_width="match_parent"
          android:layout_height="0dp"
          android:layout_weight=".16666666"&gt;
  
          &lt;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"/&gt;
  
          &lt;!-- I tried match_parent for height here but it didn't work  --&gt;
          &lt;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"
              /&gt;
  
      &lt;/TableRow&gt;    
  &lt;/TableLayout&gt;
  </code></pre>
  
  <hr>
  
  <h3><strong><code>custom_button.xml</code></strong>:</h3>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;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"
      &gt;
  
      &lt;!-- I think wrap_content is wrong, but match_parent makes all of
      those too big in the buttons.xml --&gt;
      &lt;Button
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:onClick="onClick"
          android:background="#55546752"/&gt;
  
      &lt;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" /&gt;
  
      &lt;!-- 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?? --&gt;
      &lt;TableLayout
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:id="@+id/button_table"&gt;
  
          &lt;TableRow
              android:layout_width="match_parent"
              android:layout_height="0dp"
              android:layout_weight="0.5"&gt;
              &lt;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" /&gt;
  
              &lt;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" /&gt;
  
          &lt;/TableRow&gt;
  
          &lt;TableRow
              android:layout_width="match_parent"
              android:layout_height="0dp"
              android:layout_weight="0.5"&gt;
              &lt;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" /&gt;
  
              &lt;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" /&gt;
  
          &lt;/TableRow&gt;
      &lt;/TableLayout&gt; 
  &lt;/RelativeLayout&gt;
  </code></pre>
  
  <hr>
  
  <h3>Output:</h3>
  
  <p>You can see, the first 5 buttons on the right site are too small and the custom <code>TextViews</code> are not aligned correctly (vertical center).
  The sixth button on the right site uses <code>match_parent</code> for height and has a mixed size of being correct, but it's content is still too small (due to <code>wrap_content</code>).
  The only <code>Button</code> being displayed correctly is the UNDO-<code>Button</code>.</p>
  
  <p>(Give me reputation so I can include images directly):
  <a href="http://i.imgur.com/GceRNZ6.png" rel="nofollow">Screenshot</a></p>
  
  <p>If you can provide a solution for a custom <code>Button</code> like this one, and the <code>TableLayout</code> I would be grateful!</p>