In my android application i have to design an UI. I have to distribute area of scrollview(70%) and relativelayout(30%) within a linearlayout(100%). But in my code it changes its area with the change of button in scrollview and consume the area of relativelayout. Here is my code
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="100"
>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/lastLayout"
android:layout_weight="70"
>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/linear_layout_add"
android:background="#drawable/albumbackground"
android:padding="10dp"
>
</LinearLayout>
</ScrollView>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:layout_weight="30"
>
<ImageButton
android:id="#+id/albumAdd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginRight="24dp"
android:layout_marginTop="10dp"
android:layout_toLeftOf="#+id/albumremove"
android:src="#drawable/add" />
<ImageButton
android:id="#+id/albumremove"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_alignParentRight="true"
android:layout_marginRight="58dp"
android:src="#drawable/delete" />
</RelativeLayout>
when there few buttons then the UI shows like this
but when the no of button increase the UI shows like this
how can i keep the scrollview and relativelayout size constant? thanks...
Set android:layout_height="0dp" on both children of LinearLayout.
Weights are to fill unused space. If your children have size of 0 unused space will be divided like you want it.
Related
I have a layout with listview and two buttons side by side at the bottom of the listview. Everything work fine until I have added the swiperefreshlayout for my listview.
My codes are as below.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#FFF"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="#+id/search_bar"
android:background="#color/colorPrimaryDark"
android:orientation="vertical"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
>
<EditText
android:id="#+id/keyword_editText"
android:layout_width="fill_parent"
android:layout_height="30dp"
android:background="#drawable/search_edit_text"
android:hint="Keyword"
android:textColorHint="#color/list_item_title"
android:textColor="#000"
android:layout_centerVertical="true"
android:maxLines="1"/>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/listView_layout"
android:orientation="vertical"
android:layout_below="#+id/search_bar"
>
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/refresh"
android:layout_height="match_parent"
android:layout_width="match_parent">
<ListView
android:layout_width="wrap_content"
android:layout_height="0dip"
android:layout_weight="1"
android:id="#+id/RsListView"
android:dividerHeight="1dp"
android:divider="#D3D3D3"/>
</android.support.v4.widget.SwipeRefreshLayout>
<LinearLayout
android:id="#+id/test"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<Button
android:id="#+id/req_history_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Request History"
android:layout_weight="1"
android:background="#drawable/request_history_button"
android:textColor="#drawable/button_text_color"
/>
<Button
android:id="#+id/apprv_history_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Approval History"
android:layout_weight="1"
android:background="#drawable/approval_history_button"
android:textColor="#drawable/button_text_color"
/>
</LinearLayout>
</LinearLayout>
Sorry for dumping my codes here as I can't figure out any other way for you guys to understand my code.
Please help
Inside LinearLayout usually all children have even dimension according to orientation. However, when you would like one child to take a little amount of place and another to fill the rest, you might be interested in layout_weight parameter. If the child that should fill the space gets android:layout_weight="1" it will fill the space making a place for other views.
In order to see the buttons add android:layout_weight="1" to SwipeRefreshLayout and set android:layout_height="0dp". That will make your buttons visible.
I'm trying to build a RelativeLayout which distributes excess space between its children, much as shown here:
I've figured out how to center the red widget inside the blue one, but what I also want to do is distribute any excess vertical space evenly above, below, and between the blue and olive widgets. Currently, everything is bunched up at the top.
My XML looks roughly like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent"
>
<ImageButton android:id="#+id/blue_button"
android:src="#drawable/blue_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_alignParentTop="true"
/>
<ImageView
android:id="#+id/red_box"
android:src="#drawable/red_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/blue_button"
android:layout_marginLeft="10dp"
android:layout_alignTop="#id/blue_button"
android:layout_alignBottom="#id/blue_button"
/>
<ImageButton
android:id="#+id/green_button"
android:src="#drawable/green_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/blue_button"
android:layout_weight="1"
/>
</RelativeLayout>
First, you are using layout_weight with RelativeLayout parent. It's useless because layout_weight works only with LinearLayout parent.
Actually I didn't understand your question (an image of wanted layout would be good) but I guess this will work for you:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center_horizontal"
>
<RelativeLayout
android:id="#+id/blueAndRedWrapperLay"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
<ImageButton android:id="#+id/blue_button"
android:src="#00CCFF"
android:layout_width="300dp"
android:layout_height="200dp"
android:layout_weight="1"
android:layout_centerInParent="true" />
<ImageView
android:id="#+id/red_box"
android:src="#ff0000"
android:layout_width="100dp"
android:layout_height="70dp"
android:layout_centerInParent="true"
/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/greenWrapperLay"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
<ImageButton
android:id="#+id/green_button"
android:src="#669900"
android:layout_width="300dp"
android:layout_height="200dp"
android:layout_centerInParent="true"
/>
</RelativeLayout>
</LinearLayout>
The bottom part of the screen does not display rows even though they are loaded. When scrolled up, the rows move to the top and when invalidated the adapter, the application works fine by displaying the full screen.
Here is the layout am using.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/homescreenview"
android:orientation="vertical"
>
<LinearLayout
android:id="#+id/homescreenmainlayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/internetstatus"
android:layout_width="match_parent"
android:layout_height="30dp"
android:gravity="center"
android:background="#912E3D">
<ImageView
android:id="#+id/interneticon"
android:layout_width="18dp"
android:layout_height="18dp"
android:src="#drawable/nonetwork"
/>
<TextView
android:id="#+id/internetstatustext"
android:layout_toRightOf="#+id/interneticon"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:paddingLeft="5dp"
android:gravity="center_vertical"
android:text="#string/nonetconnection"
android:textColor="#color/white"
android:textSize="18sp"
android:textStyle="italic"
/>
</LinearLayout>
<ExpandableListView
android:id="#+id/expandableListView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
</ExpandableListView>
</LinearLayout>
Please find attached screenshot.
there is a trick to fill all the space in the screen, try this and let me know, you should set the height of your listview to 0dp and weigth to 1... Android will calculate height automatically for you.
<ExpandableListView
android:id="#+id/expandableListView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
I am trying to create a layout that would always display 2 images, splitting the screen length equally into half, leaving no whitespace on screen (even if the images are center cropped).
So far I have the following code, but this leaves a lot of empty white space at the bottom of the screen. The reason I use "RelativeLayout" within the "LinearLayout" is because I want my text1 view to come at the lower portion of my image 1 (overlapping the image1).
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="230dp"
android:layout_marginBottom="3dp" >
<ImageView
android:id="#+id/img1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clickable="true"
android:contentDescription="#string/picture"
android:scaleType="centerCrop" />
<TextView
android:id="#+id/text1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center"
android:padding="5dp"
android:textColor="#fff" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="230dp"
android:layout_marginBottom="3dp" >
<ImageView
android:id="#+id/img2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clickable="true"
android:contentDescription="#string/picture"
android:scaleType="centerCrop" />
</RelativeLayout>
You are hardcoding the height to 230dp for each layout which could be causing the problem. In the Linear layout you should use weights to distribute the screen area equally.
Use android:layout_weight="1" in both the relative layouts
Check here for more information
Android: 2 relative layout divided in half screen
The layout you are describing is a simple, weighted LinearLayout. Simply add the following attribute to your LinearLayout:
android:weightSum="2"
Then for each RelativeLayout, change the height attribute to:
android:layout_height="0px"
And add the following attribute to the same RelativeLayouts:
android:layout_weight="1"
try to use the frame layout if you want to overlap the textview on image view and use layout weight on the frame layout
Sample code for layout xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginBottom="3dp"
android:layout_weight="0.5" >
<ImageView
android:id="#+id/img1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clickable="true"
android:scaleType="centerCrop" />
<TextView
android:id="#+id/text1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Test"
android:gravity="center"
android:layout_gravity="center_vertical|bottom"
android:padding="5dp"
android:textColor="#android:color/black" />
</FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginBottom="3dp"
android:layout_weight="0.5" >
<ImageView
android:id="#+id/img2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clickable="true"
android:scaleType="centerCrop" />
</FrameLayout>
I am solving a problem with image and text in one scroll view. The main problem is, that I get different image height from server side . But the place with image should be all the time same.
Now the height of image place is dynamic. The text should be scrollable with the image.
Is there any possibility how to make the image height static?
Thank you!
EDIT
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/article_gallery"
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="4" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<ImageView
android:id="#+id/article_image_back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:src="#drawable/sipka_l" />
<ImageView
android:id="#+id/article_image"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="1" />
<ImageView
android:id="#+id/article_image_next"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:src="#drawable/sipka_p" />
</LinearLayout>
<TextView
android:id="#+id/image_desc"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#color/tran_dark_gray"
android:gravity="center"
android:padding="#dimen/size_8"
android:textAppearance="#style/xsmallLight" />
</RelativeLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="6"
android:background="#color/opaq_light"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="#dimen/size_16" >
<TextView
android:id="#+id/article_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="#dimen/size_12"
android:textAppearance="#style/normalBold" />
<TextView
android:id="#+id/article_body"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="#style/xsmall" />
</LinearLayout>
</ScrollView>
</LinearLayout>
</FrameLayout>
If you declare the ImageView with a fixed width and height it will remain static all the time.
Try something like:
<ImageView
android:id="#+id/imageView1"
android:layout_width="50dp"
android:layout_height="50dp"
/>
Put this ImageView inside a ScrollView and ofcourse put your TextView inside the same ScrollView.
you can use layout weights for your linearlayout. Set the width to 0 and let the weight determine actual size. Setting weight to 0.33 each gives each images 1/3 of the screen.
Or you could set one to 0.5 and the others to 0.25 each or whatever makes sense for your app.
Set the 3 images as:
<ImageView
android:id="#+id/article_image_back"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.33"
android:layout_gravity="center_vertical"
android:src="#drawable/sipka_l" />