Android XML Layout - percentage + wrap_content - android

I want to make some part of layout like ex.:
[_____EditText1_____] / [_____EditText2_____]
and I didn't want to set width in dp/px etc.
I want to wrap_content fo width for 'slash' sign "/" and divide remaining width for (50% to 50%) for EditText1 and EditText2.
It's simple for only EditText1 and EditText2, just setting in both of them:
android:layout_width="0dp"
android:layout_weight=".5"
but how to set TextView "/" and for width wrap_content, between two EditTexts?

<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"
>
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".5"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="/" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".5"
/>
</LinearLayout>

Try this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.48" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="/"
android:layout_weight="0.04" />
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.48" />
</LinearLayout>

You can try this
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<EditText
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="/"/>
<EditText
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"/>
</LinearLayout>
TextView will occupy its space and the remainning will be distributed among EditViews equally.
Hope this helps.

<LinearLayout
android:layout_height="wrap_content"
android:layout_width="fill_parent">
<TextView
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="0"
android:gravity="center_vertical|center_horizontal" />
<TextView
android:layout_weight="1.5"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="/"
android:gravity="center_vertical|center_horizontal" />
<TextView
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="0"
android:gravity="center_vertical|center_horizontal" />
</LinearLayout>
The key is to increase layout_weight value of the middle element ;)

Related

buttons disappearing from a linear layout

I have a complicated linear layout, with some buttons and edittext:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="top|center_horizontal"
android:orientation="vertical"
android:weightSum="1"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginBottom="400dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_marginTop="0dp"
android:text="#string/stop"
android:textSize="18dp"
android:textStyle="bold" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<EditText
android:id="#+id/text"
android:hint="#string/hint"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/choose"
android:layout_alignParentLeft="true"
android:minWidth="150dp"
android:textSize="10sp"/>
<Button
android:id="#+id/text2"
android:hint="#string/favourites"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/choose"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/text"
android:textSize="10sp"
/>
<Button
android:id="#+id/text3"
android:hint="#string/clean"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/choose"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/text"
android:textSize="10sp"
/>
</LinearLayout>
<Button
android:id="#+id/button"
android:text="#string/request"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/text2"
android:onClick="lookUp"
android:textSize="12sp"
/>
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#3d455b"
android:layout_alignParentLeft="true"
android:layout_below="#+id/button">
<HorizontalScrollView
android:id="#+id/hscrll1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<RelativeLayout
android:id="#+id/RelativeLayout1"
android:layout_width="fill_parent"
android:layout_gravity="left"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TableLayout
android:id="#+id/table_main"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_centerHorizontal="false"
android:stretchColumns="2">
</TableLayout>
</RelativeLayout>
</HorizontalScrollView>
</ScrollView>
</LinearLayout>
Everything looks at it should on a large screen (tablet): I have the first line with the edittext and two buttons, on the line below I have the other button, and below it I have the scrollview (with the table).
When I switch to normal screen (smartphone), only the first line is appearing, the rest not being visible.
What could the solution be?
In Small Screen device there are problem with margin you set, try to
remove android:layout_marginBottom="400dp" from your ParentLayout and manage your Layout according them
At the second linear_layout (that have horizontal orientation) all of your views, have match parent width that cause non of them are visible. I think it's what you want:
`
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<EditText
android:id="#+id/text"
android:hint="#string/hint"
android:layout_width="0dp"
android:layout_weight = "1"
android:layout_height="wrap_content"
android:minWidth="150dp"
android:textSize="10sp"/>
<Button
android:id="#+id/text2"
android:hint="#string/favourites"
android:layout_width="0dp"
androidlayout_weight = "1"
android:layout_height="wrap_content"
android:textSize="10sp"
/>
<Button
android:id="#+id/text3"
android:hint="#string/clean"
android:layout_width="0dp"
android:layout_weight = "1"
android:layout_height="wrap_content"
android:textSize="10sp"
/>
</LinearLayout>
`

Android text alignment inside textview is wrong

