android xml Layout issue - android

I already spent hours on this, its a layout issue. can someone tell me how to show both image and view switcher in the same activity.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:myapp="http://schemas.android.com/apk/res/rg.client.muscle"
android:layout_width="fill_parent"
android:layout_height="fil_parent">
<ViewSwitcher
android:id="#+id/relative"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<!-- contains two relative layouts of same sizes
containing same elements just with switched positions -->
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<com.admob.android.ads.AdView
android:id="#+id/adv"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
myapp:backgroundColor="#000000"
myapp:primaryTextColor="#FFFFFF"
myapp:secondaryTextColor="#CCCCCC"
myapp:refreshInterval="30" >
</com.admob.android.ads.AdView>
<LinearLayout
android:id="#+id/linear"
android:orientation="horizontal"
android:weightSum="100"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#id/adv" >
<Button
android:id="#+id/but_prev2"
android:text="Previous"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="30" >
</Button>
<Button
android:id="#+id/but_more2"
android:text="More"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="40" >
</Button>
<Button
android:id="#+id/but_next2"
android:text="Next"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="30">
</Button>
</LinearLayout>
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<LinearLayout
android:id="#+id/linear2"
android:orientation="horizontal"
android:weightSum="100"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<Button
android:id="#+id/but_prev"
android:text="Previous"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="30">
</Button>
<Button
android:id="#+id/but_more"
android:text="More"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="40">
</Button>
<Button
android:id="#+id/but_next"
android:text="Next"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="30">
</Button>
</LinearLayout>
<com.admob.android.ads.AdView
android:id="#+id/adv2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#id/linear2"
myapp:backgroundColor="#000000"
myapp:primaryTextColor="#FFFFFF"
myapp:secondaryTextColor="#CCCCCC"
myapp:refreshInterval="30">
</com.admob.android.ads.AdView>
</RelativeLayout>
</ViewSwitcher>
<ImageView
android:id="#+id/image"
android:layout_above="#id/relative"
android:padding="2pt"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true" >
</ImageView>
</RelativeLayout>
If I put the imageview first then each time a new image is loaded the buttons disappear and the whole layout seems to be re inflated
Update:
The layout must have an image view at the top then a view switcher.

