I want to make an activity with 2 elements in the screen, one in the bottom, with a fixed size, and one on top of this which one must fill the screen.
How I can do that in a Layout?
Thank you
use layout_weight="1" for 1st element and put layout_height="0dp" and use linearlayout as the parent which contains the 2 elements.
Use below code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity" >
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
android:text="#string/hello_world" />
<TextView
android:id="#+id/textView2"
android:layout_width="match_parent"
android:layout_height="50dp"
android:gravity="center"
android:text="test" />
</LinearLayout>
Or you can do this,
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_alignParentTop="true"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_above="#+id/ll1"
>
</LinearLayout>
<LinearLayout
android:id="#+id/ll1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal"
>
</LinearLayout>
Add this to the first element:
android:layout_weight="0.8"
and for the second one
android:layout_weight="0.2"
You can use Relative Layout like...following example
<//you are second element
android:id="#+id/ui_radiogroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:clickable="false"
android:orientation="horizontal" >
<///you are second element>
<//you are First element
android:id="#+id/ui_pager"
android:layout_width="wrap_content"
android:layout_above="#id/ui_radiogroup"
android:layout_height="wrap_content"
android:scrollbars="horizontal" />
Other OPtion use Linear Layout assign android:layout_weight to each element depending upon your requirement
try this,
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<TextView
android:id="#+id/footertext"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center"
android:text="Footer" />
<TextView
android:id="#+id/centertext"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/footertext"
android:gravity="center"
android:text="center" />
Here is the complete trick :
Use a RelativeLayout to wrap your two items,
Put layout_alignParentBottom="true" on your bottom item
And layout_above="#+id/your_bottom_item_id" on your top item
Here is a complete working example that you can cpy/paste :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:id="#+id/top_item"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_above="#+id/bottom_layout">
</LinearLayout>
<LinearLayout
android:id="#+id/bottom_item"
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="vertical"
android:layout_alignParentBottom="true">
</LinearLayout>
</RelativeLayout>
Simply use layout_weight="1" for first element and layout height should be match_parent.
Related
I am creating a design in Android for this list item:
I thought that the best solution would be create a linear layout with two relative layout inside it and a space. So I have tried to do it but I have a problem with weights.
In this picture you can see that I have added two relative layout with a space using layout_weight of linear_layout and the proportion works.
This is the code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/fondo_chiste_lista_item"
android:weightSum="147"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_weight="41"
android:layout_height="0dp" >
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_weight="94"
android:layout_height="0dp" >
</RelativeLayout>
<android.support.v7.widget.Space
android:id="#+id/space1"
android:layout_width="wrap_content"
android:layout_weight="12"
android:layout_height="0dp" />
</LinearLayout>
But, now If I add a textview inside a relative layout proportions won't work. As you can see the boxes of the relative layouts have a different size.
This is the code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/fondo_chiste_lista_item"
android:weightSum="147"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_weight="41"
android:layout_height="0dp" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="46dp"
android:text="TextView" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_weight="94"
android:layout_height="0dp" >
</RelativeLayout>
<android.support.v7.widget.Space
android:id="#+id/space1"
android:layout_width="wrap_content"
android:layout_weight="12"
android:layout_height="0dp" />
</LinearLayout>
So... What is the problem? Why the proportion change when I add elements? Is there any better solution?
I will add is as an answer since that fixed your problem
instead of
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
use something like
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
I have a LinearLayout (vertical) and it should contain 3 elements in the following order: textview, listview and button. The listview could be really high so in order to keep all the 3 elements visible I put the 3 elements each one inside another layout. So my structure is like:
linear layout (vertical)
linear layout (horizontal)
textview
linear layout (vertial) *
listview
relative layout
button
In order to get it working I set a fixed height to the vertical linearlayout which only contains the listview (*) but I know it is a bad choice because on bigger devices there will be a lot of empty space. How can I fix it?
thanks
User percentage values for the LinearLayout(*), so they take up a percentage of the parent's height,
and for the rest, if you want them to take up remaining space, add attribute: android:layout_weight:1;
Implement your layout this way :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/mTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:gravity="center"
android:padding="10dp"
android:text="Header Text" />
<ListView
android:id="#+id/mListView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#+id/mButton"
android:layout_below="#+id/mTextView" >
</ListView>
<Button
android:id="#+id/mButton"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="Button1" />
</RelativeLayout>
// try this
<?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:padding="5dp"
android:orientation="vertical">
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="match_parent">
<TextView
android:id="#+id/textview"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="textview"/>
</LinearLayout>
<LinearLayout
android:layout_height="0dp"
android:layout_width="match_parent"
android:layout_marginTop="5dp"
android:layout_weight="1">
<ListView
android:layout_height="match_parent"
android:layout_width="match_parent"
android:cacheColorHint="#00000000"
android:divider="#null"
android:dividerHeight="0dp"
android:smoothScrollbar="true"
android:id="#+id/listview"/>
</LinearLayout>
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_marginTop="5dp"
android:gravity="center">
<Button
android:id="#+id/button"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="button"/>
</LinearLayout>
</LinearLayout>
I am using FrameLayout in which I am having a search Textbox and Button and a ListView to be displayed in the next line of the TextBox
My layout is like this ,
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitXY"
android:src="#drawable/pattern1" />
<LinearLayout
android:id="#+id/LinearLayout02"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="top" >
<Button
android:id="#+id/btnadd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:onClick="addCustomers"
android:text="Add"
android:textColor="#000000" >
</Button>
<EditText
android:id="#+id/edtSearch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="2"
android:ems="10"
android:hint="Search"
android:inputType="textPersonName" >
<requestFocus />
</EditText>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="60dp"
android:gravity="bottom"
android:orientation="vertical">
<ListView
android:id="#+id/list_customers"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom|center_horizontal" >
</ListView>
</LinearLayout>
</FrameLayout>
I am using this TextView to diplay List item in the ListView,
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/txtsimple_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="60dp"
android:gravity="center_vertical"
android:textSize="20sp"
android:textStyle="bold" />
I have given margin top attribute for the ListView, but even though it overlaps on the Button and EditText controls.
I am using a FrameLayout but of no use. Please suggest me any help!!
Any help is appreciated!!
You should use LinearLayout as parent, just set android:orientation="vertical".
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitXY"
android:src="#drawable/pattern1" />
<LinearLayout
android:id="#+id/LinearLayout02"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="top" >
...
</LinearLayout>
<ListView
android:id="#+id/list_customers"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom|center_horizontal" >
...
</ListView>
</LinearLayout>
FrameLayout has no 'rules of placement' so everything just stacks on to each other.
Instead, use a LinearLayout with android:orientation="vertical"
or use a RelativeLayout and add positioning values to the childs, such as android:layout_below
+1 Neoh and remove imageview, instead put the image as background image attribute at parent view
android:background="#drawable/pattern1"
FrameLayout are used very less,beacuse they are used to display single view or views which overlaps each other.
So you should use RelativeLayout.
FrameLayout is not the best option. You can use other layouts, eg, GridLayout, RelativeLayout or ListView.
Like the following layout shows, when the items in list are too much, more than one screen.
I can not see the following LinearLayout content when I drag down.
How to solve this problem?
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ListView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</ListView>
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_below="#+id/list"
android:layout_centerHorizontal="true"
android:orientation="horizontal" >
<TextView
android:id="#+id/UserIDStatic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/UserID" />
.
.
.
</LinearLayout>
</RelativeLayout>
Thanks in advance!
change to this
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ListView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="100dp" > <!-- use a definate dimension here -->
</ListView>
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_below="#+id/list"
android:layout_centerHorizontal="true"
android:orientation="horizontal" >
<TextView
android:id="#+id/UserIDStatic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/UserID" />
.
.
.
</LinearLayout>
</RelativeLayout>
or else put both ListView and LinearLayout in ScrollView
or as bellow comment
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="1"
android:orientatio="verticle" >
<ListView
android:id="#+id/list"
android:layout_weight="0.5"
android:layout_width="match_parent"
android:layout_height="0dp" >
</ListView>
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="0.5"
android:orientation="horizontal" >
<TextView
android:id="#+id/UserIDStatic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/UserID" />
.
.
.
</LinearLayout>
</LinearLayout>
There are two options comes in picture.
Instead of Relative layout Use Vertical Linear layout with appropriate wieght to listview and inner linear layout (eg. 0.7 and 0.3)
Use same Relative layout as above with inner LinearLayout to alignparentbottom = true
and listview above="#innerLinearLayout" linearlayout.
This might solve your problem.
Using specific height for listview might cause different look in UI for different sized screens.
I have two edittext views. One of them has only one line, its the title. But the other one should fill the linearlayout to the end, but it doesn't.
I updated the code so this is my whole xml for this app. I hope someone can find what's wrong. The part that i want to form like this is the part inside the LinearLayout named addView.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#ffffff">
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<Button
android:id="#+id/addButton"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="#drawable/addbuttonstyle"
android:layout_weight="20"/>
<ImageView
android:id="#+id/titleView"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="#drawable/titleview"
android:layout_weight="60"/>
<Button
android:id="#+id/orderButton"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="#drawable/orderbuttonstyle"
android:layout_weight="20"/>
</LinearLayout>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/addView"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<EditText
android:id="#+id/textBoxTitle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="note title"
android:singleLine="true"
/>
<EditText
android:id="#+id/textBoxContent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:hint="content"
/>
</LinearLayout>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/backgroundLayout"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/background"
/>
</FrameLayout>
I changed textBoxTitle's height to wrap_content and I see this:
Is this what you were hoping for? Also if you want content to appear in the upper-left corner use this attribute:
<EditText
...
android:gravity="top"
/>
So i found what was wrong.
I needed to set layout_height (of the textBoxContent view) to 0dp and layout_weight (of the textBoxContent view) to 1.
The first view should have android:layout_width="wrap_content"