I could able to create an app with toolbar and sliding navigation drawer with recycleView.
Now I am trying to add Floating action button but I am unable to figure out right place to add the button.
I am trying to add fab bottom right.
Below is my activity_main.xml file
<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">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/container_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" />
</LinearLayout>
<FrameLayout
android:id="#+id/container_body"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
<fragment
android:id="#+id/fragment_navigation_drawer"
android:layout_width="280dp"
android:layout_height="match_parent"
android:layout_gravity="start"
app:layout="#layout/fragment_navigation_drawer"
tools:layout="#layout/fragment_navigation_drawer" />
</android.support.v4.widget.DrawerLayout>
And Fragment layout file fragment_navigtion_drawer.xml is
<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"
android:background="#color/drawerColor">
<LinearLayout
android:id="#+id/containerDrawerImage"
android:layout_width="match_parent"
android:layout_height="140dp"
android:layout_alignParentTop="true"
android:orientation="vertical"
android:background="#drawable/drawertitlebackground">
<ImageView
android:id="#+id/drawerAppImage"
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_marginTop="5dp"
android:src="#mipmap/ic_launcher"
android:layout_gravity="center"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:text="Make search easy"
android:id="#+id/drawerSubTitle"
android:textStyle="bold|italic"
android:layout_centerVertical="true"
android:layout_gravity="bottom|center"
android:textColor="#color/textColorPrimary" />
<ImageButton
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginRight="10dp"
android:layout_gravity="bottom|right"
android:src="#android:drawable/ic_menu_preferences"/>
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/drawerList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_below="#+id/containerDrawerImage" />
</RelativeLayout>
Below is the the code for FAB
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignBottom="#id/container_body"
android:layout_gravity="right"
android:layout_marginRight="10dp"
app:rippleColor="#F06292"/>
I am trying to put this in Linearlayout under FrameLayout in activity_main.xml file. I could see the button appears bottom right.
But when I run the application, there shows a rectangle strip with same height which hides the content behind it. The rectangle strip is covering from left to right including the fab button but fab button is coming on its top.
Content behind is the fragment with Listview. So entries at bottom are getting hided because the fab button area is covered as rectangle.
I need just button appear and rest of area should be covered with fragment data i.e. listview in my case.
Its clue less for me where the issue is.
Solved:
I am able to resolve the issue by rewriting activity_main.xml in below way. Now FAB button appears properly. Below is updated one.
<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">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/container_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" />
</LinearLayout>
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<FrameLayout
android:id="#+id/container_body"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignBottom="#id/container_body"
android:layout_gravity="bottom|right"
android:layout_marginRight="10dp"
android:layout_marginBottom="6dp"
app:fabSize="normal"
android:src="#drawable/ic_add_white_24dp"
app:backgroundTint="#color/colorPrimaryDark"
app:rippleColor="#F06292"/>
</FrameLayout>
</LinearLayout>
<fragment
android:id="#+id/fragment_navigation_drawer"
android:layout_width="280dp"
android:layout_height="match_parent"
android:layout_gravity="start"
app:layout="#layout/fragment_navigation_drawer"
tools:layout="#layout/fragment_navigation_drawer" />
</android.support.v4.widget.DrawerLayout>
Related
Please help me to make a navigation drawer with two menus and two different button to inflate the each Menu Items and click listener
Below is the Mock up and I want to make drawer like these
Navigation Drawer First Button View
Navigation Drawer Second Button View
Please check this, it will help to add a custom view. You can use tablayout and view pager
I have read your question very carefully and try to make this layout. Finally i make it .
try this code to achieve your layout
activity_home_navigation_activtiy
<?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:openDrawer="start">
<include
layout="#layout/app_bar_home_navigation_activtiy"
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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!--<include layout="#layout/nav_header_home_navigation" />-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".28"
android:background="#color/colorPrimary"
android:gravity="bottom"
android:orientation="vertical"
android:paddingLeft="15dp"
android:paddingBottom="15dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/navigation_user_img"
android:layout_width="65dp"
android:layout_height="65dp"
android:src="#drawable/ic_launcher_foreground" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="vertical">
<TextView
android:id="#+id/navigation_user_name_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" Picks App"
android:textColor="#504C4C"
android:textSize="17dp"
android:textStyle="italic" />
<TextView
android:id="#+id/navigation_user_email_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="First Last Name"
android:textColor="#000"
android:textSize="14sp" />
</LinearLayout>
</LinearLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/navigation_nested"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".72"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="15dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fff"
android:gravity="center"
android:orientation="horizontal"
android:paddingTop="10dp"
android:paddingBottom="10dp">
<Button
android:id="#+id/usr_bt"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:text="User"/>
<Button
android:id="#+id/admin_bt"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginLeft="10dp"
android:text="Admin"/>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.RecyclerView
android:id="#+id/user_recyler"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="5dp"
android:paddingLeft="15dp"
android:scrollbars="none" />
<android.support.v7.widget.RecyclerView
android:id="#+id/admin_recyler"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="5dp"
android:paddingLeft="15dp"
android:scrollbars="none" />
</RelativeLayout>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</LinearLayout>
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
In this layout i try to make custom drawable . you can also customize according to your need
see screen shot
Thank You
I'm creating an android app and I've just added a Navigation drawer into one of my activities. I've successfully added it in, however, it now overlaps the content of the page. The jobs text and the rest should be below the ActionBar.
I've tried adding a margin to the top of the jobs text which does push it down as I wish. Is there a better way to move it down?
<?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:openDrawer="start">
<include
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<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:id="#+id/jobListPage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="top"
tools:context="com.kitkat.crossroads.Jobs.JobsActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/textView5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Jobs"
android:fontFamily="#font/bebasneueregular"
android:textSize="30dp"
android:textAlignment="center"
tools:layout_editor_absoluteX="163dp"
tools:layout_editor_absoluteY="16dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/textName"
android:layout_width="125dp"
android:layout_height="50dp"
android:layout_marginLeft="60dp"
android:fontFamily="#font/bebasneueregular"
android:gravity="center_vertical"
android:text="Job Name"
android:textSize="15dp"
android:textColor="#FF000000"
android:visibility="visible" />
<TextView
android:id="#+id/textFrom"
android:layout_width="100dp"
android:layout_height="50dp"
android:fontFamily="#font/bebasneueregular"
android:layout_alignParentTop="true"
android:layout_toEndOf="#+id/textName"
android:gravity="center_vertical"
android:text="From"
android:textSize="15dp"
android:textColor="#FF000000"
android:visibility="visible" />
<TextView
android:id="#+id/textTo"
android:layout_width="100dp"
android:layout_height="50dp"
android:fontFamily="#font/bebasneueregular"
android:textSize="15dp"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:gravity="center_vertical"
android:text="To"
android:textColor="#FF000000"
android:visibility="visible" />
</LinearLayout>
<ExpandableListView
android:id="#+id/jobListView12345"
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:fitsSystemWindows="true"
app:headerLayout="#layout/navigation_header"
app:menu="#menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>
Becoz you assign the gravity="top" in Linearlayout so its happens
so u remove this gravity see my below code:
<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:id="#+id/jobListPage"
android:layout_width="match_parent"
android:layout_height="match_parent"
//remove gravity="top" from hear
tools:context="com.kitkat.crossroads.Jobs.JobsActivity">
if your problem not solve then u can take android:layout_marginTop="20dp" in inner Linearlayout
see below code
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="20dp"
android:orientation="vertical">
Don't take a include in LinearLayout. Becoz its change your actionbar so u can only remove gravity and assign margin top
I believe you should put
<include
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
inside
<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:id="#+id/jobListPage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="top"
tools:context="com.kitkat.crossroads.Jobs.JobsActivity">
The reason why I was having the overlap was because I put the page content in the activity_main.xml layout and not the content_main.xml. Putting the content in that layout sorted the issue out and put the content below the action bar.
So basically,i'm using the bottom sheet view from the support library. It opens up after a FAB is pressed.
This is the bottom sheet view file:
<LinearLayout
android:id="#+id/bottomSheetView"
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"
app:layout_behavior="#string/bottom_sheet_behavior"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="150dp"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="New"
android:id="#+id/newLabel"
android:layout_gravity="center_horizontal" />
<View
android:layout_width="fill_parent"
android:layout_height="2dp"
android:layout_below="#+id/newLabel"
android:background="#c0c0c0"/>
<Button
android:id="#+id/newFileButton"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:text="File"
android:layout_gravity="center_horizontal"
/>
<Button
android:id="#+id/newFolderButton"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:text="Folder"
android:layout_gravity="center_horizontal"
/>
</LinearLayout>
and this is the main activity layout:
<android.support.design.widget.CoordinatorLayout
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:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/coordinator"
>
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<!-- The first child in the layout is for the main Activity UI-->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="#dimen/activity_horizontal_margin"
tools:context=".MainActivity"
android:background="#ffffffff"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Large Text"
android:id="#+id/cwdLabel" />
<!--view that creates a dividing line between listview and textview -->
<View
android:layout_width="fill_parent"
android:layout_height="2dp"
android:layout_below="#+id/cwdLabel"
android:background="#c0c0c0"/>
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/fileList"
android:layout_below="#+id/cwdLabel"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:borderWidth="0dp"
app:backgroundTint="#color/colorAccent"
app:elevation="6dp"
android:clickable="true"
app:fabSize="normal"
app:pressedTranslationZ="12dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:src="#drawable/ic_add_white_18dp"
/>
</RelativeLayout>
<!-- Side navigation drawer UI -->
<ListView
android:id="#+id/navList"
android:layout_width="275dp"
android:layout_height="match_parent"
android:layout_gravity="left|start"
android:background="#ffeeeeee"
/>
</android.support.v4.widget.DrawerLayout>
<include layout="#layout/bottom_sheet_new"/>
</android.support.design.widget.CoordinatorLayout>
The problem is, that the bottom sheet doesn't open when you press the FAB.
Instead, it opens after you slide the drawer out.Also, the bottom sheet is transparent, which is not what i have set it to be.
I searched around for answers, and after reading a few other questions, i think it has to do with the elevation of the drawer layout, but i don't really know how to solve that problem
I had the same issue, I updated the com.android.support:appcompat to the last version and now it works!
Nowadays I have
'com.android.support:appcompat-v7:23.4.0'
'com.android.support:design:23.2.0'
Try this,
Put this after initilizing views
ViewCompat.postOnAnimation(coordinator, new Runnable() {
#Override
public void run() {
ViewCompat.postInvalidateOnAnimation(coordinator);
}
});
Hope it helps
I need some help with a layout. I have a map, a drawer, a button for the drawer and a cardview to hold the autocomplete search box. Everything looks fine except i cannot interact with the map. Pinch zoom, swipe to move and My Location button are not working. I think it's because the layout is wrong and i'm not actually interacting with the map but with something else. Posting my layout below.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:map="http://schemas.android.com/apk/res-auto"
map:uiZoomControls="true"
map:uiZoomGestures="true"
map:mapType="normal"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MapsActivity">
<fragment
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MapsActivity">
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/LeftDrawer"
android:layout_width="200dp"
android:layout_marginTop="60dp"
android:layout_height="500dp"
android:layout_gravity="start"
android:background="#drawable/layout_bg" >
<TextView
android:id="#+id/TitleTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:textColor="#android:color/darker_gray"
android:text="Test Title" />
<ListView
android:id="#+id/navList"
android:layout_width="200dp"
android:layout_height="match_parent"
android:layout_marginTop="30dp"
android:layout_marginBottom="30dp"
android:layout_gravity="left|start"
android:background="#drawable/layout_bg"/>
<TextView
android:id="#+id/TitleTextView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="240dp"
android:textColor="#android:color/darker_gray"
android:text="Test Title 2" />
<Button
android:id="#+id/test_button1"
android:layout_width="30dp"
android:layout_marginTop="270dp"
android:layout_marginLeft="20dp"
android:layout_height="30dp"
android:layout_gravity="left|start"
android:background="#drawable/settings"/>
<Button
android:id="#+id/test_button2"
android:layout_width="30dp"
android:layout_marginTop="270dp"
android:layout_marginLeft="60dp"
android:layout_height="30dp"
android:layout_gravity="left|start"
android:background="#drawable/settings"/>
</RelativeLayout>
</android.support.v4.widget.DrawerLayout>
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view"
android:layout_gravity="top"
android:layout_marginTop="17dp"
android:layout_marginLeft="50dp"
android:layout_width="260dp"
android:layout_height="30dp"
card_view:cardCornerRadius="4dp">
<fragment
android:id="#+id/place_autocomplete_fragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:name="com.google.android.gms.location.places.ui.PlaceAutocompleteFragment" />
</android.support.v7.widget.CardView>
<Button
android:id="#+id/drawer_button"
android:layout_width="30dp"
android:layout_marginTop="17dp"
android:layout_marginLeft="5dp"
android:layout_height="30dp"
android:layout_gravity="left|start"
android:onClick="OpenCloseDrawer"
android:background="#drawable/settings"/>
</fragment>
</LinearLayout>
Edit: Posting a screenshot of what the app looks like. Top left button is the open/close drawer button. As seen in the screen shot, that button (#+id/drawer_button) becomes inaccessable. The drawer closes when touching outside, but i have code in that button that then never fires as the button is not accessable. So i would like to always have access to the button, as well as probably some way of detecting the drawer closing, so i can use the same code in that event as i do in my button in case the user just swipes/touches outside to close the drawer.
Here are my layouts as the are now.
activity_maps.xml
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include android:id="#+id/map" layout="#layout/fragment" />
<RelativeLayout
android:id="#+id/whatYouWantInLeftDrawer"
android:layout_width="200dp"
android:layout_marginTop="60dp"
android:layout_height="500dp"
android:layout_gravity="start"
android:background="#drawable/layout_bg" >
<TextView
android:id="#+id/TitleTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:textColor="#android:color/darker_gray"
android:text="Title1" />
<ListView
android:id="#+id/navList"
android:layout_width="200dp"
android:layout_height="match_parent"
android:layout_marginTop="30dp"
android:layout_marginBottom="30dp"
android:layout_gravity="left|start"
android:background="#drawable/layout_bg"/>
<TextView
android:id="#+id/TitleTextView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="240dp"
android:textColor="#android:color/darker_gray"
android:text="Ttitle2" />
<Button
android:id="#+id/test_button1"
android:layout_width="30dp"
android:layout_marginTop="270dp"
android:layout_marginLeft="20dp"
android:layout_height="30dp"
android:layout_gravity="left|start"
android:background="#drawable/settings"/>
<Button
android:id="#+id/test_button2"
android:layout_width="30dp"
android:layout_marginTop="270dp"
android:layout_marginLeft="60dp"
android:layout_height="30dp"
android:layout_gravity="left|start"
android:background="#drawable/settings"/>
</RelativeLayout>
</android.support.v4.widget.DrawerLayout>
fragment.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:map="http://schemas.android.com/apk/res-auto"
map:uiZoomControls="true"
map:uiZoomGestures="true"
map:mapType="normal"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MapsActivity">
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button
android:id="#+id/drawer_button"
android:layout_width="30dp"
android:layout_marginTop="17dp"
android:layout_marginLeft="5dp"
android:layout_height="30dp"
android:layout_gravity="left|start"
android:onClick="OpenCloseDrawer"
android:background="#drawable/settings"/>
<fragment
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MapsActivity">
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view"
android:layout_gravity="top"
android:layout_marginTop="17dp"
android:layout_marginLeft="50dp"
android:layout_width="240dp"
android:layout_height="30dp"
card_view:cardCornerRadius="4dp">
<fragment
android:id="#+id/place_autocomplete_fragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:name="com.google.android.gms.location.places.ui.PlaceAutocompleteFragment" />
</android.support.v7.widget.CardView>
</fragment>
</FrameLayout>
</LinearLayout>
what you need to understand is that your will have only two child like this
<android.support.v4.widget.DrawerLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
< first View, here you will have your google map/>
< second View, here you will have your ListView/>
</android.support.v4.widget.DrawerLayout>
now the problem is that you don't just have a plain google map to show as First View, what you can do is create a separate fragment which will replace your first view,
There are many ways to do this depending on what you want to achieve with it, it will work fine as long as you keep this pattern for DrawerLayout
well to make it simple create fragment which will have google map and your cardview
fragment.xml
<LinearLayout>
<FrameLayout>
<GoogleMapFragment
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<CardView
android:layout_width="280dp"
android:layout_height="?attr/actionBarSize"/>
</FrameLayout>
</LinearLayout>
now make some changes to your Navigation drawer layout like this
<android.support.v4.widget.DrawerLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<first View, include fragment & class representing that stuff/>
< second View, here you will have your ListView/>
</android.support.v4.widget.DrawerLayout>
this is just an example that you make implement your own layout:
Update
<FrameLayout>
<android.support.v4.widget.DrawerLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<first View, include fragment & class representing that stuff/>
< second View, here you will have your ListView
margin="leave enough margin to top as you will have buttons, otherwise button will overlap listview"
/>
</android.support.v4.widget.DrawerLayout>
<LinearLayout>
<put your button Views here, so these will appear all the time/>
</LinearLayout>
</FrameLayout>
For my question I have prepared a simple project at GitHub.
In an app with DrawerLayout I am trying to display a login page for social networks (Google+, Facebook, Twitter).
The login page should display the social network logo (or user photo - if logged in), then horizontal progress bar and a FloatingActionButton and finally some text at the bottom:
Unfortunately, I have some strange artefact in the ActionBar area - as you can see in the right side of the above screenshot.
Why does it happen please and how to fix this?
Here is my activity_main.xml with DrawerLayout and left drawer menu:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<FrameLayout
android:id="#+id/root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FF0"/>
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="#+id/left_drawer"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:layout_gravity="start"
android:fitsSystemWindows="true"
android:background="#FFF"
app:itemIconTint="#color/drawer_item_text"
app:itemTextColor="#color/drawer_item_text"
app:headerLayout="#layout/header_left"
app:menu="#menu/menu_main"/>
</android.support.v4.widget.DrawerLayout>
And here is my fragment_google.xml with CoordinatorLayout and FAB:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<LinearLayout android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="#+id/photo"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.4"
android:src="#drawable/photo"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<CheckBox
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="0.2"
android:layout_gravity="center_horizontal"
android:text="Main profile"
/>
<TextView
android:id="#+id/given"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="0.2"
android:layout_gravity="center_horizontal"
/>
<TextView
android:id="#+id/place"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="0.2"
android:layout_gravity="center_horizontal"
/>
</LinearLayout>
<ProgressBar
android:id="#+id/progress"
android:indeterminate="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_anchor="#id/photo"
app:layout_anchorGravity="bottom"
style="?android:attr/progressBarStyleHorizontal"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
app:layout_anchor="#id/photo"
app:layout_anchorGravity="bottom|right|end"
android:src="#drawable/ic_account_plus_white_48dp"
android:elevation="8dp"/>
</android.support.design.widget.CoordinatorLayout>
Removing fitsSystemWindows="true" from fragment_google.xml has solved the problem: