FloatingActionButton too high over BottomAppBar
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I added a FAB to a BottomAppBar from API 28 like in the XML below. The problem is that it floats too high above the bottom bar instead of sitting in the cradle. There is no change if I set app:fabCradleVerticalOffset to 0dp.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout android:paddingTop="30dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.design.bottomappbar.BottomAppBar
android:id="@+id/bottomAppBar"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_gravity="bottom"
app:backgroundTint="@android:color/white"
app:fabAlignmentMode="center" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fabIncrement"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_exposure_plus_1_black_24dp"
app:backgroundTint="@color/colorPrimary"
app:fabSize="normal"
app:layout_anchor="@id/bottomAppBar" />
</android.support.design.widget.CoordinatorLayout>
android 
android-layout floating-action-button android-bottomappbar asked Jan 4 at 18:30
BenjoyoBenjoyo
203311
add a comment |
I added a FAB to a BottomAppBar from API 28 like in the XML below. The problem is that it floats too high above the bottom bar instead of sitting in the cradle. There is no change if I set app:fabCradleVerticalOffset to 0dp.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout android:paddingTop="30dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.design.bottomappbar.BottomAppBar
android:id="@+id/bottomAppBar"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_gravity="bottom"
app:backgroundTint="@android:color/white"
app:fabAlignmentMode="center" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fabIncrement"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_exposure_plus_1_black_24dp"
app:backgroundTint="@color/colorPrimary"
app:fabSize="normal"
app:layout_anchor="@id/bottomAppBar" />
</android.support.design.widget.CoordinatorLayout>
asked Jan 4 at 18:30
BenjoyoBenjoyo
203311
add a comment |
I added a FAB to a BottomAppBar from API 28 like in the XML below. The problem is that it floats too high above the bottom bar instead of sitting in the cradle. There is no change if I set app:fabCradleVerticalOffset to 0dp.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout android:paddingTop="30dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.design.bottomappbar.BottomAppBar
android:id="@+id/bottomAppBar"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_gravity="bottom"
app:backgroundTint="@android:color/white"
app:fabAlignmentMode="center" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fabIncrement"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_exposure_plus_1_black_24dp"
app:backgroundTint="@color/colorPrimary"
app:fabSize="normal"
app:layout_anchor="@id/bottomAppBar" />
</android.support.design.widget.CoordinatorLayout>
asked Jan 4 at 18:30
BenjoyoBenjoyo
203311
I added a FAB to a BottomAppBar from API 28 like in the XML below. The problem is that it floats too high above the bottom bar instead of sitting in the cradle. There is no change if I set app:fabCradleVerticalOffset to 0dp.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout android:paddingTop="30dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.design.bottomappbar.BottomAppBar
android:id="@+id/bottomAppBar"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_gravity="bottom"
app:backgroundTint="@android:color/white"
app:fabAlignmentMode="center" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fabIncrement"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_exposure_plus_1_black_24dp"
app:backgroundTint="@color/colorPrimary"
app:fabSize="normal"
app:layout_anchor="@id/bottomAppBar" />
</android.support.design.widget.CoordinatorLayout>
asked Jan 4 at 18:30
BenjoyoBenjoyo
203311
asked Jan 4 at 18:30
BenjoyoBenjoyo
203311
asked Jan 4 at 18:30
BenjoyoBenjoyo
203311
asked Jan 4 at 18:30
BenjoyoBenjoyo
203311
asked Jan 4 at 18:30
BenjoyoBenjoyo
203311
203311
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
This appears to be a bug (or maybe a feature) of BottomAppBar. The vertical offset of the FAB is dependent on the height of the BottomAppBar; if you set layout_height to be 48dp instead, it will sit very nicely in the cradle. On the other hand, if you set the height to be 200dp you'll see that the FAB is even farther away.
Additionally (and unfortunately), app:fabCradleVerticalOffset must be a positive value. If you try to use a negative value (to push the FAB down), the app will crash when it runs.
I don't see any public API that will let you solve this. Instead you'll just have to use a smaller height for your BottomAppBar. Perhaps you'll be able to stitch two views together to simulate a taller bar.
answered Jan 4 at 19:22
Ben P.Ben P.
25.3k32252
Wow, thank you. I would consider this a bug. I was able to fix it with normal app bar height and a margin on the bottom (and white background).
– Benjoyo
Jan 4 at 21:12
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54044293%2ffloatingactionbutton-too-high-over-bottomappbar%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
This appears to be a bug (or maybe a feature) of BottomAppBar. The vertical offset of the FAB is dependent on the height of the BottomAppBar; if you set layout_height to be 48dp instead, it will sit very nicely in the cradle. On the other hand, if you set the height to be 200dp you'll see that the FAB is even farther away.
Additionally (and unfortunately), app:fabCradleVerticalOffset must be a positive value. If you try to use a negative value (to push the FAB down), the app will crash when it runs.
I don't see any public API that will let you solve this. Instead you'll just have to use a smaller height for your BottomAppBar. Perhaps you'll be able to stitch two views together to simulate a taller bar.
answered Jan 4 at 19:22
Ben P.Ben P.
25.3k32252
Wow, thank you. I would consider this a bug. I was able to fix it with normal app bar height and a margin on the bottom (and white background).
– Benjoyo
Jan 4 at 21:12
add a comment |
This appears to be a bug (or maybe a feature) of BottomAppBar. The vertical offset of the FAB is dependent on the height of the BottomAppBar; if you set layout_height to be 48dp instead, it will sit very nicely in the cradle. On the other hand, if you set the height to be 200dp you'll see that the FAB is even farther away.
Additionally (and unfortunately), app:fabCradleVerticalOffset must be a positive value. If you try to use a negative value (to push the FAB down), the app will crash when it runs.
I don't see any public API that will let you solve this. Instead you'll just have to use a smaller height for your BottomAppBar. Perhaps you'll be able to stitch two views together to simulate a taller bar.
answered Jan 4 at 19:22
Ben P.Ben P.
25.3k32252
Wow, thank you. I would consider this a bug. I was able to fix it with normal app bar height and a margin on the bottom (and white background).
– Benjoyo
Jan 4 at 21:12
add a comment |
This appears to be a bug (or maybe a feature) of BottomAppBar. The vertical offset of the FAB is dependent on the height of the BottomAppBar; if you set layout_height to be 48dp instead, it will sit very nicely in the cradle. On the other hand, if you set the height to be 200dp you'll see that the FAB is even farther away.
Additionally (and unfortunately), app:fabCradleVerticalOffset must be a positive value. If you try to use a negative value (to push the FAB down), the app will crash when it runs.
I don't see any public API that will let you solve this. Instead you'll just have to use a smaller height for your BottomAppBar. Perhaps you'll be able to stitch two views together to simulate a taller bar.
answered Jan 4 at 19:22
Ben P.Ben P.
25.3k32252
This appears to be a bug (or maybe a feature) of BottomAppBar. The vertical offset of the FAB is dependent on the height of the BottomAppBar; if you set layout_height to be 48dp instead, it will sit very nicely in the cradle. On the other hand, if you set the height to be 200dp you'll see that the FAB is even farther away.
Additionally (and unfortunately), app:fabCradleVerticalOffset must be a positive value. If you try to use a negative value (to push the FAB down), the app will crash when it runs.
I don't see any public API that will let you solve this. Instead you'll just have to use a smaller height for your BottomAppBar. Perhaps you'll be able to stitch two views together to simulate a taller bar.
answered Jan 4 at 19:22
Ben P.Ben P.
25.3k32252
answered Jan 4 at 19:22
Ben P.Ben P.
25.3k32252
answered Jan 4 at 19:22
Ben P.Ben P.
25.3k32252
answered Jan 4 at 19:22
Ben P.Ben P.
25.3k32252
25.3k32252
Wow, thank you. I would consider this a bug. I was able to fix it with normal app bar height and a margin on the bottom (and white background).
– Benjoyo
Jan 4 at 21:12
add a comment |
Wow, thank you. I would consider this a bug. I was able to fix it with normal app bar height and a margin on the bottom (and white background).
– Benjoyo
Jan 4 at 21:12
Wow, thank you. I would consider this a bug. I was able to fix it with normal app bar height and a margin on the bottom (and white background).
– Benjoyo
Jan 4 at 21:12
Wow, thank you. I would consider this a bug. I was able to fix it with normal app bar height and a margin on the bottom (and white background).
– Benjoyo
Jan 4 at 21:12
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54044293%2ffloatingactionbutton-too-high-over-bottomappbar%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