I'm trying to align text inside textview to the center (both vertical and horizontal).
Altought the vertical alignment working properlly in the Android Studio preview, it fails on the emulator.
The design:
The android studio preview:
The emulator:
The code:
<RelativeLayout
android:id="#+id/teamsBox"
android:layout_width="match_parent"
android:layout_height="185dp">
<LinearLayout
android:layout_width="154dp"
android:layout_height="wrap_content"
android:background="#drawable/team_bg"
android:padding="6dp"
android:layout_alignParentLeft="true"
android:orientation="vertical">
<EditText
android:id="#+id/teamOneName"
android:layout_width="143dp"
android:layout_height="42dp"
android:text="HOME"
android:textColor="#color/my_white"
android:background="#color/my_transparent"
android:textSize="23sp"
android:singleLine="true"
android:gravity="center"/>
<TextView
android:id="#+id/teamOneScore"
android:layout_width="143dp"
android:layout_height="132dp"
android:text="3"
android:textColor="#color/my_green"
android:textSize="127sp"
android:gravity="center"/>
</LinearLayout>
<LinearLayout
android:layout_width="154dp"
android:layout_height="match_parent"
android:background="#drawable/team_bg"
android:padding="6dp"
android:layout_alignParentRight="true"
android:orientation="vertical">
<EditText
android:id="#+id/teamTwoName"
android:layout_width="match_parent"
android:layout_height="42dp"
android:text="AWAY"
android:textColor="#color/my_white"
android:background="#color/my_transparent"
android:textSize="23sp"
android:singleLine="true"
android:gravity="center"/>
<TextView
android:id="#+id/teamTwoScore"
android:layout_width="fill_parent"
android:layout_height="132dp"
android:text="1"
android:textColor="#color/my_green"
android:textSize="127sp"
android:gravity="center"
android:layout_gravity="center"/>
</LinearLayout>
</RelativeLayout>
Edit: I've changed to layout according to the answers, but the bug is still happening.
This is my new layout:
<RelativeLayout
android:id="#+id/teamsBox"
android:layout_width="match_parent"
android:layout_height="185dp">
<LinearLayout
android:layout_width="154dp"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:background="#drawable/team_bg"
android:orientation="vertical"
android:padding="6dp" >
<EditText
android:id="#+id/teamOneName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="HOME"
android:textColor="#color/my_white"
android:background="#color/my_transparent"
android:textSize="23sp"
android:singleLine="true"
android:padding="8dp"
android:gravity="center"/>
<TextView
android:id="#+id/teamOneScore"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="3"
android:textColor="#color/my_green"
android:textSize="127sp"
android:gravity="center_vertical|center_horizontal"/>
</LinearLayout>
<LinearLayout
android:layout_width="154dp"
android:layout_height="match_parent"
android:background="#drawable/team_bg"
android:padding="6dp"
android:layout_alignParentRight="true"
android:orientation="vertical">
<EditText
android:id="#+id/teamTwoName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="AWAY"
android:textColor="#color/my_white"
android:background="#color/my_transparent"
android:textSize="23sp"
android:singleLine="true"
android:padding="8dp"
android:gravity="center"/>
<TextView
android:id="#+id/teamTwoScore"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="1"
android:textColor="#color/my_green"
android:textSize="127sp"
android:gravity="center"
android:layout_gravity="center"/>
</LinearLayout>
</RelativeLayout>
To problem is in the TextView itself, the large size of the text is not calculated by the gravity attribute.
Try adding this attribute to your text view android:includeFontPadding="false"
set your textView's android:gravity to center_vertical | center_horizontal
<TextView
android:id="#+id/teamOneScore"
android:layout_width="143dp"
android:layout_height="132dp"
android:text="3"
android:textColor="#color/my_green"
android:textSize="127sp"
android:gravity="center_vertical | center_horizontal" />
Remove hard coded width and height and use weight.Try the following data
<RelativeLayout
android:id="#+id/teamsBox"
android:layout_width="match_parent"
android:layout_height="185dp" >
<LinearLayout
android:layout_width="154dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:background="#drawable/button_background"
android:orientation="vertical"
android:padding="6dp" >
<EditText
android:id="#+id/teamOneName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#123456"
android:gravity="center"
android:singleLine="true"
android:text="HOME"
android:textSize="23sp" />
<TextView
android:id="#+id/teamOneScore"
android:layout_width="match_parent"
android:layout_height="0dp"
android:gravity="center_vertical|center_horizontal"
android:text="3"
android:layout_weight="1"
android:textSize="127sp" />
</LinearLayout>
<LinearLayout
android:layout_width="154dp"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:background="#drawable/button_background"
android:orientation="vertical"
android:padding="6dp" >
<EditText
android:id="#+id/teamTwoName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#123456"
android:gravity="center"
android:singleLine="true"
android:text="AWAY"
android:textSize="23sp" />
<TextView
android:id="#+id/teamTwoScore"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:gravity="center_vertical|center_horizontal"
android:text="1"
android:layout_weight="1"
android:textSize="127sp" />
</LinearLayout>
</RelativeLayout>
Hope this works
try this it may help you,
<?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="wrap_content"
android:background="#android:color/holo_green_light" >
<LinearLayout
android:layout_width="154dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:orientation="vertical"
android:padding="6dp" >
<EditText
android:id="#+id/teamOneName"
android:layout_width="143dp"
android:layout_height="42dp"
android:background="#android:color/holo_green_dark"
android:gravity="center"
android:singleLine="true"
android:text="HOME"
android:textColor="#android:color/white"
android:textSize="23sp" />
<TextView
android:id="#+id/teamOneScore"
android:layout_width="143dp"
android:layout_height="132dp"
android:gravity="center"
android:text="3"
android:background="#android:color/white"
android:textSize="127sp" />
</LinearLayout>
<LinearLayout
android:layout_width="154dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:orientation="vertical"
android:padding="6dp" >
<EditText
android:id="#+id/teamTwoName"
android:layout_width="match_parent"
android:layout_height="42dp"
android:background="#android:color/holo_green_dark"
android:gravity="center"
android:singleLine="true"
android:text="AWAY"
android:textColor="#android:color/white"
android:textSize="23sp" />
<TextView
android:id="#+id/teamTwoScore"
android:layout_width="fill_parent"
android:layout_height="132dp"
android:layout_gravity="center"
android:gravity="center"
android:text="1"
android:background="#android:color/white"
android:textSize="127sp" />
</LinearLayout>
</RelativeLayout>
Just use match_parent as the height of the textview.
Your linear layout which is having the edit text and one text view height is lesser than you have given height to its children. Please calculate height for the edit text and text view and accordingly adjust height of your linear layout.
Here You just need to give wrap_content to you text view and .
1. change in text view
android:layout_height="132dp"
To
android:layout_height="wrap_content"
2. Increase you linear layout height to
android:layout_width="184dp"
3. remove below pading tag from your linear layout
android:padding="6dp"
it will fix your issue.

