Relative Layout, SlidingDrawer and ListView

Question

I am trying to build a ListView Activity with a toolbar at the top. The rightmost tool in this toolbar will be a handler to a horizontal SlidingDrawer which will provide a sliding EditText on top of the other tools. First I tried to achieve this with LinearLayout and FrameLayout but the slider went as much as the space that was available minus the tools total width. Right now I have done what I want and works great with the following layout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout android:id="@+id/laytoptoolbarhost"
    android:layout_width="fill_parent"
    android:layout_height="55dip"
    android:background="@drawable/toptoolbar_gradient"
    android:padding="5dip">
    <View android:id="@+id/tool10"
        android:layout_width="32dip"
        android:layout_height="32dip"
        android:paddingRight="3dip"
        android:background="#00FF00"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true">
    </View>     
    <View android:id="@+id/tool20"
        android:layout_width="32dip"
        android:layout_height="32dip"
        android:paddingRight="3dip"
        android:background="#00FF00"
        android:layout_toRightOf="@+id/tool10"
        android:layout_centerVertical="true">
    </View>
    <View android:id="@+id/tool30"
        android:layout_width="32dip"
        android:layout_height="32dip"
        android:paddingRight="3dip"
        android:background="#00FF00"
        android:layout_toRightOf="@+id/tool20"
        android:layout_centerVertical="true">
    </View>             
    <SlidingDrawer android:id="@+id/slidesearch"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:handle="@+id/sliderhandle"
        android:content="@+id/txtsearch">
        <ImageView android:id="@+id/sliderhandle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/btn_collapse_states">
        </ImageView>
        <EditText android:id="@+id/txtsearch"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="20sp">
        </EditText>
    </SlidingDrawer>
</RelativeLayout>
<ListView android:id="@id/android:list"
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:layout_weight="1"
           android:drawSelectorOnTop="false"/>
 <TextView android:id="@id/android:empty"
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:gravity="center"
           android:textSize="20sp"
           android:text="@string/lbl_norecords"/>

The problem is that I have to put a fixed value in RelativeLayout android:layout_height parameter in order for this to work. If I place "wrap_content" then the RelativeLayout fills the entire screen and nothing else is showing.

Any help on this is highly appreciated

Thank you in advance

That's odd, I suspect that one of the children s height is causing the problem but they all look ok to me. Sometimes the layout stuff in relative causes unintended consequences. Have you tried this with an empty relative layout (toolbar) or I guess just one child because it's height would be zero otherwise — Idistic, Jul 12 '11 at 17:18
I tried that and the wrap_content value is working as expected. So I am going to put an element at a time to see where it goes wrong. Thank you — ChD Computers, Jul 12 '11 at 17:48
OK when I add the SlidingDrawer the RelativeLayout starts messing around. I am really stuck here... — ChD Computers, Jul 12 '11 at 17:53
I wish you could add and image so I can see what the drawer looks like, but could you set the height of the drawer to whatever drawable you are using? — Idistic, Jul 12 '11 at 17:57
Here is the good layout with 55dip as height [link](http://dl.dropbox.com/u/30661414/01.jpg) and here is what is looks like with wrap_content [link](http://dl.dropbox.com/u/30661414/02.jpg) Thank you very much for your time — ChD Computers, Jul 12 '11 at 18:11
I think if you set the height to the drawer handle (pixels) that might work, but then you might need to reset the height dynamically. One question though, is this just in the designer, or during runtime? I have also had the designer show odd things that don't happen during runtime. Also take a look at the answer I gave with link in it, not the same problem exactly but it might give you some clues on how to solve. — Idistic, Jul 12 '11 at 18:14
The pictures are from the designer but I get the same effect on my real device. Anyway your answer seems to pointing to the right direction and I will investigate it more. Just for the record and based on google documentation for SlidingDrawer that states: "The size of the SlidingDrawer defines how much space the content will occupy once slid out so SlidingDrawer should usually use match_parent for both its dimensions" and from the content of your answer, I think it is safe to assume that this is a bug (?). Thank you very much — ChD Computers, Jul 12 '11 at 18:25

score 2 · Accepted Answer · answered Jul 12 '11 at 18:44

Remove android:layout_centerVertical="true" from the views in your Relative Layout. I also made some changes to your slider to get to what you want. The crucial changes to the slider were:

Add: android:layout_alignTop="@+id/tool30" and android:layout_alignBottom="@+id/tool30"
Remove android:layout_alignParentRight="true" and android:layout_centerVertical="true"

I made a few other cosmetic changes elsewhere while debugging the layout.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <RelativeLayout
        android:id="@+id/laytoptoolbarhost"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:padding="5dip"
        android:layout_weight="0">
        <View
            android:id="@+id/tool10"
            android:layout_width="32dip"
            android:layout_height="32dip"
            android:paddingRight="3dip"
            android:background="#00FF00"
            android:layout_alignParentLeft="true"
            >
        </View>
        <View
            android:id="@+id/tool20"
            android:layout_width="32dip"
            android:layout_height="32dip"
            android:paddingRight="3dip"
            android:background="#FFFF00"
            android:layout_toRightOf="@+id/tool10"
            >
        </View>
        <View
            android:id="@+id/tool30"
            android:layout_width="32dip"
            android:layout_height="32dip"
            android:paddingRight="3dip"
            android:background="#00FFFF"
            android:layout_toRightOf="@+id/tool20"
            >
        </View>
        <SlidingDrawer
            android:id="@+id/slidesearch"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            android:layout_alignTop="@+id/tool30"
            android:layout_alignBottom="@+id/tool30"
            android:handle="@+id/sliderhandle"
            android:content="@+id/txtsearch">
            <ImageView
                android:id="@+id/sliderhandle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/alarm_clock">
            </ImageView>
            <EditText
                android:id="@+id/txtsearch"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:textSize="20sp">
            </EditText>
        </SlidingDrawer>
    </RelativeLayout>
    <ListView
        android:id="@id/android:list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:drawSelectorOnTop="false" />
    <TextView
        android:id="@id/android:empty"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="20sp"
        android:text="nothing" 
        />
</LinearLayout>

Your approach to the solution of my problem really opened my eyes. Thank you so much for your time. Definitely you are the MANdel :-) — ChD Computers, Jul 13 '11 at 11:00

Ephraim · Answer 2 · 2011-07-12T20:59:10.343

0

try surrounding the RelativeLayout with a LinearLayout in which you would put:
android:layout_width="wrap_content" android:layout_width="wrap_content
then change the RelativeLayout from a fixed amount of space, to fill_parent
the other thing you can do is to use Droid Draw which will allow you to lay it out visually.

edited Jul 12 '11 at 20:59

answered Jul 12 '11 at 17:20

Ephraim

8,352
9
31
48

worst case scenario, just use droid draw to lay it out. I'll edit the answer to post a link. – Ephraim Jul 12 '11 at 18:25

score 0 · Answer 3 · edited May 23 '17 at 12:19

0

Given that you have determined that it's the sliding drawer you may want to see if this discussion has any bearing (seems like you might be able to use the info)

SlidingDrawer height

If not I would search a bit more with that type of criteria.

edited May 23 '17 at 12:19

Community

1
1

answered Jul 12 '11 at 17:59

Idistic

6,281
2
28
38

To answer to your previous comment about setting the handle height in pixels, it didn't work either. So I will try your answers suggestion – ChD Computers Jul 12 '11 at 18:43

Relative Layout, SlidingDrawer and ListView

3 Answers3