I imagine a lot of it has to do with you not being able to read your XML. If it looks anything like the way you originally pasted it in here, that is. Your first problem is that you have nothing in your root RelativeLayout tag specifying a size. Your root layout should be in most cases set to a layout_width of fill_parent, same with the layout_height. You also need your schema specification (i.e. xmlns:android="http://schemas.android.com/apk/res/android" although I'm assuming you just left that out, since you're actually getting it to compile.
You also may want to keep in mind, since most everything is set to wrap_content for height, if it ever exceeds the height of the screen, some of it will not be visible, so you may consider wrapping the inner portion into a ScrollView.
EDIT: Again, I'd suggest setting your RelativeLayout (root element) to have a height of fill_parent. Try defining your ImageView first, leaving it with alignParentTop="true", then define your ViewSwitcher, and give it the layout_below="#id/image" attribute.

And small advice, use include layout, it will be more clear.
<include layout="#layout/my_other_layout" />

Related

Using a RelativeLayout to split a layout evenly

I have a Listview where each listview item looks like this!
The ListViewItem is a RelativeLayout. Now I am having problem in creating the two split-screen buttons. Currently I'm doing it like this.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:layout_height="fill_parent" android:layout_width="fill_parent"
android:layout_below="#+id/ReviewText">
<RelativeLayout
android:layout_weight="1"
android:layout_height="fill_parent" android:layout_width="0dp"
android:onClick="likeClicked"
android:clickable="true" >
<!-- SOME CODE -->
</RelativeLayout>
<RelativeLayout
android:layout_weight="1"
android:layout_height="fill_parent" android:layout_width="0dp"
android:onClick="likeClicked"
android:clickable="true" >
<!-- SOME CODE -->
</RelativeLayout>
</LinearLayout>
<RelativeLayout>
This is working perfectly fine, but the android dev documentation here says that
Furthermore, nesting several instances of LinearLayout that use the
layout_weight parameter can be especially expensive as each child
needs to be measured twice. This is particularly important when the
layout is inflated repeatedly, such as when used in a ListView or
GridView.
Can I improve my code for performance. If yes, How? Is there any other way to have two buttons split evenly without using LinearLayout?
In order to minimize layout nesting, so to optimize performances, I'd write a layout (which does take advantage of the layout's relativity) like this one:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<View
android:id="#+id/dummy"
android:layout_width="1dp"
android:layout_height="1dp"
android:layout_centerHorizontal="true"
android:visibility="invisible"
/>
<Button
android:id="#+id/btnLeft"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_toLeftOf="#id/dummy"
android:onClick="likeClicked"
android:clickable="true"
/>
<Button
android:id="#+id/btnRite"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_toRightOf="#id/dummy"
android:onClick="likeClicked"
android:clickable="true"
/>
<RelativeLayout>
I put a dummy View which is aligned to the center, then 2 buttons which I align to the left and to the right side of it.
For a simple layout like your's LinearLayout's are perfect choice. The only thing to be wary about is nesting layout weight's inside a view whose parent already has a layout-weight assigned. This is perfectly ok:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
While this is not:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" > <!-- nesting this way is bad for performance -->
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
</Button>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<!-- this is ok -->
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
</LinearLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<place top item layout here>
<LinearLayout
android:layout_height="fill_parent" android:layout_width="fill_parent"
android:orientation="horizontal"
android:weightSum="2">
<RelativeLayout
android:layout_height="fill_parent" android:layout_width="0dp"
android:onClick="likeClicked"
android:clickable="true"
android:layout_weight="1"
>
<!-- SOME CODE -->
</RelativeLayout>
<RelativeLayout
android:layout_weight="1"
android:layout_height="fill_parent" android:layout_width="0dp"
android:onClick="likeClicked"
android:clickable="true" >
<!-- SOME CODE -->
</RelativeLayout>
</LinearLayout>
</LinearLayout>
Hope , The performance can be improved if you follow the listed points
First thins don't use much XML code when you need something dynamically
instead of creating the 2 relative layouts in XML , create a class where it extends Linear layout/Relative layout
add the views which you want to show in the list item to the above layout
Measure the height and width dynamical with in the same class
And make sure the layout is parametrized where you can pass the content dynamically
Finally , you can inflate the created view , Using getview method of an adapter**
Refer the following link
Dynamic listview content loader

RelativeLayout containing a webview and another relativelayout

I am trying to make an Activity that has a WebView and a small bar at the bottom with height of 40dp which has buttons for refresh, back, forward, etc. The issue i'm facing is that I want the WebView to consume the height of the entire view except for the bottom 40dp.
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<WebView
android:id="#+id/id_web_view_browser"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:background="#000000"
android:orientation="horizontal" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:background="#drawable/ic_action_example"
android:onClick="onClick"
android:textSize="14sp" />
</RelativeLayout>
</RelativeLayout>
Above is what I have so far... Right now the browser has height of the whole screen with the RelativeLayout at the bottom (covering a piece of the browser). Is there anything else I can do to leave the bottom 40dp for the RelativeLayout only?
Put the webview so it layout_above the 2nd relative layout. Then change the relative layout to be aligned to parent bottom. That ought to work
Figured it out.
I was able to do the below:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<WebView
android:id="#+id/id_web_view_browser"
android:layout_above="#+id/id_web_view_bar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" />
<RelativeLayout
android:id="#+id/id_web_view_bar"
android:layout_width="fill_parent"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:background="#000000"
android:orientation="horizontal" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:background="#drawable/icon_refresh"
android:onClick="onClick"
android:textSize="14sp" />
</RelativeLayout>
</RelativeLayout>
In the WebView I set the following property: android:layout_above="#+id/id_web_view_bar". That kept the bottom 40dp for the bar.
Kinda late... however might help any other arround...
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<Button
android:id="#+id/button_xs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginLeft="10dp"
android:layout_alignParentBottom="true"
android:background="#drawable/ic_action_example"
android:onClick="onClick"
android:textSize="14sp" />
<WebView
android:id="#+id/id_web_view_browser"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_above="#+id/button_xs"/>
</RelativeLayout>
In this case theres no need specific any height for the button or other view suppose to be after the webview.

