Floating Action Button bad rendering - android

I'm getting some troubles with a Floating Action Button in my application. In Android Studio emulator it looks good, both in the "design" view of the xml file that in the emulator of the app, but in a real device, when I run the app it doesn't have a circular shape, but it's oval.
Furthermore, this error happens only on some execution... Yesterday the FAB was circular also on my device, but not today (I haven't modified the xml part and on the Java side I don't handle its aspect)...
This is my .xml file where I define the button:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/coor"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="1">
<RelativeLayout
android:id="#+id/relative"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="#dimen/activity_horizontal_margin"
android:layout_weight="0.88">
<!-- Other elements-->
<!-- Parent element-->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/etEntrate"
android:textSize="#dimen/subtitles"
android:padding="#dimen/activity_horizontal_margin"
android:layout_alignRight="#+id/data"
android:layout_alignEnd="#+id/data"
android:layout_below="#+id/etSpese"
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:layout_marginEnd="#dimen/activity_horizontal_margin"
android:layout_marginTop="#dimen/activity_horizontal_margin"
android:layout_marginBottom="#dimen/activity_horizontal_margin"/>
<!--FAB-->
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
app:srcCompat="#drawable/plus"
android:layout_alignTop="#+id/etEntrate"
android:layout_marginTop="59dp"
android:layout_alignLeft="#+id/etEntrate"
android:layout_alignStart="#+id/etEntrate"
android:layout_alignRight="#+id/etEntrate"
android:layout_alignEnd="#+id/etEntrate" />
<!--other elements-->
</RelativeLayout>
</LinearLayout>
and here there are two pictures of how I see the FAB on my device and how it looks on the emulator:
FAB on my device:
FAB on the design view of Android Studio
Has anyone some idea about this? Thank you!

Of course FAB width and height are set to wrap_content but you are trying to align to both left and right, this is why it stretches.
Just remove either one of them.

When you are using Gravity in Horizontal Orientation, you have to use layout_width=0dp & in case of vertical Orientation, layout_height=0dp for every child inside layout.
or
just remove floating action button from Relative Layout because you are already using Coordinate Layout.
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/coor"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/relative"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="#dimen/activity_horizontal_margin"
android:layout_weight="0.88">
<!-- Other elements-->
<!-- Parent element-->
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/etEntrate"
android:textSize="#dimen/subtitles"
android:padding="#dimen/activity_horizontal_margin"
android:layout_alignRight="#+id/data"
android:layout_alignEnd="#+id/data"
android:layout_below="#+id/etSpese"
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:layout_marginEnd="#dimen/activity_horizontal_margin"
android:layout_marginTop="#dimen/activity_horizontal_margin"
android:layout_marginBottom="#dimen/activity_horizontal_margin"/>
<!--FAB-->
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:clickable="true"
app:srcCompat="#drawable/plus"
android:layout_alignTop="#+id/etEntrate"
android:layout_marginTop="59dp"
android:layout_alignLeft="#+id/etEntrate"
android:layout_alignStart="#+id/etEntrate"
android:layout_alignRight="#+id/etEntrate"
android:layout_alignEnd="#+id/etEntrate" />
<!--other elements-->
</RelativeLayout>

Related

Why is the look of the activity different in the Android Studio preview than on the device?

I created an navigation drawer activity and found that its content page looks different in the preview.
This is the preview.
And this is the AVD appearance (it looks like a real device too).
XML code is:
<?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="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.xy.xy.HomePage">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="160sp"
android:layout_marginLeft="5sp"
android:layout_marginRight="5sp"
android:layout_marginTop="5sp">
<ImageView
android:id="#+id/TestMenuImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#string/app_name"
app:srcCompat="#drawable/bg1"
tools:scaleType="centerCrop" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
tools:background="#color/hbm_text_background">
<TextView
android:id="#+id/TestMenuName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5sp"
android:contentDescription="#string/app_name"
android:text="#string/test"
android:textColor="#color/white" />
</RelativeLayout>
<Button
android:id="#+id/TestMenuButton"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
</LinearLayout>
What do you think where the problem is?
Try adding android:scaleType="fitXY" in ImageView like 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="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.xy.xy.HomePage">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="160sp"
android:layout_marginLeft="5sp"
android:layout_marginRight="5sp"
android:layout_marginTop="5sp">
<ImageView
android:id="#+id/TestMenuImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#string/app_name"
app:srcCompat="#drawable/bg1"
android:scaleType="fitXY"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
tools:background="#color/hbm_text_background">
<TextView
android:id="#+id/TestMenuName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5sp"
android:contentDescription="#string/app_name"
android:text="#string/test"
android:textColor="#color/white" />
</RelativeLayout>
<Button
android:id="#+id/TestMenuButton"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
</LinearLayout>
That's probably a little bug with ImageViews´ previews in Android Studio,
Hope it helps
EDIT: I see you've included the style file and it does appear that your app is running the same style (AppTheme) as your preview so I think we can possibly rule out that as a culprit.
I doubt this makes a difference but I noticed your preview is running api 27 and your device is running api 27.
Try removing the
tools:context="com.xy.xy.HomePage" and see if it makes a difference.
The preview can only show you the current view. It doesn't know the parent view. The child view may have a parent view that constricts the size of the child view. Let's say that your image is set to width="match_parent". In this case, the preview may expand the image to fill the full width but at runtime your image my be placed inside a parent with a width="100dp" which would cause the image to have a width of only 100dp. Padding and margin of the parent view can also cause an issue.
If this isn't the problem then it may be a styling issue. I'd have to see more of your Theme and Style setup in order to know for sure. Your preview might be showing you a different style/theme than what you are actually using at runtime.

