How to add a view above drawer layout? - android

http://developer.android.com/design/patterns/navigation-drawer.html
I am working on navigation-drawer. The code suggested that I use a navigation drawer 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">
<!-- The main content view -->
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- 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="#111"/>
</android.support.v4.widget.DrawerLayout>
The framelayout would store the fragment and the left_drawer is the left menu, the problem is , I would like to add a view between left_drawer and framelayout, which is
left_drawer on top of my view , my view on top of framelayout. How to implement such layout? or I need to add my view to every fragment ?
Thanks
Updated:
<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" >
<!--
As the main content view, the view below consumes the entire
space available using match_parent in both dimensions.
-->
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!--
android:layout_gravity="start" tells DrawerLayout to treat
this as a sliding drawer on the left side for left-to-right
languages and on the right side for right-to-left languages.
The drawer is given a fixed width in dp and extends the full height of
the container. A solid background is used for contrast
with the content view.
-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:orientation="horizontal" >
<TextView
android:id="#+id/bottomMenu1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#color/bottom_menu_unchecked"
android:gravity="center"
android:text="#string/bottom_menu_1"
android:textColor="#ffffff"
android:textSize="20sp" />
<TextView
android:id="#+id/bottomMenu2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#color/bottom_menu_unchecked"
android:gravity="center"
android:text="#string/bottom_menu_2"
android:textColor="#ffffff"
android:textSize="20sp" />
<TextView
android:id="#+id/bottomMenu3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#color/bottom_menu_unchecked"
android:gravity="center"
android:text="#string/bottom_menu_3"
android:textColor="#ffffff"
android:textSize="20sp" />
<TextView
android:id="#+id/bottomMenu4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#color/bottom_menu_unchecked"
android:gravity="center"
android:text="#string/bottom_menu_4"
android:textColor="#ffffff"
android:textSize="20sp" />
</LinearLayout>
<ListView
android:id="#+id/left_drawer"
android:layout_width="240dp"
android:layout_height="0dip"
android:layout_gravity="start"
android:layout_weight="1"
android:background="#111"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp" />
</android.support.v4.widget.DrawerLayout>

Put a View above a ListView, and wrap it inside a vertical LinearLayout . Give to your ListView android:layout_weight="1" and android:layout_height="0dip"

Related

ListView contents in Android navigation drawer not lined up

I followed up the android docs to build a navigation drawer on my app main activity. But the contents are in a string array in my main activity java code. The listview elements are not lined up.
How do I make them lined up to the left so they all are aligned equal distance from the left side of the screen? I also want this behavior in portrait and layout modes.
This is my xml file.
<?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" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<fragment
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="fill_parent"
android:layout_height="match_parent" />
<LinearLayout
android:id="#+id/adla"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/tvan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textColor="#color/blue"
android:textSize="#dimen/abc_action_bar_default_height_material"
android:text="#string/app_name" />
<AutoCompleteTextView
android:id="#+id/acgetd"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:gravity="center_horizontal" />
<requestFocus />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_gravity="bottom" >
<Button
android:id="#+id/bgetd"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/skimmy"
android:text="#string/bgetd" />
<Button
android:id="#+id/brejec"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/skimmy"
android:text="#string/reject" />
</LinearLayout>
</LinearLayout>
</FrameLayout>
<ListView
android:id="#+id/MList"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="left"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"
android:background="#111">
</ListView>
</android.support.v4.widget.DrawerLayout>
From the link you shared, there is a layout R.layout.drawer_list_item. there is an XML layout called drawer_list_item.xml. this is the file responsible for all the item in the listView.
check for gravity in the XML and remove it or set the property to alignParentLeft
You should NOT be creating this yourself, and instead should be using the AppCompat provided NavigationLayout for this.
This is designed to set this all up for you using just menu.xml files, and using this control will ensure your drawer matches the guidelines exactly.
http://developer.android.com/reference/android/support/design/widget/NavigationView.html
I think your Text of ListView is align to the center,
android:layout_gravity="center
change that to right or left according to your requirement
which may help
I suspect that you are using android:gravity="center" instead of android:gravity="center_vertical" in the TextView for the List.

