Center layout Android

Question

How can I center these buttons on Android?

The code I'm using in the layout is:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:orientation="vertical"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent">

      <TextView android:layout_width="fill_parent" 
           android:layout_height="wrap_content" 
           android:text="@string/hello" />

      <LinearLayout android:layout_width="fill_parent"
           android:layout_height="fill_parent"
           android:orientation="horizontal">

           <Button android:text="Test"
                android:layout_width="100px"
                android:layout_height="40px" />
           <Button android:text="Test"
                android:layout_width="100px"
                android:layout_height="40px" />
           <Button android:text="Test"
                android:layout_width="100px"
                android:layout_height="40px" />
           <Button android:text="Test"
                android:layout_width="100px"
                android:layout_height="40px" />
      </LinearLayout>
</LinearLayout>

Solution 1

Make the LinearLayout containing the buttons to wrap_content on width and to have center_horizontal on gravity.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:orientation="vertical"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent">

 <TextView android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:text="@string/hello" />

 <LinearLayout android:layout_width="wrap_content"
      android:layout_height="fill_parent"
      android:orientation="horizontal"
      android:layout_gravity="center_horizontal">
     <Button android:text="Test"
       android:layout_width="100px"
       android:layout_height="40px" />
     <Button android:text="Test"
       android:layout_width="100px"
       android:layout_height="40px" />
     <Button android:text="Test"
       android:layout_width="100px"
       android:layout_height="40px" />
     <Button android:text="Test"
       android:layout_width="100px"
       android:layout_height="40px" />
       </LinearLayout>
</LinearLayout>

Solution 2

I'd like to know if anyone else has any comments on this as well. I've always done it with a TableLayout and set both stretchColumns and collapseColumns on all columns so it scales on all screen sizes. A little like this:

 <TableLayout
  android:layout_width="fill_parent"
  android:layout_height="47dp"
  android:stretchColumns="*"
  android:collapseColumns="*"
  android:padding="0px"
  android:background="@drawable/bottom_bg">
  <TableRow>
    <ImageView
        android:id="@+id/article_button_home"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/button_home_selector"
        android:layout_centerHorizontal="true" />
   <ImageView
        android:id="@+id/article_button_share"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/button_sharearticle_selector"
        android:layout_centerHorizontal="true" />
    <ImageView
        android:id="@+id/article_button_settings"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/button_settings_selector" 
        android:layout_centerHorizontal="true"/>
    <ImageView
        android:id="@+id/article_button_about"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:layout_centerHorizontal="true"      
        android:src="@drawable/button_about_selector"/>
</TableRow>
</TableLayout>

I do wonder if it is the best way though.

Comments

[Imdad Sarkar]

Perfectly Working, Thank you.