For the app I'm working on I'd like to have 3 tabs with different elements in them.
I tried searching for a way to accomplish this but I can't seem to find an example of what I need.
Basicly I want this:
Tab 1, contains 4 buttons and a textview
Tab 2, contains an scrollable imageview
Tab 3, contains an webview
I would like to solve this problem without the use of activity's because all 3 tabs need to access the same data.
Currently I use this xml as layout:
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/photoLayout">
<Button
android:text="#string/photoButton"
android:layout_column="0"
android:id="#+id/photoButton"
android:textSize="10dp" />
<Button
android:text="#string/locateButton"
android:layout_column="1"
android:id="#+id/locateButton"
android:textSize="10dp" />
<Button
android:text="#string/cropButton"
android:layout_column="2"
android:id="#+id/cropButton"
android:textSize="10dp" />
<Button
android:text="reset"
android:layout_column="3"
android:id="#+id/resetButton"
android:textSize="10dp" />
<ScrollView
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="fill_parent"
android:layout_height="370dp"
android:id="#+id/scrollView1"
android:fillViewport="true">
<TextView
android:text="Text"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/textView1" />
</ScrollView>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/webviewLayout">
<WebView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/webView1" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/imageLayout">
<ScrollView
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="fill_parent"
android:layout_height="412dp"
android:id="#+id/scrollView2"
android:fillViewport="true">
<ImageView
android:src="#android:drawable/ic_menu_gallery"
android:layout_column="0"
android:id="#+id/imageView1"
android:layout_height="411.6dp"
android:layout_width="316.7dp"
android:scaleType="centerInside" />
</ScrollView>
</LinearLayout>
</FrameLayout>
</LinearLayout>
The problem with this is that I get a runtime exception saying:
Java.Lang.RuntimeException: Binary XML file line #1: You must supply a layout_width attribute.
Any help to solve this issue will be appreciated!
To answer the exception thrown, you need to specify layout_width and layout_height in every single elements you declared, which in your case, you did not specify any on those buttons.
But to express my curiosity, I believe you should anyhow make it in separate activities and separate layouts, "same data" can always be passed around using some extras I believe.
Related
I have this XML
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LinearLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/blanco"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/verde_us" >
<ImageView
android:id="#+id/detalle_imagen_categoria"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:src="#drawable/icon_map" />
<View
android:id="#+id/View02"
android:layout_width="2dp"
android:layout_height="fill_parent"
android:background="#color/blanco" />
<TextView
android:id="#+id/text_nombre_empresa"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="5dp"
android:text="#string/text_noticias"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/blanco" />
</LinearLayout>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</android.support.v4.view.ViewPager>
</LinearLayout>
But when I run the app the output is other.
Any help? Thanks!
I want the tabs below the text that says "Ahumadero" In the XML
Then stop using action bar tabs. Use some other sort of tabbed indicator for your ViewPager, one where you control the position by placing it in the LinearLayout yourself. There are many open source implementations, such as PagerSlidingTabStrip.
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 )
<TabHost
android:id="#+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="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
// --------------------------- Here I got warning -------------------------
<LinearLayout
android:id="#+id/chat_list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:visibility="visible" >
// --------------------------------------------------------------------------
<ListView
android:id="#+id/listView"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#color/white" >
</ListView>
<LinearLayout
android:id="#+id/text_entry"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="bottom"
android:orientation="horizontal" >
<EditText
android:id="#+id/txt_inputText"
android:layout_width="125dp"
android:layout_height="wrap_content"
android:layout_weight="0.8"
android:hint="#string/enter_text"
android:inputType="text" />
<Button
android:id="#+id/btn_Send"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_weight="0.2"
android:text="#string/send" />
</LinearLayout>
</LinearLayout>
</FrameLayout>
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0" >
</TabWidget>
</LinearLayout>
</TabHost>
How to solve this warning ? I can't find any solution. Any help will be appreciated.
I am not sure what exactly you are trying to accomplish, but you can get rid of the warning by moving FrameLayout content to a separate file and add it back to your TabHost by using <include> tag.
A possible version could look something like this:
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+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" >
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0" />
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<include layout="#layout/tab_chat_list" />
</FrameLayout>
</LinearLayout>
</TabHost>
And tab_chat_list.xml:
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:id="#+id/chat_list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:visibility="visible" >
<ListView
android:id="#+id/listView"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#color/white" >
</ListView>
<LinearLayout
android:id="#+id/text_entry"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="bottom"
android:orientation="horizontal" >
<EditText
android:id="#+id/txt_inputText"
android:layout_width="125dp"
android:layout_height="wrap_content"
android:layout_weight="0.8"
android:hint="#string/enter_text"
android:inputType="text" />
<Button
android:id="#+id/btn_Send"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_weight="0.2"
android:text="#string/send" />
</LinearLayout>
</LinearLayout>
</merge>
Hope this helps.
Update
I noticed that some people are suggesting to remove FrameLayout. Although, that could have solved the problem in other cases, TabHost needs TabWidget and FrameLayout to function correctly.
The warning you are getting is this one:
UselessParent
Summary: Checks whether a parent layout can be removed.
Priority: 2 / 10 Severity: Warning Category: Performance
A layout with children that has no siblings, is not a scrollview or a
root layout, and does not have a background, can be removed and have
its children moved directly into the parent for a flatter and more
efficient layout hierarchy.
It can be turned off in Lint.
Update: I missed that tabhost requires a framelayout to work. Disabling the warning or going with shoe rat's solution should still fix the problem. (ignore paragraph below)
Assuming you don't need the FrameLayout (i.e. to add stuff dynamically), you can try removing it and adjusting the LinearLayout accordingly:
<LinearLayout
ndroid:id="#+id/chat_list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
android:visibility="visible" >
Take a look at the following layout file:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/llParent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/rlInner"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Some Text" />
</RelativeLayout>
</LinearLayout>
There is nothing wrong with it and any activity using this layout will run without a problem. But eclipse will give you a warning:
This RelativeLayout layout or its LinearLayout parent is useless
As you can see, I only need one of the two container layouts above. Adding the RelativeLayout with id="rlInner" does nothing to change the layout. When eclipse finds a scenario like this, it gives you an appropriate warning to indicate the redundancy.
In your scenario, you can lose the FrameLayout altogether without disturbing the layout. And this would fix the warning.
Add an ID to the parent linear layout.
It's useless because the parent linear layout doesn't have an id. It means it would be difficult or impossible to add stuff in code outside the linear layout where you got the error.
I have:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activityLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ColorViewerActivity" >
<TabHost
android:id="#android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="wrap_content">
// skip it
</TabHost>
<TextView
android:id="#+id/decDescription"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#android:id/tabhost"
android:layout_centerHorizontal="true"
android:gravity="center_vertical|center_horizontal"
android:text="222"
android:textSize="19sp" />
<LinearLayout
android:id="#+id/panelLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_margin="1dip"
android:orientation="vertical" >
</LinearLayout>
<TextView
android:id="#+id/hexDescription"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/decDescription"
android:layout_alignRight="#+id/panelLayout"
android:layout_below="#android:id/tabhost"
android:text="111"
android:textSize="14sp" />
</RelativeLayout>
If I put the last TextView (id=hexDescription) before penult LinearLayout (id=panelLayout) I get the exception. From LogCat:
java.lang.RuntimeException: Unable to start activity ComponentInfo{ com.gmail.leonidandand.colorviewer/com.gmail.leonidandand.colorviewer.ColorViewerActivity}:
java.lang.ClassCastException: android.widget.LinearLayout
What could be the problem?
Sorry for my English.
Thanks
It does because you are indicating that it should be positioned relative to the LinearLayout. So you need to declare it after the elements that you want to position it to. If you aren't declaring
android:layout_alignRight="#+id/panelLayout"
in your hex TextView then it doesn't matter. This is because when its drawing the layout it sees that property and it can't find the id of which to position it relative to since it hasn't yet drawn that view
try re-arranging the stuff below
android:layout_alignBottom="#+id/decDescription"
android:layout_alignRight="#+id/panelLayout"
android:layout_below="#android:id/tabhost"
The error might take place because you are aligning it in the bottom of decDescription AND below the tabhost
Tabhost requires TabWidget with an id. This is what lint warned when i used your xml layout.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activityLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ColorViewerActivity" >
<TabHost
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
</TabHost>
<TextView
android:id="#+id/decDescription"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#android:id/tabhost"
android:layout_centerHorizontal="true"
android:gravity="center_vertical|center_horizontal"
android:text="222"
android:textSize="19sp" />
<LinearLayout
android:id="#+id/panelLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_margin="1dip"
android:orientation="vertical" >
</LinearLayout>
<TextView
android:id="#+id/hexDescription"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/decDescription"
android:layout_alignRight="#+id/panelLayout"
android:layout_below="#android:id/tabhost"
android:text="111"
android:textSize="14sp" />
</RelativeLayout>
TabHost has a tabWidget and a FrameLayout.
Snap shot captured from graphical layout
Working example at http://www.androidhive.info/2011/08/android-tab-layout-tutorial/
I have this layout file in my android application:
<?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:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<TextView
android:id="#+id/textview1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="this is a tab" />
<TextView
android:id="#+id/textview2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="this is another tab" />
<LinearLayout
android:id="#+id/layoutSearch"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<TextView
android:id="#+id/textview4"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="Search here" />
<EditText
android:id="#+id/editSearch"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</FrameLayout>
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0"/>
</LinearLayout>
</TabHost>
My problem is that LinearLayout android:id="#+id/layoutSearch" shows only one of the elements it contains (the text view, in the code above) If I remove the textview, it shows the EditText.
How do I make it display both (and more) elements?
There's a lot of excess layout there, but it looks like the real issue is that layoutSearch is a vertical LinearLayout with two children, but the first child's height is set to fill_parent, so you naturally never see the second one. Try setting its height to 0px but giving it a layout_weight of 1, and it should expand to take all the available space not taken by the EditText below it.