I have a TableLayout that won't behave and I'm not sure what I'm doing wrong or not doing right
Here is my layout file
<TableLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/wall_paper"
xmlns:android="http://schemas.android.com/apk/res/android">
<TableRow
android:layout_weight="1"
android:paddingTop="25dp">
<LinearLayout
android:orientation="horizontal">
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/name"
android:textColor="#color/nb_text"
android:layout_marginLeft="20dip"/>
<EditText android:id="#+id/name"
android:layout_width="150dp"
android:layout_height="wrap_content" />
</LinearLayout>
</TableRow>
<TableRow android:layout_weight="1">
<LinearLayout
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:orientation="horizontal">
<Button android:id="#+id/chgPhoto"
android:text="#string/newphoto"
android:background="#drawable/camera"
android:layout_height="40dp"
android:layout_width="60dp"
android:layout_marginLeft="20dip"
android:layout_gravity="left"
android:gravity="left" ></Button>
<ImageView
android:id="#+id/StuPhoto"
android:src="#drawable/person_icon"
android:layout_width="100dip"
android:layout_height="80dp"
android:layout_marginLeft="25dip" ></ImageView>
</LinearLayout>
</TableRow>
</TableLayout>
I want the person icon and resulting photo to be much bigger and shifted farther to the right but nothing I do seems to help. In fact, when I increase the layout_width/height of the photo, it simply shifts the icon with that space like so:
Any ideas on how to make this behave? Be kind - I readily admit layouts have me confused.
try adding stretchColumns="*" to your tablelayout and why don't you set a layout_gravity for the picture you're trying to move to the right?
I ended up going the opposite route with this - rather than scale the drawables, which maybe of various sizes, to the layout I want, I went to the images themselves and scaled them to what I want.
Then I can use "wrap_parent" or whatever without having to scale the image. Seems a hard way to go
as I might want larger or smaller drawbles on another device. But specifying the size jacked things up to no end
Related
I've tried to track down what's going wrong here, and I'm coming up with nothing. If i change my layout weight from 1 to 2, on the first view in my horizontal linear layout, the resulting width actually decreases. Here is the code.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:weightSum="7">
<TextView android:id="#+id/filterButton"
android:layout_width="0dp"
android:layout_weight="2"
android:layout_height="wrap_content"
android:padding="0dp"
android:textColor="#android:color/white"
android:text="filter"></TextView>
<RelativeLayout
android:layout_width="0dp"
android:layout_weight="4"
android:layout_height="fill_parent"
android:gravity="center" >
<AutoCompleteTextView
android:id="#+id/editText1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:ems="14"
android:imeOptions="actionDone"
android:inputType="textAutoComplete|textAutoCorrect"
android:textColor="#FFFFFF"
android:singleLine="true"
android:gravity="left">
</AutoCompleteTextView>
<ImageView android:id="#+id/clear"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:src="#drawable/close"
android:layout_alignParentRight="true"
android:scaleType="fitEnd"
android:adjustViewBounds="true"
android:padding="12dp"
android:visibility="invisible"
android:tint="#android:color/white"/>
</RelativeLayout>
<ImageView android:id="#+id/listButton"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="fill_parent"
android:src="#drawable/list"
android:scaleType="fitCenter"
android:adjustViewBounds="true"
android:padding="9dp"
android:tint="#android:color/white"></ImageView>
</LinearLayout>
Here is what my action bar looks like with the TextView's layout weight set to 1.
You can see I'm already getting some overflow on the right element. It's getting bumped off screen. Here is what it looks like with the TextView's weight set to 2.
Which is odd because the TextView has actually decreased in size. Here is the action bar without the TextView. The sizes are behaving well here.
Any help would be greatly appreciated!
It looks similar to problem i have sometimes.
For layout with weight 7 it would give space like that [[..2..][.5]].
Like in your example making weight smaller actually give more space for layout.
Try to change background color of the middle layout to have better grasp what space exacly is given to your layouts.
Unlucky on my computer your code works normally so I can't help more than that.
I have simple tableLayout which show the problem with independent unit dp.
I suppose that with dp unit in my layout_margin attribute - layout will be resized without problem on any device.
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:gravity="center"
android:layout_margin="40dp"
>
<TableRow android:layout_width="fill_parent" android:layout_height="wrap_content">
<TextView
android:text="#string/start_login_username"
android:id="#+id/start_login_username"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<EditText
android:id="#+id/start_login_EditTxt1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
/>
</TableRow>
<TableRow android:layout_width="fill_parent" android:layout_height="wrap_content">
<TextView
android:text="#string/start_login_password"
android:id="#+id/start_login_password"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</TextView>
<EditText
android:id="#+id/start_login_EditTxt2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textPassword"
/>
</TableRow>
<TableRow android:layout_width="fill_parent" android:layout_height="wrap_content">
<Button android:text="#string/start_login_cancel"
android:id="#+id/start_login_cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
</Button>
<Button
android:text="#string/start_login_login"
android:id="#+id/start_login_ButtonLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
</Button>
</TableRow>
</TableLayout>
But, testing this layout, we can see that dp is not so independent in layout margin .
Here the screenshot in Samsung Nexus(Good scale):
Here the screenshot in LG Optimus GT 540(Bad scale):
Im looking the similar threads in StackOverflow, and possible solution, to have correct scale on any screen is:
Not use margin and padding at all, but use always tableLayout and add
moc Views with some weight, to add space between Views(not good because of
pollution of xml layouts. Anyway, its looks promising ).
Make my own calculation of independent unit, and rescale all programmatically (not good for me because I have all in xml's)
Use different layouts for differents screens (not good because Im too lazy to recreate the layout for each my view and supporting them)
Questions:
How can I solve the problem with scaling of my layout for all screens using the same layout ?
How I can make margin works correct on my screens ?
What you think about my two solutions. This is good practice ? (specially first one) ?
Thanks
Simply use linearlayout with weight attributes, remember to set width="0dp" if it is the width you want to be automatically adjusted.
Your xml should be something like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="horizontal" >
<TextView
android:text="Your name"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content" />
<EditText
android:layout_weight="1"
android:layout_width="0dp"
android:minWidth="80dp"
android:layout_height="wrap_content" />
</LinearLayout>
Hooray for pictures! Here's what it looks like when assigning the picture to the background, and when not.
I'd very much like for it to not stretch out the top TableView if the image is larger than the table. I've included an empty "view" to give a little bit of extra space for the table's background already as well, as you can see in the XML to follow. Tried to mess around with ScaleType, but that was a wash.
How can I get the BG to stretch to fit the layout? I'm trying to handle the "user xxx has a smaller screen than WVGA" gracefully. I lack grace, apparently.
<TableLayout
android:id="#+id/widget29"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:scaleType="fitXY"
android:background="#drawable/minetownx480"
>
<View
android:id="#+id/blankSpace"
android:layout_width="fill_parent"
android:layout_height="60dip" />
<TableRow android:id="#+id/widget40" android:layout_width="fill_parent" android:layout_height="wrap_content" xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal">
<TextView android:id="#+id/moneyText" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Money: $$$$$$$$$" />
<TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="#+id/savingsText" android:gravity="right" android:text="Savings: $$$$$$$" android:layout_weight="3" android:textSize="12sp"/>
</TableRow>
<TableRow android:id="#+id/widget41" android:layout_width="fill_parent" android:layout_height="wrap_content" xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal">
<TextView android:id="#+id/wagonText" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Wagon Space: XXX/XXX" />
<TextView android:id="#+id/loanText" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Loans: $$$$$$$$" android:gravity="right" android:layout_weight="3" android:textSize="12sp"/>
</TableRow>
<TableRow android:id="#+id/widget42" android:layout_width="fill_parent" android:layout_height="wrap_content" xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" >
<TextView android:id="#+id/daysText" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Days Left: XX/XX" />
<TextView android:id="#+id/armedText" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Unarmed!" android:gravity="right" android:layout_weight="3" />
</TableRow>
</TableLayout>
The tablelayout is the first element of the root linearLayout, if that matters at all.
Edit: Alternatively, if you know how I could measure the tableLayout's X and Y space before assigning the image, I could scale it programmatically before assigning it.... Either solution would be good if anyone knows!
I would use FrameLayout and create two layers (i.e. add two views inside). First would be an ImageView and the second, therefore the top one, would be your table. In this way I would not rely on the table to control my image scaling but it would be independent from the ImageView which one can then hopefully more easily manipulate as it is not showing the image as 'background' but as the source.
Looks like there's a plenty of questions about centering, same size etc, but so far I didn't find the exactly my case so I dare to ask :)
What I need is a layout of three buttons like this:
[ previous ][*select*] [ next ]
where [previous] and [next] buttons are of the same size (i.e. in this case, size of the [previous] button as it is bigger), and the [*select*] button should stretch to occupy all of the available width.
Following the hints of making two buttons in LinearLayout same sized, i came up with the following xml file:
<LinearLayout
android:id="#+id/button_bar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal" >
<Button
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="Previous" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="Select" />
<Button
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="Next" />
</LinearLayout>
This almost works :)
Except one thing: instead of making Next button to match the size of Previous button, android makes Previous button to be the size of the Next :)
And because of this the text "Previous" gets wrapped in two lines, like
Previ
ous
Dunno if this is a bug or not, but can you advice me a workaround or some another way to achive the desired layout?
Thank you!
I'd suggest using a RelativeLayout
<RelativeLayout
android:id="#+id/buttons"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:clickable="false">
<Button
android:id="#+id/previous"
android:layout_width="30dp"
android:layout_height="wrap_content"
android:text="Previous"
android:layout_alignParentLeft="true"/>
<Button
android:id="#+id/next"
android:layout_width="30dp"
android:layout_height="wrap_content"
android:text="Next"
android:layout_alignParentRight="true"/>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Select"
android:layout_toRightOf="#id/previous"
android:layout_toLeftOf="#id/next" />
</RelativeLayout>
This should work.
If you are including "android:layout_weight" you should give either "android:layout_width" or "android:layout_height" as "fill_parent"
modify your code like this
<LinearLayout
android:id="#+id/button_bar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal" >
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="Previous" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1.5"
android:text="Select" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="Next" />
In that sort of case I would go for a TableLayout, in which you have one row, and a weight of 1 for EACH button. and the stretchColumn attribute put to column 1. Does this make any difference?
I'm not sure if you can match a size to some other besides by doing this in code. The easiest solution is probably adjusting the previous and next button widths in dp/sp units until they look good and have the select button be the only one with the layout_weight attribute.
I have an EditText and a Button in my LinearLayout and I want to align them closely together so they see seem to belong together (edittext + micButton for speech input).
Now they don't have the same height and they aren't really aligned well (Button seems to be a little lower than the EditText). I know I can apply a negative margin like -5dp to make them come closer together, but is there perhaps a better way to do this?
Set them in a specific container/layout so that they will automatically have the same height and no margin between them?
Using relative layout you can stretch a view depending upon another views size without knowing the exact size of the other view.
Here is the code :
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<Button
android:layout_width="100dp"
android:layout_height="100dp"
android:text="button"
android:id="#+id/but"/>
<EditText
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/but"
android:layout_alignBottom="#id/but"
android:layout_alignTop="#id/but"
/>
</RelativeLayout>
Check this link for reducing space between views :
https://groups.google.com/forum/?fromgroups#!topic/android-developers/RNfAxbqbTIk
Hmm, don't know why people bother so much with tables. Since the both Views are within a LinearLayout (presumable orientation=Horizontal), this command should center both within the layout:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical" />
</LinearLayout>
Note: Since EditTexts and Buttons may orient their text slightly differently, you may have to do some tweaking (by changing margins or padding) to get the text to align properly.
I hope this solution might help for your scenario...Here is the code..
<RelativeLayout
android:id="#+id/rlLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:orientation="horizontal"
android:padding="3dp" >
<EditText
android:id="#+id/etId"
android:layout_width="fill_parent"
android:layout_height="50dip"
android:background="#c8c8c8"
android:hint="Edittext"
android:paddingLeft="20dip"
android:paddingRight="10dip"
android:textColor="#000000" />
<RelativeLayout
android:id="#+id/rlLayoutid"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignRight="#+id/etId" >
<Button
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignParentRight="true"
android:layout_marginRight="14dp"
android:layout_marginTop="10dp"
android:background="#drawable/calender" />
</RelativeLayout>
</RelativeLayout>
# Daniel Here You can use layout weight and weight sum
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center"
android:weight_sum=2
>
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=1
android:text="button"
android:id="#+id/but"/>
<EditText
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=1
/>
</LinearLayout>
Android tries to automatically level everything off of the text and not the buttons themselves.
Took me forever to finally figure it out. Its really simple. Should fix it.
myButton.setGravity(Gravity.CENTER_VERTICAL);
or if they are in a row.. attach the buttons to a table row, then.
myTableRow.setGravity(Gravity.CENTER_VERTICAL);