Floating action button unintentionally floats to top of screen - android

The FAB seems to overlap the toolbar at the top of the screen, whereas I want it at the bottom right of the screen.
If I modify the layout_height of the app_bar_main.xml element (contains toolbar and button) to "match_parent" instead of "wrap_content", the button gets correctly placed but then the fragment which should be there gets pushed off the screen/is not placed.
Issue seems to be with the structure of the xml files but I am not sure how to fix it.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFF"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<include
android:id="#+id/main_action_bar"
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<LinearLayout
android:id="#+id/main_container"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
</LinearLayout>
</LinearLayout>
<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="#color/colorPrimaryDark"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main"
app:itemIconTint="#FFF"
app:itemTextColor="#FFF"
app:menu="#menu/loggedout_main_drawer" />
</android.support.v4.widget.DrawerLayout>
app_bar_main.xml
<?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=".MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
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:shape="rectangle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:paddingBottom="30dip"
android:layout_margin="#dimen/fab_margin"
android:clickable="true"
app:borderWidth="0dp"
android:src="#drawable/ic_add_white_24px" />
</android.support.design.widget.CoordinatorLayout>
activity_login.xml (Layout of fragment that is placed in main_container)
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".LoginFragment"
android:layout_below="#+id/main_action_bar"
xmlns:android="http://schemas.android.com/apk/res/android">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Login."
android:id="#+id/login_title_text"
android:layout_alignParentTop="true"
android:textSize="40sp"
android:layout_marginBottom="70dp"
android:layout_marginTop="100dp"
android:fontFamily="sans-serif-light"
android:textColor="#color/colorAlt"
android:layout_centerHorizontal="true" />
<!-- E-mail section -->
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
android:hint="E-mail address"
android:layout_marginLeft="50dp"
android:layout_marginTop="10dp"
android:layout_marginRight="20dp"
android:ems="10"
android:id="#+id/login_emailField"
android:layout_below="#+id/login_title_text" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/register_email_icon"
android:layout_alignBottom="#id/login_emailField"
android:layout_marginLeft="15dp"
android:layout_marginBottom="10dp"/>
<!-- Password section -->
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:layout_marginTop="10dp"
android:hint="Password"
android:layout_below="#id/login_emailField"
android:id="#+id/login_passwordField"
android:layout_marginLeft="50dp"
android:layout_marginRight="20dp"
android:layout_marginBottom="25dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/register_password_icon"
android:layout_alignBottom="#id/login_passwordField"
android:layout_marginLeft="15dp"
android:layout_marginBottom="10dp"/>
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/login_login_button"
android:layout_gravity="center_vertical"
android:layout_below="#+id/login_passwordField"
android:layout_marginBottom="29dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
card_view:cardBackgroundColor="#E91E63"
card_view:cardCornerRadius="2dp"
card_view:cardElevation="6dp">
<TextView
android:id="#+id/material_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="13dp"
android:paddingBottom="13dp"
android:layout_gravity="center_horizontal"
android:textColor="#FFF"
android:textSize="19sp"
android:fontFamily="sans-serif-medium"
android:text="Login" />
</android.support.v7.widget.CardView>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Forgotten your username or password?"
android:layout_below="#id/login_login_button"
android:gravity="center"
android:layout_centerHorizontal="true"
android:id="#+id/login_footer_text"
android:layout_marginTop="20dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Tap here"
android:textColor="#000000"
android:layout_below="#id/login_footer_text"
android:gravity="center"
android:layout_centerHorizontal="true"
android:id="#+id/loginForgottenTapText"
android:layout_marginTop="10dp"/>
</RelativeLayout>
</ScrollView>
Thanks for any help in advance.

Related

Place button on the top right side of AppBarOverlay

