1

Trying to add a Navigation Drawer which is breaking my layout. The main layout has some buttons, an Edit Text box and a Listview. The drawer also has a list view. When I add the drawer, the Listview on the main layout takes on a grey colour and takes over the entire screen. The drawer however, works as expected.

Here are my layout files:

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="1000dp" android:id="@+id/drawer_layout" tools:context=".Departures" android:weightSum="3" > <!-- The main content view --> <TextView android:id="@+id/textView1" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginBottom="12dp" android:layout_marginTop="12dp" android:gravity="center_horizontal" android:text="@string/activity_departures" android:textSize="24sp" /> <TextView android:id="@+id/div_bar_1" android:layout_width="match_parent" android:layout_height="2dp" android:layout_marginBottom="7dp" android:background="#666666" android:text="@string/empty" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" > <Button android:id="@+id/terminal_1_btn" style="@style/navigation_btn" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:layout_marginRight="5dp" android:layout_weight="1.5" android:background="@drawable/navigation_btn" android:minHeight="2dp" android:text="@string/terminal_1_btn" /> <Button android:id="@+id/terminal_2_btn" style="@style/navigation_btn" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginLeft="5dp" android:layout_marginRight="10dp" android:layout_weight="1.5" android:background="@drawable/navigation_btn" android:minHeight="2dp" android:text="@string/terminal_2_btn" /> </LinearLayout> <TextView android:id="@+id/div_bar_2" android:layout_width="match_parent" android:layout_height="1dp" android:layout_marginBottom="7dp" android:layout_marginTop="7dp" android:background="#999999" android:text="@string/empty" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" > <Button android:id="@+id/button1" style="@style/navigation_btn" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:layout_weight="1" android:background="@drawable/navigation_btn" android:minHeight="2dp" android:text="@string/today_btn" /> <Button android:id="@+id/button2" style="@style/navigation_btn" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" android:layout_weight="1" android:background="@drawable/navigation_btn" android:minHeight="2dp" android:text="@string/tomorrow_btn" /> <Button android:id="@+id/button3" style="@style/navigation_btn" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginRight="10dp" android:layout_weight="1" android:background="@drawable/navigation_btn" android:minHeight="2dp" android:text="@string/variable" /> </LinearLayout> <TextView android:id="@+id/div_bar_3" android:layout_width="match_parent" android:layout_height="1dp" android:layout_marginBottom="7dp" android:layout_marginTop="7dp" android:background="#999999" android:text="@string/empty" /> <EditText android:id="@+id/searchFlights" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" android:hint="@string/search_flights" android:inputType="text" android:textSize="14sp" /> <TextView android:id="@+id/div_bar_2" android:layout_width="match_parent" android:layout_height="1dp" android:layout_marginBottom="7dp" android:layout_marginTop="7dp" android:background="#999999" android:text="@string/empty" /> <ListView android:id="@android:id/list" android:layout_width="match_parent" android:layout_height="wrap_content"> </ListView> <!-- The navigation drawer --> <include layout="@layout/navigation_drawer" /> </android.support.v4.widget.DrawerLayout>

The include file:

 <!-- The navigation drawer --> <ListView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/left_drawer" android:layout_width="160dp" android:layout_height="match_parent" android:layout_gravity="start" android:background="#fff" android:choiceMode="singleChoice" android:divider="@android:color/transparent" android:dividerHeight="0dp" >

The Drawer Listitem:

 <TextView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/drawer_list_item" android:layout_width="match_parent" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceListItemSmall" android:gravity="center_vertical" android:paddingLeft="16dp" android:paddingRight="16dp" android:textColor="#000" android:background="?android:attr/activatedBackgroundIndicator" android:minHeight="?android:attr/listPreferredItemHeightSmall"/>

The height of the root element (1000dp) is only to address a display issue on the emulator. Help! I'm stuck on this for hours...

Improve this question
2
  • So you're saying that the grey shade is present even when the drawer is hidden? When the drawer is visible, the rest of the layout is shaded to signify that it is not in focus. Commented Jul 15, 2013 at 16:39
  • Yes. The shade is present even when the drawer is hidden. I will try out the answer below, the absence of a Frame Layout could be my undoing... Commented Jul 15, 2013 at 17:43

1 Answer 1

Reset to default
1

The height of the root element(1000dp) is only to address a display issue on the emulator..

I really don't get what you're doing here, as the XML seems overly complex for what you've described as your goal. The suggested way to set up a Nav Drawer is so simple and straightforward. I also don't see where you've defined a FrameLayout that will host the rest of your layout(or main content). It's really the best way to go and leads to much cleaner looking XML. You define your main content layout inside your FrameLayout(wrap your textviews and edittexts inside linearlayout or something) and have them be descendants of said FrameLayout. Then add your DrawerLayout which contains your navigation list.

You have child TextViews and EditTexts floating around, outside of ViewGroups and it just doesn't make any sense to me why those aren't wrapped in appropriate parents.

The sample implementation is really all you need, as I've built complex layouts using ViewPagers, Fragments, composite views etc etc and they've all worked well with Navigation Drawer because I followed the instructions the developer guide suggested.

<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"/>

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Thanks for your feedback. I was following the developer guide but without using Frame Layout. I'll give that a try and report back.
@ Jade Byfield Thanks for the reply. You're right, my layout was untidy and I omitted the Frame Layout element. Adding that, and wrapping the other elements in appropriate parent elements solved my problems.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.