How do i fill up the drawerLayout

I designed my layout for headerView and wanted to add an image icon on its right side,just like the photo.
The problem is that it will show the spaces like in the image, even if I delete the image layout,the spaces are still there.
I try to change the parent layout or child layout for their layout width, any parameter like math parent or wrap content or give a dp.
I tried the official demo to fix it , but it did not work.
Can anyone teach me how to do this?
My nav_heafer.xml:
<?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"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#66CDAA"
android:orientation="horizontal">
<!--the left navigationView-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp">
<!--the left icon-->
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
app:srcCompat="#drawable/ic_grid_on_black_24dp" />
<!--the left textView-->
<TextView
android:id="#+id/logIn"
android:textColor="#android:color/background_light"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/pageLogIn"
android:background="?android:attr/selectableItemBackground"
android:clickable="true"/>
<!--the left button-->
<Button
android:id="#+id/logOut"
android:text="#string/logOut"
android:layout_width="65dp"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
<!--I just want a outstanding icon over here,on the right side of navigationView-->
<!--I try add the LinearLayout,but it shows strange-->
</LinearLayout>
[1]: https://i.stack.imgur.com/hQy1d.png
[2]: https://i.stack.imgur.com/E9jyu.png
My MainActivity xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="false"
tools:context="com.example.user.taiwandigestionsociety_v11.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF">
<android.support.v7.widget.Toolbar
android:id="#+id/toolBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:theme="#style/ToolBarStyle"
app:layout_scrollFlags="scroll|enterAlways"
android:background="#color/colorPrimary">
</android.support.v7.widget.Toolbar>
<FrameLayout
android:id="#+id/mainFrame"
android:layout_gravity="end"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.design.widget.AppBarLayout>
<!--control navigationView width-->
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="230dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#android:color/white"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header"
app:menu="#menu/drawer_menu">
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
all right, finally i understood your problem and solved.This should give you something like below.
so let's get started!
very first of all you want to remove the white background behind your icon, so set transparent background to your navigation view as shown below.
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
<!-- it works as transparent background color -->
android:background="#android:color/transparent"
app:headerLayout="#layout/navigation_header_support" />
for your custom header, you should use relative layout as parent because you want your close icon to be at the most right side of your navigation panel. so we can align that close icon according to parent. this time set background color to your direct child of your relative parent layout, as i did for linear layout.
In order to fit the icon within relative layout, leave some margin from right for linear layout, so leftovers right margin space will be occupied by your icon. set the same width of your icon as much space you pushed your linear layout from right. Here i leave 32dp margin from right, and set the width of my icon to match it.
For proper position of that icon i used the following attributes. You should adjust yours.
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
The nav_header.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:paddingTop="64dp"
<!-- background color -->
android:background="#color/blue_2"
android:layout_marginRight="32dp"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:textColor="#android:color/white"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/activity_horizontal_margin"
android:drawableLeft="#drawable/ic_pin_primary"
android:drawablePadding="#dimen/activity_horizontal_margin"
android:drawableStart="#drawable/ic_pin_primary"
android:gravity="center_vertical"
android:typeface="normal"
android:textSize="18sp"
android:text="Location"
android:textStyle="bold" />
<!-- Other items go here -->
</LinearLayout>
<ImageView
android:background="#color/blue_2"
android:layout_alignParentRight="true"
android:layout_marginTop="64dp"
android:layout_alignParentTop="true"
android:src="#drawable/ic_pencil"
android:layout_width="32dp"
android:layout_height="32dp" />
</RelativeLayout>
all right this is not an answer to your question. But you can improve your layout as well as performance. Then change your nav layout in your question according to this and update your question once again. then it could be more readable and easy to understand your problems. so anybody could find it easy to answer
Instead using a linear layout with orientation horizontal for icon and textView you can do instead as i shown below.
You current Implementation:
<LinearLayout
android:layout_marginTop="30dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageView9"
android:layout_marginLeft="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#drawable/ic_grid_on_black_24dp" />
<TextView
android:id="#+id/newInformation"
android:textSize="15dp"
android:layout_marginLeft="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/newInformation"
android:textColor="#android:color/background_light"/>
</LinearLayout>
Now change that to something like this :
<TextView
android:id="#+id/person_address"
android:layout_width="match_parent"
android:layout_height="wrap_content"
<!-- this is where your icon goes -->
android:drawableLeft="#drawable/ic_grid_on_black_24dp"
android:drawableStart="#drawable/ic_grid_on_black_24dp"
<!-- your icon's padding -->
android:drawablePadding="#dimen/activity_horizontal_margin"
android:gravity="center_vertical" />
please change your layout into something like this, then i could try to answer your question.

