CODEWITHSUNDEEP
androidxmllayouttextviewimageview
арно нюм
арно нюм

Reputation: 165

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

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:

enter image description here

Thanks in advance guys!

Upvotes: 1

Views: 2598

Answers (4)

Glaucus
Glaucus

Reputation: 958

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.

Upvotes: 2

Dinith Rukshan Kumara
Dinith Rukshan Kumara

Reputation: 680

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

Upvotes: 1

Nirmal Prajapat
Nirmal Prajapat

Reputation: 1817

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>

Upvotes: 4

LordRaydenMK
LordRaydenMK

Reputation: 13321

You can add android:gravity="center" to the LinearLayout and remove the top margin from the top TextView

Upvotes: 3

Related Questions