I'm trying to place a button to the right side of AppBarOverlay, I have got it to appear it to the right, but it's below AppBarOverlay text. Below is the image of what it looks like now.
Instead I want the "clear" button to appear where I have drawn the red circle
Below is my activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<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"
tools:context=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/Theme.Verify.AppBarOverlay">
<TextView
android:id="#+id/title"
android:layout_alignParentLeft="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:minHeight="?actionBarSize"
android:padding="#dimen/appbar_padding"
android:text="#string/app_name"
android:textAppearance="#style/TextAppearance.Widget.AppCompat.Toolbar.Title" />
<Button
android:id="#+id/clear"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_gravity="end"
android:text="Clear"
android:textColor="#FFF"
android:textSize="12sp" />
</com.google.android.material.appbar.AppBarLayout>
<TextView
android:id="#+id/status"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:background="#333333"
android:gravity="bottom"
android:scrollbars="vertical"
android:textColor="#ffffff" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

AppBarLayout is a vertical LinearLayout. So you can't achieve this with AppBarLayout.
For reference https://developer.android.com/reference/com/google/android/material/appbar/AppBarLayout
You can achieve your desired output by using Toolbar
<?xml version="1.0" encoding="utf-8"?>
<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"
tools:context=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/Theme.Verify.AppBarOverlay">
<androidx.appcompat.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">
<TextView
android:id="#+id/title"
android:layout_alignParentLeft="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:minHeight="?actionBarSize"
android:padding="#dimen/appbar_padding"
android:text="#string/app_name"
android:textAppearance="#style/TextAppearance.Widget.AppCompat.Toolbar.Title" />
<Button
android:id="#+id/clear"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_gravity="end"
android:text="Clear"
android:textColor="#FFF"
android:textSize="12sp" />
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>
<TextView
android:id="#+id/status"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:background="#333333"
android:gravity="bottom"
android:scrollbars="vertical"
android:textColor="#ffffff" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Floating Action Button scroll with the content

I implemented a floating action button in my layouts. The problem is when I have too much data in my layout, the button not stay in the same position, it scrolls to the bottom of the layout. I need the same like gmail inbox: a floating button that is always accesible no matter the data.
This is my code to show the button
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical">
<include
android:id="#+id/frgOffline"
android:visibility="gone"
layout="#layout/frg_offline"/>
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto" card_view:cardBackgroundColor="#android:color/white"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginRight="5dp"
android:layout_marginLeft="5dp"
android:layout_marginBottom="7dp"
android:layout_marginTop="7dp"
android:gravity="center_vertical|left">
<LinearLayout
android:visibility="gone"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical">
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_marginTop="25dp"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="text"
android:layout_marginBottom="15dp"
android:textStyle="bold"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="15dp"
android:layout_margin="5dp"
android:textAppearance="?android:attr/textAppearanceSmall"/>
<com.exampleapp.expandiblelist
android:id="#+id/expListaResultado"
android:groupIndicator="#null"
android:layout_height="fill_parent"
android:transcriptMode="disabled"
android:layout_width="match_parent"/>
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/btnNueva"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:elevation="4dp"
android:layout_marginBottom="5dp"
android:layout_marginLeft="5dp"
android:src="#drawable/ic_nuevo"
android:layout_gravity="bottom|right"
app:backgroundTint="#color/blue"/>
</android.support.v7.widget.CardView>
</LinearLayout>
What's going on?
Thanks for helping!

You can see this code this will work fine with you
<?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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical">
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto" card_view:cardBackgroundColor="#android:color/white"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginRight="5dp"
android:layout_marginLeft="5dp"
android:layout_marginBottom="7dp"
android:layout_marginTop="7dp"
android:gravity="center_vertical|left">
<LinearLayout
android:visibility="gone"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical">
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_marginTop="25dp"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="text"
android:layout_marginBottom="15dp"
android:textStyle="bold"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="15dp"
android:layout_margin="5dp"
android:textAppearance="?android:attr/textAppearanceSmall"/>
<com.exampleapp.expandiblelist
android:id="#+id/expListaResultado"
android:groupIndicator="#null"
android:layout_height="fill_parent"
android:transcriptMode="disabled"
android:layout_width="match_parent"/>
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/btnNueva"
android:layout_width="48dp"
android:layout_height="48dp"
android:elevation="4dp"
android:layout_marginBottom="16dp"
android:layout_marginLeft="5dp"
android:src="#mipmap/ic_launcher"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginRight="16dp"
/>
</RelativeLayout>

