CODEWITHSUNDEEP
androidxmlandroid-layout
Sanjana Nair
Sanjana Nair

Reputation: 2785

Layout to center not coming up in Android

Hi I am trying to set a layout and I have three images in it. I am trying to center the three images with couple of paddings so that it is centered in all screens and resolution. Strangely they get centered in my phone (Nexus 5) and on Samsung devices they are not centered. I am not sure how to fix this?

Please check the screen shot from Samsung.

enter image description here

Here is my xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/layoutrelative"
    android:layout_width="match_parent"
    android:layout_height="?android:attr/actionBarSize"
    android:background="@color/blue" >



    <ImageView
        android:id="@+id/mainImage"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:paddingRight="45dp"
        android:paddingLeft="50dp"
        android:src="@drawable/action_home" />


    <ImageView
        android:id="@+id/favimage"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_toRightOf="@+id/mainImage"
        android:paddingRight="45dp"
        android:paddingLeft="45dp"
        android:src="@drawable/favimage" />


    <ImageView
        android:id="@+id/eyeImage"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_toRightOf="@+id/favimage"
        android:paddingLeft="45dp"
        android:src="@drawable/eyeimage" />

</RelativeLayout>

I am not sure where I am going wrong? Let me know!

Upvotes: 0

Views: 74

Answers (6)

Dhaval Patel
Dhaval Patel

Reputation: 10299

I would suggest you to use LinearLayout here, Using RelativeLayout and setting fix padding will not make it responsive for all screen. You can check the design preview in android studio even before installing in real device for multiple screen.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/layoutrelative"
    android:layout_width="match_parent"
    android:layout_height="?android:attr/actionBarSize"
    android:background="@color/blue"
    android:weightSum="3"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/mainImage"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:src="@drawable/action_home" />

    <ImageView
        android:id="@+id/favimage"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:src="@drawable/favimage" />


    <ImageView
        android:id="@+id/eyeImage"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:src="@drawable/eyeimage" />

</LinearLayout>

Upvotes: 0

IntelliJ Amiya
IntelliJ Amiya

Reputation: 75788

Add android:gravity="center" in your Root layout .

  • android:gravity sets the gravity of the content of the View it's used on.
  • android:layout_gravity sets the gravity of the View or Layout relative to its parent.

Finally 

<?xml version="1.0" encoding="utf-8"?>
 <RelativeLayout 
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/layoutrelative"
   android:layout_width="match_parent"
   android:layout_height="?android:attr/actionBarSize"
   android:background="@color/blue"
   android:gravity="center">

Upvotes: 1

Bhargav Thanki
Bhargav Thanki

Reputation: 4954

add android:layout_alignParentLeft="true" to first ImageView android:layout_centerHorizontal="true" to second ImageView android:layout_alignParentRight="true" to third ImageView

Upvotes: 0

vinothp
vinothp

Reputation: 10059

Use need to use LinearLayout for this. The below code will work for you.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/layoutrelative"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="@color/blue" > 

<LinearLayout
  android:layout_width="match_parent"
  android:layout_height="?android:attr/actionBarSize">

<ImageView
    android:id="@+id/mainImage"
    android:layout_width="0dp"
    android:layout_weight="1"
    android:layout_height="match_parent"
    android:paddingRight="45dp"
    android:paddingLeft="50dp"
    android:src="@drawable/action_home" />


<ImageView
    android:id="@+id/favimage"
    android:layout_width="0dp"
    android:layout_weight="1"
    android:layout_height="match_parent"
    android:layout_toRightOf="@+id/mainImage"
    android:paddingRight="45dp"
    android:paddingLeft="45dp"
    android:src="@drawable/favimage" />


<ImageView
    android:id="@+id/eyeImage"
    android:layout_width="0dp"
    android:layout_weight="1"
    android:layout_height="match_parent"
    android:layout_toRightOf="@+id/favimage"
    android:paddingLeft="45dp"
    android:src="@drawable/eyeimage" />
</LinearLayout>

</RelativeLayout>

This will divide the whole screen width equally. If you just need the same layout to be centred the use android:gravity="center" in your parent RelativeLayout.

Upvotes: 0

Chirag Savsani
Chirag Savsani

Reputation: 6140

Just Add android:gravity="center" in your root layout.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/layoutrelative"
    android:layout_width="match_parent"
    android:gravity="center"
    android:layout_height="?android:attr/actionBarSize"
    android:background="@color/blue" >



    <ImageView
        android:id="@+id/mainImage"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:paddingRight="45dp"
        android:paddingLeft="50dp"
        android:src="@drawable/action_home" />


    <ImageView
        android:id="@+id/favimage"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_toRightOf="@+id/mainImage"
        android:paddingRight="45dp"
        android:paddingLeft="45dp"
        android:src="@drawable/favimage" />


    <ImageView
        android:id="@+id/eyeImage"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_toRightOf="@+id/favimage"
        android:paddingLeft="45dp"
        android:src="@drawable/eyeimage" />

</RelativeLayout>

Upvotes: 3

Kastriot Dreshaj
Kastriot Dreshaj

Reputation: 1121

add android:layout_centerInParent="true" to your child items

Upvotes: 0

Related Questions