TextView hiding behind Tabs Layout

Question

I've implemented a tab layout in my app. And have created 3 fragments for each tab. All fragments contain a single TextView and it is a child of NestedScrollView. Everything works as expected until the string passed to the TextView is large enough and needs to be scrolled for viewing it completely. At that time, the text inside TextView hides behind the tabs.

I've tried the answers provided here: Fragment from View Pager hiding behind Tab Bar to no avail.

Here's my code:

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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"
    tools:context=".PrayerActivity">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/Theme.BuddhaPoojapathMarathi.AppBarOverlay">

        <!--<TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:minHeight="?actionBarSize"
            android:padding="@dimen/appbar_padding"
            android:text="@string/app_name"
            android:textAppearance="@style/TextAppearance.Widget.AppCompat.Toolbar.Title" />-->

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary" />
    </com.google.android.material.appbar.AppBarLayout>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

And here's one of the fragments:

<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".Fragment_1">


    <TextView
        android:id="@+id/frag1_tv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="@dimen/text_margin"
        android:textSize="@dimen/text_medium"
        android:layout_gravity="center"
        android:textAlignment="center"
        android:textColor="@color/black"
        android:paddingTop="48dp"
        android:text="@string/buddha_vandana_mar" />

</androidx.core.widget.NestedScrollView>

As seen in the image the first part of the text is hiding behind the tabs.

Update:

PrayerActivity.java

public class PrayerActivity extends AppCompatActivity {

    private ActivityPrayerBinding binding;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        int num = getIntent().getIntExtra("num", 0);
        Bundle bundle = new Bundle();
        bundle.putInt("num", num);

        Log.d("myInt", String.valueOf(num));
        binding = ActivityPrayerBinding.inflate(getLayoutInflater());
        setContentView(binding.getRoot());

        SectionsPagerAdapter sectionsPagerAdapter = new SectionsPagerAdapter(this, getSupportFragmentManager(), num);
        ViewPager viewPager = binding.viewPager;
        viewPager.setAdapter(sectionsPagerAdapter);
        TabLayout tabs = binding.tabs;
        tabs.setupWithViewPager(viewPager);
    }
}

Answer 1

I would suggest you to use RelativeLayout instead CoordinatorLayout. First, Change the layout to RelativeLayout. Second, add attribute id to the AppBarLayout. Last, add attribute layout_below to ViewPager. You can see at below. I did not test the code.

<?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"
    tools:context=".PrayerActivity">

<com.google.android.material.appbar.AppBarLayout
    android:id="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/Theme.BuddhaPoojapathMarathi.AppBarOverlay">

    <!--<TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:minHeight="?actionBarSize"
        android:padding="@dimen/appbar_padding"
        android:text="@string/app_name"
        android:textAppearance="@style/TextAppearance.Widget.AppCompat.Toolbar.Title" />-->



    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary" />
</com.google.android.material.appbar.AppBarLayout>

    <androidx.viewpager.widget.ViewPager
    android:id="@+id/view_pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</LinearLayout>

Answer 2

just put this line in NestedScrollView

android:fillViewport="true"

Answer 3

Please use below code.

<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"
tools:context=".activity.MainActivity">

<RelativeLayout
    android:layout_width="match_parent"
    android:background="@color/black"
    android:layout_gravity="center"
    android:layout_height="@dimen/_40sdp">

    <ImageView
        android:id="@+id/back_btn"
        android:layout_width="@dimen/_26sdp"
        android:layout_height="@dimen/_26sdp"
        android:layout_marginTop="@dimen/_5sdp"
        android:layout_marginLeft="@dimen/_8sdp"
        android:src="@drawable/back_arrow"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/white"
        android:layout_toRightOf="@+id/back_btn"
        android:layout_marginLeft="@dimen/_10sdp"
        android:padding="@dimen/_8sdp"
        android:text="@string/my_listing_text"
        android:textSize="@dimen/_14sdp"/>

</RelativeLayout>

<View
    android:layout_width="match_parent"
    android:layout_height="@dimen/_1sdp"
    android:background="@color/dark_gray"/>

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tablayout"
    android:layout_width="match_parent"
    android:layout_height="@dimen/_40sdp"
    android:background="@color/black"
    app:tabIndicatorColor="@color/white"/>

<androidx.viewpager.widget.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"/>