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

Why is this Javascript much *slower* than its jQuery equivalent?

I have a HTML list of about 500 items and a "filter" box above it. I started by using jQuery to filter the list when I typed a letter (timing code added later): $('#filter').keyup( function() { var jqStart = (new Date).getTime(); var search = $(this).val().toLowerCase(); var $list = $('ul.ablist > li'); $list.each( function() { if ( $(this).text().toLowerCase().indexOf(search) === -1 ) $(this).hide(); else $(this).show(); } ); console.log('Time: ' + ((new Date).getTime() - jqStart)); } ); However, there was a couple of seconds delay after typing each letter (particularly the first letter). So I thought it may be slightly quicker if I used plain Javascript (I read recently that jQuery's each function is particularly slow). Here's my JS equivalent: document.getElementById('filter').addEventListener( 'keyup', function () { var jsStart = (new Date).getTime()...

Is it possible to have IF statement in an Echo statement in PHP

Thanks in advance. I did look at the other questions/answers that were similar and didn't find exactly what I was looking for. I'm trying to do this, am I on the right path? echo " <div id='tabs-".$match."'> <textarea id='".$match."' name='".$match."'>". if ($COLUMN_NAME === $match) { echo $FIELD_WITH_COLUMN_NAME; } else { } ."</textarea> <script type='text/javascript'> CKEDITOR.replace( '".$match."' ); </script> </div>"; I am getting the following error message in the browser: Parse error: syntax error, unexpected T_IF Please let me know if this is the right way to go about nesting an IF statement inside an echo. Thank you.