Margin to other Views in RelativeLayout not working

I currently have a problem with one of my Android views.
I'm using a NavigationDrawer and know I'm not able to use margin in my RelativeLayout to get a space between elements
<!-- A DrawerLayout is intended to be used as the top-level content view using match_parent for both width and height to consume the full space available. -->
<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="com.example.cardio.MainActivity" >
<!--
As the main content view, the view below consumes the entire
space available using match_parent in both dimensions.
-->
<FrameLayout
android:id="#+id/search_frame"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<Spinner
android:id="#+id/hersteller"
android:layout_alignParentTop="true"
android:layout_width="250dp"
android:layout_height="50dp"
android:layout_marginStart="30dp" />
<Spinner
android:id="#+id/modell"
android:layout_alignParentTop="true"
android:layout_width="250dp"
android:layout_height="50dp"
android:layout_below="#id/hersteller"
android:layout_marginStart="30dp"
android:layout_marginTop="50dp"
android:clickable="false"
android:longClickable="false" />
<SeekBar
android:id="#+id/preisSB"
android:layout_alignParentTop="true"
android:layout_width="250dp"
android:layout_height="50dp"
android:layout_below="#id/modell"
android:layout_marginStart="30dp"
android:layout_marginTop="150dp" />
<EditText
android:id="#+id/preisET"
android:layout_alignParentTop="true"
android:layout_width="60dp"
android:layout_height="50dp"
android:layout_toEndOf="#id/preisSB"
android:layout_below="#id/modell"
android:layout_marginTop="100dp"
android:layout_marginStart="0dp" />
<EditText
android:id="#+id/leistung"
android:layout_alignParentTop="true"
android:layout_width="250dp"
android:layout_height="50dp"
android:layout_below="#id/preisSB"
android:layout_marginTop="150dp"
android:layout_marginStart="30dp" />
</RelativeLayout>
</FrameLayout>
<!--
android:layout_gravity="start" tells DrawerLayout to treat
this as a sliding drawer on the left side for left-to-right
languages and on the right side for right-to-left languages.
If you're not building against API 17 or higher, use
android:layout_gravity="left" instead.
-->
<!--
The drawer is given a fixed width in dp and extends the full height of
the container.
-->
<ListView
android:id="#+id/navigation_drawer"
android:background="#FFFF10"
android:name="com.example.cardio.NavigationDrawerFragment"
android:layout_width="#dimen/navigation_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start"
tools:layout="#layout/fragment_navigation_drawer" />
</android.support.v4.widget.DrawerLayout>
I already have other layout which looks mostly similar, but I can't find a reason why my new one doesn't work.
Hope you guys can help me.
That's how it looks now:

Android: Dont want the ListView to use the complete Drawer

