I am currently working on an android project and I am trying to make use of fragments. I've got it mostly working, however, I can't get the layout right.
In the layout there should be a slide in navigation drawer from the left and a slide in navigation drawer from the right.
At the top of the activity there should be a fragment and underneath that another fragment. The top fragment being smaller than the below fragment.
Even though I have set the height for the fragment it is taking up the whole screen and both fragments are overlapping below. Below is an image which should hopefully highlight what I am trying to achieve.
Below is the XML for the FragmentActivity
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<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">
<fragment android:name="com.BoardiesITSolutions.MysqlManager.QueryEditor"
android:id="#+id/fragment_query_editor"
android:layout_width="match_parent"
android:layout_height="10dp"/>
<fragment android:name="com.BoardiesITSolutions.MysqlManager.MainContentFragment"
android:layout_width="fill_parent"
android:layout_height="100dp" />
<ListView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/left_drawer"
android:layout_width="280dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:paddingLeft="#dimen/list_padding"
android:paddingRight="#dimen/list_padding"
android:choiceMode="singleChoice"
android:divider="#4e4e4e"
android:dividerHeight="1dp"
android:background="#111" />
</android.support.v4.widget.DrawerLayout>
</RelativeLayout>
I've taken out the slide in nav menu from the right for the time being just while I get the basic layout correct
Below is the XML for the query editor fragment
<?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="100dp"
android:orientation="vertical"
android:background="#c1c1c1c1" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="QUERY EDITOR"/>
</LinearLayout>
Thanks for any help you can provide
Your drawer layout should be the outermost parent. You should then have a layout with matchparent height and width that you can use to contain your inner UI fragments. The 2nd and 3rd layouts should be your slide in drawers with the relevant left and right layout_gravity set.
In summary, an outer drawer that contains 3 inner layouts.
Sorry I am on a tablet so can't show this for you but it is all explained here.
http://developer.android.com/reference/android/support/v4/widget/DrawerLayout.html
Related
I'm working on an android app and am using a toolbar at the top of the screen and a navigation bar at the bottom of the screen. I'm using a single activity to create the top and bottom toolbars and fragments to change the content between the toolbars. However, when the contents in the fragment go beyond the size of the screen, the bottom bar disappears.
Here is my home activity xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_home"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.rentables.testcenter.HomeActivity">
<include
android:id="#+id/toolbar_main"
layout="#layout/toolbar_main"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<fragment android:name="com.rentables.testcenter.HomeFragment"
android:id="#+id/fragment_place"
android:layout_weight="0"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:layout="#layout/fragment_home" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="bottom">
<include
android:id="#+id/toolbar_navigate"
layout="#layout/toolbar_navigate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center|bottom"/>
</LinearLayout>
</LinearLayout>
Im guessing it's because of the inner linear layout I have, but I wasn't sure how else to get the nav bar to stay static at the bottom. Any help would be awesome. Thanks
Figured it out. I just changed the whole thing to a relative layout, got rid of the inner linear layout, and instead of gravity I used alignParentBottom="true".
I want to create an activity where there's an image view and a view pager right after. I have try some stuff, but the tabs of the viewpager always appear at the top of the screen.
In order what I would like to have:
Action Bar
Image view (here the M)
Tab
Content of the tab (Fragment)
Here's the closest I have got.
Here's my code. (I'm pretty sur I overkilled it, but I was trying stuff)
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/profile_image_linear_layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true">
<ImageView
android:id="#+id/profile_image_view"
android:layout_width="fill_parent"
android:layout_height="200dp" />
</LinearLayout>
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_below="#+id/profile_image_linear_layout">
<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/pager"
android:layout_width="fill_parent"
android:layout_height="match_parent"
tools:context="madduck.ioweyou.ProfileActivity" />
</FrameLayout>
</RelativeLayout>
Thanks in advance !
Use a TabLayout instead of the ActionBar tabs.
https://developer.android.com/reference/android/support/design/widget/TabLayout.html
For this to work you'd need to use the Android Toolbar (which is really just another View with some half-baked additions).
have a layout like this in your activity: (pseudo code)
<TOOLBAR>
<IMAGEVIEW>
<VIEWPAGER WITH TABS>
You'll want to declare your Theme/Styles to make sure your activity contains no action bar (since you will be replacing it with the Toolbar). Also some versions of Android used to crash if you tried to add a Toolbar when there was an ActionBar. Not sure if this was fixed.
I'm trying to create an application with fragment on the side as a menu bar.
My main problem is that when I open the fragment I can see the buttons behind it and even press them.
Of course I don't want that. I tried adding the property android:clickable="true" to the layout but it didn't help.
This is my code:
<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:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
tools:context="ibuy.ibuy.AddUpdateItem">
.
.
.
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/search_image"
android:id="#+id/btnBrows"
android:onClick="openItemTable"
android:layout_alignTop="#+id/imageView"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
.
.
.
<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="ibuy.ibuy.AddUpdateItem"
android:clickable="true">
<fragment
android:id="#+id/navigation_drawer"
android:layout_width="#dimen/navigation_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start"
android:name="Menus.smallMenu"
tools:layout="#layout/fragment_navigation_drawer"
android:alpha="255" />
</android.support.v4.widget.DrawerLayout>
</RelativeLayout>
This is the code of the listView of the fragment on other file:
<ListView
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:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"
android:background="#cccc"
tools:context="Menus.smallMenu"
android:clickable="true"/>
What am I doing wrong?
Thank you in advance!
I don't know what you meant by "I can see the buttons behind it". I assume you meant behind the DrawerLayout UI.
1)
In that case, you can use the attribute like android:layout_below="#id/btnBrows". As far as I know, all the UI elements should be positioned, otherwise they may be displayed one on top of another, like what you are seeing.
2) Also an issue is that both android:layout_width and layout_height of DrawerLayout is match_parent which fills up the whole screen. It competes screen space with the button. If the button is inside DrawerLayout, that would not be an issue but this might be your intentional design.
If you're into Android Studio, create a new Navigation Drawer Activity. Take a look at the main XML layout.
The DrawerLayout should be your root view. Inside it, you have the RelativeLayout with the buttons and the Fragment that is your navigation drawer.
That way, both are separated and the navigation drawer overlaps correctly when opened.
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.
When I put ScrollView into the content of a DrawerLayout, I am nolonger able to open the drawer by swiping from the side.
Activity layout:
<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">
<!-- The menu_main content view -->
<FrameLayout
android:id="#android:id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<!-- The navigation drawer -->
<ListView
android:name="com.gumtree.androidapp.DrawerFragment"
android:id="#+id/drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start" />
</android.support.v4.widget.DrawerLayout>
In Activity's onCreate I add a fragment which has following layout:
<ScrollView
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">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_height="160dp"
android:layout_width="match_parent"/>
<TextView
android:id="#+id/headline"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="#dimen/headline_text_size"
android:padding="#dimen/detail_text_padding"
android:textIsSelectable="false"/>
<TextView
android:id="#+id/description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="#dimen/description_text_size"
android:padding="#dimen/detail_text_padding"
android:textIsSelectable="false"/>
</LinearLayout>
</ScrollView>
Without the ScrollView everything works fine and I am able to open the drawer by swiping from the side. However when I add the ScrollView, it stops working.
The problem here was silly named ID of FrameLayout used as content container of DrawerLayout. I used system ID (android.R.id.content) which caused that the content fragment was put on the top of all other views - even the drawer.
It also caused fragment's layout to overlap the drawer and - related to this question - blocked the drawer from receiving touch events. The touch events were taken by fragment's ScrollView.
Conclusion: DO NOT USE SYSTEM IDs (android.R.*) WHERE IT IS NOT NEEDED.
I just wanted it to look nice and clean.. Silly me :)