Android Collapsible & Expand Linear Layout - android

Basically I am trying to do an animation for layout upon user on touch the button. Here is the explanation:
I have a base mapview and on top of that, I am trying to put a linear layout to shows news feed. And normally the linear layout will be collapsed with an expand button. So when user on touch and drag down the button, the linear layout will expand.
I have experienced with this using JQuery and Javascript. However, I have no idea how to do this in Android.
I have found some researches: Tutorial and I not sure how to implement it. And here is my layout.xml:
<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/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.esri.android.map.MapView
android:id="#+id/map"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
initExtent="21801.3, 25801.0, 33218.7, 44830.0">
</com.esri.android.map.MapView>
</FrameLayout>
<LinearLayout
android:id="#+id/navDrawerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#FFFFFF"
android:orientation="vertical">
<ExpandableListView
android:id="#+id/nav_left_drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/dimgrey"
android:choiceMode="singleChoice"
android:divider="#CCCCCC"
android:dividerHeight="0.5dp"
android:groupIndicator="#null">
</ExpandableListView>
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
Any guides? Thanks in advance.

Related

How to show SlidingPaneLayout at right side?

Hi I am a beginner for android and in my app I have to show SlidingPaneLayout at the right side but using my below code it's coming from left side.
Please help me.
How can I make it be at right side?
And second my requirement is my SlidingPaneLayout must be overlapped on Action bar but using my below xml code SlidingPaneLayout showing like my below image
please suggest me how can resolve this two problem
toolbar_layout:-
<?xml version="1.0" encoding="utf-8"?>
<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/ColorPrimary"
android:elevation="4dp"
>
</android.support.v7.widget.Toolbar>
activity_sliding:-
<android.support.v4.widget.SlidingPaneLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/SlidingPanel"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="right">
<ListView
android:id="#+id/MenuList"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</ListView>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="right"
android:background="#101010"
android:orientation="vertical" >
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/android_robot" />
</LinearLayout>
</android.support.v4.widget.SlidingPaneLayout>
main_layout:-
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/tool_bar"
layout="#layout/toolbar_layout">
</include>
<include
android:id="#+id/SlidingPanel"
layout="#layout/activity_sliding">
</include>
</LinearLayout>
In your manifest, add the following attribute to the opening <application> tag.
android:supportsRtl="true"
Then add this attribute to the opening SlidingPaneLayout tag in your layout.
android:layoutDirection="rtl"
And finally, move the tool_bar <include> element into the main content LinearLayout within the SlidingPaneLayout, and adjust the ImageView's height and weight.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#101010"
android:orientation="vertical">
<include
android:id="#+id/tool_bar"
layout="#layout/toolbar_layout">
</include>
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#drawable/android_robot" />
</LinearLayout>
Please note that the child Views of the SlidingPaneLayout will inherit the rtl layoutDirection. This may cause problems in child Views if their layout behavior is affected by the direction. For example, a horizontally-oriented LinearLayout will lay out its children starting from the right. This is easily remedied by setting android:layoutDirection="ltr" on the affected Views.
Also note that this example hard codes the direction in the layout. If you need to support both LTR and RTL layouts application-wide, you'll need to do this programmatically, accounting for the device's default direction.

Two scroll views for two-sided navigation drawer hides toggle

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>

ScrollView as a first element in Navigation Drawer

