I'm trying to use the floating action button widget from the Android support library. The button shows up properly, however, it captures clicks that are not within the button itself. It accepts clicks at least a full radius outside the visible button. I don't know if it's due to the shadow, but I can click even well beyond the visible shadow and the button captures the click. Also, if I set the margins of the button to zero, there is still a large gap between the button and the edges of the screen. I have also tried to set the padding to zero, but it has no effect.
Here is my layout:
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.FloatingActionButton
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="0dp"
android:layout_marginBottom="0dp"
app:elevation="6dp"
app:borderWidth="0dp" />
</android.support.design.widget.CoordinatorLayout>
Related
I'm working on the UI of my project, specifically I'm in a compound view extending a FrameLayout. Inside it I have two buttons, one (the smaller one) on top of the other (the larger one). I managed to make the smaller button be always on top with the 'android:elevation' property. The problem is that when I run the app and I click on the larger button, it hides the smaller one behind it, despite having a lower elevation property. I want the smaller one to be always on top even if the user clicks on the other button, but I can't manage to make it work.
Here is the xml:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="80dp"
android:layout_height="80dp"
android:padding="0dp"
android:layout_margin="0dp">
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:insetTop="0dp"
android:insetBottom="0dp"/>
<Button
android:layout_width="20dp"
android:layout_height="30dp"
android:backgroundTint="#color/black"
android:layout_gravity="bottom|end"
android:insetTop="0dp"
android:insetBottom="0dp"
android:elevation="10dp"/>
</FrameLayout>
you may try to set up translationZ instead elevation (or next to it) - translationZ is intended to be "fixed" elevation and elevation is dynamic, can be animated. note that every Button has a stateListAnimator set up, which is overriding elevation parameter in default implementation. check out what it does in HERE
easy way to fix would be to set for both Buttons android:stateListAnimator="#null", but you will loose some anims when click occur
easiest way would be to have one FrameLayout, inside two additional FrameLayouts and inside each one Button - fastest, but unelegant and not so efficient (but still for two buttons it won't be noticeable)
I have tried to implement the material components bottom app bar, following these guidelines and doing a refactor to AndroidX + updating my AppTheme.
Material components - bottom app bar
So far so good, all working, but the button is cut off in my fragment.
The xml preview however shows this, which seems like everything is fine:
Here is my xml code:
<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"
android:fitsSystemWindows="true">
<!-- Other components and views -->
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bottombar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:elevation="2dp"
app:fabAlignmentMode="center"
app:fabCradleVerticalOffset="10dp"
app:fabCradleMargin="10dp" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|center_horizontal"
android:adjustViewBounds="true"
app:layout_anchor="#id/bottombar"
app:layout_anchorGravity="top|center"
app:srcCompat="#drawable/marker" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
I even increased the fabCradleMargin and the fabCradleOffset - otherwise the button is completely in the bottom and not at all floating in that half circle as it is supposed to...
anyone got any clues for this? Thanks a lot!
So I noticed it has to do with the height of the bottom app bar. If i manually set it to 80dp, the Fab shows as it is supposed to.
I tried around a bit more and noticed this manual height setting is only necessary in fragments. I only placed the bottom app bar in a fragment to test it anyways.
So now I implemented it the same way as in the guideline in my MainActivityand then set up a function showFab(Boolean enable) that can then be called in different fragments based on the need.
Works like a charm, if anyone faces the same issues. I guess this might be as it is not supposed to be implemented in a single fragment only.
I have an overlay that covers my entire screen to provide a simple message when the user launches the app for the very first time. On this overlay is a single button that dismisses the overlay (by setting its visibility to gone). I have a catch-22 that I don't know how to resolve.
First, the xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_main_rootview"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="Activity.MainActivity"
android:orientation="vertical">
<include
android:id="#+id/activity_main_content"
layout="#layout/main_content"/>
<RelativeLayout
android:id="#+id/activity_main_overlay"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone"
android:background="#B3000000">
<Button
android:id="#+id/button dismiss"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="15dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="10dp"
android:layout_marginRight="10dp"
android:text="#string/ok"/>
</RelativeLayout>
</RelativeLayout>
The very first time they launch the app, I set this overlay to be visible. I want them to be able to click the button, which will set the visibility of the overlay to View.GONE. As this code stands, they can click the button and all is well. However, if they click anywhere else on the overlay, the click passes through the overlay and the content behind the overlay responds as if the overlay was not present. I want this overlay to absorb the click, and only respond to the button.
So, the obvious response is to add clickable="true" to the overlay, right? But then, the button itself doesn't respond to the click and the user is stuck on the overlay, thereby defeating the entire purpose of the overlay. Sometimes, if I wait long enough, the button click will occur, but if this happens at all, it is an unacceptably long delay before the button will respond.
How can I get the button to respond to a click and at the same time have the overlay consume all other tap events? Thanks for any help.
Perhaps it is not the cleanest solution, but you can set onclickListener event on the overlay.
for example
RelativeLayout overlay = (RelativeLayout)findViewById(R.id.activity_main_overlay);
overlay.setOnClickListener(new OnClickListener(){
});
//button click
Button btn = findViewById(R.id.button_dismiss);
btn.setOnClickListener(new OnClickListener(){
#Override
public void onClick(View v) {
//button action
}
);
I'm using the Scene/Transition system introduced in 4.4 to simply move an image view from the left to the center of the screen. So the layout for my first scene requires the image to be off screen. I tried android:layout_marginRight but that no effect. What is the correct way to do this?
Use the property translationX or translationY with a negative value. This property sets the horizontal/vertical location of this view relative to its left/top position. You will not see the view off screen in the preview. Run your app and the view must be hidden.
Example:
<FrameLayout 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.support.design.widget.FloatingActionButton
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|start"
android:layout_margin="16dp"
android:translationX="-72dp"/>
</FrameLayout>
And then in the activity or fragment simply invoke the animate() function.
FloatingActionButton button = (FloatingActionButton)findViewById(R.id.button);
button.animate().translationX(0);
Was thinking one could make the image be to the right of something that is already at the right side, that should keep it off screen. Also, potentially just make it "gone" and then on transtion make it appear.
Good day (or evening, or night)
I'm developing an app for android and I'm very curious about one thing. I have an activity, where user chats with another, like "im" chat. There are an EditText on the bottom and some kind of actionbar on the top. What I need is when user enters a message and the software keyboard is on screen, my activity should move up, but the actionbar should still be "glued" to the top of the screen, because it has some valuable controls on it.
Again, that's not an ActionBar, but just a 48dp height layout in a parent vertical linear layout. So I need to know is there an easy way to prevent it from moving to the top, when the layout moves off the screen.
I tried to put everything in a FrameLayout and put this bar on top of it, but on keyboard opens it goes off the screen too...
On you Activity at AndroidManifest you should put this: android:windowSoftInputMode="adjustResize"
Use something like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.myapp.MyActionBar
android:layout_width="match_parent"
android:layout_height="48dp"/>
<LinearLayout
android:id="#+id/mylayout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1dp"/>
<!-- Add your edittext and button -->
</LinearLayout>
This will make sure the actionbar and edittext + button are allways on screen, and the mylayout takes up the rest of the screen. When your keyboard is shown, the mylayout will shrink.
Try adding android:windowSoftInputMode="adjustResize" to your activity in the manifest. This tells Android to completely resize your layout when the keyboard comes up, rather than pan it. Note that if there isn't enough room for the entire layout this still won't work. But you ought to be able to make it work if your top level layout is a RelativeLayout, with the edit text set to align bottom, the top bar to align top, and the middle section to fill_parent and be above the edit text and below the bar.
use a RelativeLayout as your base Layout and add android:layout_alignParentTop="true" to your action bar to keep it up
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:id="#+id/action_bar_layout"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_alignParentTop="true" >
</LinearLayout>
<TextView
android:id="#+id/text_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
</RelativeLayout>