Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Center text vertically independently of View height?

I'm doing my best to center the text vertically but I cannot manage to do it. The problem is that I have rows of buttons with height=fill_parent and weight=1 and as the rows become smaller my text starts touching the bottom of the view as seen here:

enter image description here

I tried removing the padding, margin, changing the height and so on. But nothing seems to do it.

How can I align it vertically even when the text size is close the the view height?

Here's the code for the view containing number 5:

    <Button
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:text="5"
        android:layout_weight="1"
        tools:ignore="HardcodedText"
        android:clickable="false"
        android:textSize="90dp"
        android:textColor="?attr/color1"
        android:gravity="center"
        android:paddingLeft="@dimen/normal_margin"
        android:paddingRight="@dimen/normal_margin"
        android:padding="0dp" />
like image 967
lisovaccaro Avatar asked Feb 01 '15 23:02

lisovaccaro


People also ask

How do you center text in height?

Center the text vertically between the top and bottom margins. Select the text that you want to center. in the Page Setup group, and then click the Layout tab. In the Vertical alignment box, click Center.

How do I vertically align text and an image?

We need to create a parent element that contain both image and text. After declaring the parent element as flexbox using display: flex; we can align the items to the center using align-items: center;. Example: This example uses flexbox to vertically align text next to an image using CSS.

How do I center text in a div height?

Answer: Use the CSS line-height property Suppose you have a div element with the height of 50px and you have placed some link inside the div that you want to align vertically center. The simplest way to do it is — just apply the line-height property with value equal to the height of div which is 50px .


1 Answers

As per my advice if you have two options to make such layout and getout from the issue you are having.

1. Use GridView

Using gridview you will have equal space in all four directions(left, right, top, bottom). You dont have to worry about the equal spacing for the grid item.

 <GridView
    android:id="@+id/album_list"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_weight="1"
    android:cacheColorHint="#00000000"
    android:gravity="center"
    android:numColumns="auto_fit"
    android:stretchMode="spacingWidthUniform"
    android:drawSelectorOnTop="true"/>

Just try above code with which you will have all view equally distributed in the grid.

2. Use TableLayout and TableRow

Please check below code to use TableLayout and TableRow with its attribute to have all view equally arranged. Even if you smaller the height and width of the TableLayout, it will remain equally arranged in that view.

<RelativeLayout 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:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

<TableLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" android:layout_height="fill_parent"
    android:layout_margin="5dp">
<TableRow android:weightSum="3"
    android:layout_weight="1" android:gravity="center">
    <Button android:gravity="center"
        android:textSize="13sp" android:textColor="#000000"
        android:text="1" android:layout_weight="1"/>
    <Button  android:gravity="center"
        android:textSize="13sp" android:textColor="#000000"
        android:text="1" android:layout_weight="1"/>
    <Button android:gravity="center"
        android:textSize="13sp" android:textColor="#000000"
        android:text="1" android:layout_weight="1"/>
</TableRow>

    <TableRow android:weightSum="3" android:layout_weight="1" android:gravity="center">
        <Button android:gravity="center"
            android:textSize="13sp" android:textColor="#000000"
            android:text="1" android:layout_weight="1"/>
        <Button  android:gravity="center"
            android:textSize="13sp" android:textColor="#000000"
            android:text="1" android:layout_weight="1"/>
        <Button android:gravity="center"
            android:textSize="13sp" android:textColor="#000000"
            android:text="1" android:layout_weight="1"/>
    </TableRow>

    <TableRow android:weightSum="3" android:layout_weight="1" android:gravity="center">
        <Button android:gravity="center"
            android:textSize="13sp" android:textColor="#000000"
            android:text="1" android:layout_weight="1"/>
        <Button  android:gravity="center"
            android:textSize="13sp" android:textColor="#000000"
            android:text="1" android:layout_weight="1"/>
        <Button android:gravity="center"
            android:textSize="13sp" android:textColor="#000000"
            android:text="1" android:layout_weight="1"/>
    </TableRow>
</TableLayout>

Please find output of this TableLayout. enter image description here

Let me know if this issue is resolved. If not, I will be happy to help you again.

Enjoy Coding... :)

like image 112
Shreyash Mahajan Avatar answered Sep 27 '22 22:09

Shreyash Mahajan