you need coordinatorlayout for this
try this one, It might help
<?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="info.androidhive.fab.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>
in content_main layout put all your necessary code..

The Whole DrawerLayout is scrollable

I am trying to read the layout code but couldn't get why.
I have a code for drawerlayout and the problem is the whole drawerLayout is scroll able i just want to the items list view scroll able not the header and i couldn't figure it out because it looks like all components are custom made.
Can any one have a look at it..
Thanks in advance
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.activities.MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
style="#style/ToolBarStyle"
android:layout_width="match_parent"
android:layout_height="#dimen/abc_action_bar_default_height_material"
android:background="?attr/colorPrimary">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginRight="#dimen/abc_action_bar_default_height_material">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:adjustViewBounds="true"
android:scaleType="centerInside"
android:src="#drawable/menu_logo" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
<ViewFlipper
android:id="#+id/loading_switcher"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/checkout_container">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:elevation="2dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white"
android:orientation="vertical"
android:padding="10dp"
app:layout_scrollFlags="scroll|enterAlways">
<com.views.font.CustomFontTextView
android:id="#+id/location_text_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/ic_location_on_black_18dp"
android:ellipsize="end"
android:gravity="center_vertical"
android:maxLines="1"
android:singleLine="true"
android:text="Pick Location"
android:textColor="#color/colorPrimary"
android:textSize="15sp" />
<com.views.font.CustomFontTextView
android:id="#+id/locality_info_text_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:gravity="center_vertical"
android:maxLines="1"
android:singleLine="true"
android:textColor="#android:color/black"
android:textSize="12sp" />
</LinearLayout>
</android.support.design.widget.AppBarLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/product_list_swipe_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp">
<android.support.v7.widget.RecyclerView
android:id="#+id/products_list_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.widget.SwipeRefreshLayout>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
<com.views.CheckoutShelfView
android:id="#+id/checkout_container"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentBottom="true" />
</RelativeLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:orientation="vertical">
<com.views.font.CustomFontTextView
android:id="#+id/error_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:gravity="center"
android:textColor="#color/grey_bg"
android:textSize="20sp" />
<com.views.font.CustomFontTextView
android:id="#+id/error_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:background="#drawable/shape_green_fill_round_5dp"
android:drawablePadding="2dp"
android:gravity="center_vertical"
android:paddingBottom="5dp"
android:paddingLeft="4dp"
android:paddingRight="8dp"
android:paddingTop="5dp"
android:textAllCaps="false"
android:textColor="#android:color/white" />
</LinearLayout>
</ViewFlipper>
</LinearLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/header_navigation"
app:itemIconTint="#color/colorPrimary"
app:itemTextColor="#color/colorPrimary"
app:menu="#menu/navigation_menu">
<com.views.font.CustomFontTextView
android:id="#+id/version_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|bottom"
android:background="#android:color/white"
android:gravity="center"
android:padding="3dp"
android:textSize="10sp">
</com.views.font.CustomFontTextView>
</android.support.design.widget.NavigationView>
</ScrollView>
</android.support.v4.widget.DrawerLayout>

try this:
Remove Scrollview from the layout:
try this:
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/header_navigation"
app:itemIconTint="#color/colorPrimary"
app:itemTextColor="#color/colorPrimary"
app:menu="#menu/navigation_menu" />
In activity;
//mNavigationView is your navigation view
mNavViewHeaderLayout = LayoutInflater.from(MainActivity.this).inflate(R.layout.header_navigation, mNavigationView);
//to access content in header view
mTextview = (TextView)mNavViewHeaderLayout.findViewById(R.id.textview);

App UI gets distorted on API 19 below

