Coordinator Layout and Relative Layout issue

Question

When you create a blank Activity in android studio, this is the given layout:

<?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="com.example.MainActivity">

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

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

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

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

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

And the Relative layout (@layout/content_main) goes out of screen:

If you set a button in your relative layout, with layout_alignParentBottom the button sometimes will go out of screen. (It doesn't happen all the time, I have no idea why)

@layout/content_main

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.example.MainActivity"
    tools:showIn="@layout/activity_main">

    <Button
        android:id="@+id/button"
        android:layout_alignParentBottom="true"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:background="@color/green"  
        android:textColor="@color/white"
        android:text="text"
        android:focusable = "true"
        android:focusableInTouchMode = "true"
        />

</RelativeLayout>

Adding Padding bottom to the relative layout won't work. (As it'll only work when the button is off the screen)

I need the button to be at the bottom of the screen always. Can someone tell me how to achieve this?

Like this:

What do you mean by : **I need the button to be at the bottom of the screen always. Can someone tell me how to achieve this?** ? something like first picture? — ʍѳђઽ૯ท, Jan 15 '16 at 22:14
I need the button at the bottom of the screen (Visible) not out of view. This is easily achieved with layout_alignParentBottom="true" but not in this case. http://i.imgur.com/0Fdavx2.png — Marcos Casagrande, Jan 15 '16 at 22:16

ʍѳђઽ૯ท · Accepted Answer · 2016-01-16T05:28:15.683

Try the following code, this will keep that button at the end without going to out of the view:

<?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="com.example.android.myapplication.MainActivity">

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

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

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


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

    <Button
        android:id="@+id/btn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom" />

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

And the Relative layout (@layout/content_main) goes out of screen:

Edit: i think that's because you've set them match_parent.try something like this:

    <?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="com.example.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:background="@color/colorPrimary"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

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

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

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

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

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Button
            android:id="@+id/button"
            android:layout_width="match_parent"
            android:layout_height="70dp"
            android:layout_alignParentBottom="true"
            android:background="@color/colorAccent"
            android:focusable="true"
            android:focusableInTouchMode="true"
            android:text="text"
            android:textColor="@android:color/white" />

    </RelativeLayout>

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

Thanks man, this works, I don't know why I didn't try this. Anyway is there a way in which the relative layout will fill the remaining space, and don't go out of screen? — Marcos Casagrande, Jan 15 '16 at 22:28
If I remove app:layout_behavior="@string/appbar_scrolling_view_behavior the toolbar won't appear. — Marcos Casagrande, Jan 15 '16 at 22:37
Use that toolbar in collapsingtoolbar layout like this:https://github.com/liuguangqiang/AndroidDesignSupportSample/blob/master/app/src/main/res/layout/activity_detail.xml — ʍѳђઽ૯ท, Jan 15 '16 at 22:38
Yes, my code is now working, for now you're the accepted answer, I'll wait to see if someone can fix the relative layout issue, which it is actually what I want to know :) — Marcos Casagrande, Jan 15 '16 at 22:53
While that works without a View Switcher, if that layout is the second child of a VS, this happens: http://imgur.com/xklgzBp. I'll edit my answer with a view switcher example. — Marcos Casagrande, Jan 16 '16 at 16:43
Honestly, i didn't try it with `ViewSwitcher`. that can be a good **new question** with `ViewSwitcher` for causes why this happening.and your title was about `Coordinator Layout and Relative Layout issue` not this one `ViewSwitcher`.but, i'll check it if i had any idea, i'll share it with you. — ʍѳђઽ૯ท, Jan 16 '16 at 16:59
I didn't ask a new question, because I believed it's part of the same issue. But I'll add a follow up question then. Thanks!. — Marcos Casagrande, Jan 16 '16 at 17:02
Do it, i'll check it.yw.`because I believed it's part of the same issue` it is, but if that layout had something like bug what? we should follow the rules my friend ;) and that will help the other users in future :) — ʍѳђઽ૯ท, Jan 16 '16 at 17:03
http://stackoverflow.com/questions/34829776/coordinator-layout-relative-layout-issue-within-a-viewswitcher here it is ;) — Marcos Casagrande, Jan 16 '16 at 17:18

score 2 · Answer 2 · answered Jan 15 '16 at 22:28

2

In @layout/content_main try to remove the following line app:layout_behavior="@string/appbar_scrolling_view_behavior"

answered Jan 15 '16 at 22:28

Rany Albeg Wein

3,304
3
16
26

2

If I remove that, the button appears where it's supposed, but now the toolbar is gone... and I need it :P – Marcos Casagrande Jan 15 '16 at 22:33

Coordinator Layout and Relative Layout issue

2 Answers2

Linked