Relative Layout is causing issues with formatting

I have been working on an app for my school recently and wanted to clean it up a bit before possibly publishing it. On the scheduling portion of the app, I have 5 buttons that perform actions on a ListView that is also on the screen at the same time. However, I have the issue when I have around 6 or more events on the screen as once the list view takes over the screen and pushes the buttons off the screen, making it so that I cannot delete the events, make new ones, and so on.
I tried setting the list view to a static size (400px) which worked for normal screen orientation, but if the phone is set to landscape view you cannot see the buttons either. With my current code it would appear to work in the XML viewer but in practice is not the case.
This is the code without the static size setting:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#551A8B"
android:textColor="#FFD700"
>
<Button android:text="#string/New"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/button3">
</Button>
<Button android:text="#string/Edit"
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/button3"
android:layout_alignTop="#id/button3">
</Button>
<Button android:text="#string/delete"
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/button4"
android:layout_alignTop="#id/button4">
</Button>
<Button android:layout_height="wrap_content"
android:id="#+id/button7"
android:layout_width="wrap_content"
android:text="#string/Previousweek"
android:layout_below="#id/button3">
</Button>
<Button android:layout_height="wrap_content"
android:id="#+id/button6"
android:layout_width="wrap_content"
android:text="#string/Next"
android:layout_below = "#id/button3"
android:layout_toRightOf = "#id/button7">
</Button>
<ListView android:id="#+id/listView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:textColor="#FFD700"
android:layout_below="#id/button7"
android:textSize="10sp" >
</ListView>
</RelativeLayout>
The XML viewer for this code is:
Which would lead me to believe it would work fine. I tested it on my emulator and got the following result after entering a bunch of silly events however:
This result is consistent with multiple versions of the emulator.
How I can fix this problem without using static size constraints that cause landscape orientation issues?
Separate the buttons into a separate RelativeLayout and enclose this and the ListView in a vertical LinearLayout.
Then:
<LinearLayout android:id="#+id/linearLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout [...]
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<!-- Your buttons -->
</RelativeLayout>
<ListView android:id="#+id/listView1"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1" />
</LinearLayout
The key point here is the height and weight on the ListView. This means that it fills the remaining space in the LinearLayout after space has been correctly allocated for the buttons.
Add a android:weigth in your listView tag and set the android:weigth value to 1. This will work when your list view height and width is set to fill_parent and your list view is covering entire layout. So try it, it will work.
One simple solution would be to separate the buttons in their own relative layout and put the whole thing in a linear layout, eg:
<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="#551A8B"
android:textColor="#FFD700">
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#551A8B"
android:textColor="#FFD700">
<!-- your buttons -->
</RelativeLayout>
<ListView
android:id="#+id/listView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:textColor="#FFD700"
android:layout_below="#id/button7"
android:textSize="10sp">
</ListView>
</LinearLayout>
Use a vertical LinearLayout with two rows of Buttons (each row as a LinearLayout), then give the ListView a layout_weight value of "1". In fact, use layout_weight to clean up the size of your buttons too.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<Button android:text="#string/New"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_weight="1"
android:id="#+id/button3" />
<Button android:text="#string/Edit"
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" />
<Button android:text="#string/Delete"
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<Button android:layout_height="wrap_content"
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_weight="1"
android:text="#string/Previousweek" />
<Button android:layout_height="wrap_content"
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_weight="1"
android:text="#string/Next" />
</LinearLayout>
<ListView android:id="#+id/listView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:textColor="#FFD700"
android:textSize="10sp" >
</ListView>