I just completed an app which is working as expected but when i run it on API 19 ---> API 16, i get a distorted UI where some of the views will overlap each other, the arrangement is disorganized and when you open another activity, the last activity UI is shown below the current activity. This error is weird to me because when i tested the app on API 22 + , it was working fine.
I tried to figure out the error but couldn't because i can't tell where the error is which left me in a confused state.
Below is the Screenshots of the aforementioned UI Behavior.
The UI XML Files
Cardview_row_article.xml
<?xml version="1.0" encoding="utf-8"?><!-- A CardView that contains a TextView -->
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/cv"
android:layout_width="match_parent"
android:layout_height="110dp"
android:layout_marginTop="3dp"
card_view:cardCornerRadius="3dp"
card_view:cardPreventCornerOverlap="true"
android:foreground="?android:attr/selectableItemBackground"
card_view:cardUseCompatPadding="true"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/art_image"
android:layout_width="110dp"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:scaleType="fitXY"
android:src="#drawable/loading_item_img"
/>
<TextView
android:id="#+id/art_title"
android:layout_width="230dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:textAlignment="center"
android:textSize="30dp"
android:layout_alignTop="#+id/art_image"
/>
<TextView
android:id="#+id/art_subTitle"
android:layout_width="220dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:textSize="15sp"
android:textStyle="italic"
android:textColor="#android:color/holo_red_dark"
android:textAlignment="center"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
NewsDetail.xml
<?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"
android:id="#+id/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<!-- App Bar -->
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/detail_backdrop_height"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<!-- Collapser -->
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapser"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/image_paralax"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
android:src="#drawable/kenny"/>
<!-- Toolbar -->
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/CustomActionBar"
/>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.FloatingActionButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:layout_anchor="#id/appbar"
app:layout_anchorGravity="bottom|right|end"
android:src="#drawable/ic_add"
android:layout_margin="#dimen/fab_margin"
android:clickable="true"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/scroll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/app_bar"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="24dp">
<LinearLayout
style="#style/Widget.CardContent"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/titleDetailTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minLines="1"
android:text="Title"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/colorBlack"
android:textStyle="bold"
android:textSize="20dp"/>
<TextView
android:id="#+id/detailDetailTxt"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="DATE"
android:textAppearance="?android:attr/textAppearanceSmall" />
<TextView
android:id="#+id/timeDetailTxt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minLines="4"
android:padding="2dp"
android:text="details"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#0f0f0f" />
</LinearLayout>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fabsocial"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:layout_anchor="#id/appbar"
app:layout_anchorGravity="bottom|right|end"
android:src="#drawable/ic_share"
android:layout_margin="#dimen/fab_margin"
android:clickable="true"/>
</android.support.design.widget.CoordinatorLayout>
EmergencyActivity.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:support="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"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.example.domain.navdrawer.InerFragment"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="150dp"
android:orientation="vertical" >
<ImageView
android:id="#+id/emer_img"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/emergencyback"
android:layout_marginTop="6dp"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/emertop"
android:text="Emergency Report"
android:textSize="25sp"
android:textColor="#color/Color_Red"
android:gravity="center"/>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/input_layout_name"
>
<EditText
android:id="#+id/input_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/question_name_input_hint"
android:inputType="textAutoComplete" />
</android.support.design.widget.TextInputLayout>
<RadioGroup
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<RadioButton
android:id="#+id/emergency_type_fire"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/type_fire" />
<RadioButton
android:id="#+id/emergency_type_accident"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/type_accident" />
<RadioButton
android:id="#+id/emergency_type_robbery"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/type_robbery" />
<RadioButton
android:id="#+id/emergency_type_others"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/type_other" />
</RadioGroup>
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_emergency"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<EditText
android:id="#+id/input_emergency"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
android:hint="#string/hint_emergency" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_email"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/input_email"
android:layout_width="match_parent"
android:inputType="textEmailAddress"
android:layout_height="wrap_content"
android:hint="#string/hint_mobile" />
</android.support.design.widget.TextInputLayout>
</LinearLayout>
<Button
android:id="#+id/btn_send"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Send"
android:layout_centerHorizontal="true"
android:textColor="#color/finestWhite"
android:background="#android:color/holo_red_dark"
android:layout_gravity="center"
android:layout_marginTop="15dp"
/>
</LinearLayout>

Well, i finally figured out the fix to the UI glitches.
All you have to do is Set the background of the root activity to 'White' in your activity xml files.
Thats just it!

