Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

View doesn't aligned in the center of layout

I have a simple layout, as follow:

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:text: "NOT CENTRALIZED!" />

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="gone" />   
</RelativeLayout>

The above layout belongs to a Fragment which is loaded inside a ViewPager (which belongs to an Activity - called here as ActivityA.java).

The ActivityA.java xml layout file is like the following:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:stateListAnimator="@animator/elevated_appbar"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:tabIndicatorColor="@android:color/white"
            app:tabMode="fixed" />
</android.support.design.widget.AppBarLayout>

<android.support.v4.view.ViewPager
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

Note that I'm using the CoordinatorLayout and my ViewPager has the app:layout_behavior="@string/appbar_scrolling_view_behavior" attribute.

The little thing that makes me confusing is: Why my TextView is not centralized on the layout since I'm declaring android:layout_centerVertical="true" and android:layout_centerVertical="true" to it?!

Strangely, when I remove the app:layout_scrollFlags="scroll|enterAlways" attribute on android.support.v4.view.ViewPager the content is displayed on the middle of the screen, but... the android.support.v7.widget.Toolbar stops the collapse and expand features.

Demonstrating the issue - image 1

EDIT

On the layout preview, we can see that the android.support.v4.view.ViewPager is not above the navigation bar (but the app:layout_behavior="@string/appbar_scrolling_view_behavior" is needed to put this view bellow the android.support.design.widget.AppBarLayout). When removing this attribute, the android.support.v4.view.ViewPager goes up the navigation bar, but overlaps the android.support.design.widget.AppBarLayout.

Take a look:

With app:layout_behavior="@string/appbar_scrolling_view_behavior":

Demonstrating the issue - image 2

Without app:layout_behavior="@string/appbar_scrolling_view_behavior":

Demonstrating the issue - image 3

EDIT 2

So, I decided to do a test to reproduce this issue on a well referenced project which demonstrates some Material features and the result is...

Demonstrating the issue - cheesesquare project

... the same problem!

If someone wants to reproduce it yourself, only change the fragment_cheese_list.xml to:

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

<android.support.v7.widget.RecyclerView
    android:id="@+id/recyclerview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:visibility="gone" />

<android.support.v7.widget.AppCompatTextView
    android:id="@+id/alertMessage"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    android:layout_centerHorizontal="true"
    android:text="ALSO, NOT CENTRALIZED..." />
</RelativeLayout>
like image 932
Filipe Brito Avatar asked Oct 29 '22 20:10

Filipe Brito


1 Answers

Try adding app:layout_behavior="@string/appbar_scrolling_view_behavior" to your Fragment's layout xml file.

Edit1
Actually it is behaving as it is supposed to. When you have your Viewpager with:app:layout_behavior="@string/appbar_scrolling_view_behavior"

Android shifts your ViewPager down, according to the height of AppBarLayout (Might be adding margin to it). And this margin is readjusted when you scroll your view up. Because that is what scrolling_view_behavior is

enter image description here

And without:app:layout_behavior="@string/appbar_scrolling_view_behavior"

Your ViewPager is independent of AppBarLAyout Hence, no margin thats why your TextView Appears in center in this case.
enter image description here


So, in reality, your TextView is always in center of your ViewPager. Its the ViewPager that shifts. For changing that behavior you might need to implement your own Layout Behavior. This is how android does it.

like image 100
n.arrow001 Avatar answered Nov 15 '22 06:11

n.arrow001