Android Layout: Center Text and Image View to screen center?

Question

I have this activity layout.xml for a splash-screen, which basically displays what I want. But if I open the App on a bigger or smaller screen device, it's not centered any more.

Is there a way to to put a wrapper around the elemts and center it in height and width to the screen? Is there any other option?

    <?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@color/colorPrimaryDark" >

    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="250dp"
        android:layout_marginBottom="7dp"
        android:text="@string/head_line"
        android:textColor="@color/white"
        android:textSize="50sp"
        android:textStyle="bold" />

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:srcCompat="@mipmap/ic_launcher_round"
        android:layout_gravity="center" />

    <TextView
        android:id="@+id/text2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="7dp"
        android:text="@string/slogan"
        android:textColor="@color/white"
        android:textSize="24sp" />

</LinearLayout>

Now, it looks like this:

Thanks in advance guys!

Answer 1

Try this

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorPrimaryDark"
    android:gravity="center_vertical|center_horizontal"
    android:orientation="vertical">

    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginBottom="7dp"
        android:text="@string/head_line"
        android:textColor="@color/white"
        android:textSize="50sp"
        android:textStyle="bold" />

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        app:srcCompat="@mipmap/ic_launcher_round" />

    <TextView
        android:id="@+id/text2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="7dp"
        android:text="@string/slogan"
        android:textColor="@color/white"
        android:textSize="24sp" />

</LinearLayout>

Answer 2

您可以将android:gravity="center"到LinearLayout并从顶部的TextView移除顶部的边距

Answer 3

You're using margins to position your views. Not a good idea at all.

First thing you should do is remove the top margin on your first TextView (you can keep the bottom margin as you're using it to space it out).

Next, we'd like to play with the layout_gravity of the LinearLayout and set that to Center. But we'll also need to set the layout_width and layout_height to wrap_content .

I took your layout file and made some changes to it. Don't copy and paste it as I changed your ImageView into a TextView and removed references to your resources (so I can easily edit it in Android Studio), but structurally this is what you want:

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:orientation="vertical"
    android:background="@color/colorPrimaryDark" >

    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginBottom="7dp"
        android:text="T1"
        android:textColor="@android:color/white"
        android:textSize="50sp"
        android:textStyle="bold" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="T2"
        android:textColor="@android:color/white"
        android:textSize="24sp" />

    <TextView
        android:id="@+id/text2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="7dp"
        android:text="T3"
        android:textColor="@android:color/white"
        android:textSize="24sp" />
</LinearLayout>

Btw, you might also want to look into using the ConstraintLayout . It might be overkill for a simple layout such as this, but it's good to familiarize yourself with it and this could be a good place to start.

Answer 4

Center your linearLayout and layout gravity. LinearLayout should be like this.

<LinearLayout

    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:layout_gravity="center"
    android:orientation="vertical">

<LinearLayout