Why Cardview is over Appbar?

After trying many times I didn't figure out how to solve my problem. In my layout I have a navigation drawer with an appbar, inside it there's a Cardview with Relative layout. Here is a screen in my preview while coding xml in layout :
When i launch the app on emulator or the phone, I have this :
My Cardview appears over Appbar. Full layout code :
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
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:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/darker_gray"
android:fitsSystemWindows="true"
android:orientation="vertical"
android:theme="#style/AppTheme.NoActionBar"
tools:context=".activities.display.MainActivity"
tools:openDrawer="">
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginEnd="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginStart="10dp"
android:layout_marginTop="70dp"
app:cardBackgroundColor="#80FFFFFF"
app:cardCornerRadius="10dp">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent">
<TextView
android:id="#+id/newresearch_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Rechercher"
android:textColor="#424242"
android:textSize="18sp"
android:textStyle="bold" />
<EditText
android:id="#+id/edit1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/newresearch_title"
android:layout_margin="5dp"
android:background="#drawable/custom_edittext"
android:hint="Prix min"
android:inputType="number"
android:padding="5dp"
android:textColor="#android:color/black" />
<EditText
android:id="#+id/edit2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/edit1"
android:layout_margin="5dp"
android:background="#drawable/custom_edittext"
android:hint="Prix max"
android:inputType="number"
android:padding="5dp"
android:textColor="#android:color/black" />
<Button
android:id="#+id/bouton_de_recherche"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_below="#+id/edit2"
android:layout_centerHorizontal="true"
android:layout_marginEnd="5dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginStart="5dp"
android:layout_marginTop="25dp"
android:background="#drawable/custom_button"
android:text="Rechercher"
android:textColor="#424242"
android:textSize="12sp" />
</RelativeLayout>
</android.support.v7.widget.CardView>
<include
layout="#layout/navdraw_appbar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<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:fitsSystemWindows="true"
app:headerLayout="#layout/navdraw_header_main"
app:menu="#menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>
Thanks for the help !
EDIT: Added code of navdraw_appbar below
<?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=".activities.display.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.CoordinatorLayout>

Try this
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
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:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/darker_gray"
android:fitsSystemWindows="true"
android:orientation="vertical"
android:theme="#style/AppTheme.NoActionBar"
tools:context=".activities.display.MainActivity"
tools:openDrawer="">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusable="true"
android:focusableInTouchMode="true"
android:orientation="vertical">
<include
layout="#layout/navdraw_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<RelativeLayout
android:id="#+id/rltv_allcontent"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginEnd="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginStart="10dp"
android:layout_marginTop="70dp"
app:cardBackgroundColor="#80FFFFFF"
app:cardCornerRadius="10dp">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent">
<TextView
android:id="#+id/newresearch_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Rechercher"
android:textColor="#424242"
android:textSize="18sp"
android:textStyle="bold" />
<EditText
android:id="#+id/edit1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/newresearch_title"
android:layout_margin="5dp"
android:background="#drawable/custom_edittext"
android:hint="Prix min"
android:inputType="number"
android:padding="5dp"
android:textColor="#android:color/black" />
<EditText
android:id="#+id/edit2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/edit1"
android:layout_margin="5dp"
android:background="#drawable/custom_edittext"
android:hint="Prix max"
android:inputType="number"
android:padding="5dp"
android:textColor="#android:color/black" />
<Button
android:id="#+id/bouton_de_recherche"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_below="#+id/edit2"
android:layout_centerHorizontal="true"
android:layout_marginEnd="5dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginStart="5dp"
android:layout_marginTop="25dp"
android:background="#drawable/custom_button"
android:text="Rechercher"
android:textColor="#424242"
android:textSize="12sp" />
</RelativeLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
</LinearLayout>
<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:fitsSystemWindows="true"
app:headerLayout="#layout/navdraw_header_main"
app:menu="#menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>
Hope this will help you.

I had a similar problem recently. Assuming that your activity extends AppCompatActivity, have you set the toolbar in your activity?
Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

Categories

Resources