Layout in fragment not centering

Question

I'm building my first proper application for Android. I wish to use the Navigation Drawer Activity to switch between screens and options. So far so good. All working great. But my layouts that load in the content are not aligned properly. See pictures

I have tried to change the layout_width and layout_height to fill_parent, match_parent and wrap_content in all combinations. Also tried adding the gravity center and vertical gravity but so far i have failed.

content layout:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        tools:showIn="@layout/app_bar_main_menu"
        tools:context=".MainMenu">


        <RelativeLayout
                android:id="@+id/relativeLayout"
                android:layout_width="wrap_content"
                android:layout_height="match_parent" />


</androidx.constraintlayout.widget.ConstraintLayout>

the content im trying to put in the content layout:

<?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:layout_editor_absoluteY="81dp">

    <ImageView
            android:layout_width="34dp"
            android:layout_height="34dp" app:srcCompat="@drawable/fragment_client_add_address"
            android:id="@+id/imageView10"
            app:layout_constraintEnd_toStartOf="@+id/editText10"
            android:layout_marginEnd="12dp" android:layout_marginTop="8dp"
            app:layout_constraintTop_toTopOf="@+id/editText10"/>
    <EditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:inputType="textPersonName"
            android:hint="Kontakt broj"
            android:ems="10"
            android:id="@+id/editText9"
            app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent"
            android:layout_marginTop="24dp" app:layout_constraintTop_toBottomOf="@+id/editText11"/>
    <EditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:inputType="textPersonName"
            android:hint="Adresa"
            android:ems="10"
            android:id="@+id/editText10"
            app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent"
            android:layout_marginTop="24dp" app:layout_constraintTop_toBottomOf="@+id/editText9"/>
    <EditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:inputType="textPersonName"
            android:hint="Naziv klijenta"
            android:ems="10"
            android:id="@+id/editText11" android:layout_marginEnd="8dp"
            app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent"
            android:layout_marginTop="64dp" app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintHorizontal_bias="0.518"/>
    <EditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:inputType="textPersonName"
            android:hint="E-Mail"
            android:ems="10"
            android:id="@+id/editText12"
            app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent"
            android:layout_marginTop="24dp" app:layout_constraintTop_toBottomOf="@+id/editText10"/>
    <ImageView
            android:layout_width="34dp"
            android:layout_height="34dp" app:srcCompat="@drawable/round_person_black_48"
            android:id="@+id/imageView11"
            android:layout_marginTop="8dp"
            app:layout_constraintTop_toTopOf="@+id/editText11" app:layout_constraintEnd_toStartOf="@+id/editText11"
            android:layout_marginEnd="12dp"/>
    <ImageView
            android:layout_width="34dp"
            android:layout_height="34dp" app:srcCompat="@drawable/round_call_black_48"
            android:id="@+id/imageView12"
            android:layout_marginTop="8dp"
            app:layout_constraintTop_toTopOf="@+id/editText9" app:layout_constraintEnd_toStartOf="@+id/editText9"
            android:layout_marginEnd="12dp"/>
    <ImageView
            android:layout_width="34dp"
            android:layout_height="34dp" app:srcCompat="@drawable/fragment_client_add_email"
            android:id="@+id/imageView13"
            android:layout_marginTop="8dp"
            app:layout_constraintTop_toTopOf="@+id/editText12" app:layout_constraintEnd_toStartOf="@+id/editText12"
            android:layout_marginEnd="12dp"/>
    <Spinner
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:id="@+id/spinner"
            android:layout_marginTop="24dp"
            app:layout_constraintTop_toBottomOf="@+id/editText12" app:layout_constraintStart_toStartOf="@+id/editText12"
            app:layout_constraintEnd_toEndOf="@+id/editText12" android:entries="@array/clientType"
    />
    <Spinner
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:id="@+id/spinner2" app:layout_constraintStart_toStartOf="@+id/spinner"
            app:layout_constraintEnd_toEndOf="@+id/spinner" android:entries="@array/clientContract"
            app:layout_constraintTop_toBottomOf="@+id/spinner" android:layout_marginTop="32dp"/>
    <Button
            android:text="@string/button_genericConfirm"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:id="@+id/button" android:layout_marginBottom="32dp"
            app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="128dp" app:layout_constraintEnd_toEndOf="parent"
            android:layout_marginEnd="128dp" android:layout_marginTop="8dp"
            app:layout_constraintTop_toBottomOf="@+id/spinner2" app:layout_constraintVertical_bias="1.0"/>
</androidx.constraintlayout.widget.ConstraintLayout>

This is what i expect it to look like:

But in reality this is what it looks like:

@JimaleAbdi where do you mean? Sry i'm still new to android programming — mike6715b, Aug 09 '19 at 22:37
What does the _content layout_ refer to? Is it an activity's layout or navigation drawer's or what? And what is this _content_? Is it a fragment? — jsamol, Sep 16 '19 at 18:14

score 1 · Answer 1 · answered Sep 17 '19 at 05:54

The issue in your RelativeLayout inside your content layout

You need to chnage the width of your RelativeLayout to android:layout_width="match_parent" in your content layout

Try this

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        tools:showIn="@layout/app_bar_main_menu"
        tools:context=".MainMenu">


        <RelativeLayout
                android:id="@+id/relativeLayout"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />


</androidx.constraintlayout.widget.ConstraintLayout>

I didn't update the code on this post but i have already tried that and it didn't help me. — mike6715b, Sep 19 '19 at 17:39

Rama · Answer 2 · 2019-08-11T13:45:50.110

