Search code examples
androidandroid-layoutandroid-linearlayoutandroid-relativelayout

Button layout with 4 separate "borders": Can't get text in center


I have created a button layout with 4 separate "border" views (left, right, top, bottom) and alpha-numeric text intended to be in the center. I using the 4 separate border views so I can selectively hide (or not) each side. When used in a grid layout, I intend to enable the borders on a per button basis to create gridlines between the buttons (think tic-tac-toe lines).

But I cannot seem to center the alpha-numeric text vertically inside the button. Any help would be appreciated.

enter image description here

Here is the relevant xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    style="@style/dialPadButton"
    android:id="@+id/pad_btn_2"
    android:orientation="horizontal"
    android:background="@android:color/darker_gray">

    <!-- Left Border -->
    <View style="@style/dialPadButtonVerticalBorderStyle"
        android:id="@+id/left_border"
        android:visibility="visible"
        android:layout_alignParentLeft="true"
        ></View>

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

        <!-- Top Border -->
        <View style="@style/dialPadButtonHorizontalBorderStyle"
            android:id="@+id/top_border"
            android:visibility="visible"
            android:layout_alignParentTop="true"
            ></View>

        <!-- Alpha-numeric text -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_centerInParent="true"
            android:orientation="vertical">
            <TextView style="@style/dialPadButtonNumber"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAlignment="center"
                android:textSize="@dimen/dial_number_text_size"
                android:text="2"
                android:layout_gravity="center" />
            <TextView style="@style/dialPadButtonText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="@dimen/dial_letter_text_size"
                android:text="abc"
                android:layout_gravity="center" />
        </LinearLayout>

        <!-- Bottom Border -->
        <View style="@style/dialPadButtonHorizontalBorderStyle"
            android:id="@+id/bottom_border"
            android:visibility="visible"
            android:layout_alignParentBottom="true"
            ></View>
    </RelativeLayout>

    <!-- Right Border -->
    <View style="@style/dialPadButtonVerticalBorderStyle"
        android:id="@+id/right_border"
        android:visibility="visible"
        android:layout_alignParentRight="true"
        ></View>

</RelativeLayout>

For additional reference, here are the style definitions:

<resources>

    <style name="dialPadButton">
        <item name="android:layout_width">100dp</item>
        <item name="android:layout_height">100dp</item>
        <item name="android:fontFamily">sans-serif</item>
    </style>

    <style name="dialPadButtonNumber">
        <item name="android:textColor">#00FF00</item>
        <item name="android:maxLines">1</item>
    </style>

    <style name="dialPadButtonText">
        <item name="android:textColor">#00FF00</item>
        <item name="android:layout_marginTop">-10dp</item>
        <item name="android:maxLines">1</item>
    </style>

    <style name="dialPadButtonHorizontalBorderStyle">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">2dp</item>
        <item name="android:background">#EEEEEE</item>
    </style>

    <style name="dialPadButtonVerticalBorderStyle">
        <item name="android:layout_height">match_parent</item>
        <item name="android:layout_width">2dp</item>
        <item name="android:background">#EEEEEE</item>
    </style>


</resources>

Solution

  • you can do these

    android:gravity="center"
    

    or

    android:layout_height="wrap_content"
    

    on your LinearLayout