Android - Padding/Gap on the left of toolbar's child layout

I'm stuck with an issue and I have browsed the entire internet for a solution but nothing is working for me.
I have added an imageview inside my toolbar but it's slightly towards the right. It doesn't align centrally, it's shifted a bit towards the right. When i align the imageview to the left, there's an unknown padding/gap between the imageview and the left side of the toolbar. Following is my XML code:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<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=".NavigationDrawerHomeScreen.BaseActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
app:elevation="0dp">
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar_home_activity"
android:layout_width="match_parent"
android:layout_height="45dp"
android:contentInsetLeft="0dp"
android:contentInsetStart="0dp"
android:contentInsetStartWithNavigation="0dp"
android:minHeight="?attr/actionBarSize"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/logo_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/fixer_title_thick" />
</RelativeLayout>
<android.support.v7.widget.SearchView
android:id="#+id/search_home"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:showAsAction="ifRoom"
android:visibility="gone">
</android.support.v7.widget.SearchView>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/container_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/home_bg" />
</FrameLayout>
<!--<TextView-->
<!--android:layout_width="wrap_content"-->
<!--android:layout_height="wrap_content"-->
<!--android:layout_centerInParent="true"-->
<!--android:text="this is base" />-->
</android.support.design.widget.CoordinatorLayout>
</RelativeLayout>
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#2A2929"
android:backgroundTint="#2A2929"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_home_customer"
app:itemTextAppearance="#style/NavDrawerTextStyle"
app:itemTextColor="#fff"
app:menu="#menu/activity_home_customer_drawer">
<LinearLayout
android:id="#+id/footer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:clickable="true"
android:orientation="vertical">
<!-- any addition stuff you want in yoour footer layout -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="50dp"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Set Search Radius"
android:textColor="#color/white" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:clipChildren="false">
<com.crystal.crystalrangeseekbar.widgets.CrystalSeekbar
android:id="#+id/rangeSeekbar1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:bar_color="#color/blue"
app:left_thumb_color="#color/blue_dark" />
<TextView
android:id="#+id/textMin1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/rangeSeekbar1"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_marginTop="5dp"
android:text="0"
android:textColor="#color/white"
android:textSize="16dp" />
<TextView
android:id="#+id/textMax1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#id/rangeSeekbar1"
android:layout_marginEnd="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="5dp"
android:text="100"
android:textColor="#color/white"
android:textSize="16dp" />
</RelativeLayout>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="#1E88E5">
<TextView
android:id="#+id/logout_footer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginBottom="20dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:drawableLeft="#drawable/ic_logout_white_24dp"
android:drawablePadding="32dp"
android:text="Logout"
android:textColor="#fff"
android:textSize="18sp" />
</RelativeLayout>
</LinearLayout>
</android.support.design.widget.NavigationView>
The app:contentinset/android:contentinset solution works for some people but it doesnt work for me.
here's the image http://imgur.com/a/Vp2g6.
I had this same problem, and I tried a lot of things like setting
app:contentInsetStart ="0dp" ;
app:contentInsetStartWithNavigation = "0dp" ;
It didn't work. I even set them to a negative value, but it didn't work. I tried adding a right margin to my child view but it reduced the visible size of child view instead of occupying that left space. So probably child views are not allowed in this space.
So after spending some time I figured there are 2 ways to workaround this problem, one is preferred other I'd not prefer. First let me tell you the one I do not prefer:
Custom Implementation of the Up button: This problem only arises when in your Java Class for this layout you set this toolbar as your ActionBar and you
setDisplayHomeAsUpEnabled(true);
Without this command this problem doesn't exist. So if you don't use the default back button and implement one your own by putting an imageView and providing onClick implementation, this should work fine.
Make ChildViews as rather Siblings: The other method is using the property of toolbar of it being just another view.
I prefer this method because by using this method you can use the android's default up button. The only thing you need to do is - instead of defining child views inside the toolbar, make the child view and toolbar as siblings in a Linear or Relative Layout. This way you can reduce the left space only to "wrap_content" of the toolbar and utilise the left space in other child views. In my app, I even had an onClick functionality on the toolbar which can now be done by giving that functionality on the parent of both the layouts i.e. set the onClick on the LinearLayout.
Though I still don't know the exact reason why the left space exists or is there a way to disable it, but this is a pretty clean method to work around this.

