I'm trying to center an ImageView
inside a LinearLayout
horizontally and vertically, but I just can't do it.
The main reason why I'm not using a RelativeLayout
for that is because I need the layout_weight
(my Activity
consists of four columns that should be equally divided, and also responsive to different screen widths, each column having an ImageView
centered and unstretched).
Here is my xml so far:
<LinearLayout 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:background="#000"
android:baselineAligned="false"
android:gravity="center"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".Main" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1" >
<ImageView
android:id="@+id/imageButton_speak"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/image_bg"
android:src="@drawable/ic_speak" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1" >
<ImageView
android:id="@+id/imageButton_readtext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/image_bg"
android:src="@drawable/ic_readtext" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1" >
<ImageView
android:id="@+id/imageButton_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/image_bg"
android:src="@drawable/ic_edit" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1" >
<ImageView
android:id="@+id/imageButton_config"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/image_bg"
android:src="@drawable/ic_config" />
</LinearLayout>
</LinearLayout>
android:gravity
handles the alignment of its children,
android:layout_gravity
handles the alignment of itself within its parent.
So use one of these.
<LinearLayout 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:background="#000"
android:baselineAligned="false"
android:gravity="center"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".Main" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center" >
<ImageView
android:id="@+id/imageButton_speak"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/image_bg"
android:src="@drawable/ic_speak" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center" >
<ImageView
android:id="@+id/imageButton_readtext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/image_bg"
android:src="@drawable/ic_readtext" />
</LinearLayout>
...
</LinearLayout>
(Every node except leaf nodes should have android:gravity="center"
.)
or
<LinearLayout 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:background="#000"
android:baselineAligned="false"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".Main" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1" >
<ImageView
android:id="@+id/imageButton_speak"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="@drawable/image_bg"
android:src="@drawable/ic_speak" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1" >
<ImageView
android:id="@+id/imageButton_readtext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="@drawable/image_bg"
android:src="@drawable/ic_readtext" />
</LinearLayout>
...
</LinearLayout>
(Every node except the root node should have android:layout_gravity="center"
.)