Moving an image to the center in a layout

Question

I wonder how to move the linearLayout2 to the center of linearLayout1? The imageView should be in the center

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
        android:id="@+id/linearLayout1"
        android:background="@android:color/transparent"
        android:layout_marginTop="15dp"
        android:layout_marginBottom="15dp"
        android:layout_width="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto"
        android:orientation="vertical"
        android:gravity="center_horizontal"
        android:layout_height="wrap_content" xmlns:android="http://schemas.android.com/apk/res/android">

    <ImageView
            android:layout_gravity="center"
            android:background="@drawable/circle"
            android:layout_marginTop="75dp"
            android:src="@mipmap/ic_launcher_round"
            android:id="@+id/appsLogo"
            android:layout_width="120dp"
            android:layout_height="120dp"/>

    <LinearLayout android:layout_width="250dp" android:layout_height="220dp"
                  android:id="@+id/linearLayout2"
                  android:layout_below="@+id/appsLogo"
                  android:background="@color/white"
                  android:orientation="vertical">

        <TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
                  android:layout_gravity="center|bottom"
                  android:textColor="@color/colorPrimaryDark"
                  android:layout_marginTop="10dp"
                  android:textSize="25dp"
                  android:text="Choose an option"/>

        <Button android:layout_width="150dp" android:layout_height="50dp"
                android:layout_gravity="center"
                android:layout_marginTop="20dp"
                android:textColor="@color/white"
                android:id="@+id/cameraBtn"
                android:background="@color/lightseagreen"
                android:text="Camera"/>

        <Button android:layout_width="150dp" android:layout_height="50dp"
                android:layout_marginTop="20dp"
                android:layout_gravity="center"
                android:textColor="@color/white"
                android:id="@+id/galleryBtn"
                android:background="@color/darkgrey"
                android:text="Gallery"/>
    </LinearLayout>
</LinearLayout>

Current Output

linearLayout2 should move up until reach the imageView center.

What is your expected output and current output can u share screenshot for both — AskNilesh, Oct 26 '18 at 07:45
Use constraint layout or RelativeLayout or framelayout for your requirements. — Umair, Oct 26 '18 at 07:48
@NileshRathod `linearLayout2` should move up until reach the `imageView` center. — John Joe, Oct 26 '18 at 07:50
Of course it won't work since it is a `LinearLayout` ! Use a `RelativeLayout` on the root — Ionut J. Bejan, Oct 26 '18 at 07:51
use android layout weight and weighSum https://stackoverflow.com/questions/7452741/what-is-androidweightsum-in-android-and-how-does-it-work this will give u an idea about it — PushpikaWan, Oct 26 '18 at 07:51
Use `RelativeLayout` or `ConstrainLayout` as a parent layout. — Piyush, Oct 26 '18 at 07:56
@JohnJoe check my answer below it will give you what you want — Umair, Oct 26 '18 at 07:59
how about setting your image as background to your linear layout. — karan, Oct 26 '18 at 08:15

AskNilesh · Accepted Answer · 2018-10-26T08:03:34.043

Try this using RelativeLayout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/linearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="15dp"
    android:layout_marginBottom="15dp"
    android:background="@android:color/transparent"
    android:gravity="center"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/appsLogo"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_gravity="center"
        android:layout_marginTop="75dp"
        android:layout_centerInParent="true"
        android:background="@drawable/ic_marker"
        android:src="@mipmap/ic_launcher_round" />

    <LinearLayout
        android:id="@+id/linearLayout2"
        android:layout_centerInParent="true"
        android:layout_below="@id/appsLogo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center|bottom"
            android:layout_marginTop="10dp"
            android:text="Choose an option"
            android:textColor="@color/colorPrimaryDark"
            android:textSize="25dp" />

        <Button
            android:id="@+id/cameraBtn"
            android:layout_width="150dp"
            android:layout_height="50dp"
            android:layout_gravity="center"
            android:layout_marginTop="20dp"
            android:text="Camera" />

        <Button
            android:id="@+id/galleryBtn"
            android:layout_width="150dp"
            android:layout_height="50dp"
            android:layout_gravity="center"
            android:layout_marginTop="20dp"
            android:text="Gallery" />
    </LinearLayout>


</RelativeLayout>

UPDATE

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/linearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="15dp"
    android:layout_marginBottom="15dp"
    android:background="@android:color/transparent">


    <LinearLayout
        android:id="@+id/linearLayout2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingTop="80dp"
        android:paddingStart="20dp"
        android:paddingEnd="20dp"
        android:background="@color/colorAccent"
        android:layout_gravity="center"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center|bottom"
            android:layout_marginTop="10dp"
            android:text="Choose an option"
            android:textColor="@color/colorPrimaryDark"
            android:textSize="25dp" />

        <Button
            android:id="@+id/cameraBtn"
            android:layout_width="150dp"
            android:layout_height="50dp"
            android:layout_gravity="center"
            android:layout_marginTop="20dp"
            android:text="Camera" />

        <Button
            android:id="@+id/galleryBtn"
            android:layout_width="150dp"
            android:layout_height="50dp"
            android:layout_gravity="center"
            android:layout_marginTop="20dp"
            android:text="Gallery" />
    </LinearLayout>

    <ImageView
        android:id="@id/linearLayout2"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_centerInParent="true"
        android:layout_gravity="center"
        android:layout_marginTop="75dp"
        android:background="@drawable/ic_marker"
        android:src="@mipmap/ic_launcher_round"
        app:layout_anchor="@id/linearLayout2"
        app:layout_anchorGravity="top|center" />


</android.support.design.widget.CoordinatorLayout>

not familiar with `CoordinatorLayout`, but the answer helped. Thanks! — John Joe, Oct 26 '18 at 08:44

score 0 · Answer 2 · answered Oct 26 '18 at 08:03

Add android:layout_gravity="center" to your Linear Layout 2. Difference between android:layout_gravity="center" and android:gravity="center" is explained:

android:layout_gravity="center" This will set the layout to the center of its parent layout.

android:gravity="center" This will set the child contents of this layout at its center.

For more detailed explanations on the difference between these two, check here.

Moving an image to the center in a layout

2 Answers2