android -- hide part of linear layout off-screen to the right

Question

I have two linear layouts inside a parent linear layout. all horizontal. I want all of l_child to show and part of r_child to show; while the rest of r_child will be off-screen to the right. How do I accomplish that?

<LinearLayout

    android:orientation="horizontal" >

    <LinearLayout
        android:id="@+id/l_child"
        android:orientation="horizontal" >
    </LinearLayout>

    <LinearLayout
        android:id="@+id/r_child"
        android:orientation="horizontal" >
    </LinearLayout>

</LinearLayout>

Not sure I understand, but here: if you will, image each child linear layouts has three imageviews; then I want all three images of the left child to show, but only the first image of the right child to show; while the remaining two hide offscreen to the right. — Cote Mounyo, Jun 28 '13 at 22:41
by schematic I mean a little drawing showing what you want to accomplish — Emmanuel, Jun 28 '13 at 22:45

score 6 · Answer 1 · answered Jun 28 '13 at 23:17

6

Try giving the parent LinearLayout a negative right margin.

android:layout_marginRight="-50dp"

Other solution might be to put the parent LinearLayout inside a ScrollView, and set the widths of children layouts to the desired width. In this case, you'll be able to scroll the right layout back to the screen.

answered Jun 28 '13 at 23:17

Bartek Filipowicz

1,235
7
9

AFAIK they do. http://stackoverflow.com/questions/10673503/is-it-a-bad-practice-to-use-negative-margins-in-android I'll check it really quickly just in case. – Bartek Filipowicz Jun 28 '13 at 23:24
Interesting, I thought I remembered trying it before without success – eski Jun 28 '13 at 23:24
It does work. Tested with TextView within a LinearLayout with layout_marginLeft="-10dp". See the screenshot: https://www.dropbox.com/s/g5arw3zm780gtyp/Screenshot_2013-06-29-01-36-34.png – Bartek Filipowicz Jun 28 '13 at 23:38
Nice, I wonder if it works on older SDK versions, it would have been a couple years ago that I would have tried it. I still think programmatically setting widths to percentages of the screen size would offer more consistency across devices in this case though. – eski Jun 28 '13 at 23:41
1

Sure thing. By why not combine the two? You can set the negative margin dynamically to extend the canvas. See the example: https://www.dropbox.com/s/qw1msodltt15jid/Screenshot_2013-06-29-01-48-17.png?m It's two layouts with weights set to 1, but the parent has a negative left margin of -100dp. Cool stuff:) Didn't explore this stuff before. – Bartek Filipowicz Jun 28 '13 at 23:50

score 0 · Answer 2 · answered Jun 28 '13 at 23:04

Do you mean something like this

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_weight="1"
android:orientation="horizontal"
>

<LinearLayout
    android:layout_width="0dp"
    android:layout_weight="1"
    android:layout_height="70dp"
    android:layout_gravity="center_horizontal|top">

    <ImageView
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:id="@+id/imageView1"
        android:src="@drawable/ic_launcher"
        />
    <ImageView
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:id="@+id/imageView2"
        android:src="@drawable/ic_launcher"/>
    <ImageView
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:id="@+id/imageView3"
        android:src="@drawable/ic_launcher"/>
</LinearLayout>

<LinearLayout
    android:layout_width="0dp"
    android:layout_weight="1"
    android:layout_height="70dp"
    android:layout_gravity="center_horizontal|top">


    <ImageView
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:id="@+id/imageView1"
        android:layout_marginRight="200dp"
        android:src="@drawable/ic_launcher"/>
    <ImageView
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:id="@+id/imageView2"
        android:src="@drawable/ic_launcher"/>
    <ImageView
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:id="@+id/imageView3"
        android:src="@drawable/ic_launcher"/>
</LinearLayout>
</LinearLayout>

score 0 · Answer 3 · answered Jun 28 '13 at 23:09

You can try using ViewPager, but I don't know if you can get the "bleeding canvas" effect that you're describing using that UI component.

EDIT: Maybe you can try using Gallery widget.

Is this what you're describing?

http://www.bangkokpost.com/media/content/20110915/309542.jpg

score 0 · Accepted Answer · edited May 23 '17 at 12:18

Layout weights are only for distributing layouts to fill a view, so no overflowing can be done this way.

Assigning layout_width with density independent pixels will result in varied success for different size devices.

So I believe you would have more success adding your layouts programmatically based on the screen size.

See this post for getting the screen width: Get screen dimensions in pixels

Once you have the screen width, you can assign the inner-layout dimensions by pixels (with LinearLayout.LayoutParams), calculated as percentages of the screen width.

If you want the left layout to take up 80% of the screen, use .8*screen_width for the size, and if you want the right layout to then overflow by 20% of the screen, use .4*screen_width for that size.

android -- hide part of linear layout off-screen to the right

4 Answers4