I want that it looks so (this is a screenshot from the Graphical Layout editor):
So I created the layout:
<?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" >
<LinearLayout
android:id="#+id/controls"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/clearButton"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="#string/clearButtonText"
android:layout_weight="1"
/>
<EditText
android:id="#+id/searchText"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="5"
android:hint="#string/defaultSearchText"
>
<requestFocus/>
</EditText>
<Button
android:id="#+id/addButton"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="#string/addButtonText"
android:layout_weight="1"
/>
</LinearLayout>
<ListView
android:id="#+id/list_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>
But when I ran my app on the emulator I saw:
When I clicked on the loupe there was still no sign of the buttons.
I think you should use weights for the width of the elements of your horizontal layout. This also means the width of the elements with a weight should be 0dp
<LinearLayout
android:id="#+id/controls"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/clearButton"
android:layout_width="0dp"
android:layout_weight="0.2"
android:layout_height="match_parent"
android:text="#string/clearButtonText"
/>
<EditText
android:id="#+id/searchText"
android:layout_width="0dp"
android:layout_weight="0.6"
android:layout_height="match_parent"
android:hint="#string/defaultSearchText"
>
<requestFocus/>
</EditText>
<Button
android:id="#+id/addButton"
android:layout_width="0dp"
android:layout_weight="0.3"
android:layout_height="match_parent"
android:text="#string/addButtonText"
/>
</LinearLayout>
Related
I design a layout in which there are 2 linear layout whose weightage are 50% and 50%.Instead showing in equal part.First part is showing in almost 70% and second part is only showing in 30% (attached photo).Can u look at it and whats is the problem with the code.
![<?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"
android:padding="25dp"
android:weightSum="100" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="50"
android:orientation="vertical" >
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="9dp"
android:padding="5dp" >
<EditText
android:id="#+id/etFillPNR"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:ems="10"
android:hint="Please Enter 10 Digit PNR Number"
android:inputType="numberDecimal"
android:singleLine="true"
android:textSize="20dp" />
<Button
android:id="#+id/bCross"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|center_vertical"
android:layout_marginRight="10dp"
android:background="#drawable/cross" />
</FrameLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dip"
android:weightSum="100"
android:orientation="horizontal" >
<Button
android:id="#+id/bGETPNR"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_weight="40"
android:text="GetPNR" />
<Button
android:id="#+id/bSavePNR"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:layout_weight="40"
android:text="Save" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dip"
android:layout_weight="50"
android:orientation="vertical" >
<ListView
android:id="#+id/lvSavedPNR"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</ListView>
</LinearLayout>
</LinearLayout>
][1]
[1]: http://i.stack.imgur.com/7YScA.png
YOu should not specify the layout height of "wrap_content" for the weighted children - do it like this for both children:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="50"
android:orientation="vertical" >
I have a scrollView (this is a solution to support landscape computability)
and in it one child- linearLayout.
I want to pose a button at the bottom of a screen.
layout_height = match_parent is problematic as the scroll can be infinite.
How can I do this, to be compatible to all screen resolution?
this is my xml
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res/com.m"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/blue_bg" >
<LinearLayout
android:id="#+id/rootLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical" >
<com.m.view.text.mTextView
android:id="#+id/verifyHeaderText"
style="#style/textOnBg"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="30dp"
android:layout_marginTop="50dp"
android:text="ENTER VERIFICATION CODE"
android:textAllCaps="true"
android:textColor="#android:color/white"
app:font_type="varela" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white"
android:paddingBottom="5dp"
android:paddingLeft="25dp"
android:paddingRight="25dp"
android:paddingTop="5dp" >
<LinearLayout
android:id="#+id/inputBox"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="center_horizontal"
android:gravity="center"
android:background="#drawable/input_box_idle"
android:orientation="horizontal" >
<EditText
android:id="#+id/verificationCodeEditText"
style="#style/textOnBg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:hint="- - - - -"
android:inputType="number"
android:maxLength="5"
android:textColor="#00bcfe"
android:textSize="25dp"
android:textStyle="italic" >
</EditText>
</LinearLayout>
</LinearLayout>
<Button
android:id="#+id/continueButton"
style="#style/textOnBg"
android:layout_width="250dp"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="10dp"
android:background="#drawable/btn_selector"
android:text="Continue"
android:textColor="#00bcfe"
android:textSize="16dp"
android:textStyle="italic" />
</RelativeLayout>
</LinearLayout>
</ScrollView>
this is the result on wide-screen
The button is in the bottom of the scroll which spans 3/4 of the whole screen
Add android:fillViewport="true" to your scrollview:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res/com.m"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/blue_bg"
android:fillViewport="true" >
Apply this to your layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<!-- Your scroll view -->
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_marginBottom="#dimen/ar_button_height"
android:gravity="center" >
<Button
android:id="#+id/button_at_bottom"
android:layout_width="match_parent"
android:layout_height="#dimen/ar_button_height"
android:layout_alignParentBottom="true"
android:gravity="center"
android:orientation="horizontal"
android:showDividers="middle" >
</Button>
</ScrollView>
</RelativeLayout>
Not sure if there is a better solution, but you could put your scroll view inside a relative layout and have your button outside the scroll view and set android:layout_alignParentBottom="true" on the button
If you want to set the button at the bottom you need to implement your layout with weight.
First of all the scrollview can only have one child layout inside it.
Secondly add your content layout inside the child layout of it, set the layout_height to 0dp, and do remember to set the weight to 1.
And at last add your button at the bottom of your content layout and set its height and set the weight to be 0.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:id="#+id/scrollMain"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:overScrollMode="always"
android:background="#00000000"
android:scrollbars="none">
<LinearLayout
android:overScrollMode="always"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
android:background="#FFFFFF"
android:paddingTop="5dp">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</LinearLayout>
<Button android:layout_width="match_parent"
android:layout_height="35dp"
android:layout_weight="0" />
</LinearLayout>
</ScrollView>
</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:id="#+id/rootLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical" >
<com.m.view.text.mTextView
android:id="#+id/verifyHeaderText"
style="#style/textOnBg"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="30dp"
android:layout_marginTop="50dp"
android:text="ENTER VERIFICATION CODE"
android:textAllCaps="true"
android:textColor="#android:color/white"
app:font_type="varela" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white"
android:paddingBottom="5dp"
android:paddingLeft="25dp"
android:paddingRight="25dp"
android:paddingTop="5dp" >
<LinearLayout
android:id="#+id/inputBox"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="center_horizontal"
android:gravity="center"
android:background="#drawable/input_box_idle"
android:orientation="horizontal" >
<EditText
android:id="#+id/verificationCodeEditText"
style="#style/textOnBg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:hint="- - - - -"
android:inputType="number"
android:maxLength="5"
android:textColor="#00bcfe"
android:textSize="25dp"
android:textStyle="italic" >
</EditText>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
</LinearLayout>
<Button
android:id="#+id/continueButton"
style="#style/textOnBg"
android:layout_width="250dp"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="10dp"
android:background="#drawable/btn_selector"
android:text="Continue"
android:textColor="#00bcfe"
android:textSize="16dp"
android:textStyle="italic" />
USe your button here
You can use scrollView inside relativeLayout to fix your button at bottom:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/radialback">
<ScrollView android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_below="#+id/top_header"
>
<EditText
android:id="#+id/editmessage"
android:layout_margin="2dp"
style="#style/editView"
android:inputType="textMultiLine"
android:digits="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890 _-.,()"
android:maxLength="500"
/>
</LinearLayout>
</ScrollView>
<Button
android:id="#+id/submitbutton"
android:text="#string/submitbutton"
style="#style/submitView"
android:layout_alignParentBottom="true" />
</RelativeLayout>
i would like to second button position to below first button and width fill and height wrap i am already try relative layout and layout align or set set gravity but its all fail pls give me solution for this .
<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"
android:background="#0099cc"
tools:context=".MainActivity" >
<TextView
android:id="#+id/fullscreen_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:keepScreenOn="true"
android:text="Vibrate"
android:textColor="#33b5e5"
android:textSize="50sp"
android:textStyle="bold" />
<!--
This FrameLayout insets its children based on system windows using
android:fitsSystemWindows.
-->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true" >
<LinearLayout
android:id="#+id/fullscreen_content_controls"
style="?buttonBarStyle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:background="#color/black_overlay"
android:orientation="horizontal"
tools:ignore="UselessParent" >
<Button
android:id="#+id/btnStartService"
style="?buttonBarButtonStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.15"
android:text="#string/start_service" />
<Button
android:id="#+id/btnStopService"
style="?buttonBarButtonStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/stop_service" />
</LinearLayout>
</FrameLayout>
Try this.. you ahve given orientation horizontal android:orientation="horizontal" then it'll not come below android:orientation="vertical"
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true" >
<LinearLayout
android:id="#+id/fullscreen_content_controls"
style="?buttonBarStyle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:background="#color/black_overlay"
android:orientation="vertical"
tools:ignore="UselessParent" >
<Button
android:id="#+id/btnStartService"
style="?buttonBarButtonStyle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/start_service" />
<Button
android:id="#+id/btnStopService"
style="?buttonBarButtonStyle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/stop_service" />
</LinearLayout>
</FrameLayout>
For RelativeLayout use android:layout_below="#+id/btnStartService" for second button
<RelativeLayout
android:id="#+id/fullscreen_content_controls"
style="?buttonBarStyle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:background="#color/black_overlay"
tools:ignore="UselessParent" >
<Button
android:id="#+id/btnStartService"
style="?buttonBarButtonStyle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/start_service" />
<Button
android:id="#+id/btnStopService"
style="?buttonBarButtonStyle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/btnStartService"
android:text="#string/stop_service" />
</RelativeLayout>
<Button
android:id="#+id/btnStartService"
style="?buttonBarButtonStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.15"
android:text="#string/start_service" />
<Button
android:id="#+id/btnStopService"
style="?buttonBarButtonStyle"
android:layout_width="0dp"
android:layout_below="#+id/btnStartService"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/stop_service" />
add the android:layout_below="#+id/btnStartService" to your desired object to be align.
Use a Relative Layout for those two buttons. In the second button , there is a property called "layout_below" -> Give the id of the first button in this.
Then your second button will come below the first button
i have two layouts vertically , first one has edittext and button, second one has two listvies ,
the first one doesn't appear, and i got an exception when running the application
<?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" >
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<EditText
android:id="#+id/etRestaurantSearchName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="Enter name"
android:inputType="text"
android:textSize="15dip" />
<Button
android:id="#+id/bRestaurantSearchButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Search" />
</LinearLayout>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ListView
android:id="#+id/lvRestaurants"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#ffffff"
android:fillViewport="true" >
</ListView>
<ListView
android:id="#+id/lvAlphabets"
android:layout_width="40dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:background="#drawable/foods_alphabets_bg"
android:orientation="vertical" >
</ListView>
</LinearLayout>
</RelativeLayout>
i ma sure it is something about hiegh , width or weight,
You have used RelativeLayout as the parent layout for the inner two layouts. Therefore the second inner Linear Layout overlaps the first one , thus first one cant be seen. Make use of linear layout as parent layout
Try this:
Correction :
android:layout_below="#+id/Layout1" for layout two.
and some weight related changes.
<LinearLayout
android:id="#+id/Layout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<EditText
android:id="#+id/etRestaurantSearchName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="Enter name"
android:inputType="text"
android:textSize="15dip" />
<Button
android:id="#+id/bRestaurantSearchButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Search" />
</LinearLayout>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/Layout1"
android:orientation="horizontal" >
<ListView
android:id="#+id/lvRestaurants"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/edit_text"
android:fillViewport="true" >
</ListView>
<ListView
android:id="#+id/lvAlphabets"
android:layout_width="40dp"
android:layout_height="match_parent"
android:background="#drawable/btn_bg_pressed"
android:orientation="vertical" >
</ListView>
</LinearLayout>
I have been working on an app to start out on android. I have run into the problem that my layout will not show correctly when it goes to a different orientation other like this:
http://imgur.com/a/aPe2p
Here is my vertical layout code:
<?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"
android:padding="3dip" >
<EditText
android:id="#+id/passText"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="5"
android:hint="Passcode"
android:inputType="textPassword" />
<EditText
android:id="#+id/messageText"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="top|left"
android:hint="Message" >
<requestFocus />
</EditText>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="5"
android:orientation="horizontal"
android:weightSum="100" >
<Button
android:id="#+id/encodeButton"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="50"
android:text="Encode" />
<Button
android:id="#+id/decodeButton"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="50"
android:text="Decode" />
</LinearLayout>
</LinearLayout>
Here is my landscape layout code:
<?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"
android:padding="8dip" >
<EditText
android:id="#+id/passText"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="2"
android:hint="Passcode"
android:inputType="textPassword" >
<requestFocus />
</EditText>
<EditText
android:id="#+id/messageText"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="2"
android:gravity="top|left"
android:hint="Message" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="2"
android:orientation="horizontal"
android:weightSum="100" >
<Button
android:id="#+id/encodeButton"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="50"
android:text="Encode" />
<Button
android:id="#+id/decodeButton"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="50"
android:text="Decode" />
</LinearLayout>
</LinearLayout>
Try setting your android:layout_height on the items expanding/shrinking to wrap_content. If you read here:
http://developer.android.com/reference/android/view/ViewGroup.LayoutParams.html#attr_android:layout_height
It talks about the three possible values and what they do.
fill_parent: The view should be as big as its parent (minus padding). This constant is deprecated starting from API Level 8 and is replaced by match_parent.
match_parent: The view should be as big as its parent (minus padding). Introduced in API Level 8.
wrap_content: The view should be only big enough to enclose its content (plus padding).
You should be using wrap_content on a couple of those items. Below I added an example of which heights I would have changed for your vertical layout:
<EditText
android:id="#+id/passText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="5"
android:hint="Passcode"
android:inputType="textPassword" />
<EditText
android:id="#+id/messageText"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:gravity="top|left"
android:hint="Message" >
<requestFocus />
</EditText>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="5"
android:orientation="horizontal"
android:weightSum="100" >
<Button
android:id="#+id/encodeButton"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_weight="50"
android:text="Encode" />
<Button
android:id="#+id/decodeButton"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_weight="50"
android:text="Decode" />
</LinearLayout>