Develop Reference

Floating Action Button bad rendering

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>

Layout inside Toolbar is shifted to the right

The LinearLayout that's been placed inside Toolbar is shifted to the right as you can see...
As a result, the Toolbar doesn't stack up well with the TabHost (which is again implemented with a Toolbar in a parent Fragment).
How can I fix it?
Layout sketch (Android Studio)
Actual app
Layout Code
<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="vertical"
tools:context="com.android.example">
<android.support.v7.widget.RecyclerView
android:id="#+id/recview_navigator"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="2dp"
android:layout_weight="1"/>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:backgroundTint="#color/accent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_navigator"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageView_navigator_up"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_weight="1"
android:src="#drawable/ic_navigate_before_white_48dp"
android:tint="#color/recview"/>
<ImageView
android:id="#+id/imageView_navigator_save"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_weight="1"
android:src="#drawable/ic_save_white_48dp"
android:tint="#color/recview"/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
</LinearLayout>

Have you tried removing the content insets?
<android.support.v7.widget.Toolbar`
app:contentInsetStart="0dp"
app:contentInsetLeft="0dp"
...>

The problem
The extra margin space is because of the toolbar tag. It has about 16dp of space by default. It is required, so that icons like hamburger,app_icon or up-caret can be shown.
How can you fix it?
Well, the hack is to include android:layout_marginLeft="-16dp" attribute in the toolbar tag, but this can mess up the layout if up-caret(back-button) is shown when a child activity is called or hamburger icon in case of a navigation drawer.
I've written about this earlier here.
If you're not going to use the functionality of toolbar then it is better to replace the whole appBarLayout with the following layout.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorAccent"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageView_navigator_up"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:adjustViewBounds="false"
android:src="#drawable/ic_navigate_before_white_48dp"/>
<ImageView
android:id="#+id/imageView_navigator_save"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_save_black_48dp"/>
</LinearLayout>

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

Positioning views within the AppCompat toolbar in Android Lollipop

I am trying to place a RelativeLayout within a Toolbar so that I can position views easily within the Toolbar. This Toolbar is used in standalone mode and has two menu items.
I have this in my layout xml file:
<RelativeLayout
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"
tools:context=".MainActivity"
android:background="#ffffff">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="350dp"
android:elevation="3dp"
android:background="#ff17182b">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#f76865"
android:layout_gravity="center_horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Title"
android:textSize="17sp"
android:textStyle="bold"
android:textColor="#ffffff"
android:layout_alignParentTop="true"
android:layout_marginTop="10dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FFD10202"
android:elevation="3dp"
android:text="Stopped"
android:textColor="#ffffff"
android:padding="2dp"
android:layout_marginTop="50dp"/>
</RelativeLayout>
</android.support.v7.widget.Toolbar>
http://i.imgur.com/XLZx7Ts.png is a link to a screenshot of the resulting UI
With the layout above, the RelativeLayout is positioned to the left and its right border stops just at the left border of the toolbar menu items. it is as if the menu items cover the area from the top of the screen to the end of the toolbar and won't allow placing of elements within that area
Please, I need to know if I am doing anything wrong or if there is a right way of positioning views within a toolbar