Skip to main content

How to create two views in Android that use 50% height each, unless one is smaller?



Imagine a full Android device screen, I want it split in to two sections:





  1. The upper half has text in it, which may be larger than the space available (or not) and so the text will scroll (i.e. TextView inside a ScrollView)



  2. The lower half contains a MapView control.







Looking specifically at some scenarios:





  1. If the text is small, I want the map to take up more space, i.e. more than 50%. So perhaps 20% text, 80% map.



  2. If the text is larger, it only takes up a MAXIMUM of 50% of the screen space, and then scrolls. So 50% map, 50% text.







At the moment I've assigned weights to the two parts, and that isn't too bad, but if the text is small, the map doesn't expand to take the space, and the layout has a wasted gap that the map could usefully use.





I've tried loads of combinations but can't see how to make this happen. It seems to be a common experience for me that I know what I want, but can't see how to get the available views to deliver it. I'm hoping there's a nice easy way to do this.





Please feel free to make me look like a fool and point out the obvious attribute I've missed :-)





======================================================================





As far as I can see there's no way to do this just in declarative XML and it needs doing in the code. I set the text section height to wrap_content, weight to 0 (no resizing), and have the map set to weight=1 (i.e. take up the remaining space). I then check if the text section (in a ScrollView) is taking up too much space and if so, shrink it back. This code would need changing to support a different layout orientation.







private void fixLayoutProportions()

{

float maxPercentageOfScreenForText = 50/100;

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

ScrollView eventText = (ScrollView)findViewById(R.id.text_scroller);

int heightAvailable = container.getHeight();

int scrollerHeight = eventText.getHeight();

if ( scrollerHeight>(heightAvailable*maxPercentageOfScreenForText) ) // Text section using too much space

{

eventText.getLayoutParams().height = (int)(heightAvailable*maxPercentageOfScreenForText) ;

eventText.invalidate();

}

}





Source: Tips4all

Comments

  1. Did you try to measure your screen hight at run time:

    Display display = ((WindowManager)
    getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay();
    int width = display.getHeight();


    Then, set your top view max_height to width*0.5 and min_height to width*0.2. Your top view has to be control (like TextView) that has min_height and max_height properties. Also, set layout_weight to 0 or leave it empty.
    On your bottom view set layout weight to 1.

    ReplyDelete
  2. You can do it by putting everything into LinearLayout and changing following parameters:


    the sum of weights for LienarLayout
    weights for children

    ReplyDelete
  3. I haven't tested this, but I'd try setting your ScrollView to have android:layout_weight="1" and your MapView to have android:layout_weight="0" and a android:minHeight="240dp". The hope is that minHeight will have precedence over layout_weight.

    ReplyDelete
  4. i think you have to set mapviews height as fill parent and set textviews height as wrap contetn and than for scrolling you have toset vertical scrool true for text view and as you nedded not more than 50% space textview you can set maxheight property of textview.

    ReplyDelete
  5. I am sorry if you find this trivial.
    But I am suggesting it in case it did not strike you.
    How about using relative layout and keeping the textview always on top of the map.
    Make the gravity of the textview top, its width match_parent, its height wrap_content and its weight 1(same as that of thee map). That way your textview will change according to the size of the text, while not going above 50% because of the weight. As for the map, the user can pull the map down to see the hidden part under textview. It'll be as if there is no map under the textview(you know, unless you want to make the textview background transparent which i think would look cool :) ). I do not know about the map view. But I am assuming it'll be something like google maps on iphone, like you can vary size using multi-touch and scroll using single.

    ReplyDelete
  6. OK as I see its something like u are reserving at max half of ur screen to the TextView and if its more it has to scroll. I have a solution but for that you will have to fix the max no.l of lines for TextView, calculating which can be a pain :P but have a solution never the less.

    main.xml file

    <?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"
    >
    <TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:scrollbars="vertical"
    android:maxLines="5"
    android:id="@+id/tv1"
    android:text="wsdvsv sjdgv jsdvn ksdjbn skjdb ksdnbk snbk snbjksn fkbj sfkbjn dfkjbndkjfbn kdjfnb kjdfnbkjdnfbk ndf bjkndf bndfjbn dfkbn jdfnbjdfnbjdfn bjdf nbkjdnf bkjdfnb kjdnfbkjdfn bkjndfbjndfjbndkjfbn dkfjbn kdjfnb kjdfnbkjdfnbjkd nfkjbndf"
    />
    <TextView
    android:layout_width="fill_parent"
    android:layout_below="@id/tv1"
    android:layout_height="wrap_content"
    android:scrollbars="vertical"
    android:maxLines="5"
    android:text="Does it work ???"
    />
    </RelativeLayout>


    Java file:

    package com.android;

    import android.app.Activity;
    import android.os.Bundle;
    import android.text.method.ScrollingMovementMethod;
    import android.widget.TextView;

    public class TestActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    TextView tv = (TextView) findViewById(R.id.tv1);
    tv.setMovementMethod(new ScrollingMovementMethod());
    }
    }


    If the text is say only in 2 lines "Does it work?" will shift up automatically. But the only problem i see here is the max lines to 5 is you can an max value for u i guess this might work well :)

    BR,
    J

    P.S. I haven't answered many questions before so i m not sure how to attach files :(

    ReplyDelete

Post a Comment

Popular posts from this blog

[韓日関係] 首相含む大幅な内閣改造の可能性…早ければ来月10日ごろ=韓国

div not scrolling properly with slimScroll plugin

I am using the slimScroll plugin for jQuery by Piotr Rochala Which is a great plugin for nice scrollbars on most browsers but I am stuck because I am using it for a chat box and whenever the user appends new text to the boxit does scroll using the .scrollTop() method however the plugin's scrollbar doesnt scroll with it and when the user wants to look though the chat history it will start scrolling from near the top. I have made a quick demo of my situation http://jsfiddle.net/DY9CT/2/ Does anyone know how to solve this problem?

Why does this javascript based printing cause Safari to refresh the page?

The page I am working on has a javascript function executed to print parts of the page. For some reason, printing in Safari, causes the window to somehow update. I say somehow, because it does not really refresh as in reload the page, but rather it starts the "rendering" of the page from start, i.e. scroll to top, flash animations start from 0, and so forth. The effect is reproduced by this fiddle: http://jsfiddle.net/fYmnB/ Clicking the print button and finishing or cancelling a print in Safari causes the screen to "go white" for a sec, which in my real website manifests itself as something "like" a reload. While running print button with, let's say, Firefox, just opens and closes the print dialogue without affecting the fiddle page in any way. Is there something with my way of calling the browsers print method that causes this, or how can it be explained - and preferably, avoided? P.S.: On my real site the same occurs with Chrome. In the ex