I am fairly new to android development and I am having a hard time figuring out the simplest way to create reusable code. I have found quite a few articles on google, android has a lot of parts and solutions I am having trouble seeing the pros and cons, so I will just post what I would like to do, then see what pops up.
Currently I have:
<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"
tools:context=".MainActivity">
<RelativeLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/toolbar"
layout="#layout/widget_toolbar"/>
<ListView
android:background="#color/amber_A700"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/toolbar">
</ListView>
</RelativeLayout>
<apps.new.app.ui.widget.ScrimInsetsFrameLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/linearLayout"
android:layout_width="#dimen/navigation_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#ffffffff"
android:fitsSystemWindows="true"
app:insetForeground="#4000" >
<fragment android:id="#+id/navigation_drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:name="com.example.newapp.NavigationDrawerFragment"
tools:layout="#layout/frag_nav_drawer" />
</apps.new.app.ui.widget.ScrimInsetsFrameLayout>
</android.support.v4.widget.DrawerLayout>
Essentially what I want is to make this a library in which I could use in any project I want with a more simplistic style:
<android.my.custom.widget
...
app:drawerFragment="drawer_fragment_name"
...>
//Listview would go here
</android.my.custom.widget>
This would allow me to set the drawer fragment, include the "ScrimInsetsFrameLayout" automatically, include the toolbar automatically. Essentially I want a reusable library in which I could update and it would push to any app I use it in. What is the best practice with android dev? If this is simply a custom widget, how would I go about including other widgets in it and inserting fragments in them?
ultimately this would allow me to simplify the code a bunch and only see what is for this activity instead of seeing a bunch of boiler-plate code for the navigation drawer, RelativeLayout and toolbar.
I feel like I am just missing something obvious.
You need to create new class which inherits from DrawerLayout, inflate your views, set params.
Tutorial is here
Related
I'm implementing a Navigation View on my activityHome for the first time. When i run the app and enter the home activity it function well. The problem is at the XML editor on the android studio, the Nav View is above all the other elements and doesn't let me click on them.
I haven't touch anything else but these yet.
Thanks.
XML CODE:
<?xml version="1.0" encoding="utf-8"?>
<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/dl"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
android:fitsSystemWindows="true"
tools:context=".activities.HomeActivity"
tools:openDrawer="start">
<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"
app:headerLayout="#layout/header"
android:background="#color/colorPrimary"
app:menu="#menu/menu"
tools:ignore="MissingConstraints" />
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageButton
android:id="#+id/iv_menu"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="?android:selectableItemBackground"
android:scaleType="centerInside"
app:layout_constraintBottom_toTopOf="#+id/guideline46"
app:layout_constraintEnd_toStartOf="#+id/guideline139"
app:layout_constraintStart_toStartOf="#+id/guideline135"
app:layout_constraintTop_toTopOf="#+id/guideline45"
android:elevation="10dp"
app:srcCompat="#drawable/menubuttonofthreelines_79781" />
...
and continues with the other elements.
Your layout has nothing wrong..
The reason that Android Studio shows that the drawer layout in the Open state in the design view because you set tools:openDrawer="start" in the DrawerLayout .. if you want to see the main layout in the design mode (i.e. to make the drawer in the close state), then you need to remove this attribute.
This attribute won't affect the looking of your app when you launch it.
Documentation:
You can insert sample data in your layout preview by using the tools: prefix instead of android: with any attribute from the Android framework. This is useful when the attribute's value isn't populated until runtime but you want to see the effect beforehand, in the layout preview.
XML tools namespace is just used to show you some behavior on Android Studio, but not while you run the app. Please check documentation for more info
I'm looking for a way to reproduce the navigation drawer of iOS on Android.
I can't figured out how to reproduce it.
The Navigation Drawer on iOS slide all the previous page and keep a little part of it on screen like this:
iOS like Navigation Drawer
Meanwhile the android Navigation Drawer goes over the previous page and hide it like this:
Android like Navigation Drawer
Is it just possible ?
Affirmative, it's very much possible in Android. Add the following in your build.gradle file:
dependencies {
implementation 'com.infideap.drawerbehavior:drawer-behavior:0.2.2'
}
Use android.support.design.widget.NavigationView inside your layout with com.infideap.drawerbehavior.AdvanceDrawerLayout to achieve this type of behavior like this:
<com.infideap.drawerbehavior.AdvanceDrawerLayout 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"
android:background="#color/colorWhite"
tools:openDrawer="start">
<include
layout="#layout/app_bar_default"
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"
android:background="#color/colorWhite"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer" />
</com.infideap.drawerbehavior.AdvanceDrawerLayout>
For more on the implementations & sample demos, please follow this link. Hope this helps!
iOS doesn't have a build-in Navigation Drawer component. The first link you provided contains a custom implementation. Best possible is to use third-party solution. For example, quite popular is SideMenu.
Can I use the include statement to create a menu.xml file in another activity?
I have tried this line of code in the second activity xml file.
It crashes the app. Is my syntax correct?
<include layout="#menu/menu_main"/>
So every time the menu is needed it has to be inflated?
I have tried this with various include syntax statements according to this post you can not use the include statement so YES you will need to inflate the menu each time it is need.
HERE
Yes, you can do this. For example, this is what I do when I need to replicate a navigation drawer in different activities:
<android.support.v4.widget.DrawerLayout
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:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- The main content view -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
</FrameLayout>
<!-- The navigation drawer -->
<include layout="#layout/nav_drawer"/>
</android.support.v4.widget.DrawerLayout>
I've been dealing with this DrawerLayout and NavigationViews and I don't seem to ba able to solve this issue. According to google guidelines the first navbar should cover the app bar and the second one should NOT.
How I achieve that? Whatever I do it either makes both of them cover or both of them not cover the app bar.
Since navigation view is pretty new I could not get any suitable answer googling and exploring overflow.com. Any guide, help, tutorial, sample... is highly appreciated.
Thanks before.
Here is my activity.xml
<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">
<!-- As the main content view, the view below consumes the entire
space available using match_parent in both dimensions. -->
<LinearLayout
android:orientation="vertical"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<include
android:id="#+id/app_bar"
layout="#layout/app_bar">
</include>
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="#+id/nav_draw"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/drawer_header"
app:menu="#menu/drawer"/>
<android.support.design.widget.NavigationView
android:id="#+id/second_nav_draw"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="end"
/>
</android.support.v4.widget.DrawerLayout>
I don't know about NavigationView, but with other views a simple margin used to work. Try:
android:layout_marginTop="?attr/actionBarSize"
I notice that the drawers within the Google applications are scrollable, but I cannot for some reason come to the conclusion of how to achieve a scrollable DrawerLayout. I attempted to construct the layout file with the following design paradigm.
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/frameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".mainScreen">
<!-- Layout of Activity -->
</FrameLayout>
<!-- DrawerLayout segment -->
<ScrollView
android:id="#+id/scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/drawerLinearLayout"
android:orientation="vertical"
android:layout_width="260dp"
android:layout_height="match_parent"
android:layout_gravity="start|bottom"
android:layout_marginTop="?android:attr/actionBarSize"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"
android:background="#77000000">
<!-- Layout of Drawer -->
</LinearLayout>
</ScrollView>
</android.support.v4.widget.DrawerLayout>
But, with or without the ScrollView, the drawer just cuts items off at the bottom when they go beyond the end of the screen. I can't get any form of scrolling enabled. Not sure what I am missing or need to enable. Thoughts would be appreciated.
The LinearLayout in the DrawerLayout segment contains different styled views. One view displays title only with a divider below it, one displays an imageview with text next to it and another displays a title with a switch built into the row. So, multiple styled views need to be accounted for if done outside of XML coded layout files.
While using a ListView is a valid option, it was useful for me to attempt and resolve the situation for which I already had such a large XML file constructed for my layout in between the ScrollView above. As it turned out, there were only a few small modifications needed in order to get it working as intended. The latest layout file constructed is the following:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/frameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".mainScreen">
<!-- Layout of Activity -->
</FrameLayout>
<!-- DrawerLayout segment -->
<ScrollView
android:id="#+id/scrollView"
android:layout_width="260dp"
android:layout_height="match_parent"
android:layout_gravity="start|bottom"
android:layout_marginTop="?android:attr/actionBarSize">
<LinearLayout
android:id="#+id/drawerLinearLayout"
android:orientation="vertical"
android:layout_width="260dp"
android:layout_height="wrap_content"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"
android:background="#77000000">
<!-- Layout of Drawer -->
</LinearLayout>
</ScrollView>
</android.support.v4.widget.DrawerLayout>
The main modifications required me to alter where the gravity and the margin existed. The gravity needed to be in the surrounding ScrollView otherwise it would cause odd behavior that didn't scroll or actually crashed in some instances apparently. Then the inner layout needed to be changed to 'wrap content'.
If the margin was not moved into the ScrollView as well, it apparently doesn't scroll down to the bottom. It left a margin of scroll unscrolled at the bottom. Once this was resolved, the DrawerLayout worked as was expected at this point. The ListView option also proposed is another approach to be used, but as mentioned at this point it was worth me analyzing it a bit further to re-use the code that I already had written; especially with several different custom views that would need to be handled inside the view.
It seems that it only works properly with a ListView. You will take less time to migrate to ListView than trying to make the ScrollView to work.
You should use a listview along with the frame layout. Something like this :
<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">
<FrameLayout
android:id="#+id/frameLayout"
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"/>
<ListView android:id="#+id/left_drawer"
android:layout_width="180dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"
android:background="#111"/>
</android.support.v4.widget.DrawerLayout>
You can also refer to the Navigation Drawer documentation at developer.android.com. It has everything you will need.