Putting content below AppBarLayout in a CoordinatorLayout

O.O.

I'm very new to Android and I intended to post this to the Android Developers - Google Groups but they seem to say that newbies need to post to Stack Overflow. So I'm here.

I downloaded the most recent version of Android Studio 1.4.1 yesterday, and I followed the instructions on Building Your First App. I did everything up to Starting Another Activity. It seems these instructions are a bit old i.e. for a previous version of the SDK, because they do not reference CoordinatorLayout and AppBarLayout though they appear in the code if you follow the steps. Obviously, I did make minor changes in the code to get this app to work, but not completely.

My Problem: If you look at the images at the bottom of Starting Another Activity you will see that both of them have the title My First App. In my modifications of the code, I could not get this title on both the images/screens. (I should mention that I want to use the more recent version of AppBarLayout and CoordinatorLayout)

Let's focus on the first screen, the activity_my.xml is

<?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:fitsSystemWindows="true"
tools:context=".MyActivity">

<include layout="@layout/content_my" />

<android.support.design.widget.FloatingActionButton 
    android:id="@+id/fab"
    android:layout_width="wrap_content"     
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end" 
    android:layout_margin="@dimen/fab_margin"
    android:src="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>

As mentioned at the bottom of Building a Simple User Interface the content_my.xml looks like:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="horizontal" >

<EditText android:id="@+id/edit_message"
    android:layout_weight="1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:hint="@string/edit_message" />

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/button_send"
    android:onClick="sendMessage"/>
</LinearLayout>

Is there anyway, I can add the AppBarLayout to the activity_my.xml. I have tried something like:

<?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:fitsSystemWindows="true"
tools:context=".MyActivity">

<android.support.design.widget.AppBarLayout 
    android:layout_height="wrap_content"
    android:layout_width="match_parent" 
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar 
        android:id="@+id/toolbar"
        android:layout_width="match_parent" 
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary" 
        app:popupTheme="@style/AppTheme.PopupOverlay" />

</android.support.design.widget.AppBarLayout>


<include layout="@layout/content_my" />

<android.support.design.widget.FloatingActionButton 
    android:id="@+id/fab"
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end" 
    android:layout_margin="@dimen/fab_margin"
    android:src="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>

The problem with this is that the content in content_my.xml goes behind the Toolbar of AppBarLayout rather than below it. Any ideas how to fix this issue?

Cory Charlton

Layouts in a CoordinatorLayout need to define a layout_behavior. Change your content to this:

<?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="horizontal" 
app:layout_behavior="@string/appbar_scrolling_view_behavior"
>

<EditText android:id="@+id/edit_message"
    android:layout_weight="1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:hint="@string/edit_message" />

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/button_send"
    android:onClick="sendMessage"/>
</LinearLayout>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Content behind CoordinatorLayout AppBarLayout

From Dev

AppBarLayout scrolling content below Toolbar

From Dev

How to create AppBarLayout which overlaps content of CoordinatorLayout

From Java

CoordinatorLayout + AppBarLayout + NavigationDrawer

From Dev

ClassNotFoundException coming for AppBarLayout, CoordinatorLayout

From Dev

CoordinatorLayout and AppBarLayout elevation

From Dev

Android AppBarLayout + CollapsingToolbarLayout + CoordinatorLayout

From Dev

Recyclerview with CoordinatorLayout and AppBarLayout

From Dev

Content not shown when recycler view is placed below AppBarLayout

From Dev

How to disable scrolling of AppBarLayout in CoordinatorLayout?

From Dev

Progressbar below Toolbar in CoordinatorLayout

From Dev

Whitespace below CoordinatorLayout in DrawerLayout

From Dev

CoordinatorLayout(AppbarLayout) does not draw toolbar properly

From Dev

CoordinatorLayout/AppBarLayout ExpandableListView being rendered off screen

From Dev

Android CoordinatorLayout + AppbarLayout + Viewpager always scrolling

From Dev

CoordinatorLayout adds space between AppBarLayout and RecyclerView

From Dev

Smooth scroll and Fling with NestedScrollView,AppBarLayout and CoordinatorLayout

From Dev

Smooth scroll and Fling with NestedScrollView,AppBarLayout and CoordinatorLayout

From Java

Add views below toolbar in CoordinatorLayout

From Dev

Putting tab content in the middle

From Java

remove shadow below AppBarLayout widget android

From Dev

Android SupportLib - FrameLayout in CoordinatorLayout with AppBarLayout consuming entire screen-height

From Dev

How to get Adview below Viewpager in CoordinatorLayout

From Java

Position view below another view in CoordinatorLayout in android

From Dev

Putting something below a LazyColumn in Jetpack Compose

From Dev

putting fixed content to flexslider slideshow

From Dev

Putting content next to vertical navigation

From Dev

Putting a file content into an sql query?

From Dev

CSS putting menu inline with the content

Related Related

  1. 1

    Content behind CoordinatorLayout AppBarLayout

  2. 2

    AppBarLayout scrolling content below Toolbar

  3. 3

    How to create AppBarLayout which overlaps content of CoordinatorLayout

  4. 4

    CoordinatorLayout + AppBarLayout + NavigationDrawer

  5. 5

    ClassNotFoundException coming for AppBarLayout, CoordinatorLayout

  6. 6

    CoordinatorLayout and AppBarLayout elevation

  7. 7

    Android AppBarLayout + CollapsingToolbarLayout + CoordinatorLayout

  8. 8

    Recyclerview with CoordinatorLayout and AppBarLayout

  9. 9

    Content not shown when recycler view is placed below AppBarLayout

  10. 10

    How to disable scrolling of AppBarLayout in CoordinatorLayout?

  11. 11

    Progressbar below Toolbar in CoordinatorLayout

  12. 12

    Whitespace below CoordinatorLayout in DrawerLayout

  13. 13

    CoordinatorLayout(AppbarLayout) does not draw toolbar properly

  14. 14

    CoordinatorLayout/AppBarLayout ExpandableListView being rendered off screen

  15. 15

    Android CoordinatorLayout + AppbarLayout + Viewpager always scrolling

  16. 16

    CoordinatorLayout adds space between AppBarLayout and RecyclerView

  17. 17

    Smooth scroll and Fling with NestedScrollView,AppBarLayout and CoordinatorLayout

  18. 18

    Smooth scroll and Fling with NestedScrollView,AppBarLayout and CoordinatorLayout

  19. 19

    Add views below toolbar in CoordinatorLayout

  20. 20

    Putting tab content in the middle

  21. 21

    remove shadow below AppBarLayout widget android

  22. 22

    Android SupportLib - FrameLayout in CoordinatorLayout with AppBarLayout consuming entire screen-height

  23. 23

    How to get Adview below Viewpager in CoordinatorLayout

  24. 24

    Position view below another view in CoordinatorLayout in android

  25. 25

    Putting something below a LazyColumn in Jetpack Compose

  26. 26

    putting fixed content to flexslider slideshow

  27. 27

    Putting content next to vertical navigation

  28. 28

    Putting a file content into an sql query?

  29. 29

    CSS putting menu inline with the content

HotTag

Archive