If I have a layout in xml as follow
<RelativeLayout
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/bFb"
android:orientation="vertical" >
<EditText
android:id="#+id/etUserName"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<EditText
android:id="#+id/etPass"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"
/>
<Button
android:id="#+id/bLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Login" />
</LinearLayout>
<Button //This is the button on question
android:id="#+id/bFb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/linearLayout1"
android:text="Button" />
//there are more stuffs here below the linear layout
</RelativeLayout>
How can I have the button to the right of the linearlayout AND aligned at the middle of linear layout? I don't want the button borders to stretch the whole linear layout, just the middle of the linear layout
Thank you
You can achieve what you want by changing RelativeLayout to LinearLayout and supply a weight for its first child like that
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:orientation="vertical" >
<EditText
android:id="#+id/etUserName"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<EditText
android:id="#+id/etPass"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:inputType="textPassword" />
<Button
android:id="#+id/bLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Login" />
</LinearLayout>
<Button
android:id="#+id/bFb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="Button" />
</LinearLayout>
Which will produce this
EDIT
You can achieve it with relative layout that way
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:orientation="vertical" >
<EditText
android:id="#+id/etUserName"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<EditText
android:id="#+id/etPass"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:inputType="textPassword" />
<Button
android:id="#+id/bLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Login" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_toRightOf="#id/linearLayout1" >
<Button
android:id="#+id/bFb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="Button" />
</LinearLayout>
</RelativeLayout>
But it needs some tweeks to produce the exact same thing, in my opinion LinearLayout's weight serve better in your case, so if I were in your shoe I choose the LinearLayout solution and wrap it in a RelativeLayout
Related
As xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="20dp">
<Button
android:id="#+id/locationButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:minWidth="46dip"
android:onClick="getLocation"
android:text="#string/icon_map_marker" />
<AutoCompleteTextView
android:id="#+id/autocomplete_city"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:hint="#string/city_hint"
android:inputType="text"
android:layout_alignBottom="#+id/locationButton"
android:layout_alignTop="#id/locationButton"
android:layout_toLeftOf="#id/locationButton"
android:dropDownWidth="match_parent"
/>
<requestFocus />
</RelativeLayout>
As you can see the
android:dropDownWidth="match_parent"
ignores the padding of the relative layout. Any ideas how to fix this?
Solved it. I had to define another relative layout wrapping only the autocomplete textview and the button. This layout is the anchor of the popup, taking the width of the relative layout as its own width.The key:
android:dropDownWidth="wrap_content"
android:dropDownAnchor="#+id/anchor"
Short version:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="20dp" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/anchor" >
<Button
android:id="#+id/locationButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true" />
<AutoCompleteTextView
android:id="#+id/autocomplete_city"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/locationButton"
android:layout_alignTop="#id/locationButton"
android:layout_centerHorizontal="true"
android:layout_toLeftOf="#id/locationButton"
android:dropDownWidth="wrap_content"
android:hint="#string/city_hint"
android:dropDownAnchor="#+id/anchor" />
<requestFocus />
</RelativeLayout>
</RelativeLayout>
//try this
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp">
<AutoCompleteTextView
android:id="#+id/autocomplete_city"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:hint="city_hint"
android:inputType="text"
android:dropDownWidth="match_parent"/>
<Button
android:id="#+id/locationButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="46dip"
android:onClick="getLocation"
android:text="icon_map_marker" />
</LinearLayout>
I'm wondering how I can align the buttons as the following: Button1 and Button2-2 are supposed to align horizontally, Button2-1 and Button2-2 should align vertically.
[Button2-1]
[other views] [Button1] [Button2-2]
Here is my code but it doesn't work:
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ButtonGroups"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal" >
<Button
android:id="#+id/Button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical" >
<Button
android:id="#+id/Button2-1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
<Button
android:id="#+id/Button2-2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
EDITED:
To be more clear, I posted more code here and hopefully it could explain my needs better:
What I want is to align the text view horizontally with the image buttons while vertically with the seekbar above it.
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ButtonGroups"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/Button00"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/background00"
android:gravity="bottom"
android:scaleType="center"
android:src="#drawable/button00" />
<ImageButton android:id="#+id/Button11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/button11"
android:scaleType="center"
android:gravity="bottom"
android:background="#drawable/background11"
/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="bottom"
android:orientation="vertical" >
<SeekBar
android:id="#+id/SeekBar1"
style="#style/MySeekBar1"
android:layout_width="60dp"
android:layout_height="35dp"
android:layout_marginBottom="20dp"
/>
<TextView
android:id="#+id/MyText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="bottom"
android:background="#drawable/MyTextImg"
/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
Use RelativeLayout. Stacking LinearLayouts is usually not the way to go!
https://developer.android.com/reference/android/widget/RelativeLayout.html
https://developer.android.com/guide/topics/ui/layout/relative.html
Try changing the gravity attribute of the first button (Button 1) to bottom.
As someone suggested, use a RelativeLayout to design this type of pattern! Here's an example for your situation:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ButtonGroups"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<Button
android:id="#+id/Button2-2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/Button1"
android:layout_alignBottom="#+id/Button1"
android:layout_toRightOf="#+id/Button1"
android:text="button 2-2" />
<Button
android:id="#+id/Button2-1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/Button2-2"
android:layout_alignLeft="#+id/Button2-2"
android:text="button 2-1" />
<Button
android:id="#+id/Button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="54dp"
android:text="button 1" />
</RelativeLayout>
I hope this get you started!
Try the code below:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="*">
<TableRow >
<TextView />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button2-1" />
</TableRow>
<TableRow >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button1" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button2-2" />
</TableRow>
</TableLayout>
The trick is to use a blank text view for the empty space in the first row. Let me know if this helps you. :)
I have a ListView with a header. In this header a LinearLayout has a predefined style. The thing is that this layout doesn't show that style.
The code of the header:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
style="?blueHardBackground"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="5dip"
android:layout_marginRight="5dip"
android:layout_marginTop="2dp"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:orientation="horizontal" >
<Spinner
android:id="#+id/spinnerCiudad"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawSelectorOnTop="true" />
<Spinner
android:id="#+id/spinnerCategoria"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawSelectorOnTop="true" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal" >
<EditText
android:id="#+id/textNombreElemento"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:textSize="6pt"
android:typeface="serif" >
<requestFocus />
</EditText>
<ImageView
android:id="#+id/botonFiltrar"
android:layout_width="40dp"
android:layout_height="40dp"
android:contentDescription="Mostrar"
android:src="#drawable/buscar_n" />
</LinearLayout>
<LinearLayout
android:id="#+id/capaNumResultados"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:orientation="horizontal" >
<TextView
android:id="#+id/textNumResultados"
style="?textRegular"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="" />
</LinearLayout>
</LinearLayout>
It should appear center in blue with round corners, but it's shown transparent with no style, and on the left.
I believe you want
style="?style/blueHardBackground">
in your LinearLayout instead of
style="?blueHardBackground">
you are missing the style after the "?" to tell the xml where to look for the name blueHardBackground
This Link in the Docs
explains about accessing resources
I have the following code, how do I make it so that the 3 buttons are at the bottom?
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="60dp"
android:gravity="center"
android:text="#string/observer"
android:textAppearance="?android:attr/textAppearanceLarge"
tools:context=".asdf"
android:weight="1" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="145dp"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center"
android:text="1" />
<Button
android:id="#+id/button2"
style="?android:attr/buttonStyleSmall"
android:layout_width="145dp"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center"
android:text="2" />
<Button
android:id="#+id/button3"
style="?android:attr/buttonStyleSmall"
android:layout_width="145dp"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center"
android:text="3" />
</LinearLayout>
You need to ensure four things:
Your outside LinearLayout has layout_height="match_parent"
Your inside LinearLayout has layout_weight="1" and layout_height="0dp"
Your TextView has layout_weight="0"
You've set the gravity properly on your inner LinearLayout: android:gravity="center|bottom"
Notice that fill_parent does not mean "take up all available space". However, if you use layout_height="0dp" with layout_weight="1", then a view will take up all available space (Can't get proper layout with "fill_parent").
Here is some code I quickly wrote up that uses two LinearLayouts in a similar fashion to your code.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/db1_root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/cow"
android:layout_weight="0"
android:textAppearance="?android:attr/textAppearanceLarge" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:gravity="center|bottom"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="145dp"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center"
android:text="1" />
<Button
android:id="#+id/button2"
style="?android:attr/buttonStyleSmall"
android:layout_width="145dp"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center"
android:text="2" />
<Button
android:id="#+id/button3"
style="?android:attr/buttonStyleSmall"
android:layout_width="145dp"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center"
android:text="3" />
</LinearLayout>
</LinearLayout>
The result looks like similar to this:
You can use a RelativeLayout and align it to the bottom with android:layout_alignParentBottom="true"
Create Relative layout and inside that layout create your button with this line
android:layout_alignParentBottom="true"
You can do this by taking a Frame layout as parent Layout and then put linear layout inside it. Here is a example:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:textSize="16sp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:textSize="16sp"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:textSize="16sp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:textSize="16sp"/>
</LinearLayout>
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_gravity="bottom"
/>
</FrameLayout>
first create file name it as footer.xml
put this code inside it.
<?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="78dp"
android:layout_gravity="bottom"
android:gravity="bottom"
android:layout_weight=".15"
android:orientation="horizontal"
android:background="#drawable/actionbar_dark_background_tile" >
<ImageView
android:id="#+id/lborder"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".14"
android:background="#drawable/action_bar_left_button"
android:src="#drawable/overlay" />
<ImageView
android:id="#+id/unknown"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".14"
android:background="#drawable/action_bar_left_button"
android:src="#drawable/notcolor" />
<ImageView
android:id="#+id/open"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".14"
android:background="#drawable/action_bar_left_button"
android:src="#drawable/openit"
/>
<ImageView
android:id="#+id/color"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".14"
android:background="#drawable/action_bar_left_button"
android:src="#drawable/colored" />
<ImageView
android:id="#+id/rborder"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/action_bar_left_button"
android:src="#drawable/frames"
android:layout_weight=".14" />
</LinearLayout>
then create header.xml and put this code inside it.:
<?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="#dimen/action_bar_height"
android:layout_gravity="top"
android:baselineAligned="true"
android:orientation="horizontal"
android:background="#drawable/actionbar_dark_background_tile" >
<ImageView
android:id="#+id/contact"
android:layout_width="37dp"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layout_weight=".18"
android:scaleType="fitCenter"
android:background="#drawable/action_bar_left_button"
android:src="#drawable/logo"/>
<ImageView
android:id="#+id/share"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layout_weight=".14"
android:background="#drawable/action_bar_left_button"
android:src="#drawable/share" />
<ImageView
android:id="#+id/save"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".14"
android:background="#drawable/action_bar_left_button"
android:src="#drawable/save" />
<ImageView
android:id="#+id/set"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".14"
android:background="#drawable/action_bar_left_button"
android:src="#drawable/set" />
<ImageView
android:id="#+id/fix"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".14"
android:background="#drawable/action_bar_left_button"
android:src="#drawable/light" />
<ImageView
android:id="#+id/rotate"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".14"
android:background="#drawable/action_bar_left_button"
android:src="#drawable/ic_menu_rotate" />
<ImageView
android:id="#+id/stock"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".14"
android:background="#drawable/action_bar_left_button"
android:src="#drawable/stock" />
</LinearLayout>
and then in your main_activity.xml and put this code inside it :-
<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="fill_parent"
tools:context=".MainActivity"
android:id="#+id/relt"
android:background="#drawable/background" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="78dp"
android:id="#+id/down"
android:layout_alignParentBottom="true" >
<include
android:layout_width="fill_parent"
android:layout_height="78dp"
layout="#layout/footer" >
</include>
</LinearLayout>
<ImageView
android:id="#+id/view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/down"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/inc"
>
</ImageView>
<include layout="#layout/header"
android:id="#+id/inc"
android:layout_width="fill_parent"
android:layout_height="50dp"></include>
happy coding :)
<LinearLayout
android:id="#+id/LinearLayouts02"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="bottom|end">
<TextView
android:id="#+id/texts1"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_weight="2"
android:text="#string/forgotpass"
android:padding="7dp"
android:gravity="bottom|center_horizontal"
android:paddingLeft="10dp"
android:layout_marginBottom="30dp"
android:bottomLeftRadius="10dp"
android:bottomRightRadius="50dp"
android:fontFamily="sans-serif-condensed"
android:textColor="#color/colorAccent"
android:textStyle="bold"
android:textSize="16sp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp"/>
</LinearLayout>
Just add layout_weight="1" to in your linearLayout which having Buttons.
Edit :- let me make it simple
follow something like below, tags name may not be correct, it is just an Idea
<LL>// Top Parrent LinearLayout
<LL1 height="fill_parent" weight="1" "other tags as requirement"> <TV /><Butons /></LL1> // this layout will fill your screen.
<LL2 height="wrap_content" weight="1" orientation="Horizontal" "other tags as requirement"> <BT1 /><BT2/ ></LL2> // this layout gonna take lower part of button height of your screen
<LL/> TOP PARENT CLOSED
You can bundle your Button(s) within a RelativeLayout even if your Parent Layout is Linear. Make Sure the outer most parent has android:layout_height attribute set to match_parent.
And in that Button tag add
'android:alignParentBottom="True" '
You can use the Space widget with layout_weight=1 to fill up the space between your widgets and the bottom buttons. See example:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="16dp"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/date_layout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_weight="1"
android:hint="#string/date_hint">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/date_input"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusable="false" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/time_layout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_weight="1"
android:hint="#string/time_hint">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/time_input"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusable="false"
android:inputType="datetime" />
</com.google.android.material.textfield.TextInputLayout>
</LinearLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/food_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:hint="#string/food_hint">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/food_input"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/calories_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:hint="#string/calories_hint">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/calories_input"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="number" />
</com.google.android.material.textfield.TextInputLayout>
<Space
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<Button
android:id="#+id/add_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/add_button" />
</LinearLayout>
Add android:windowSoftInputMode="adjustPan" to manifest - to the corresponding activity:
<activity android:name="MyActivity"
...
android:windowSoftInputMode="adjustPan"
...
</activity>
In my case I was trying to put a complete Linear Layout at the bottom in Linear Layout. When I tried using the "layout_gravity" to bottom it was not working. So I changed the root layout to the Frame Layout and it worked perfectly.
So If you want to put a layout at bottom try using Frame Layout and put everything else inside a nested Linear or Relative Layout.
I want to create a neat two-columns input form like this:
My xml layout code so far:
<?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="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:text="#string/lblTitle" />
<EditText
android:id="#+id/txtTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.75"
android:ems="10" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:text="#string/lblAuthor" />
<EditText
android:id="#+id/txtAuthor"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.75"
android:ems="10" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:text="#string/lblPublisher" />
<EditText
android:id="#+id/txtPublisher"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.75"
android:ems="10" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:text="#string/lblIsbn" />
<EditText
android:id="#+id/txtIsbn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.75"
android:ems="10" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<View
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.25" />
<Button
android:id="#+id/btnSubmit"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.375"
android:text="#string/submit" />
<Button
android:id="#+id/btnCancel"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.375"
android:text="#string/cancel" />
</LinearLayout>
</LinearLayout>
You can see that I used LinearLayout utilizing layout_weight & layout_width="0dp" trick to make the two columns division looks neat. In HTML code, we can use with % width size. But in android xml layout, there is no %-value for layout_width. I want to avoid hardcoded dp-values for column width. Is it possible in android?
So far that's the best I can do. Now I want to resize the ISBN textbox to become smaller (50% size less from the current size). But I cannot resize the textbox width since layout_width must be "0dp" for layout_weight to work. I also want to do the same with the Submit and Cancel button size.
I wonder if using LinearLayout is a correct way to create input form neatly in android. Could TableLayout better for this? I heard that you cannot change child view's layout_width in TableLayout.
There are some people here recommend me using RelativeLayout, I tried it but it doesn't support layout_weight.
Alright, I found out the way with LinearLayout. The trick is by wrapping the Views that you want to resize with LinearLayout. Then the width of View itself can be adjusted by using: android:layout_width or android:ems property.
Here is the xml code:
<?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="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:text="#string/lblTitle" />
<EditText
android:id="#+id/txtTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.75"
android:ems="10" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:text="#string/lblAuthor" />
<EditText
android:id="#+id/txtAuthor"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.75"
android:ems="10" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:text="#string/lblPublisher" />
<EditText
android:id="#+id/txtPublisher"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.75"
android:ems="10" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="0.25"
android:text="#string/lblIsbn" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.75"
android:orientation="horizontal" >
<EditText
android:id="#+id/txtIsbn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="5" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<View
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.25" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.75"
android:orientation="horizontal" >
<Button
android:id="#+id/btnSubmit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="5"
android:text="#string/submit" />
<Button
android:id="#+id/btnCancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="5"
android:text="#string/cancel" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
you should also consider the gridLayout , which can be used (by using an android library) on API7+ .
here's a link:
http://android-developers.blogspot.com/2011/11/new-layout-widgets-space-and-gridlayout.html