3

I'm using the SliderDrawer in Android. Inside the drawer I have a layout which contains a inflated layout. Here's the end result:

enter image description here

Notice how the content of the drawer (in gray) doesn't take the whole width of the parent (black area).

Here's the drawer code (main_layout.xml):

[UPDATE 2, added the whole code:]

<?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">
  <LinearLayout android:id="@+id/banner" android:orientation="horizontal"
    android:layout_width="fill_parent" android:layout_height="wrap_content"
    android:gravity="center" android:padding="3px">
    <ImageView android:src="@drawable/title"
      android:layout_width="wrap_content" android:layout_height="wrap_content" />
    <TextView android:layout_width="wrap_content" android:text="@string/title"
      android:layout_height="wrap_content" android:textSize="18sp"
      android:gravity="center_vertical" android:paddingLeft="4px"
      android:textStyle="bold" />
  </LinearLayout>
  <LinearLayout android:layout_below="@id/banner" android:id="@+id/middle" android:orientation="vertical"
    android:layout_width="fill_parent" android:layout_height="fill_parent">
    <View android:layout_width="fill_parent" android:layout_height="1dip"
      android:background="#FF555555" />
    <ListView android:id="@android:id/list" android:layout_width="fill_parent"
      android:layout_height="fill_parent" android:padding="3px"
      android:layout_weight="1" />
    <TextView android:id="@android:id/empty" android:layout_width="fill_parent"
      android:layout_height="fill_parent" android:text="@string/no_items"
      android:padding="3px" android:layout_weight="1" />
  </LinearLayout>
  <LinearLayout android:id="@+id/LinearLayout01" android:layout_alignParentBottom="true"
    android:layout_width="fill_parent" android:layout_height="wrap_content"
    android:orientation="vertical" android:gravity="center_horizontal|bottom">
    <SlidingDrawer android:id="@+id/drawer" android:background="#22222222" 
      android:layout_height="110dip" android:handle="@+id/handle"
      android:content="@+id/media_player_container" android:layout_width="fill_parent">
      <ImageView android:id="@+id/handle" android:layout_width="fill_parent"
        android:layout_height="wrap_content" android:src="@drawable/tray" android:scaleType="centerCrop"/>
      <LinearLayout android:id="@+id/media_player_container"
        android:layout_width="fill_parent" android:layout_height="wrap_content"
        android:gravity="bottom|center_horizontal" />
    </SlidingDrawer>
  </LinearLayout>
</RelativeLayout>

Here's the code of the inflated area (media_player_container.xml):

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="wrap_content"   android:gravity="bottom|center_horizontal" android:orientation="vertical"  android:background="#FF555555" android:padding="3px">
  <SeekBar android:id="@+id/progress" android:layout_width="fill_parent" android:layout_height="wrap_content" android:paddingBottom="3px" android:progress="1000" />
  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="wrap_content"  android:orientation="horizontal">
    <ImageButton android:id="@+id/speakerhandset" android:src="@drawable/handset" android:layout_width="60dip" android:layout_height="wrap_content" android:scaleType="center"/>
    <ImageButton android:id="@+id/rewind" android:src="@android:drawable/ic_media_rew" android:layout_width="60dip" android:paddingRight="3px" android:layout_height="wrap_content" android:scaleType="center"/>
    <ImageButton android:id="@+id/play" android:src="@android:drawable/ic_media_play" android:layout_width="60dip" android:paddingRight="3px" android:layout_height="wrap_content" android:scaleType="center"/>
    <ImageButton android:id="@+id/pause" android:src="@android:drawable/ic_media_pause" android:layout_width="60dip" android:paddingRight="3px" android:layout_height="wrap_content" android:visibility="gone"  android:scaleType="center"/>
    <ImageButton android:id="@+id/fastforward" android:src="@android:drawable/ic_media_ff" android:layout_width="60dip" android:paddingRight="3px" android:layout_height="wrap_content" android:scaleType="center"/>
  </LinearLayout>
</LinearLayout>

Can you spot what I'm doing wrong??

[Update 1] Here's the code (inside onCreate()) where I inflate the layout:

LinearLayout container = (LinearLayout) this.findViewById(R.id.media_player_container);