Textview center-aligned based on percentage of screenwidth

I thought this will be a common question, but I couldn't find any answers......
Is it possible to center-aligned a (variable length) textview based on a percentage of the screen width?
In my case, I have 2 textview and I want to achieve something like this:
Another example:
The first textview is center-aligend 30% of the screenwidth, width=wrap_content, while the second textview takes up the rest of the space. The first textview's size should NOT be fixed (see picture above)
I do not want to do that programatically, as it will be expensive on my program. If possible it's better be in an xml layout file :)
Right now I can only achieve a "left-aligned" textview using layout_weight of LinearLayout (by putting a 30% dummy on the left), but I want center-alignment.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="3" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="7"
android:orientation="horizontal" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="textview" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:singleLine="true"
android:text="another textview"
android:textColor="#FFFF0000"/>
</LinearLayout>
</LinearLayout>
With almost an hour testing this "..." layout, I succeeded with 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="wrap_content"
android:orientation="horizontal"
android:weightSum="100" >
<RelativeLayout
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="40"
android:background="#android:color/transparent">
<RelativeLayout
android:id="#+id/left_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_margin="0dp"
android:gravity="center"
android:padding="0dp"
android:singleLine="true"
android:text="first textview"
android:textColor="#FFFF0000" >
<View
android:layout_width="1dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#0000FF" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#00FF00"
android:gravity="center"
android:text="textview"
android:textColor="#FFF" />
</RelativeLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/left_layout"
android:background="#0000FF"
android:gravity="center"
android:text="textview"
android:textColor="#FFF" />
</RelativeLayout>
<TextView
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="60"
android:background="#FFFF0000"
android:gravity="right"
android:singleLine="true"
android:text="another textview"
android:textColor="#FFF" />
</LinearLayout>
Outputs
Finally in your Java, according to the green textview width or content length, you can change the layout_weight for other textviews programmatically.
This should help you
Have a nice day.
// try this way hope this will help you...
<?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:gravity="center">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_weight="0.15"/>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.85">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:text="first Textview"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="second textview demo text "/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
try this one
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
android:gravity="center_horizontal"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="7"
android:gravity="center_horizontal"
android:orientation="vertical" >
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
Work perfect checked by me.

