I have a webview and a table containing 4 buttons. I have set the height of the webview to 400px, so that the buttons are displayed at the bottom of the screen, in portrait mode. My problem is, when changed to landscape mode the buttons are not visible. So I need to change the height of the webview on runtime, when orientation is changed. Do anybody know how to achieve this? I am able to capture the orientation change, using 'onConfigurationChanged' function.
Thanks CommonsWare, I gave the xml as follows. The application crashes on launch.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout android:layout_alignParentTop="true">
<WebView
android:id="#+id/appView"
android:layout_height="wrap_content"
android:layout_width="fill_parent" />
</RelativeLayout>
<RelativeLayout
android:layout_alignParentBottom="true">
<TableLayout
android:id="#+id/TableLayout01"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical">
<TableRow
android:id="#+id/TableRow01"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center">
<ImageButton
android:id="#+id/more"
android:padding="1dip"
android:src="#drawable/more1"
android:layout_marginRight="15dip">
</ImageButton>
<ImageButton
android:id="#+id/albums"
android:padding="1dip"
android:src="#drawable/albums1"
android:layout_marginRight="15dip">
</ImageButton>
<ImageButton
android:id="#+id/videos"
android:padding="1dip"
android:src="#drawable/videos"
android:layout_marginRight="15dip">
</ImageButton>
<ImageButton
android:id="#+id/artists"
android:padding="1dip"
android:src="#drawable/artists1"
android:layout_marginRight="15dip">
</ImageButton>
</TableRow>
</TableLayout>
</RelativeLayout>
</LinearLayout>
Design your layout to avoid the hard-wired value of 400px. Not only will that not work in landscape mode on whatever emulator/device you are testing on, it will not work on smaller or larger screens the way you expect.
Please use a RelativeLayout, with attributes like android:layout_alignParentBottom for the buttons and android:layout_alignParentTop and android:layout_above for the WebView. Then, your layout will dynamically adapt to the available space.
Related
I am trying use relative layout for some android application.
<Button
android:layout_width="100dip"
android:background="#ff394aff"
android:text="start"
android:layout_height="wrap_content"
android:layout_marginLeft="225dp"
android:layout_marginTop="225dp"
android:id="#+id/start" android:layout_gravity="center_horizontal" android:layout_weight="0.50"/>
but the in some devices will appear in a different positons. I tried "dip" and "sp" but the problem remains.
help me how to do it so that in all devices the positions be same?
I did not get when you are using marginleft then why u are using gravity to center horizontal.?
try this which ever the device is , button will come at the bottom of the page with full width to screen. In this xml you can see a listview with a back button on its bottom fixed and i have tested it u can put what ever you want in the place of list and adjust button position accordingly, hope this may help you.
<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="wrap_content"
android:orientation="vertical"
android:paddingBottom="1dip"
android:paddingLeft="1dip"
android:paddingRight="1dip" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="150dip"
android:layout_above="#+id/cback"
android:layout_alignParentTop="true" >
<ListView
android:id="#android:id/list"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:drawSelectorOnTop="false" />
</LinearLayout>
<Button
android:id="#+id/cback"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#drawable/btn_black"
android:text="Back"
android:textColor="#ffffff"
tools:ignore="HardcodedText" />
</RelativeLayout>
Many device have different resolution, so problem in your code is marginleft and margintop. Due to them your button position is different in all device.
Also android:layout_weight="0.50" should not be used in Relative layout. It will have no affect.
I need to create a basic browser for the android: a WebView a toolbar at the top with a back button, and a toolbar at the bottom with some more buttons.
What would be the best way to go about doing this?
This is what I have so far:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<Button
android:id="#+id/browserBackButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Back" />
<WebView
android:id="#+id/webView"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/backButton"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:src="#drawable/back" />
<ImageButton
android:id="#+id/forwardButton"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:src="#drawable/forward" />
<ImageButton
android:id="#+id/reloadButton"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:src="#drawable/reload" />
<ImageButton
android:id="#+id/browserButton"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:src="#drawable/safari" />
</LinearLayout>
</LinearLayout>
The bottom LinearLayout of buttons doesn't show at all. Only the top back Button and the WebView.
LinearLayout is ok.
You should change the height of the WebView control and set the weight to 1
Do it so:
<WebView android:layout_height="fill_parent" android:layout_weight="1" android:layout_width="fill_parent"
or even so, as it is recommended by the Lint tool:
<WebView android:layout_height="0dip" android:layout_weight="1" android:layout_width="fill_parent"
The weight is important, it forces the view to fill the remaining space.
If it doesn't help, you can also try to set the height of the bottom panel to some constant value, or set the height of image buttons to wrap_content, then you can be sure that it will work.
Personally, I don't like doing nested LinearLayouts it can hinder performance when your layouts become more complex. It might not be a big deal for something small; but, it is still good practice to use RelativeLayouts.
Also, lose the xmlns:android="http://schemas.android.com/apk/res/android" in your second LinearLayout. You don't need it.
Hope this helps.
I wish to keep a button at the bottom of my Activity screen. It has to be fixed irrespective of the size of scrollview above it. The problem is that once the textviews of the scrollview take up some place, the height of my button keeps decreasing and it eventually gets pushed out of the activity screen. This is the layout I am using.
<?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="fill_parent"
android:orientation="vertical">
<TextView android:id="#+id/tvBanner" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" android:gravity="center"
android:text="Practice Exam" />
<ScrollView android:id="#+id/Scroll" android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout android:id="#+id/LinearLayout1"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:orientation="vertical">
<TextView android:id="#+id/tvDesc" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_margin="10dp"
android:gravity="center" android:paddingTop="40dp" android:text="#string/welcom"
android:textSize="20sp" />
<TextView android:id="#+id/tvURL" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_marginBottom="30dp"
android:paddingTop="10dp" android:layout_gravity="center"
android:text="hello" android:textColor="#android:color/white"
android:typeface="sans" />
</LinearLayout>
</ScrollView>
<RelativeLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" android:gravity="bottom">
<Button android:id="#+id/btBottom" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_weight="1"
android:text="Enter" />
</RelativeLayout>
</LinearLayout>
I have also tried using android:weight=1 and android:layout_height=0dp in the Scrollview. But this removes the entire Scrollview portion from my activity and I can't see anything.
I do know that there are many similar questions asked about this and believe me, I have tried many of these. However, none of the tricks have worked for me. I have spent almost half a day fixing this. Kindly help.
For a case like this always use RelativeLayouts. A LinearLayout is not intended for such a usage.
Try this:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true">
<Button android:id="#+id/btBottom"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Enter"
android:layout_alignParentBottom="true"/>
<ScrollView
...
android:layout_above="#id/btnGetMoreResults"/>
</RelativeLayour>
You should try using RealativeLayout instead of Linear, and then you could use
android:layout_above="#+id/btBottom"
android:layout_alignParentBottom="true"
That should solve your problem.
looks like you need 'alignParentBottom' in your button like this
<Button android:id="#+id/btBottom"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="Enter" />
Do not wrap Button to RelativeLayout
Set layout_height of ScrollView to 0dp
Add layout_weight of ScrollView to 1
For this it would probably be a good idea if you used RelativeLayout for the outer wrapper layout. Then you could just set the layout with the button inside to LinearLayout and set layout_alignParentButtom="true" while you set your #+id/Scroll to layout_alignParentTop="true"
Also, you should probably set the layout with the button insideĀ“s height to wrap_content instead of fill_parent
Why do you use a LinearLayout at top level at all ?
Choose a RelativeLayout with fill/fill and the following three childern (no further nesting !):
1) TextView with android:layout_alignParentTop="true" and android:layout_centerHorizontal="true"
2) Button with android:layout_alignParentBottom="true" and android:layout_centerHorizontal="true"
3) ScrollView with android:layout_below=#id/textview_id and android:layout_above="#id/button_id"
I didn't test it though, but give it a try.
I have the following code:
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView android:src="#drawable/ducks_r2_c1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<ImageView android:src="#drawable/ducks_r3_c1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" android:clickable="true"/>
<ImageView android:src="#drawable/ducks_r4_c1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" android:clickable="true"/>
<ImageView android:src="#drawable/ducks_r5_c1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" android:clickable="true"/>
<ImageView android:src="#drawable/ducks_r6_c1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" android:clickable="true"/>
</LinearLayout>
</ScrollView>
I have used layout_width="fill_parent" everywhere. But this is the screenshot of how it shows up on the emulator.
I dont want the space on either side of the images.
Why is it showing up like this? How can I rectify it?Thank you
I guess this is happening because the image is not streching.
You may try to ask the image to strech itself:
android:scaleType="fitXY"
or use it as background.
please check this thread:
android: stretch image in imageview to fit screen
A ScrollView will only inflate to as many items are in it.
You should be able to solve this by using a LinearLayout (or another more predictable layout) as the parent for your ScrollView with android:layout_height="match_parent" and setting the ScrollView to android:layout_height="wrap_content" and the same for layout_width on both.
I'm trying to replicate a spinner control (please don't ask why) I'm struggling with the divider. The fake spinner looks fine until I add the divider to the left of the imageview. Once I add the divider it's height fills the remaining portion of the screen. Can someone please explain this?
The following xml:
.......
<Spinner
android:id="#+id/equipment_spinner"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"/>
<ImageView
android:id="#+id/spinner_arrow"
android:layout_width="45sp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:src="#drawable/spinner_arrow"/>
</RelativeLayout>
</LinearLayout>
</ScrollView>
produces the following screen:
once I add the divider, the xml looks like this:
<Spinner
android:id="#+id/equipment_spinner"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"/>
<ImageView
android:id="#+id/spinner_arrow"
android:layout_width="45sp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:src="#drawable/spinner_arrow"/>
<View
android:background="#e7ebe7"
android:layout_width="1dip"
android:layout_height="fill_parent"
android:layout_toLeftOf="#id/spinner_arrow"/>
</RelativeLayout>
</LinearLayout>
</ScrollView>
which produces the following screen:
can anyone spot what i'm doing wrong here?...
You should use a nine-patch image for this instead of using multiple views. That's what the default Spinner does. I don't know why you want to create a new spinner, but if you're keeping the visuals the same you can just reuse the built-in images.
android.R.layout.simple_spinner_item is a TextView layout you could reuse. Or, you can just take the background directly: android.R.drawable.btn_dropdown, which is an XML selector drawable with bitmaps for each state. More details are available in the Android source code.
You have the height set to fill parent which fills the remainder of the Relative Layout. Have you tried putting the View inside the button or imageview as follows:
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true">
<View
android:background="#e7ebe7"
android:layout_width="1dip"
android:layout_height="fill_parent"
android:layout_toLeftOf="#id/spinner_arrow"/>
</Button>
<ImageView
android:id="#+id/spinner_arrow"
android:layout_width="45sp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:src="#drawable/spinner_arrow"/>
</RelativeLayout>
OR
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"/>
<ImageView
android:id="#+id/spinner_arrow"
android:layout_width="45sp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:src="#drawable/spinner_arrow">
<View
android:background="#e7ebe7"
android:layout_width="1dip"
android:layout_height="fill_parent"
android:layout_toLeftOf="#id/spinner_arrow"/>
</ImageView>
</RelativeLayout>
If this doesnt work try setting the height of the relative layout to a fixed amount like 10 dip or however big that spinner is... you may have to try a fiew different sized, just dont leave the relativelayout as wrap content