I'm programming my first little app. In this app i'm using two drawer, one on the right and one on die left side:
<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">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:id="#+id/relLayout"
android:layout_height="match_parent" android:paddingLeft="#dimen/activity_horizontal_margin"
android:background="#D1933C"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin" tools:context=".MainActivity">
<com.schnapsidee.app.CustomWebView
android:id="#+id/Text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/space1"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/space3"
android:scrollbars="vertical"
android:text="#string/fail"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/black" />
<android.support.v7.widget.Space
android:id="#+id/space1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="62dp" />
<android.support.v7.widget.Space
android:id="#+id/space2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<android.support.v7.widget.Space
android:id="#+id/space3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="55dp" />
<TextView
android:id="#+id/seitenZahl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:textColor="#color/black"
android:textSize="22sp" />
</RelativeLayout>
<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="#111"
android:width="0dp"/>
<ListView
android:id="#+id/right_drawer"
android:layout_width="240dp"
android:layout_height="800dp"
android:layout_gravity="end"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"
android:background="#drawable/pergament"
android:scrollbars="vertical"
android:drawSelectorOnTop="false"
/>
I use them like:
mDrawerItemLeft = getResources().getStringArray(R.array.sidebar_array_left);
mDrawerItemRight = getResources().getStringArray(R.array.sidebar_array_right);
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
mDrawerListLeft = (ListView) findViewById(R.id.left_drawer);
mDrawerListRight = (ListView) findViewById(R.id.right_drawer);
mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow,
GravityCompat.START);
mDrawerListLeft.setAdapter(new Adapter(this, R.layout.drawer_list_item_left,
mDrawerItemLeft));
mDrawerListRight.setAdapter(new Adapter(this, R.layout.drawer_list_item_right,
mDrawerItemRight));
mDrawerListLeft.setOnItemClickListener(new LeftDrawerItemClickListener());
mDrawerListRight.setOnItemClickListener(new RightDrawerItemClickListener());
My problem is, that i dont want the right Drawer to use the complete screen-height. I just want it to use a part of it like the red part in this picture:
http://i.stack.imgur.com/IdXAf.jpg
Any idea how i can do this?
Thanks in advance!
There is no need for the Navigation drawer to specifically be a ListView only, you can use any View/ViewGroup for this purpose just set the gravity="end" to make it right navigation drawer.
<ListView
android:id="#+id/right_drawer"
android:layout_width="240dp"
android:layout_height="800dp"
android:layout_gravity="end"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"
android:background="#drawable/pergament"
android:scrollbars="vertical"
android:drawSelectorOnTop="false" />
Change above code to this:
<RelativeLayout
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="end">
<ListView
android:id="#+id/right_drawer"
android:layout_width="match_parent"
android:layout_height="500dp"
android:choiceMode="singleChoice"
android:layout_centerVertical="true" />
</RelativeLayout>
Set the other attributes of ListView as needed, and change the height to something shorter than 800dp because 800dp is quite long height and will definitely be larger than actual screen height on many devices.
give width 0dp to both views and add android:layout_weight="1" in both views.
Rather than using a ListView, use a layout e.g. Linear, Relative and then place the ListView inside that layout. If you place the layout as the last element in your xml, the whole layout becomes the layout of the navigation drawer. You can then position your Listview inside the layout any way you want.
<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">
<!-- The main content view -->
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#111"/>
<!-- The navigation drawer -->
<RelativeLayout
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start">
<!-- Position this list view inside the relative layout the way you want -->
<ListView android:id="#+id/left_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"/>
</RelativeLayout>
</android.support.v4.widget.DrawerLayout>
use in navigation drawer
android:layout_height="0dp"
android:layout_weight="1"
using this, thing you should know ... navigation drawer take height of its content. so it is taking listView,s height .. give height to your listview(as your requirement) then give listView Background "transparent as written below
android:layout_height="as you want"
android:background="#color/tranparent"
to make it under your header then take linear Layout and write navigation drawer,s code after you header .. if you are Relative layout then use android:layout_below="your header id" in your navigation drawer.

The maincontent is accessible from Navigation drawer frame.