It is always good to use drawablestart instead of imageview in all edit text Please find below xml may it will be helpful

       <?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">

      <EditText
         android:id="@+id/editText11"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_marginTop="64dp"
         android:layout_marginEnd="8dp"
         android:drawableStart="@mipmap/ic_launcher"
         android:ems="10"
         android:hint="Naziv klijenta"
         android:inputType="textPersonName"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintHorizontal_bias="0.518"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toTopOf="parent" />

      <EditText
         android:id="@+id/editText9"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_marginTop="24dp"
         android:drawableStart="@mipmap/ic_launcher"

         android:ems="10"
         android:hint="Kontakt broj"
         android:inputType="textPersonName"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toBottomOf="@+id/editText11" />
    <EditText
    android:id="@+id/editText10"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="24dp"
    android:drawableStart="@mipmap/ic_launcher"
    android:ems="10"
    android:hint="Adresa"
    android:inputType="textPersonName"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/editText9" />


<EditText
    android:id="@+id/editText12"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="24dp"
    android:drawableStart="@mipmap/ic_launcher"
    android:ems="10"
    android:hint="E-Mail"
    android:inputType="textPersonName"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/editText10" />


<Spinner
    android:id="@+id/spinner"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="24dp"
    android:entries="@mipmap/ic_launcher"
    app:layout_constraintEnd_toEndOf="@+id/editText12"
    app:layout_constraintStart_toStartOf="@+id/editText12"
    app:layout_constraintTop_toBottomOf="@+id/editText12" />

 <Spinner
    android:id="@+id/spinner2"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="32dp"
    android:entries="@mipmap/ic_launcher"
    app:layout_constraintEnd_toEndOf="@+id/spinner"
    app:layout_constraintStart_toStartOf="@+id/spinner"
    app:layout_constraintTop_toBottomOf="@+id/spinner" />

   <Button
      android:id="@+id/button"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:layout_marginStart="128dp"
      android:layout_marginTop="8dp"
      android:layout_marginEnd="128dp"
      android:layout_marginBottom="32dp"
      android:text="xxxx"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toBottomOf="@+id/spinner2"
      app:layout_constraintVertical_bias="1.0" />
   </androidx.constraintlayout.widget.ConstraintLayout>

In case you want specific size for your imageview in left use below code

    <?xml version="1.0" encoding="utf-8"?>
      <layer-list xmlns:android="http://schemas.android.com/apk/res/android" 
       >
      <item
      android:drawable="@drawable/icon"
      android:width="@dimen/icon_size"
      android:height="@dimen/icon_size"
      />

     </layer-list >

But my problem is that my content that i want to display in the relativelayout is not centered to left right top and bottom as it is in the " expected result " picture. There you can see i have added constraints so that all the editText fields are centered but in reality they get pushed to the left and my button is completely broken :/ — mike6715b, Aug 10 '19 at 08:25
I run your code in xml and checked for me the edittext is coming in center only the imageview is moving towards to left. when i corrected the drawable left all the edit text was center aligned — Rama, Aug 11 '19 at 12:53
Sorry for the delayed response but your solution is not working :/ — mike6715b, Aug 31 '19 at 14:32

score 0 · Accepted Answer · answered Sep 17 '19 at 06:07

The problem is not with your fragment layout implementation, I just tried in an activity and it is worked properly.

I would say to change the content layout to FrameLayout, which is often used to hold the fragments, more information can be found here :Why is a FrameLayout used for fragments?

The frame layout instead of relative layout should be

<FrameLayout
            android:id="@+id/relativeLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

Just left the id as relativeLayout, but feel free to change it.

Also, if you have such a problem, you can always use the layout inspector, it is in the tools menu, give it a try. Or you can just play with background colors, to check the layout sizes, just like back in time, before layout inspector.

I actually can't believe that it was that simple... Thank you so much for the solution! — mike6715b, Sep 19 '19 at 17:37

score 0 · Answer 4 · answered Sep 17 '19 at 16:23

0

Use FrameLayout instead of relative layout and finally remove the line from parent constraint layout..

tools:layout_editor_absoluteY="81dp"

answered Sep 17 '19 at 16:23

Rezaul Karim

830
8
15

Susheel Tickoo · Answer 5 · 2019-09-20T05:23:13.470

0

You can use the property app:layout_constraintVertical_bias so that it is biased equally to parent. This can also be achieved in layout editor by constraining all 4 sides of the layout to parent.

edited Sep 20 '19 at 05:23

answered Sep 19 '19 at 06:19

Susheel Tickoo

508
1
6
23

Tried that before posting, didn't make a difference. – mike6715b Sep 19 '19 at 17:38
What version of ConstraintLayout library are you using? I have tried exactly your xml and it works fine with "androidx.constraintlayout:constraintlayout:1.1.3" and android 10 emulator. I am attaching an image of same – Susheel Tickoo Sep 20 '19 at 05:21
Seems i'm also using 'androidx.constraintlayout:constraintlayout:1.1.3' but runing and testing the app on my android 7 phone – mike6715b Sep 22 '19 at 09:19

score 0 · Answer 6 · answered Sep 19 '19 at 12:19

try to use like below

<?xml version="1.0" encoding="utf-8"?>
    <androidx.appcompat.widget.LinearLayoutCompat
        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_gravity="center_vertical"
        android:gravity="center_vertical"
        android:layout_height="match_parent">

        <ImageView
                android:layout_width="34dp"
                android:layout_height="34dp"
                app:srcCompat="@drawable/fragment_client_add_address"
                android:id="@+id/imageView10"
                android:layout_marginEnd="12dp"
                android:layout_marginTop="8dp"/>

    </androidx.appcompat.widget.LinearLayoutCompat>

And for content main

<androidx.appcompat.widget.LinearLayoutCompat
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <FrameLayout
            android:id="@+id/frame_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

</androidx.appcompat.widget.LinearLayoutCompat>

Layout in fragment not centering

6 Answers6