I'm trying to create a navigation drawer that looks like google play store. What I've noticed in google play store drawer is that it's scrollable top to bottom (not only the listview). I managed to create a beautiful drawer that opens and closes correctly. But when I use a scrollview as a first element in drawer layout, navigation drawer glitches and shows up always on the screen as a scattered layout.
I use this code (I removed scrollview content for clarity, plus, even just one LinearLayout with 2-3 simple buttons in it, is enough to show the glitch, so it's irrelevant):
<?xml version="1.0" encoding="utf-8"?>
<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">
<!-- Main Layout -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:orientation="vertical"
android:id="#+id/screen"
android:layout_height="wrap_content"
tools:context=".Intro"
android:weightSum="1">
</LinearLayout>
<!-- Drawer Layout -->
<ScrollView
android:layout_width="270dp"
android:layout_height="match_parent">
....
....
...
</ScrollView>
Note that I used fixed height elements in the scroll view, and also removed ALL the listviews & expandable list views (views with auto scrolling) without any luck.
I used navigation drawer as following:
<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">
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<fragment android:id="#+id/navigation_drawer"
android:layout_width="#dimen/navigation_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="left"
android:name="com.xxx.NavigationDrawerFragment"
tools:layout="#layout/fragment_navigation_drawer"/>
</android.support.v4.widget.DrawerLayout>
And inside the fragment layout
<LinearLayout 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:background="#color/white"
tools:context=".com.xxx.NavigationDrawerFragment">
<ScrollView
android:id="#+id/list_drawer_menu"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>

Android Navigatoin Drawer (Menu) with scrollable footer

I want to implement a Navigation Drawer (left menu) in Android.
The menu should have a list of items at the top and a footer with two buttons on the bottom.
I have taken two approaches:
1) Add a footer to the list via
mDrawerList.addFooterView(footer);
With this solution the footer is like another item of the list. So if the list has few items, then the footer doesn't show in the bottom, in fact it is right below the last list item.
2) Apply a Relative Layout to the left component like:
<?xml version="1.0" encoding="utf-8"?>
<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 main content view -->
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<!-- The navigation drawer -->
<RelativeLayout
android:id="#+id/left_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start">
<ListView
android:id="#+id/left_drawer_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:choiceMode="singleChoice"
android:divider="#android:color/white"
android:dividerHeight="1dp"
android:background="#color/black"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_margin="20dp">
<Button
android:id="#+id/dashboard_iv_profile_image"
android:layout_width="90dp"
android:layout_height="90dp"
android:text="Test"/>
</RelativeLayout>
</RelativeLayout>
</android.support.v4.widget.DrawerLayout>
However when not all the menu list items are shown the footer is above the list items, hidding the last items.
How can I achieve the right solution?
Do I have to use a ScrollView?
Thanks!
Edited 1
Using the 2nd approach and the android:layout_above in the left_drawer RelativeLayout I get something similar to the picture taken:
It looks to me like there is an issue with your layout. You shouldn't need two RelativeLayouts.
Try something like this:
<RelativeLayout
android:id="#+id/left_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start">
<ListView
android:id="#+id/left_drawer_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:choiceMode="singleChoice"
android:divider="#android:color/white"
android:dividerHeight="1dp"
android:layout_above="#+id/dashboard_iv_profile_image"
android:background="#color/black"/>
<Button
android:id="#+id/dashboard_iv_profile_image"
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_alignParentBottom="true"
android:layout_margin="20dp"
android:text="Test"/>
</RelativeLayout>
Notice the addition of layout_above in the ListView and moving the alignParentBottom to the Button.

Android ProgressBar is not aligning in center of layout

I am using a progress bar inside drawer layout. When I start the app the progress bar is always aligned to top left corner of screen. I tried to set android:layout_gravity property but still It is shown in top left corner. Below is my xml layout file.
<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">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ProgressBar
android:id="#+id/progressBar1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
style="?android:attr/progressBarStyleLarge" />
<ListView
android:id="#+id/mainListView"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</FrameLayout>
<ListView android:id="#+id/left_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:dividerHeight="0dp"
android:background="#FFF"/>
</android.support.v4.widget.DrawerLayout>
use android:gravity="<whatever>" on the FrameLayout, since you only have the progressbar inside it.
Also, your drawer is going to be the listview because that's what has the layout_gravity="start" property set. If you want the progress bar to be within the left-drawer you can wrap the progress bar and listview into a container and set the layout_gravity="start" on that.
without further explanation, that's all i can aid with.
It's work for me. In FrameLayout set
android:layout_centerInParent="true"
Please try this code, This code is work for me.
ProgressBarView.xml
<?xml version="1.0" encoding="utf-8"?>
<ProgressBar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/progressBar"
android:layout_gravity="center"
android:orientation="vertical">
</ProgressBar>
Now include this layout into NavigationView,
<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">
<include layout="#layout/progress_bar"/>
</android.support.design.widget.NavigationView>
Preview in Studio

Categories

Resources