i am using the following xml file in navigation drawer
XML:
<!-- A DrawerLayout is intended to be used as the top-level content view using match_parent for both width and height to consume the full space available. -->
<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">
<!-- As the main content view, the view below consumes the entire
space available using match_parent in both dimensions. -->
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
</FrameLayout>
<!-- android:layout_gravity="start" tells DrawerLayout to treat
this as a sliding drawer on the left side for left-to-right
languages and on the right side for right-to-left languages.
The drawer is given a fixed width in dp and extends the full height of
the container. A solid background is used for contrast
with the content view. -->
<RelativeLayout
android:layout_width="240dp"
android:layout_height="fill_parent"
android:layout_gravity="start"
android:id="#+id/drawer_frame"
android:background="#drawable/list_selector"
>
<LinearLayout
android:id="#+id/header"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_width="match_parent"
android:layout_height="60dp"
android:orientation="horizontal"
android:background="#drawable/list_selector"
android:clickable="true"
android:onClick="Login"
>
<ImageView
android:id="#+id/DisplayImage"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_margin="5dp"
android:src="#drawable/displayimage"
android:contentDescription="#string/contentdescription"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:orientation="vertical" >
<TextView
android:id="#+id/Displayname"
android:layout_marginLeft="3dp"
android:layout_marginTop="5dp"
android:layout_marginRight="3dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/counter_text_color"
android:textSize="14sp"
android:text="#string/Signin"
android:gravity = "center"
/>
</LinearLayout>
</LinearLayout>
<ListView
android:id="#+id/left_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:divider="#color/card_background"
android:dividerHeight="1dp"
android:background="#drawable/list_selector"
android:layout_marginTop="5dp"
android:layout_below="#+id/view1"
/>
<include android:id="#+id/progressinformation" layout="#layout/emptyview"/>
<View
android:id="#+id/view1"
android:layout_width="match_parent"
android:layout_height="2dp"
android:layout_alignParentLeft="true"
android:layout_below="#+id/header"
android:layout_marginTop="2dp"
android:layout_marginBottom="2dp"
android:background="#color/card_background"
/>
</RelativeLayout>
</android.support.v4.widget.DrawerLayout>
i am setting include as an Empty view for left_drawer (left_drawer.setEmptyView(R.id.progressinformation)).
my problem is, suppose if listview is empty when i click on the navigation drawer the elements behind the navigation drawer are selecting. how to avoid this selection when listview is empty.
Not sure if understand correctly but you have to set navigation drawer layout param clickable to true
<RelativeLayout
android:layout_width="240dp"
android:layout_height="fill_parent"
android:layout_gravity="start"
android:id="#+id/drawer_frame"
android:background="#drawable/list_selector"
android:clickable="true"
>

Navigation drawer - items overlapping in horizontal orientation

In my Nav Drawer, I have a ListView and below that some ImageButtons. To show the Listview on top and rest of the views at the bottom of the screen, I used relative layout as below.
In this scenario, when I rotate my phone to horizontal orientation (e.g. not enough length to show ListView and others), the ImageButtons overlap the ListView (like floating DIVs in HTML).
I tried using LinearLayout with layout_gravity = "bottom" for the container of ImageButtons, but then the buttons were placed adjacent to the Listview, rather than at the bottom of the scren.
Please guide me how to implement this correctly.
<!-- Framelayout to display Fragments -->
<FrameLayout
android:id="#+id/frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<RelativeLayout
android:id="#+id/drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start">
<ListView
android:id="#+id/list_slidermenu"
android:layout_width="240dp"
android:layout_height="wrap_content"
android:layout_gravity="start" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<LinearLayout
android:id="#+id/extrabuttons"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageButton
android:id="#+id/credit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/information" />
<ImageButton
android:id="#+id/exit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_exit" />
</LinearLayout>
<TextView
android:id="#+id/ad"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/extrabuttons"
android:gravity="start"
android:text="#string/ad_tag" />
</RelativeLayout>
</RelativeLayout>
This is what it should be looked like & how it is looked like in vertical mode
This is how it is looked like in horizontal mode
The layout components are overlapped because you have used Relative layout as parent.Try to use Linear layout with vertical orientation, instead of Relative layout.
Then Try to do this
<LinearLayout
android:id="#+id/drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:orientation="vertical" >
<ListView
android:id="#+id/list_slidermenu"
android:layout_width="240dp"
android:layout_height="0dp"
android:layout_gravity="start"
android:layout_weight="6" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<LinearLayout
android:id="#+id/extrabuttons"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageButton
android:id="#+id/credit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<ImageButton
android:id="#+id/exit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
</LinearLayout>
<TextView
android:id="#+id/ad"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/extrabuttons"
android:gravity="start"
android:text="string/ad_tag" />
</RelativeLayout>
</LinearLayout>
I know my answer is bit late. I will suggest to make seperate xml layout and add this layout to listview with 'addFooterView' method. It will bound that xml always in last of that list view. I hope it will help you.

Categories

Resources