androidcoordinator-layout

Android Tabs and CoordinatorLayout, need to add a row of textViews

Android Studio 3.5.1. Working with the Tabbed Activity template. I really don't understand the CoordinatorLayout stuff.

<?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=".ChecklistActivity">

    <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/AppTheme.AppBarOverlay">

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tabs"
            app:tabMode="scrollable"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary" />
    </com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

This works great. Using Tabs with ListView on each tab, etc.

But, at the bottom of the screen, I want to add a row of TextViews that contain different status info. (e.g. Time since start, Counts, etc.) So I put a LinearLayout at the bottom of the XML. And added a few TextViews. It shows in Design View in Studio. But at the TOP. But when I launch the App on my phone, I don't see it anywhere.

Android Studio Design Mode

So in short, how do I work with this XML (CoordinatorLayout) to add such a 'status bar' to my view at the bottom of the screen?

Solution

  • Use a RelativeLayout as the first child inside the CoordinatorLayout. Have the property android:layout_height="wrap_content" and android:layout_alignParentBottom="true" to the TextViews. The rest, i.e. ViewPager and TabLayout can remain as they are.

    <?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=".ChecklistActivity">

    <!-- You could even use a ScrollView    -->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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

            <com.google.android.material.tabs.TabLayout
                android:id="@+id/tabs"
                app:tabMode="scrollable"
                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"
            android:layout_above="@id/lilayTextViews"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />

        <LinearLayout
            android:id="@+id/lilayTextViews"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:orientation="horizontal">

            <!-- TextViews go here  -->

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Text 1"/>

        </LinearLayout>
    </RelativeLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>