Layout problems. Android

I have some behaviour of my layout. I give two of them, very similar to each other. Only one difference is the width attribute of the textviews.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="bottom">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:isScrollContainer="true"
android:gravity="center"
android:background="#color/black">
<LinearLayout
android:id="#+id/tabs"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:background="#color/black"
android:layout_weight="1">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Einstellungen"
android:drawableTop="#drawable/selector_settings"
android:id="#+id/main_menu_button_connection"
android:gravity="center"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="10px">
</TextView>
...
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Suche"
android:drawableTop="#drawable/selector_search"
android:id="#+id/main_menu_button_connection"
android:gravity="center"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="10px">
</TextView>
</LinearLayout>
</LinearLayout>
</LinearLayout>
If layout_width is set to wrap content, I get following layout results:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="bottom">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:isScrollContainer="true"
android:gravity="center"
android:background="#color/black">
<LinearLayout
android:id="#+id/tabs"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:background="#color/black"
android:layout_weight="1">
<TextView
android:layout_width="70dp"
android:layout_height="wrap_content"
android:text="Einstellungen"
android:drawableTop="#drawable/selector_settings"
android:id="#+id/main_menu_button_connection"
android:gravity="center"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="10px">
</TextView>
...
<TextView
android:layout_width="70dp"
android:layout_height="wrap_content"
android:text="Suche"
android:drawableTop="#drawable/selector_search"
android:id="#+id/main_menu_button_connection"
android:gravity="center"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="10px">
</TextView>
</LinearLayout>
</LinearLayout>
</LinearLayout>
If layout_width is set to a value instead (here 70dp), my layout looks so, I want it to have:
Can anybody explain me, why?!
Is there some solution avoiding to set a constant width and still having layout result like at the second picture?!
Thank you in advance
You probably want to give each TextView an equal layout weight such as android:layout_weight="1" and a width of fill_parent. Also, don't give a weight for the tabs linear layout. Also, while I don't really know what's going on later in the layout file, having three nested LinearLayouts seems like it might be wasteful. Maybe you can get rid of one of them?
I recommend starting over and using the eclipse designer view or use droiddraw to create the layout, especially since there are recent improvements to the layout editor.

trouble with nested layouts

I'm just beginning Android and have gotten myself stuck. I've made a simple app/view. The idea is draw a line-maze in the top, with motion buttons on the bottom. My app only draws an x with a couple lines in the frame, but that works. The problem is that my buttons are being drawn too far down, and are clipped in height.
I assume the problem is all in my layout xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1" >
<none.maze.MazeView
android:id="#+id/maze"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:id="#+id/text"
android:text="#string/maze_layout_text_text"
android:visibility="visible"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center_horizontal"
android:textColor="#ff8888ff"
android:textSize="24sp"/>
</RelativeLayout>
</FrameLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
<Button
android:id="#+id/left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Left"
android:layout_weight="1"
/>
<Button
android:id="#+id/forward"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Forward"
android:layout_weight="1"
/>
<Button
android:id="#+id/right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Right"
android:layout_weight="1"
/>
</LinearLayout>
</LinearLayout>
I think you shouldn't use layout_height="fill_parent" and layout_weight at the same time. Try to set layout_height="0dip" and layout_weight="1" for the FrameLayout and layout_height="wrap_content" for the lower LinearLayout. The lower LinearLayout mustn't have the layout_weight attribute.
Use Hierarchy Viewer to debug your layout. Its pretty cool.
Your entire layout is just way too bloated and ineffective. You use way too many ViewGroups. I recommend reading about RelativeLayouts and especially the entire Layout Tricks series.

Categories

Resources