I have a layout where I need to show a webview on part of the screen. I've set the layout up and in the Graphical Layout in Eclipse, it does look as I want to, like this (logo and heading blacked out):
However when I open this layout in the simulator or on a Phone it shows the WebView as a full screen. How do I make a layout like this? Any help is much appreciated!
Here's my XML:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
style="#style/Theme.KB_default"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/header_background_shape" >
<TextView
android:id="#+id/heading"
style="#style/Theme.KB_header"
android:layout_width="wrap_content"
android:layout_centerHorizontal="true"
android:text="#string/app_name" >
</TextView>
<ImageView
android:id="#+id/imageViewPadlock"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:contentDescription="#string/global_secure_connection"
android:src="#drawable/padlock" />
</RelativeLayout>
<View
android:layout_width="fill_parent"
android:layout_height="1dip"
android:background="#color/black" >
</View>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="0.41"
android:orientation="vertical" >
<WebView
android:id="#+id/webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="40dp"
android:layout_height="20dp"
android:layout_marginBottom="5dp"
android:layout_marginLeft="15dp"
android:contentDescription="#string/global_logo"
android:scaleType="fitXY"
android:src="#drawable/logo_transparrent_notext" />
</LinearLayout>
</LinearLayout>
make one of table block as webview
check this link
http://developer.android.com/reference/android/widget/TableLayout.html
You can also check this example by using dialog
http://www.41post.com/4673/programming/android-creating-a-webview-dialog
Well I seem to be the stupidist guy alive. My layout worked but I forgot to add " setContentView(xml.file);" so it never loaded the XML... Stupid
Related
I think to do a overlay of layout, this is the code that I have now.:
<?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="match_parent"
android:background="#color/white">
<ScrollView
android:id="#+id/content_scroll"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:id="#+id/container_main"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/text_search"
android:layout_width="fill_parent"
android:layout_height="60dp"
android:orientation="horizontal"
android:background="#color/white"
android:weightSum="2">
<EditText
android:id="#+id/input_search"
android:layout_width="0dp"
android:layout_height="match_parent"
android:hint="#string/placeholder_search"
android:layout_margin="5dp"
android:layout_weight="1.5"
android:inputType="text"
android:padding="5dp"
android:drawableRight="#drawable/ic_search"
android:background="#drawable/style_input"
android:imeOptions="actionSend"/>
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:src="#drawable/img_header" />
</LinearLayout>
<LinearLayout
android:id="#+id/list_search"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="-5dp"
android:layout_gravity="top"
android:orientation="vertical">
<TextView
android:id="#+id/no_result"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:visibility="gone"
android:text="#string/no_result"
android:gravity="center_horizontal|center_vertical|center"/>
<ListView
android:id="#+id/search_categorias"
android:layout_width="fill_parent"
android:layout_height="wrap_content"></ListView>
</LinearLayout>
<LinearLayout
android:id="#+id/container_buttons_tall"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:orientation="horizontal"
android:background="#drawable/style_header">
<TextView
android:id="#+id/otherlayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:visibility="gone"
android:text="Other Layout" />
</LinearLayout>
<LinearLayout
android:id="#+id/container_buttons_tall1"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:orientation="horizontal"
android:background="#drawable/style_header"
android:weightSum="3">
<TextView
android:id="#+id/otherlayout2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:visibility="gone"
android:text="Other Layout 2" />
</LinearLayout>
<LinearLayout
android:id="#+id/container_buttons_tall2"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:orientation="horizontal"
android:background="#drawable/style_header"">
<TextView
android:id="#+id/otherlayoutn"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:visibility="gone"
android:text="Other Layout N" />
</LinearLayout>
</ScrollView>
</RelativeLayout>
I want to overlay the next layouts after of the ID "#+id/text_search" with the rest, this list is the a search and show suggestions to users.
This list will overlay about others layouts that I define below, if the user want to make a search.
Are there some way easy of overlay? Or tutorial that can help me. I try to use RelativeLayout, but I didn't get to make it well.
Thanks in advance.
you can use the Relative Layout for this, but you need to specify the relations (thats why relative => relative to what)
means you have to set the postion of your +id/text_search relative to parent.
and also the elements which should do the overlayer have to be relative to parent.
todo so relative Layout uses layout properties like: below=(ID) toRightOf(ID) and so on.
you can start reading about it here:
http://developer.android.com/guide/topics/ui/layout/relative.html
but for the search you want todo, there is already a good advice howto it: so i recommend reading this article:
http://developer.android.com/guide/topics/search/search-dialog.html
and doing it right, like all the others apps do it, your customers will be satisfied then (don't need to learn something new )
My intent is to create a list of widgets on a scroll view, with an ImageView in the centre of the screen behind them. Here is what I have, there will be more buttons when all is said and done:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
android:contentDescription="#string/description"
android:src="#drawable/myImage"
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:scaleType="centerInside" />
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:background="#android:color/transparent">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
android:background="#android:color/transparent">
<Button xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/newButton"
style="#style/homeScreenButton"
android:text="#string/new_profile" />
<Button xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/loadButton"
style="#style/homeScreenButton"
android:text="#string/load_profile" />
<Button xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/calculatorButton"
style="#style/homeScreenButton"
android:text="#string/calculator" />
</LinearLayout>
</ScrollView>
</RelativeLayout>
On eclipse's xml graphical layout interpreter, the screen is shown as expected. The same is true with the 2 different emulators that I tried, Android 2.2 and Android 4.0.3. But when I send to my actual device, Droid 4 w/Android 4.1.2 the image simply does not show up. I even tried making the ScrollView transparent (android:alpha="0") thinking that it was somehow covering the image up, but nothing. Any suggestions would be greatly appreciated.
try eliminating this line from ImageView,
xmlns:android="http://schemas.android.com/apk/res/android"
it should be present only in the RelativeLayout
so your xml file become
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:contentDescription="#string/description"
android:src="#drawable/myImage"
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:scaleType="centerInside" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:background="#android:color/transparent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
android:background="#android:color/transparent">
<Button
android:id="#+id/newButton"
style="#style/homeScreenButton"
android:text="#string/new_profile" />
<Button
android:id="#+id/loadButton"
style="#style/homeScreenButton"
android:text="#string/load_profile" />
<Button
android:id="#+id/calculatorButton"
style="#style/homeScreenButton"
android:text="#string/calculator" />
</LinearLayout>
</ScrollView>
</RelativeLayout>
I figured it out, the code was fine. My problem was that the image was in /res/drawable but it needed to be in /res/drawable-hdpi.
When I render a large Webview on android 4.1, the webview loads correctly, but also popsout of the layout. Here's an example:
As you can see in the top left corner, there's a white space, that shouldn't be there. If I tap with my finger it, it disappears...
I've tried to invalidate & requestLayout the top level container of this contentView, but it's still happening.
As I said in title, this is only happening in 4.0.4 devices (I know that 4.1 are ok.)
Do you guys know what else could I try?
Thanks.
Edit
That blank rectangle, is somehow over the menubar. Maybe invalidating menu will solve it?
I've tried: this.invalidateOptionsMenu(); and still the same issue.
Edit2:
This is the layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/containerTotaApp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:orientation="horizontal" >
<View
android:id="#+id/rightshadow"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/contentContainer"
android:background="#drawable/shadow_right" />
<RelativeLayout
android:id="#+id/bgImageSliderContainer"
android:layout_width="700dp"
android:layout_height="fill_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#000000" >
</RelativeLayout>
<ScrollView
android:id="#+id/scrollView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true" >
<LinearLayout
android:id="#+id/containerRightOptional"
android:layout_width="680dp"
android:layout_height="match_parent"
android:background="#ffffff"
android:orientation="vertical"
android:visibility="gone" >
</LinearLayout>
</ScrollView>
<RelativeLayout
android:id="#+id/navigationContainer"
android:layout_width="320dp"
android:layout_height="match_parent"
android:background="#393939" >
<LinearLayout
android:id="#+id/containerTopMenu"
android:layout_width="match_parent"
android:layout_height="70dp"
android:background="#drawable/companybg"
android:gravity="center_vertical"
android:orientation="vertical" >
<TextView
android:id="#+id/textEntradaMenu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:text="COMPANY"
android:textSize="32sp" />
</LinearLayout>
<ScrollView
android:id="#+id/scrollView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/containerTopMenu">
<LinearLayout
android:id="#+id/containerEntradesMenu"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
</LinearLayout>
</ScrollView>
</RelativeLayout>
<RelativeLayout
android:id="#+id/contentContainer"
android:layout_width="600dp"
android:layout_height="fill_parent"
android:layout_toRightOf="#+id/navigationContainer"
android:background="#ffffff">
<LinearLayout
android:id="#+id/titleContentContainer"
android:layout_width="fill_parent"
android:layout_height="70dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:gravity="center_vertical"
android:background="#EBEBEB">
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:onClick="toggleMenu"
android:src="#drawable/vista2_cerca" />
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:text="TextView"
android:textColor="#288BA2"
android:textSize="30sp" />
</LinearLayout>
<View
android:id="#+id/separadortop"
android:layout_width="fill_parent"
android:layout_height="1dp"
android:layout_below="#+id/titleContentContainer"
android:background="#cecece"
android:visibility="gone" />
<Spinner
android:id="#+id/spinner1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/separadortop"
android:visibility="gone" />
<View
android:id="#+id/separadortop2"
android:layout_width="fill_parent"
android:layout_height="1dp"
android:layout_below="#+id/spinner1"
android:background="#cecece" />
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#+id/separadortop2"
android:background="#ffffff" >
<LinearLayout
android:id="#+id/variableContent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
</LinearLayout>
</ScrollView>
</RelativeLayout>
The webviews are added dynamically to VariableContent
Granted that I can't pinpoint exactly what the source of your problem is, you can give disabling the hardware acceleration a try:
web.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
There are also other "interesting" options that you might try to switch on and off:
webv.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
(I know that caching shouldn't be related to your problem, but turning caching off fixed the most curious glitches in my webview, so you probably want to try yourself) and
web.getSettings().setRenderPriority(WebSettings.RenderPriority.HIGH);
No offense to the developers Team, but WebViews on Android are quite a mess, and here are a couple of links to back this statement up:
hardware accelerated webview slide-in animation flickering on ICS
webview goes blank when loading url in android ics
WebView, showing blank in ICS
which might also be useful to you.
Let us know if you find some solution anyway
Hope this helps
I'm having a problem with an Android APP that seems related to layout. Attached image you'll see that the "Alerts" button sticks out and doesn't seem the same as the other buttons. I've replaced the image with a known good one, but the problem remains.
It was suggested it was because it is tabhost layout, but all the changes that have been recommended have not worked. So far I've tried changing the attributes from android:height and width to "wrap_content", "fill_parent", and "match_parent". Match caused another strange white space to be corrected, but this button is my last apparent challenge.
Here's the layout code, can you tell me what the problem is?
<?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" >
<Button
android:id="#+id/btnSearch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/job_tab_bar_search"
android:focusable="false"
android:freezesText="false"
android:imeOptions="actionNext"
android:longClickable="false"
android:paddingLeft="17dp"
android:text="Search"
android:textColor="#color/color_text_default"
android:textSize="12dp"
android:visibility="visible" />
<Button
android:id="#+id/btnHistory"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/job_tab_bar_history"
android:paddingLeft="25dp"
android:text="History"
android:textColor="#color/color_text_default"
android:textSize="12dp" />
<Button
android:id="#+id/btnFavorites"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/job_tab_bar_favorites"
android:paddingLeft="30dp"
android:text="Favorites"
android:textColor="#color/color_text_default"
android:textSize="12dp" />
<Button
android:id="#+id/btnAlerts"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/job_tab_bar_alerts"
android:paddingLeft="12dp"
android:text="Alerts"
android:textColor="#color/color_text_default"
android:textSize="12dp" />
</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.32" >
</FrameLayout>
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
</TabWidget>
</LinearLayout>
</TabHost>
You'd think someone would have replied, in the end it was stupid simple.
The answers is:
Tabhost using tabactivity will display the background through menu items if they are re-sized. Add a color coded (html notation) color to the schema, then call that with the android:border-background construct.
I am having issues with creating a menu (not menu when you click menu button -- but menu as in the welcome screen to select items). I went to ImageView and TextView float (left/right) Android and I did not solve my issue. I would like to create at least five or six options to select from on this menu class. This is my menu.xml file. Please let me know what I need to do.
The issue is that the first item appears, but the second item overlaps the first item. I been picking away with this for the last hour and cannot solve this issue.
<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="5dp">
<TextView
android:textSize="18dp"
android:id="#+id/message_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text=" Check Your Account" />
<ImageView
android:src="#drawable/ic_menu_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/icon" />
<TextView
android:textSize="18dp"
android:id="#+id/message_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text=" View our Site" />
<ImageView
android:src="#drawable/ic_menu_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
thannk you.
Why don't you use a LinearLayout (like a vertical one with severals little horizontal ones inside, each with a TextView and an ImageView) ?
Anyway, if you want to use RelativeLayout you should use something like android:layout_toRightOf, android:layout_toLeftOf, android:layout_above or android:layout_below in your xml to place your elements.
I advise you to take a look at http://developer.android.com/reference/android/widget/RelativeLayout.LayoutParams.html if you don't know those parameters.
You use a RelativeLayout but you don't place elements with reference to each other.
Example :
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<Button android:id="#+id/topBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Top"
android:layout_centerHorizontal="true">
</Button>
<Button android:id="#+id/leftBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Left"
android:layout_below="#+id/topBtn"
android:layout_toLeftOf="#+id/topBtn">
</Button>
</RelativeLayout>
http://developer.android.com/reference/android/widget/RelativeLayout.html
A Linear Layout would be better.
Try this and tell me if this is what you needed:
<?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:padding="5dp"
android:orientation="vertical"
>
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/message_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text=" Check Your Account"
android:textSize="18dp" />
<ImageView
android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_menu_add" android:layout_gravity="center_horizontal"/>
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/message_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text=" View our Site"
android:textSize="18dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_menu_add" android:layout_gravity="center_horizontal"/>
</LinearLayout>
</LinearLayout>