layout_weight working in simulator, not on device - android

I have a linear layout with two listviews, a text view, and another linear layout to hold some buttons. I want the second listview to be twice the height of the first. I have set the height of both list views to 0dp and gave the first a layout_weight of 1 and the second a weight of 2, and then set the weightSum of the containing view to 3. Here is the actual layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:weightSum="3"
android:layout_height="match_parent">
<ListView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="#+id/categoryList" />
<ListView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:id="#+id/itemList" />
<TextView
android:id="#+id/walletStr"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/cancelBtn"
android:text="cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="#+id/buyBtn"
android:text="buy"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
On the simulator, this produces the desired effect, but on the actual device almost all of the space goes to the top listview.
Any ideas? Thanks in advance.

linear layout not have only 2 list, also have more component and you have to consider.
The weightSum should be divided all component of this linear layout.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:weightSum="7"
android:layout_height="match_parent">
<ListView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:id="#+id/categoryList" />
<ListView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4"
android:id="#+id/itemList" />
<TextView
android:id="#+id/walletStr"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.5"/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.5">
<Button
android:id="#+id/cancelBtn"
android:text="cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="#+id/buyBtn"
android:text="buy"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>

Related

Creating two columns in a linearlayout with a gap in the middle

How can I create a layout with two columns, with one textview on the left side and the other on the right side and gap in the middle?. I have already seen the answer here Android: creating two columns in a linearlayout. But I need a certain space between the two columns. Please somebody help.
Using the answer you're pointing, you have to add a view in the middle, with 0dp in width but with a weight of 0.1, 0.2, whatever, depending on your gap.
If I understood correctly, you want to have two columns of identical width with a space in-between them. Is so:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<!-- First column -->
<LinearLayout
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="My Column 1 Text"/>
</LinearLayout>
<!-- Space in-between -->
<Space
android:layout_width="25dp"
android:layout_height="match_parent" />
<!-- Second column-->
<LinearLayout
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="My Column 2 Text"/>
</LinearLayout>
</LinearLayout>
Creating two columns in a linearlayout with a gap in the middle
You can use View for gap between two LinearLayout
Try this
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:background="#88FF0000">
<TextView
android:layout_width="match_parent"
android:text="Nilesh"
android:layout_height="wrap_content" />
</LinearLayout>
<View
android:layout_width="10dp"
android:background="#color/colorPrimary"
android:layout_height="match_parent"/>
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:background="#88FF0000">
<TextView
android:layout_width="match_parent"
android:text="Nilesh"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
OUTPUT
You can add a View at the center:
<LinearLayout
android:layout_margin="30dp"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:layout_weight="1"
android:background="#color/colorPrimary"
android:layout_width="0dp"
android:layout_height="wrap_content" />
<View
android:layout_width="8dp"
android:background="#android:color/white"
android:layout_height="match_parent" >
</View>
<EditText
android:layout_weight="1"
android:background="#color/colorPrimary"
android:layout_width="0dp"
android:layout_height="wrap_content" />
</LinearLayout>
I would put some margin on each column so you can control the space in between. For me is the easiest way to do it.
<LinearLayout android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout android:id="#+id/linearLayout2"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="left"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_marginEnd="25dp">
<TextView
android:id="#+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Street"
android:background="#88FF0000"/>
</LinearLayout>
<LinearLayout android:id="#+id/linearLayout3"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:orientation="horizontal"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_marginStart="25dp">
<TextView
android:id="#+id/textView2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="456546546"
android:layout_gravity="right"
android:background="#8800FF00"/>
</LinearLayout>
</LinearLayout>

How to set height of one layout to another layout?

I have one parent LinearLayout and inside it I have two child LinearLayout. I have 4 TextView in 1st child layout and 2 TextView in 2nd child layout. Parent layout has property android:layout_height="wrap_content as well as child layout too.
I want to set height of 1st child layout to 2nd child layout because 1st child layout has 4 textbox and 2nd child layout has to textbox.
I just want to adjust the height of 2nd child layout. I am putting my code below.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="1"
android:orientation="horizontal"
android:layout_alignParentTop="true">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".8"
android:orientation="vertical">
<TextView
android:id="#+id/lblBooking_Code"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/lblSession"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/lblCustomer"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/lblAddress"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/lblMobile"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".1"
android:orientation="vertical">
<TextView
android:id="#+id/lblBooking_Gross_Amt"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/lblBooking_PayAmt"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/lblBooking_Balance"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
Make the height of 2nd child layout "match_parent"
Making the height of 2nd child layout "match_parent" and implementing "weightSum=3" I achieved my requirement.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="1"
android:orientation="horizontal"
android:layout_alignParentTop="true">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".8"
android:orientation="vertical">
<TextView
android:id="#+id/lblBooking_Code"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/lblSession"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/lblCustomer"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/lblAddress"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/lblMobile"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".1"
android:weightSum="3"
android:orientation="vertical">
<TextView
android:id="#+id/lblBooking_Gross_Amt"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<TextView
android:id="#+id/lblBooking_PayAmt"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<TextView
android:id="#+id/lblBooking_Balance"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
</LinearLayout>

How to put buttons below scrollview and always show button without being overlapped by scrollview in Android?

