JDJ
Reputation: 4328
How do you horizontally center a table inside a RelativeLayout in Android?
I have a layout with a header, scrollable content in the center, and a footer.
The footer is a TableLayout that contains two rows.
The problem is that the rows are always aligned to the left of the screen, but I would like to have the entire table centered horizontally.
I've been working with this all day and can't seem to figure it out. I've tried to center it using various gravity attributes, but the table is always aligned to the left.
Here is a picture:
http://postimg.org/image/jr40dopzj/
You can see how the TableLayout in the footer is left-aligned horizontally.
Here is the code I have now:
<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" >
<!-- Header -->
<RelativeLayout
android:id="@+id/header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="#FC9" >
<!-- "Label1:" and editText1 -->
<TextView
android:id="@+id/label1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Label 1:"
android:textSize="20sp"
android:textStyle="bold" />
<EditText
android:id="@+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/label1"
android:layout_marginLeft="5dp"
android:layout_toRightOf="@+id/label1"
android:ems="8"
android:inputType="textMultiLine"
android:textSize="20sp" >
</EditText>
<!-- "Label 2:" and editText2 -->
<TextView
android:id="@+id/label2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/label1"
android:layout_below="@+id/label1"
android:paddingTop="26dp"
android:text="Label 2:"
android:textSize="20sp"
android:textStyle="bold" />
<EditText
android:id="@+id/editText2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/label2"
android:layout_alignLeft="@+id/editText1"
android:layout_toRightOf="@+id/label2"
android:ems="8"
android:inputType="textMultiLine"
android:textSize="20sp" />
</RelativeLayout>
<!-- End header -->
<!-- Footer -->
<!-- I cannot center this TableLayout horizontally. -->
<!-- It is always aligned to the left. -->
<TableLayout
android:id="@+id/footer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#FFF" >
<TableRow
android:weightSum="7"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:id="@+id/labelA"
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="18sp"
android:text="Aaa" />
<TextView
android:id="@+id/labelB"
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="18sp"
android:text="Bbb" />
<TextView
android:id="@+id/labelC"
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="18sp"
android:text="Ccc" />
<TextView
android:id="@+id/labelD"
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="18sp"
android:text="Ddd" />
<TextView
android:id="@+id/labelE"
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="18sp"
android:text="Eee" />
<TextView
android:id="@+id/labelF"
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="18sp"
android:text="Fff" />
<TextView
android:id="@+id/labelG"
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="18sp"
android:text="Ggg" />
</TableRow>
<TableRow
android:weightSum="7"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<CheckBox
android:id="@+id/checkBoxA"
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:checked="true" />
<CheckBox
android:id="@+id/checkBoxB"
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:checked="true" />
<CheckBox
android:id="@+id/checkBoxC"
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:checked="true" />
<CheckBox
android:id="@+id/checkBoxD"
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:checked="true" />
<CheckBox
android:id="@+id/checkBoxE"
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:checked="true" />
<CheckBox
android:id="@+id/checkBoxF"
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:checked="true" />
<CheckBox
android:id="@+id/checkBoxG"
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:checked="true" />
</TableRow>
</TableLayout>
<!-- End footer -->
<!-- Scrollable content in middle of screen -->
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingTop="@dimen/activity_vertical_margin"
android:layout_below="@id/header"
android:layout_above="@id/footer"
android:background="#005" >
</ScrollView>
<!-- End scrollable content -->
</RelativeLayout>
Upvotes: 0
Views: 187
Answers (2)
Ando Masahashi
Reputation: 3122
try this answer
with out adding more layout to 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"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<!-- Header -->
<RelativeLayout
android:id="@+id/header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="#FC9" >
<!-- "Label1:" and editText1 -->
<TextView
android:id="@+id/label1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Label 1:"
android:textSize="20sp"
android:textStyle="bold" />
<EditText
android:id="@+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/label1"
android:layout_marginLeft="5dp"
android:layout_toRightOf="@+id/label1"
android:ems="8"
android:inputType="textMultiLine"
android:textSize="20sp" >
</EditText>
<!-- "Label 2:" and editText2 -->
<TextView
android:id="@+id/label2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/label1"
android:layout_below="@+id/label1"
android:paddingTop="26dp"
android:text="Label 2:"
android:textSize="20sp"
android:textStyle="bold" />
<EditText
android:id="@+id/editText2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/label2"
android:layout_alignLeft="@+id/editText1"
android:layout_toRightOf="@+id/label2"
android:ems="8"
android:inputType="textMultiLine"
android:textSize="20sp" />
</RelativeLayout>
<!-- End header -->
<!-- Footer -->
<!-- I cannot center this TableLayout horizontally. -->
<!-- It is always aligned to the left. -->
<TableLayout
android:id="@+id/footer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#FFF"
android:stretchColumns="0,1,2,3,4,5,6,7" ><!-- I have made change here -->
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="7" >
<TextView
android:id="@+id/labelA"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center" <!--set Gravity -->
android:text="Aaa"
android:textSize="18sp" />
<TextView
android:id="@+id/labelB"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Bbb"
android:gravity="center"
android:textSize="18sp" />
<TextView
android:id="@+id/labelC"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Ccc"
android:gravity="center"
android:textSize="18sp" />
<TextView
android:id="@+id/labelD"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Ddd"
android:gravity="center"
android:textSize="18sp" />
<TextView
android:id="@+id/labelE"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Eee"
android:gravity="center"
android:textSize="18sp" />
<TextView
android:id="@+id/labelF"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Fff"
android:gravity="center"
android:textSize="18sp" />
<TextView
android:id="@+id/labelG"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Ggg"
android:gravity="center"
android:textSize="18sp" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="7" >
<CheckBox
android:id="@+id/checkBoxA"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:checked="true" />
<CheckBox
android:id="@+id/checkBoxB"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:checked="true" />
<CheckBox
android:id="@+id/checkBoxC"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:checked="true" />
<CheckBox
android:id="@+id/checkBoxD"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:checked="true" />
<CheckBox
android:id="@+id/checkBoxE"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:checked="true" />
<CheckBox
android:id="@+id/checkBoxF"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:checked="true" />
<CheckBox
android:id="@+id/checkBoxG"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:checked="true" />
</TableRow>
</TableLayout>
<!-- End footer -->
<!-- Scrollable content in middle of screen -->
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="@id/footer"
android:layout_below="@id/header"
android:background="#005"
android:paddingTop="@dimen/activity_vertical_margin" >
</ScrollView>
<!-- End scrollable content -->
Upvotes: 2
Hareshkumar Chhelana
Reputation: 24848
// try this way hope this will help you...
<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" >
<!-- Header -->
<RelativeLayout
android:id="@+id/header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="#FC9" >
<!-- "Label1:" and editText1 -->
<TextView
android:id="@+id/label1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Label 1:"
android:textSize="20sp"
android:textStyle="bold" />
<EditText
android:id="@+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBaseline="@id/label1"
android:layout_marginLeft="5dp"
android:layout_toRightOf="@id/label1"
android:ems="8"
android:inputType="textMultiLine"
android:textSize="20sp" >
</EditText>
<!-- "Label 2:" and editText2 -->
<TextView
android:id="@+id/label2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@id/label1"
android:layout_below="@id/label1"
android:paddingTop="26dp"
android:text="Label 2:"
android:textSize="20sp"
android:textStyle="bold" />
<EditText
android:id="@+id/editText2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBaseline="@id/label2"
android:layout_alignLeft="@id/editText1"
android:layout_toRightOf="@id/label2"
android:ems="8"
android:inputType="textMultiLine"
android:textSize="20sp" />
</RelativeLayout>
<!-- End header -->
<!-- Footer -->
<!-- I cannot center this TableLayout horizontally. -->
<!-- It is always aligned to the left. -->
<TableLayout
android:id="@+id/footer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#FFF" >
<TableRow
android:weightSum="7"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center">
<TextView
android:id="@+id/labelA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="18sp"
android:text="Aaa" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center">
<TextView
android:id="@+id/labelB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="18sp"
android:text="Bbb" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center">
<TextView
android:id="@+id/labelC"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="18sp"
android:text="Ccc" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center">
<TextView
android:id="@+id/labelD"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="18sp"
android:text="Ddd" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center">
<TextView
android:id="@+id/labelE"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="18sp"
android:text="Eee" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center">
<TextView
android:id="@+id/labelF"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="18sp"
android:text="Fff" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center">
<TextView
android:id="@+id/labelG"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="18sp"
android:text="Ggg" />
</LinearLayout>
</TableRow>
<TableRow
android:weightSum="7"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1">
<CheckBox
android:id="@+id/checkBoxA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:checked="true" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1">
<CheckBox
android:id="@+id/checkBoxB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:checked="true" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1">
<CheckBox
android:id="@+id/checkBoxC"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:checked="true" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1">
<CheckBox
android:id="@+id/checkBoxD"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:checked="true" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1">
<CheckBox
android:id="@+id/checkBoxE"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:checked="true" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1">
<CheckBox
android:id="@+id/checkBoxF"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:checked="true" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1">
<CheckBox
android:id="@+id/checkBoxG"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:checked="true" />
</LinearLayout>
</TableRow>
</TableLayout>
<!-- End footer -->
<!-- Scrollable content in middle of screen -->
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="@dimen/activity_vertical_margin"
android:layout_below="@id/header"
android:layout_above="@id/footer"
android:background="#005" >
</ScrollView>
<!-- End scrollable content -->
</RelativeLayout>
Upvotes: 1
Related Questions
- How can i align my tableLayouts to the center?
- Aligning elements in a RelativeLayout such that one is center_horizontal
- How do I horizontally center this in Android (RelativeLayout)?
- alignment of screen in center when using table layout in android
- how to center table layout inside relative layout
- TableLayout not centering
- Android XML: Center RelativeLayout w/ TableLayout inside LinearLayout
- Center inside RelativeLayout
- centering relative layout on Android
- Set layout_centerVertical to a TableLayout from code