I am creating an Android app which got a navigation drawer in a layout:
<?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"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
layout="#layout/navigation_select_layout"
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/navigation_drawer_header_layout"
app:menu="#menu/main_drawer_options" />
</android.support.v4.widget.DrawerLayout>
the navigation_drawer_header_layout:
<?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="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/textViewButtonCloseDrawer"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignParentRight="true"
android:gravity="center"
android:text="X"/>
</RelativeLayout>
The header layout is added but not showing unless I add either a top margin for the TextView or some padding to the RelativeLayout which pushes the TextView down.
Why won't it show as defined in the header layout? Why is the need to push the layout in order for it to be shown?
As understood from the comments, you got a ToolBar which hides the content instead of staying above it at all times. Check out this answer here which might solve your problem:
Display content under toolbar
Related
I am trying to use BottomSheetBehavior to make a layout similar to what google maps is providing. I am successful in using the BottomSheetBehavior and create slide up layout. The problem I am having now is CordinatorLayout takes extra space even when my layout is collapsed.
Below is a screenshot of my layout.
White background in my main activity layout
Pink is my collapsed layout with peekHeight
And the grey background is the one which should be transparent but takes the extra space.
My main layout file
<?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">
<FrameLayout
android:layout_width="match_parent"
android:layout_alignParentBottom="true"
android:layout_height="wrap_content">
<include layout="#layout/sample_coordinator" />
</FrameLayout>
CordinatorLayout with BottomSheetBehavior
<?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"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/common_google_signin_btn_text_light_disabled">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:behavior_hideable="false"
app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">
<TextView
android:layout_width="match_parent"
android:layout_height="250dp"
android:background="#color/colorPrimary" />
</FrameLayout>
You have to use CoordinatorLayout in your activity layout.
Then in your bottom sheet layout insert these lines:
app:behavior_hideable="true"
app:behavior_peekHeight="Xdp"
I have custom DrawerLayout with below codes.
I don't know why my layout (drawer_layout) take margin from top and the red close button that you can see below is being covered.
<?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"
tools:context=".DashboardActivity"
android:layout_gravity="left"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:openDrawer="start">
[Some other elements here ...]
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:layout_marginRight="-64dp"
android:fitsSystemWindows="true">
<include layout="#layout/drawer_layout" />
</android.support.design.widget.NavigationView>
and its my custom layout for NavigationView :
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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:background="#color/primary_color"
android:layout_height="match_parent">
<ImageView
[Properties]
/>
<TextView
[Properties]
/>
<TextView
[Properties]
/>
<ImageView
[Properties]
/>
<ImageButton
android:id="#+id/drawer_close_image_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/radius_background_acent_color"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_close_black_24dp" />
</android.support.constraint.ConstraintLayout>
but in result I have a negative margin top that can be seen in below picture.
How can I remove that margin from top and show my NavigationView layout correctly?
Remove android:fitsSystemWindows="true". That line tells the layout engine to place elements using the whole screen, including the bit under the status bar.
I believe android:fitsSystemWindows="true" is causing your problem.
Try removing this line
I am using Navigation drawer activity in content_main there is one linear layout which will be inflate with fragment.
content_main.xml
<?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:id="#+id/content_home"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="net.techdesire.khabargujarat.HomeActivity"
tools:showIn="#layout/app_bar_home">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/fragment_container"/>
</RelativeLayout>
fragment_home.xml
<android.support.percent.PercentRelativeLayout
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="fragment.HomeFragment">
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
app:layout_heightPercent="40%"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp"
app:layout_heightPercent="60%"
android:layout_below="#+id/viewpager">
<TextView
android:id="#+id/about"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:text="#string/about_khijadiya"
android:textAppearance="#style/TextAppearance.AppCompat.Large"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/about"
android:text="#string/dummy"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"/>
</RelativeLayout>
</android.support.percent.PercentRelativeLayout>
I have large content in textview named about. I want to make it scrollable,like in image.First scroll relativelayout to full screen and if content of about is still overflow then make only about textview scrollable. When scroll reach to top and if user swipe down from there then re-display viewpager.
I think, your requirement is collapsing the view while scrolling.
So you can use
"android.support.design.widget.CollapsingToolbarLayout".
It is implemented in material design.
You can refer this link:
http://www.androidhive.info/2016/05/android-working-with-card-view-and-recycler-view/
I have spent a lot of hours trying to find the problem with ActionBarDrawerToggle, but the problem is in my main layout.
Let me show what the problem is.
Here is example, how it looks like initally after application start.
As you can see hamburger is present but not shown right now.
Than if swipe drawer menu it appears.
It looks as it should look like, but it can disappear suddenly, when for example invalidateOptionsMenu() was called.
So I have tried to find the problem with toggle, but it is in my layout
Here is my layout xml file.
<?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"
android:id="#+id/navigation_drawer"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linear_layout_main_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:visibility="gone"
app:theme="#style/MainAppTheme.ToolbarMain"
app:titleTextAppearance="#style/MainAppTheme.Toolbar.Title" />
</LinearLayout>
<ViewStub
android:id="#+id/stub_progress_bar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:inflatedId="#+id/progress_bar_buttons"
android:layout="#layout/view_stub_progressbar_bg" />
</FrameLayout>
<ScrollView
android:id="#+id/frame_layout_drawer_left"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fillViewport="true">
</ScrollView>
<ScrollView
android:id="#+id/frame_layout_drawer_right"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="end"
android:fillViewport="true" />
</android.support.v4.widget.DrawerLayout>
The problem is in the last ScrollView, without last/right scroll view everything works fine. By the way this layout works fine with two drawers, but only hamburger is missed in this case.
I guess the problem is that navigation drawer toogle conflicts with two navgiation drawer view.
Because it doesn't matter what kind of view is with gravity end, it will not show hamburger in this case (if view with gravity end is present)
Please help to solve this problem, cause I have no idea how to deal with it, I need two drawers anyway.
Any help will be highly appreciated, thanks.
This is a pretty interesting issue but I think I have a solution. Well 2 solutions,
Have you creating a Frame Layout that houses two separate android.support.v4.widget.DrawerLayout layouts?
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.DrawerLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--your content -->
<ScrollView
android:id="#+id/frame_layout_drawer_left"
android:layout_width="0dp"
android:layout_height="match_parent"/>
</android.support.v4.widget.DrawerLayout>
<android.support.v4.widget.DrawerLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:id="#+id/frame_layout_drawer_right"
android:layout_width="0dp"
android:layout_height="match_parent"/>
</android.support.v4.widget.DrawerLayout>
</FrameLayout>
the imbed the second drawer layout inside of the root
android.support.v4.widget.DrawerLayout.
sample xml
<android.support.v4.widget.DrawerLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--your content -->
<ScrollView
android:id="#+id/frame_layout_drawer_left"
android:layout_width="0dp"
android:layout_height="match_parent"/>
<android.support.v4.widget.DrawerLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:id="#+id/frame_layout_drawer_right"
android:layout_width="0dp"
android:layout_height="match_parent"/>
</android.support.v4.widget.DrawerLayout>
</android.support.v4.widget.DrawerLayout>
I have implemented material navigation drawer and toolbar in MainActivity. For implementing the navigation drawer and to ensure it shows up behind the status bar I have used following code for toolbar.xml
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/primaryColor"
android:fitsSystemWindows="true"
android:theme="#style/ToolbarTheme">
</android.support.v7.widget.Toolbar>
and included this in activity_main.xml as follows:
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/navigation_drawer"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" />
........
in styles.xml I am using following attribute,
<item name="android:windowTranslucentStatus">true</item>
With this everything is working just fine and I get the following result,
The problem occurs when i click on the edit text view (00.00). The moment that edit text view or any edit text view in the page is clicked, the toolbar just expands. See image below:
Now, I was able to rectify the issue by placing android:fitsSystemWindows="true" in activity_main.xml as follows:
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/navigation_drawer"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:layout_height="match_parent">
........
My question is, though this solution works but I am not sure as to why do I have to use the same attribute twice in layout file? And what made the toolbar expand? Also, is this the right approach to tackle this issue?
Edit - Removing android:fitsSystemWindows="true" from toolbar.xml and placing it in drawer layout results in the main activity yielding correct results but other activities have a white bar. See image below.
I had the same problem that you and I will tell you what I did for fix it
1) Defining the toolbar.xml
<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/toolBarDetalleContacto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="4dp"
android:background="?attr/colorPrimary"
android:fitsSystemWindows="true"
app:layout_collapseMode="pin"
app:theme="#style/Theme.GpsFriends.Material">
</android.support.v7.widget.Toolbar>
The trick is to use this attribute in your activity xml inside a <android.support.v4.widget.DrawerLayout> parent component and set here the property android:fitsSystemWindows="true" (also in your toolbar.xml). If you dont use DrawerLayout the permanent grey color in your colorPrimaryDark attribute wont be change, will be always grey and just grey.
2) Defining your activity xml:
<android.support.v4.widget.DrawerLayout 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"
android:fitsSystemWindows="true"
tools:context="com.wherefriend.activities.agregaramigos.AgregarAmigosActivity">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/toolbar_main_gps_friends"
layout="#layout/toolbar_gps_friends"
></include>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/bBuscar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:onClick="buscarAmigos"
android:text="Buscar" />
<EditText
android:id="#+id/etfragmentCorreo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/bBuscar"
android:ems="10"
android:inputType="textEmailAddress" />
</RelativeLayout>
<ListView
android:id="#+id/listaResultado"
android:divider="#drawable/horizontal_linear_layout_divider"
android:dividerHeight="0dp"
android:layout_width="match_parent"
android:layout_height="fill_parent" >
</ListView>
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
As you can see, I defined first child activity xml UI as DrawerLayout but just below I use <LinearLayout> to include my whole User interface View compontents. At first my Toolbar and then the rests of the components.
The result is like that, testing in a real Nexus 4 - LG API versiĆ³n 22: