android:gravity="center" problem, preview different from emulator

Question

Currently, I have this code for this page.

But my preview should that my button is at the center of the second half layout, but in my emulator, it shows it still at the top of the layout.

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

    <RelativeLayout
            android:layout_weight="1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/background_profile">

        <de.hdodenhof.circleimageview.CircleImageView
                android:id="@+id/profile_img"
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:src="@drawable/default_person_icon"
                app:civ_border_color="@android:color/black"
                app:civ_border_width="2dp"
                android:layout_centerInParent="true"
                android:layout_marginTop="100dp"/>
        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="User Email"
                android:textSize="28sp"
                android:textColor="@android:color/white"
                android:layout_below="@+id/profile_img"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="10dp"/>
    </RelativeLayout>
    <LinearLayout
            android:layout_weight="1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:gravity="center">

        <Button
                android:id="@+id/btn_change_password"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Change Password"
                app:cornerRadius="50dp"
                android:layout_marginStart="40dp"
                android:layout_marginEnd="40dp"/>

        <Button
                android:id="@+id/btn_sign_out"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Sign Out"
                app:cornerRadius="50dp"
                android:layout_marginStart="40dp"
                android:layout_marginEnd="40dp"/>

    </LinearLayout>

</LinearLayout>

Here the image for preview

https://i.stack.imgur.com/QLaot.jpg

and here is the image for the emulator

https://i.stack.imgur.com/ED3FP.jpg

score 1 · Accepted Answer · answered Jul 14 '19 at 18:52

Different phones got different screen size, in your layout you are using fixed size on your view (fixed size is android:layout_width="100dp" for example) and the result is that what may look good on one screen (your android studio preview screen) will not look good on another screen (your actual phone).

If you want to create one layout to support all screen sizes you can use ConstraintLayout with guidelines and Chains to support different screen sizes.

Here is an example using ConstaintLayout:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context=".MainActivity">


<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline7"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent=".5" />

<ImageView
    android:id="@+id/imageView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    app:layout_constraintBottom_toTopOf="@+id/guideline7"
    app:layout_constraintEnd_toStartOf="@+id/guideline9"
    app:layout_constraintStart_toStartOf="@+id/guideline8"
    app:layout_constraintTop_toTopOf="parent"
    tools:srcCompat="@tools:sample/avatars[1]" />

<TextView
    android:id="@+id/textView9"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:text="Email"
    app:layout_constraintEnd_toEndOf="@+id/imageView2"
    app:layout_constraintStart_toStartOf="@+id/imageView2"
    app:layout_constraintTop_toBottomOf="@+id/imageView2" />

<Button
    android:id="@+id/button"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    android:text="Button"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/guideline9"
    app:layout_constraintStart_toStartOf="@+id/guideline8"
    app:layout_constraintTop_toTopOf="@+id/guideline7" />

<Button
    android:id="@+id/button2"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:text="Button"
    app:layout_constraintEnd_toStartOf="@+id/guideline9"
    app:layout_constraintStart_toStartOf="@+id/guideline8"
    app:layout_constraintTop_toBottomOf="@+id/button" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline8"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent=".1" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline9"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent=".9" />
</androidx.constraintlayout.widget.ConstraintLayout>

Here is how it will look (I am attaching an image from the layout editor so you could see the constraints and guidelines):

score 0 · Answer 2 · answered Jul 15 '19 at 11:43

You can use the tag android:layout_weight so that you don't have to worry about the different screen sizes. Here I made an example using android:layout_weight, android:layout_gravity and android:gravityfor making a structure you need. Hope it helps you. The screenshot of the structure is here.

You can get more reference about android:layout_weight from here.

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@android:color/holo_blue_dark"
        >

        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:id="@+id/profile_picture"
            android:src="@drawable/user_profile_picture"
            android:layout_centerInParent="true"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/profile_picture"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="10dp"
            android:text="User Email"
            android:textColor="@android:color/white"
            android:textSize="28sp" />
    </RelativeLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical"
        android:gravity="center">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:gravity="center_horizontal">
            <Button
                android:layout_width="200dp"
                android:layout_height="wrap_content"
                android:id="@+id/btn_change_password"
                android:layout_gravity="bottom"
                android:text="change password"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:gravity="center_horizontal">
            <Button
                android:layout_width="200dp"
                android:layout_height="wrap_content"
                android:id="@+id/btn_sign_out"
                android:layout_gravity="top"
                android:text="sign out"/>

        </LinearLayout>
    </LinearLayout>
</LinearLayout>

score 0 · Answer 3 · answered Jul 16 '19 at 06:53

You seem to be doing it right. I guess you just missed adding the weightSum in the parent tag.

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

    <RelativeLayout
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/background_profile">

        <de.hdodenhof.circleimageview.CircleImageView
            android:id="@+id/profile_img"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:src="@drawable/default_person_icon"
            app:civ_border_color="@android:color/black"
            app:civ_border_width="2dp"
            android:layout_centerInParent="true"
            android:layout_marginTop="100dp" a/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="User Email"
            android:textSize="28sp"
            android:textColor="@android:color/white"
            android:layout_below="@+id/profile_img"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="10dp"/>
    </RelativeLayout>
    <LinearLayout
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:gravity="center">

        <Button
            android:id="@+id/btn_change_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Change Password"
            app:cornerRadius="50dp"
            android:layout_marginStart="40dp"
            android:layout_marginEnd="40dp"/>

        <Button
            android:id="@+id/btn_sign_out"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Sign Out"
            app:cornerRadius="50dp"
            android:layout_marginStart="40dp"
            android:layout_marginEnd="40dp"/>

    </LinearLayout>

</LinearLayout>

This seemed to make it work for me. All the best!

android:gravity="center" problem, preview different from emulator

3 Answers3