My layout is like this
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
android:id="#+id/searchKey"
android:gravity="center_horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="xx" />
<ScrollView
android:layout_weight="1"
android:fillViewport="true"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/search_results"
android:textSize="#dimen/text_font_size"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</ScrollView>
<LinearLayout
android:orientation="horizontal"
android:layout_gravity="center|bottom"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/lastCharacterButton"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/lastChar_btn" />
<Button
android:id="#+id/nextCharacterButton"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/nextChar_btn" />
</LinearLayout>
</LinearLayout>
However, when there are little or no text, the buttons are pulled up, when there are too many text in search_results TextView, the buttons won't show up because scrollview takes the space all the way to the bottom. Any suggestion to always keep the buttons at the bottom and always visible?
First of all you have to set the ScrollView's height to 0dp.
<ScrollView
android:layout_weight="1"
android:fillViewport="true"
android:layout_width="match_parent"
android:layout_height="0dp">
<TextView
android:id="#+id/search_results"
android:textSize="#dimen/text_font_size"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</ScrollView>
You have to do this because the weight param is going to control the size of the view depending on how much space is available. If you set it to wrap content, it will take how much space it needs to wrap everything within.
Then you need to remove your LinearLayout's weight param:
<LinearLayout
android:orientation="horizontal"
android:layout_gravity="center|bottom"
android:id="#+id/LL1"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/lastCharacterButton"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Last_Char" />
<Button
android:id="#+id/nextCharacterButton"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="next_char" />
</LinearLayout>
And the reason for doing that is just the opposite of the previous explanation: in this case the wrap content is going to take the space necessary to always display the buttons within.
Here is some sample code I put together for you. You basically need to take out the linear layout you have wrapping you xml layout and use a relative layout instead. Once you do that you can add ids to the linear layout with the buttons and then have the edit text align to the parent top. Then you can put the scrollview below the edittext and then put the scrollview above to the linear layout containing the buttons. This should work!
<?xml version="1.0" encoding="utf-8"?>
<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"
tools:context="com.example.thegamefan93.loginregister.LoginActivity">
<EditText
android:id="#+id/searchKey"
android:gravity="center_horizontal"
android:layout_width="match_parent"
android:layout_alignParentTop="true"
android:layout_height="wrap_content"
android:hint="xx" />
<ScrollView
android:layout_weight="1"
android:fillViewport="true"
android:layout_below="#id/searchKey"
android:layout_width="match_parent"
android:layout_above="#+id/LL1"
android:layout_height="wrap_content">
<TextView
android:id="#+id/search_results"
android:textSize="20sp"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</ScrollView>
<LinearLayout
android:orientation="horizontal"
android:layout_gravity="center|bottom"
android:layout_weight="1"
android:id="#+id/LL1"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/lastCharacterButton"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Last_Char" />
<Button
android:id="#+id/nextCharacterButton"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="next_char" />
</LinearLayout>
</RelativeLayout>
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"
android:orientation="vertical">
<EditText
android:id="#+id/searchKey"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:hint="xx" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/linear"
android:layout_below="#+id/searchKey"
android:layout_weight="1"
android:fillViewport="true">
<TextView
android:id="#+id/search_results"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:textSize="#dimen/text_font_size" />
</ScrollView>
<LinearLayout
android:id="#+id/linear"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal">
<Button
android:id="#+id/lastCharacterButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/lastChar_btn" />
<Button
android:id="#+id/nextCharacterButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/nextChar_btn" />
</LinearLayout>
</RelativeLayout>

Align Button to Bottom using LinearLayout

Trying to align button at Bottom using LinearLayout, but getting just below TextView.
To set button at bottom, I am using android:layout_gravity="bottom" but still not done
LinearLayout xml
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"/>
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_gravity="bottom"
android:layout_height="wrap_content">
<Button
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="Bottom" />
</LinearLayout>
</LinearLayout>
Change second linear layout to
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
This will put the button at the bottom and this layout will take the rest of the space
Yoy have to use like this....
<RelativeLayout
android:id="#+id/footer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center">
<Button
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="Bottom" />
</RelativeLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"/>
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"/>
</LinearLayout>
<LinearLayout
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_gravity="bottom"
android:layout_height="wrap_content">
<Button
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="Bottom" />
</LinearLayout>
</LinearLayout>
I could not use the suggested answer as I had multiples of 3 vertical ones (each with specific weights) inside a horizontal one. So, ended up using margin top for specific button/widget instead. Working fine so far.
Did not want to change to RelativeLayout as that meant many changes in this scenario.

Android bottom elements not showing

I have problem with my layout element. They are being displayed in mobile phone but neither in Genymotion or Android Emulator.
Two Buttons are not being displayed at the bottom.
Here is my code.
<FrameLayout 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"
tools:context="vitrine.ndex.com.vitrine.fragments.FavouriteFragment">
<!-- TODO: Update blank fragment layout -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/linearLayout2"
android:layout_alignParentBottom="true">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/cartButton"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/historyButton"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/linearLayout3">
<include
android:layout_width="wrap_content"
android:layout_height="wrap_content"
layout="#layout/header_panel_layout" />
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/linearLayout3"
android:layout_above="#+id/linearLayout2">
<ListView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:id="#+id/favouriteShopListView"
android:layout_weight="1" />
</LinearLayout>
</RelativeLayout>
You need couple of changes in Layout.
Wrap the whole RelativeLayout inside ScrollView
Take out ListView out of RelativeLayout and put it in a Layout which is outside ScrollView

Categories

Resources