Slim Spinner when i use FILL_PARENT (or MATCH_PARENT) as WIDTH

i've a strange problem when i set android:layout_width="fill_parent" in my Spinner:
the clickable area is reduced to a line (red square) and only pressing on this line is possibile show the elements of the Spinner:
if i use android:layout_width="wrap_content" i obtain the correct area:
i would like the same thing using "fill_parent"
The elements of the Spinner are correctly visualized.. The only problem is clicking on the Spinner.
Which is the possible problem?
<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:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#040404"
android:gravity="center"
android:paddingTop="2dp"
android:weightSum="4" >
<TextView
android:id="#+id/mpp_movimento_lbl"
android:background="#drawable/selector_black_btn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableTop="#drawable/freccia_verde"
android:gravity="center"
android:text="#string/Movimento"
android:textColor="#color/white"
android:textStyle="bold"
android:textSize="17sp" />
<TextView
android:id="#+id/mpp_eccesso_lbl"
android:background="#drawable/selector_black_btn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableTop="#drawable/freccia_rossa"
android:gravity="center"
android:text="#string/Eccesso"
android:textColor="#color/white"
android:textStyle="bold"
android:textSize="17sp" />
<TextView
android:id="#+id/mpp_fermo_lbl"
android:background="#drawable/selector_black_btn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableTop="#drawable/freccia_grigia"
android:gravity="center"
android:text="#string/Fermo"
android:textColor="#color/white"
android:textStyle="bold"
android:textSize="17sp" />
<TextView
android:id="#+id/mpp_ripristina_lbl"
android:background="#drawable/selector_black_btn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableTop="#drawable/ripristina_mappa_40x40"
android:gravity="center"
android:text="#string/Ripristina"
android:textColor="#color/white"
android:textStyle="bold"
android:textSize="17sp" />
</LinearLayout>
<TextView
android:id="#+id/mpp_automezzi_visualizzati_lbl"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/black"
android:gravity="center"
android:paddingTop="5dp"
android:text="#string/AutomezziVisualizzati"
android:textColor="#color/white"
android:textSize="17sp" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
android:paddingTop="5dp" >
<FrameLayout
android:id="#+id/mpp_spinner_frame_fly"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#+id/mpp_cerca_btn" >
<Spinner
android:id="#+id/mpp_spinner_spn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:textSize="17sp" />
</FrameLayout>
<ImageButton
android:id="#+id/mpp_cerca_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginLeft="5dp"
android:background="#drawable/selector_white_btn"
android:contentDescription="#string/DescrizioneCerca"
android:gravity="center"
android:onClick="doCerca"
android:src="#drawable/cerca" />
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="5dp"
android:background="#040404"
android:gravity="center" >
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<fragment
android:id="#+id/mpp_mappa_fragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
class="com.google.android.gms.maps.SupportMapFragment" />
</RelativeLayout>
Try setting your Spinner's parent's height to match_parent. And also do you really need such layout? There is no need to place spinner in FrameLayout, try setting spinners's weight to 1 and replace RelativeLayout with LinearLayout

How to create a neat two-columns input form in Android?

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

Categories

Resources