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.
Related
I'm trying to make a simple clock/stopwatch app. In my overall vertical linear layout, I have a relative layout followed by a button. The relative layout has several imageviews stacked on each other in order to produce the clock.
I noticed, however, that the relative layout, as well as the imageviews themselves, take up way too much space in the linear layout. The clock pieces are SQUARE, so why is Eclipse insisting that it is a long vertical rectangle? My button at the bottom doesn't even show if I don't use weights. (But strangely enough, it shows if it is above the relative layout.)
I've tried everything I could: Set the height of items in relative layout to wrap_content, as well as the relative layout itself. I tried using weights, by giving the relativelayout a weight of 0 and the button 1, and then setting their layout_heights respectively to 0dp as needed. Still no go. There is a lot of room left for other things, and I'd like for the clock's parent layout to wrap itself around just the content.
What is going on here? Please see attached image for details. Code is attached below.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/tiling_rules"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:ignore="ContentDescription" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/clock" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/hour" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/min" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/sec" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/bell" />
</RelativeLayout>
<Button
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_gravity="center_horizontal"
android:layout_weight="1"
android:text="Test" />
It turns out that all I needed was to add:
android:adjustViewBounds="true"
to every ImageView! Now the clock pieces' bounds are "wrapped" around the content, even though setting wrap_content in its layout didn't work. Thanks for the suggestions though!
Try using a RelativeLayout as your main layout. This way you can make the button show at the bottom of the screen. Then if you need, use a separate layout for the clock pieces within the main layout
Kinda like this
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:ignore="ContentDescription" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/clock" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/hour" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/min" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/sec" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/bell" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:text="Button" />
I have difficulties with my layout.
As my first dev project, I'm trying to make a simple chronometer.
I want to have a picture of a chronometer in the background and the start and stop button
at the bottom of the application, side by side and filling the width of the screen.
Here is my best shot, but I'm not satisfied.
All widgets are placed properly but ...
My background is streched and my buttons seem vertically compressed, even the text at the bottom is a bit cropped.
I found that if I change these lines
android:layout_width="fill_parent"
android:layout_height="fill_parent"
by
android:layout_width="wrap_content"
android:layout_height="wrap_content"
The background is ok, the buttons too .. but all widgets are placed in the center of the Activity.
How can I fix this ?
By the way if I want to have my buttons side by side, did I choose the better solution ?
Thanks for your help !
Charles.
... and now my xml ....
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#drawable/background"
tools:context=".Chronosv1" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="2" >
<Chronometer
android:id="#+id/chronometer1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_weight="1" >
<Button
android:id="#+id/button1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="50"
android:text="START" />
<Button
android:id="#+id/button2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="50"
android:text="STOP" />
</LinearLayout>
I tried relativeLayout.
I don't know how to have two buttons of the same size without using a padding, I don't think it's a good idea if you want your app to run on different screens.
Anyway I come up with this, but I still have my streched image and my buttons don't have the same size.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background"
tools:context=".Chronosv1" >
<Chronometer
android:id="#+id/chronometer1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="Start" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_toRightOf="#id/button1"
android:text="Stop" />
Try RelativeLayout ;) I think this is much easier to handle than a LinearLayout. Maybe you can upload a picture how it looks like and I will give you a relativelayout solution ;)
Can you try this out? Should work IMO.
It is a better/fool-proof way to obtain your layout.
<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="match_parent"
android:background="#drawable/background"
tools:context=".Chronosv1" >
<LinearLayout
android:id="#+id/layout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="2"
android:layout_alignParentBottom="true">
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_margin="5dp"
android:text="Start" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_margin="5dp"
android:text="Stop" />
</LinearLayout>
<Chronometer
android:id="#+id/chronometer1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/layout1" />
</RelativeLayout>
I finally found the solution.
First problem: my 9 patch image hid my other component.
Solution: add android:padding="0dip" in your linearlayout ... here the subject that gave me my answer (Android layout broken with 9-patch background)
Second problem: why my picture was streched whereas I designed it at the exact size of the screen. This one was a silly question ... it was because of the action bar and the other bar above (with battery level and other stuff).
To get rid of theses bars (included in the theme) use a different version of the Theme in the manifest.
I choose: Theme.Light.NoTitleBar.Fullscreen.
Problems solved.
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've searched for an answer for this all over but the solutions offered did not solve my problem.
I have a layout where I display some views (a few buttons and a background). To this i've added a custom control i've made extending linear layout. This control is displayed above the layout quite nicely.
What I wish to do is add an additional ImageView which is larger than this control but it will be in front of it.
edited: Sorry, I hope this will clear things up.
I have one large layout (Relative) for my activity, I would like to stack on this layout two additional views\layout so the final version will be the picture attached:
This is my layout - which stacks the imageview right on the menubar, and not over the others. Trying to put the FrameLayout elsewhere still didn't give me the wanted result.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background">
<RelativeLayout android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="450dip">
<com.myproject.controls.SearchControl
android:id="#+id/scSearch"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<ExpandableListView android:id="#+id/lstItems"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/scSearch"
android:layout_marginLeft="26dip"
/>
</RelativeLayout>
<FrameLayout android:layout_width="fill_parent"
android:layout_height="fill_parent">
<com.myproject.controls.MenubarMain
android:id="#+id/mbMenuBarMain"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="bottom"
/>
<ImageView android:src="#drawable/myicon"
android:layout_width="200dip"
android:layout_height="200dip"
/>
</FrameLayout>
</LinearLayout>
Not sure it this will work or not cause I'm typing this up at work. But moral of the story here is get used to using RelativeLayout. You have much more control over your layout.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background">
<com.myproject.controls.MenubarMain
android:id="#+id/mbMenuBarMain"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
</com.myproject.controls.MenubarMain>
<com.myproject.controls.SearchControl
android:id="#+id/scSearch"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true">
</com.myproject.controls.SearchControl>
<ExpandableListView android:id="#+id/lstItems"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/scSearch"
android:layout_above="#id/mbMenuBarMain"
android:layout_paddingLeft="26dp"/>
<ImageView android:src="#drawable/myicon"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_alignBottom="#id/mbMenuBarMain"
android:layout_alignRight="#id/mbMenuBarMain"/>
</RelativeLayout>
I am new to Android programming and have done a lot of searching for the answer to this question however I can not find an answer. Maybe I am using the wrong search terms because it seems like a pretty basic request.
I my design (as an example), I would have two text fields defined in my relative layout followed by an image and I would like the image to span the remainder of the screen. Here is what I have so far:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:id="#+id/widget29"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
>
<ImageView
android:id="#+id/widget38"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/widget37"
android:layout_alignParentLeft="true"
>
</ImageView>
<TextView
android:id="#+id/widget37"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="second view"
android:layout_below="#+id/widget36"
android:layout_alignParentLeft="true"
>
</TextView>
<TextView
android:id="#+id/widget36"
android:layout_width="fill_parent"
android:layout_height="50px"
android:text="first view"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
>
</TextView>
</RelativeLayout>
How do I tell my ImageView to span fill the remainder of the screen. If I define the height and width as "fill_parent" it fills over the two text views.
Thanks in advance for any help you can provide.
Jon
It looks like you're just stacking views... it seems to me that this situation would work a lot better with a vertical LinearLayout instead of a RelativeLayout, for one it would be significantly easier to get the image view to span the rest of the space without overlapping your text views:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:id="#+id/widget29"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android"
>
<TextView
android:id="#+id/widget36"
android:layout_width="fill_parent"
android:layout_height="50px"
android:text="first view"
android:layout_weight="0"
/>
<TextView
android:id="#+id/widget37"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="second view"
android:layout_weight="0"
/>
<ImageView
android:id="#+id/widget38"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
/>
</LinearLayout>
In the above example you use layout weights to force relative sharing of the screen space. Setting the weight to zero forces the layout manager to give only requested space to the two text views and since the image view is set to fill parent (with a weight of 1) it receives all of the remaining space
If it's RelativeLayout, then, you will have to do something like this in your ImageView:
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/id_of_your_second_textview"
android:layout_alignParentRight="true"/>