So I have a two "sections" to my screen. I have the top section which is a ScrollView and a bottom section which is random text. The random text at the bottom will always be changing sizes, so sometimes it can take 40dp, sometimes 20dp, etc.
My question is, is there a way to make the bottom part dynamic (without loss of text) and make the top scrollview adapt to the new size and restricts its own size to "fill the remaining space" based on what portion the bottom part is using?
Like this:
As you can see, the scroll view just fills the remaining space available.
I'm searching for a solution using XML only
Need HELP!
You can try this.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/bottomTextView">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="500dp"
android:background="#android:color/holo_red_dark"
android:text="Test" />
</LinearLayout>
</ScrollView>
<TextView
android:id="#+id/bottomTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#android:color/darker_gray"/>
Or
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="500dp"
android:background="#android:color/holo_red_dark"
android:text="Test" />
</LinearLayout>
</ScrollView>
<TextView
android:id="#+id/bottomTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/darker_gray"/>
Wrap both Views in a vertical LinearLayout;
The view which is at the top: height = "0dp", weight = 1
And the view which is in the bottom: height = "wrap_content"
Related
when i used the single linear layout in scrollview then the output and code is like that
Xml code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="10">
<ImageView
android:id="#+id/disp_img"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4"
android:background="#color/grey"
android:scaleType="fitXY" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="10dp"
android:layout_weight="5"
android:orientation="vertical">
<TextView
android:id="#+id/disp_title"
style="#style/disTitleTextViewStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></TextView>
<TextView
android:id="#+id/disp_cont"
style="#style/disdiscTextViewStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"></TextView>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#drawable/disptextdes"
android:orientation="vertical"
>
<TextView
android:id="#+id/disp_readmore"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:layout_marginTop="15dp"
android:text="To read more click on this"
android:textColor="#android:color/black"
android:textSize="15sp"></TextView>
</LinearLayout>
</LinearLayout>
</ScrollView>
</RelativeLayout>
output is:
But when i add another layout then code and output is look like
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
//first linear layout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="10">
<ImageView
android:id="#+id/disp_img"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4"
android:background="#color/grey"
android:scaleType="fitXY" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="10dp"
android:layout_weight="5"
android:orientation="vertical">
<TextView
android:id="#+id/disp_title"
style="#style/disTitleTextViewStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></TextView>
<TextView
android:id="#+id/disp_cont"
style="#style/disdiscTextViewStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"></TextView>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#drawable/disptextdes"
android:orientation="vertical"
>
<TextView
android:id="#+id/disp_readmore"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:layout_marginTop="15dp"
android:text="To read more click on this"
android:textColor="#android:color/black"
android:textSize="15sp"></TextView>
</LinearLayout>
// when i add second linear layout then the first linear layout is varied,I don't know why
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/citispotterlogo"></ImageView>
</LinearLayout>
</LinearLayout>
</ScrollView>
</RelativeLayout>
output is :
When i added the image in linear layout the first linear layout shrink I don't know why?
Please help me to solve this,I try to search this on google in stackoverflow but i don't find nothing about this. Can anybody solve this or give me some another approach for solving this problem.
So my final output is look like this
I have added two images which are in scrollview
(https://i.stack.imgur.com/DpJ9C.png)
(https://i.stack.imgur.com/QhQoL.png)
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="10">
This LinearLayout has height which is match_parent, you should have used wrap_content or use a fixed height so that the second layout must be visible
This layout uses a weightSum in the first linear layout when you add the last LinearLayout you do not include a weight for it. This is causing the UI to render incorrectly.
I've included a couple of option solution for you both should do the job.
Option 1
change the weighted sum in the first LinearLayout to 11 and then add a weight value of 1 to the last LinearLayout.
Option 2
Add a weighted value to the last LinearLayout but you will need to adjust the rest of the weighted values so it equals weight sum in the first LinearLayout (10).
LayoutWeight Review
LinearLayout supports assigning a weight to individual children with the android:layout_weight attribute. This attribute assigns an "importance" value to a view in terms of how much space it should occupy on the screen. A larger weight value allows it to expand to fill any remaining space in the parent view. Child views can specify a weight value, and then any remaining space in the view group is assigned to children in the proportion of their declared weight. The default weight is zero.
I have a LinearLayout with 3 children with weights to set their proportions: 1/7, 3/7, 3/7. The last section contains text that could extend outside the space allowed, so I added a scrollview.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3"
android:orientation="vertical"
android:background="#drawable/package_status_border"/>
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3">
<TextView
android:id="#+id/PackageContent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</ScrollView>
</LinearLayout>
This layout is working fine if the PackageContent text is small:
expected formatting
But, if the PackageContent text is large, rather than maintaining the expected height and just scrolling the extra text it is filling the entire screen:
bad formatting, with scroll view filling entire screen
How to I make sure that the last section is still only 3/7 of the screen, with content scrolling, regardless of how much content the textView contains?
I have also tried putting the ScrollView within its own LinearLayout but that did not work either.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3"
android:orientation="vertical"
android:background="#drawable/package_status_border"/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/PackageContent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</ScrollView>
</FrameLayout>
</LinearLayout>
I have two views. The top view is set to ...
android:layout_alignParentTop="true"
And the bottom is set to ...
android:layout_alignParentBottom="true"
How can I fill the remaining space with a third view? According to this answer here, I should use a frame layout like this ...
<FrameLayout
android:layout_below="#+id/toplayout"
android:layout_above="#+id/bottomlayout"/>
But then I am required to specify height and width. What height and width am I supposed to specify?
Here is my solution
<RelativeLayout
...
>
<YourLayout
android:id="#+id/toplayout"
android:layout_alignParentTop="true"
/>
<YourLayout
android:id="#+id/bottomlayout"
android:layout_alignParentBottom="true"
/>
<MiddleLayout
<!-- in your case it is FrameLayout -->
android:layout_width="match_parent"
android:layout_height="match_parent"
<!-- or android:layout_height="wrap_content" according to the_profile -->
android:layout_below="#+id/toplayout"
android:layout_above="#+id/bottomlayout"/>
</RelativeLayout>
Hope this help
You could take an advantage of weighting. android:layout_weight property usually fills whatever space is left (or split equally). In your case it would be something like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="some_fixed_height"
android:orientation="vertical">
<LinearLayout
android:id="#+id/top_one"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/middle_one_that_fills"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<LinearLayout
android:id="#+id/bottom_one"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</LinearLayout>
As long as your root layout is a RelativeLayout and you're using layout_alignParentTop for the top view and layout_alignParentBottom for the bottom view, like you mentioned, then it should be working with no need for a middle view:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"/>
<View
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
Alternatively, if your root view is a LinearLayout, you could use the lesser-known, but aptly-named Space view. Space is:
a lightweight View subclass that may be used to create gaps between components in general purpose layouts.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<Space
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="9"/>
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
</LinearLayout>
I have a LinearLayout, the direct child of a ScrollView, with two children. The first child can be almost any height (it's an Image), but the second child will have content that is much larger than the height of the viewport. I tried using layout_weight to achieve this, but that only resulted in the image being set to something like 1dp and the second child taking the rest, because the weights are only assigned to the remaining space.
How do I force the image to take up at least 40% of the screen space?
<ScrollView
android:id="#+id/scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:src="#drawable/my_image" />
<LinearLayout
android:id="#+id/prediction_container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#android:color/white"
android:orientation="vertical"
android:layout_weight="1">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="[really long text]" />
</LinearLayout>
</LinearLayout>
</ScrollView>
You're missing android:adjustViewBounds="true" on your ImageView
Change your ImageView code to something like this
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4"
android:src="#drawable/my_image"
android:adjustViewBounds="true"
/>
Hy everyone,
i have got a lot of text to diplay in one page, but i saw only first textview, other disapiard. Where is other textrview?
Code, i dont know why i see only first texttt and a lot offf blank page. And that isall:
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/scrollView">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="texttttttttt"
android:id="#+id/textView" style="#style/MetricPrefixTitle"/>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="texttttttttt"
android:id="#+id/textView1" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Valute"
android:id="#+id/textView" style="#style/MetricPrefixHeader"/>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="textttttttttttttt"
android:id="#+id/textView1" android:layout_gravity="center"/>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="text"
android:id="#+id/textView" style="#style/MetricPrefixHeader"/>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="textttttttttttttttttt"
android:id="#+id/textView1" android:layout_gravity="center"/>
</LinearLayout>
</ScrollView>
You didn't set android:orientation attr in LinearLayout, the default one is horizontally so your textViews are positioned next to each other, if you scroll your text view from left to right you will see the other ones. What you want is to set android:orientation to vertical.
Besides the orientation, your layout_height-"match_parent" will cause your view to expand to the size the parent allows. You should use layout_height="wrap_content" when you want the view height to be the height of the contents.