I'm following this tutorial
I'm stuck at the bit where I'm trying to add the button to the app bar.
When I swipe right, the navigation drawer appears, so thats working. Its just the button in the bar that I'm having problems with, When I add the v7.widget.Toolbar into the XML under FrameLayout it ruins the layout.
Orginally in my XML I just had a constraint layout, with a Scrollview as a child and inside that a LinearView (vertical).
However I cant get my head around why this isnt working:
<?xml version="1.0" encoding="utf-8"?>
<!-- Use DrawerLayout as root container for activity -->
<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"
android:fitsSystemWindows="true">
<!-- Container for contents of drawer - use NavigationView to make configuration easier -->
<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:menu="#menu/drawer_view"
app:headerLayout="#layout/nav_header" />
<!-- Layout to contain contents of main body of screen (drawer will slide over this) -->
<FrameLayout
android:id="#+id/content_frame"
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="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/seeds_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:background="#drawable/customborder"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"></LinearLayout>
</ScrollView>
</FrameLayout>
When I run this the top bar just seems to overtake the entire window and the color disappears and the button is not clickable because the LinearLayout is over the top of it. Where am I going wrong?
put NavigationView below FrameLayout.
Following on MikeM's comments above, He said:
FrameLayout will overlap its child Views; i.e., it'll stack them one atop the other in the z-axis. Change the FrameLayout to a vertical LinearLayout, which will lay them out edge to edge. Also, your NavigationView needs to be listed last within the DrawerLayout.
So basically I had change my FrameLayout to Linearlayout and that worked. Its a bit dissapointing that the Android documentation is like that but what I do.
Thanks, MikeM!
Related
So, I made a memo Android app, and I've used the new material BottomAppBar with a FAB, and I want to show a bottom navigation drawer when I press on the hamburger item (R.id.home) on my BottomAppBar, but I all what I've found on the Internet was regular Navigation drawers (that expand from the side).
Also, the BottomAppBar allows me to choose only a still icon for the navigation icon using app:navigationIcon attribute, while I want to have the same animated hamburger icon that converts to an arrow.
Here's my main 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"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<ListView
android:id="#+id/noteList"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:listitem="#layout/note_view" />
</androidx.core.widget.NestedScrollView>
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:backgroundTint="#color/colorPrimary"
app:fabAlignmentMode="center"
app:fabAnimationMode="slide"
app:fabCradleRoundedCornerRadius="40dp"
app:hideOnScroll="true"
app:navigationIcon="#drawable/ic_menu_24dp" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_create_24dp"
app:backgroundTint="#color/colorAccent"
app:layout_anchor="#id/bar"
app:rippleColor="#color/rippleColor" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Note: I'm trying to make an app like Reply (a Material design study) that's available on material.io.
I am trying to add navigation drawer with bottom navigation view. I have full screen activities for all bottom navigation view fragments. And I have app icon top left side. I want to open navigation drawer when user click on that icon. So How can I implement that?
I tried with DrawerLayout. But it includes the toolbar. And I tried to open new Activities on click of item of Navigation drawer but it gives IllegleStateException.
I shared the following code below. You have to put the hamburger menu icon for Nav Drawer in the toolbar and a NavigationView inside the DrawerLayout which has a child (ListView, RecyclerView, ExpandableListView etc.) to be filled programmatically or you can just set static items in the NavigationView by setting the menu in NavigationView. Hope that helps. Do ask if you have any more queries.
<androidx.drawerlayout.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">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorActivityBackground"
android:descendantFocusability="beforeDescendants"
android:focusableInTouchMode="true"
android:layoutDirection="locale"
android:orientation="vertical"
android:textDirection="locale">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.Toolbar
android:id="#+id/topbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
app:contentInsetEnd="0dp"
app:contentInsetLeft="0dp"
app:contentInsetRight="0dp"
app:contentInsetStart="0dp"/>
</RelativeLayout>
</FrameLayout>
<com.google.android.material.navigation.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
android:maxWidth="320dp">
<ExpandableListView
android:id="#+id/navList"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:animateLayoutChanges="true"
android:background="#color/white"
android:groupIndicator="#null" />
</com.google.android.material.navigation.NavigationView>
</androidx.drawerlayout.widget.DrawerLayout>
I want to show the bottom navigation view at the top of my app like facebook, i try this but its not showing anything.
Use TabLayout and you will have something like that.
Here below is a video which I think it will help you.
You need to use Fragments and TabLayout
https://codinginflow.com/tutorials/android/tab-layout-with-fragments
It does not matter where the bottom navigation view is placed, you can just place it at top of your layout.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
app:itemIconTint="#color/bottom_navigation_colors"
app:itemTextColor="#color/black"
app:menu="#menu/bottom_navigation_menu"
app:labelVisibilityMode="labeled"/>
<androidx.viewpager.widget.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
If I set the order as seen in the picture --> Image
The DrawerLayout is drawn under the content_main
And the DrawerLayout dosen't get OnClickEvents
If I set The Order: first content_main then drawer_layout
The DrawerLayout is drawn over the content_main but the content_main doesn't get OnClick Events
Here my activity_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"
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="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/toolbar"
android:clickable="true">
<!--The main content view-->
<!--The navigation drawer-->
<ListView android:id="#+id/left_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"
android:background="#fff"
android:visibility="visible"/>
</android.support.v4.widget.DrawerLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/toolbar"
android:id="#+id/content_main"
android:focusable="false">
</RelativeLayout>
</RelativeLayout>
The Problem is only one of the layouts get OnClickEvents.
How do i do that both Layouts get OnClickEvents.
Sorry for my English.
You should put the content_main into the DrawerLayout as seen in the picture.
Picture
I recently came across something for placeholderview onClick. You have to keep the XML file in the correct layout as well else the onClick on the items wont work.
For example in my faulty layout I had
DrawerLayout ->
FrameLayout (for the side menu) ->
LinearLayout (including my UI).
The correct layout was DrawerLayout then LinearLayout and FrameLayout.
I spent a lot of time on a silly mistake. If anyone knows why that would be the case please reply back. Thank you.
I am using this library from umanoAndroidSlidingUpPanel and it works fine theres just a problem I cant fix.
the main child is a mapview (static main view) that is working fine and the second child (the slidinguppanel) is a responsive html file in a webview and an imageview.
the problem is that when I swipe up to slide the panel i cant scroll the html file inside the webview.
the library states that I can make a single view draggable so that I can scroll the other but i really dont know how to do it help would be really appreciated.
heres my xml file
<com.sothree.slidinguppanel.SlidingUpPanelLayout
xmlns:sothree="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/sliding_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
sothree:panelHeight="50dp"
sothree:shadowHeight="4dp">
<fragment
android:id="#+id/map"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:name="com.google.android.gms.maps.MapFragment"/>
<LinearLayout
android:layout_width="match_parent"
android:id="#+id/llayout"
android:orientation="vertical"
android:layout_height="match_parent" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity ="center_horizontal"
android:src="#drawable/divider">
</ImageView>
<WebView
android:layout_width="match_parent"
android:id="#+id/desc"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:paddingBottom="7dp"/>
</LinearLayout>
</com.sothree.slidinguppanel.SlidingUpPanelLayout>
I fixed it I just had to call the library method for setting the dragview and set only the imageview as draggable so the webview would scroll normally,
heres how I did it:
ImageView image=(ImageView)findViewById(R.id.divideri); //Layout to slide
SlidingUpPanelLayout layout = (SlidingUpPanelLayout)
findViewById(R.id.sliding_layout);
layout.setDragView(image);
Over and out ...