Why FrameLayout isn't setting Z order correctly in my layout?

I have the following layout (here is presented much simpler design):
<?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:showIn="#layout/activity_main">
<FrameLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hey, badge!"
android:layout_margin="10dp"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="AAAAA"
android:layout_margin="10dp"
android:textSize="12sp"
android:background="#ff00ff"
android:padding="10dp"
android:layout_gravity="top|end"
/>
</FrameLayout>
</RelativeLayout>
I wish to set TextView with text "AAAA" to act as a badge for Button, i.e. to be placed over the button in its upper right corner, which is not the case.
Instead, when I try this code on HTC One M7 with Lollipop, or on Genymotion Nexus 6 with Lollipop, screen looks something like this:
When I try the same code on Genymotion Nexus 5 with KitKat, everything looks as expected, i.e. first view (button) is shown underneath badge (textview)
Does anyone have any clue what could be wrong here?
Thanks,
Deveti
The elevation causes this issue. It was introduced in Lollipop and responsible for z-ordering too. Copy your layout to layout-v21 and set android:elevation="0dp" for the button.
I saw this on another thread somewhere but you can put this into your elements :
android:stateListAnimator="#null"
as others said the button elevation in lolipop and up is changed so its covering the other elements.
for example in my button view below i use it and it shows:
<FrameLayout
android:id="#+id/ib_one_container"
android:layout_width="38dp"
android:layout_height="38dp"
android:layout_marginLeft="5.3dp"
android:orientation="vertical"
android:padding="3dp"
>
<Button
android:id="#+id/ib"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:clickable="true"
android:gravity="center"
android:stateListAnimator="#null"
android:textSize="11sp" />
<com.mobile.pomelo.UI.customViews.CustomDiagonalLineView
android:id="#+id/diagaonal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="visible"
/>
</FrameLayout>
I had a similar problem with an FrameLayout that I was using as a progress indicator overlay (when my screen is busy loading).
I didn't want to add XML to every other element in my app, so I just added an elevation to to my FrameLayout overlay. Note the clickable attribute which ensures that click events are not passed down to the buttons underneath.
Progress Indicator overlay:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/progress_overlay"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="0.4"
android:background="#android:color/black"
android:animateLayoutChanges="true"
android:elevation="10dp"
android:clickable="true"
android:visibility="gone">
<ProgressBar
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:indeterminate="true"/>
</FrameLayout>
Including the progress indicator in my other views:
<include layout="#layout/progress_overlay"/>
Original solution from: https://stackoverflow.com/a/29542951/1912127

Clicking Floating ActionButton on right corner makes RecyclerView item get clicked

I want to add Floating Action Button on recyclerview but problem is when i click on Floating Action Button Recyclerview item get clicked how to remove this problem
see below code
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".screens.ShowSubjectsFrag"
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.support.v7.widget.RecyclerView
android:id="#+id/MainList"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center">
</android.support.v7.widget.RecyclerView>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#android:drawable/ic_input_add"
app:layout_anchor="#id/MainList"
android:layout_margin="#dimen/fab_margin"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>
Write the View#onClickListener for the FloatingActionButton in your Activity/Fragment because currently your FloatingActionButton is not registered for any event.
Had the same problem
Cheers
Please try using below code in your xml :
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/MainList"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center">
</android.support.v7.widget.RecyclerView>
</RelativeLayout>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#android:drawable/ic_input_add"
app:layout_anchor="#id/MainList"
android:layout_margin="#dimen/fab_margin"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
Put both view in different layouts so they can relate to different z levels.
For more information check design practices here.
Thanks..!!
You are using RecyclerView inside a RelativeLayout and you have set its width and height both to match_parent! Basically your RecyclerView is hiding your FloatingActionButton.
If I were you, I would do the following:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".screens.ShowSubjectsFrag"
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.support.v7.widget.RecyclerView
android:id="#+id/MainList"
android:layout_width="match_parent"
android:layout_height="300dp" <!-- Use a fixed height over here -->
android:layout_alignParentTop="true">
</android.support.v7.widget.RecyclerView>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#android:drawable/ic_input_add"
app:layout_anchor="#id/MainList"
android:layout_margin="#dimen/fab_margin"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>
I also suspect that the layout_anchor is not required. Try removing it as well. Regardless, the main problem seems to me to be that your RecyclerView is hiding your FloatingActionButton. You can check the same in the Design area (If you are using Android Studio).
Let me know if it helps, otherwise I'll deep dive further!

Categories

Resources