LayoutInflater layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
LinearLayout layout = (LinearLayout) layoutInflater.inflate(R.layout.media_player, null, false);
container.addView(layout);
2
  • what does R.layout.media_player refer to? I don't see xml for that. Mar 25, 2011 at 17:56
  • Are you using NinePatches for your background? If so check the content area on that. Mar 29, 2011 at 0:55

4 Answers 4

6

Instead of inflating your content layout and then adding it as a nested linearlayout, try actually just including the layout you want directly in the media_player_container layout. Start simple (maybe just have its content be a View with a solid background and no padding) and work your way up from there until you can find out what triggers the issue.

You also may want to consider replacing these lines:

LinearLayout container = (LinearLayout) this.findViewById(R.id.media_player_container);

LayoutInflater layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
LinearLayout layout = (LinearLayout) layoutInflater.inflate(R.layout.media_player, null, false);
container.addView(layout);

with:

View.inflate(this, R.layout.media_player, 
        (ViewGroup) findViewById(R.id.media_player_container)

By inflating the view directly into the container, you allow the view system to properly manage your layout attributes (which technically apply to the container, not the view you define them on). Without them, the layout attributes defined in your inflated views are discarded before you add them as a child (since it can't know what type of layout you're inflating them into).

1
  • +1 for this answer. The act of adding one layout to another in code overrides certain layout attributes in the process. For instance, calling addView() without any LayoutParams defaults the layout parameter of that view to WRAP_CONTENT for both height and width...which looks like what is going on here. Either add explicit layout params in your choice or do the whole thing in XML using <include> and <merge> (I would choose the latter).
    – devunwired
    Mar 28, 2011 at 15:40
2

You need to give the LayoutParams while adding the view.

container.addView(layout, new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT));
1
  • That would probably work... The other solution suits my need better. Thanks anyway.
    – Emmanuel
    Mar 29, 2011 at 15:50
1
<SlidingDrawer android:id="@+id/drawer" android:padding="10dip" android:background="#22222222" android:layout_height="110dip" android:handle="@+id/handle" android:content="@+id/media_player_container" android:layout_width="fill_parent">

Notice android:padding="10dip". The width of the sliding drawer is filling the parent, but you have 10dip on all four sides. If you want the padding on top and bottom still, do:

android:paddingTop="10dip"
android:paddingBottom="10dip"
8
  • @Emmanuel Did you remove android:padding="10dip"? If you did and it still isn't expanding, check for the same thing in the parent layout. If the layout containing the SlidingDrawer doesn't fill the screen completely because of margin, padding, etc. then the SlidingDrawer itself can't
    – Cameron
    Mar 23, 2011 at 21:28
  • @Emmanuel The LinearLayout has android:padding="3px" which is keeping it from filling the entire screen.
    – Cameron
    Mar 23, 2011 at 21:42
  • @CameronW: Yes I did remove padding=10 before adding paddingTop and paddingBottom. I removed the padding for the parent. Now the bar reaches the edge of the gray area but NOT the whole width of the screen.
    – Emmanuel
    Mar 24, 2011 at 14:37
  • @Emmanuel Check your handle image to make sure the image does not have any blank space on either side (nothing in code, in an actual image editor). If it doesn't, you'll need to include the rest of your XML then because padding is the only issue I can see in that code
    – Cameron
    Mar 24, 2011 at 16:16
  • @CameronW: The handle image is wider than the screen, but I use scaleType="centerCrop" to crop the ends. If you look at the ImageView, it uses the whole width of the parent. But its sibling, LinearLayout, doesn't somehow. I suspect this is due to the inflation and adding of the layout, not padding. I've added the relevant code.
    – Emmanuel
    Mar 24, 2011 at 16:57
1

You are specifying a "layoutHeight" attribute for the sliding drawer. Set layout height to FillParent and that should do it..

3
  • That didn't help. Now when I open the drawer, the seekbar is still too narrow plus the drawer opens all the way to the top of the screen. 110dip is how high the drawer content is.
    – Emmanuel
    Mar 23, 2011 at 20:22
  • Sorry, i misunderstood your question to be the height and not width. My bad. Anyways, is there any padding field in the layout in which the sliding drawer is placed. I'm assuming you have placed the sliding drawer inside a relative layout. Just see if its parent layout has any padding attributes set.. Mar 24, 2011 at 5:01
  • This is the same thing that CameronW said. I removed all padding from everywhere and still it doesn't help. The black area on the left and right is not due to padding.
    – Emmanuel
    Mar 24, 2011 at 14:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.