I'm trying to make a layout in Android with Fragments. I started to use Commonsware's MergeAdapter but I'm having a weird bit of trouble. The layout worked fine before, but now I get this:
http://img856.imageshack.us/img856/2796/layoutbug.png
There are a couple problems: The white strip should have text going all the way across its length. I set the TextView with a white background to make sure the width was being set correctly. The checkbox right below it should also say "Issue?" but it's trying to wrap the text for some reason.
Here is the layout code that is being added:
<?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="match_parent" android:orientation="vertical">
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Instructions" />
<TextView android:id="#+id/tvInstructions" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Instructions go here" android:textSize="32dp" android:background="#FFFFFF"></TextView>
<LinearLayout android:layout_height="wrap_content" android:layout_width="match_parent" android:orientation="horizontal" android:paddingTop="24dp">
<CheckBox android:id="#+id/cbIssues" android:layout_height="wrap_content" android:layout_weight="1" android:layout_width="0dp" android:text="Issues?" />
<TextView android:id="#+id/tvStation" android:layout_height="wrap_content" android:layout_width="0dp" android:layout_weight=".5" android:text="Station:" />
<Spinner android:id="#+id/spStation" android:layout_height="wrap_content" android:layout_width="0dp" android:layout_weight=".5"/>
</LinearLayout>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Pending data" />
</LinearLayout>
and here's how I'm inflating it inside the Fragment's onActivityCreated:
LayoutInflater inflater = (LayoutInflater)getActivity().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
MergeAdapter _adapter = new MergeAdapter();
View observationHeaderView = inflater.inflate(R.layout.observationheader, getListView(), false);
_adapter.addView(observationHeaderView);
I get a feeling it has something to do with how I'm inflating the layout. Any help would be appreciated. Thanks.
Don't use match_parent for android:layout_height for something going into an AdapterView, such as your root LinearLayout.
You might also consider temporarily putting your header layout outside the ListView (e.g., in a vertical LinearLayout also holding the ListView) and get it debugged before adding the complication of having it in the ListView.
Beyond that, fire up Hierarchy View (Eclipse perspective or standalone edition) and try to figure out where your layout rules are going wrong.
Also, I am uncertain how well your Spinners will work inside of a ListView on Honeycomb.
It appears my problem was with layout_width being match_parent in certain places in my header, when it should have been wrap_content. The following worked:
<?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="match_parent" android:orientation="vertical">
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Instructions" />
<TextView android:id="#+id/tvInstructions" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Instructions go here" android:textSize="32dp" android:background="#FFFFFF"></TextView>
<LinearLayout android:layout_height="wrap_content" android:layout_width="match_parent" android:orientation="horizontal" android:paddingTop="24dp">
<CheckBox android:id="#+id/cbIssues" android:layout_height="wrap_content" android:layout_weight="1" android:layout_width="wrap_content" android:text="Issues?" />
<TextView android:id="#+id/tvStation" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_weight=".5" android:text="Station:" />
<Spinner android:id="#+id/spStation" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_weight=".5"/>
</LinearLayout>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Pending data" />
</LinearLayout>
Related
I have a ListView with TextView and Button each row this is my layout content
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Medium Text"
android:id="#+id/desc"
android:layout_marginTop="10dp"
android:layout_marginLeft="15dp" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="right">
<Button
android:id="#+id/button"
android:layout_width="70dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginRight="15dp" />
</LinearLayout>
</FrameLayout>
This is a screenshot which describe the error: http://it.tinypic.com/r/a47ho9/9
I would not use a FrameLayout for the ListView row because it is difficult to position items in a FrameLayout. Just use one LinearLayout with android:orientation="horizontal" and put your TextView and Button inside that.
It's easier to use a RelativeLayout to place your widgets correctly I would say. And I would also recommend to try flattening your layout. It means that you should not nest so many layouts. It is a pretty simple thing to do in this case. You want to have as little nested layouts as possible when you build your ui to optimisee performance.
Try something like this instead, might not be exactly what you want but maybe helps you.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background=""
android:padding="8dp">
<TextView
android:id="#+id/desc"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="Medium text"
android:layout_centerVertical="true"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_toLeftOf="#+id/button"/>
<Button
android:id="#+id/button"
android:layout_width="70dp"
android:text="button"
android:layout_centerVertical="true"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"/>
</RelativeLayout>
You can read more about optimising your layout here https://developer.android.com/training/improving-layouts/optimizing-layout.html
I'm working on a layout file. This layout requires that the icons should always after the single line TextView. If the TextView is too long,then the TextView is ellipsize and the icons should be shown.Such as:
situation1: [[textview][icon1][icon2] ]
situation2: [[textview......][icon1][icon2]].
I have found the similar case in here, but it doesn't work for me.
My current code is something like this:
<RelativeLayout
android:id="#+id/parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity="left">
<!-- icon show here -->
<LinearLayout
android:id="#+id/icons"
android:paddingLeft="5dp"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:gravity="center_vertical|left">
</LinearLayout>
<!--text show here-->
<TextView
android:id="#+id/text"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_toLeftOf="#id/icons"
android:singleLine="true"
android:ellipsize="end"
android:gravity="left"/>
</RelativeLayout>
The LinearLayout is used to add icons when fetch data from server. Android's layout preview is like above situation,but the apk runs on device like this this:
situation1: [ [textview][icon1][icon2]]
situation2: [[textview......][icon1][icon2]].
I'm really confused. Anybody has some ideas about this situation? Thanks in advance.
I found the code works fine after Android 4.3(include 4.3,I haven't test 4.2),it doesn't work below Android 4.3.The reason I think is that different Android systems parse these layout params in different ways.Such as some version think the parent container layout's params is more important than the child view.
Finally, I got my stupid situation.But it works.I will give you code:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<!--text show here-->
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:singleLine="true"
android:layout_weight="1" />
<!-- icons show here -->
<LinearLayout
android:id="#+id/icons"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_gravity="center_vertical"
android:orientation="horizontal">
</LinearLayout>
</LinearLayout>
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_gravity="right"/>
</LinearLayout>
I'm trying to define layout for listview item that looks like attached image (made in Photoshop). What layout(s) should I use?
i propose a LinearLayoutwith horizontal orientation first, and inside a RelativeLayoutto place other views from left / top to right / bottom using attributes : layout_alignParentTop, layout_alignParentBottom, layout_alignParentLeft, layout_alignParentRight etc ...
I would suggest using a RelativeLayout for this. Otherwise, you may up with too much nesting. I'm not going to write the layout but you should look through the RelativeLayout Docs and see all the possible properties you can give Views. You may possibly end up with child LinearLayouts also and that's ok. But I would use RelativeLayout for the parent.
If you are undecided a good thing to do is to draw it out really quick in xml how you think each might go and see with ViewGroup seems like the most efficient. Sometimes its hard to say until you get going on it by either writing the xml code or at least some pseudocode.
You only need to play now with paddings and margins.
<?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" >
<LinearLayout
android:id="#+id/gray_layout"
android:layout_width="40dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#888888"
android:layout_alignParentLeft="true"
android:gravity="center_vertical">
<TextView android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="AUG"/>
<TextView android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="18"/>
<TextView android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="2011"/>
</LinearLayout>
<View
android:id="#+id/divider"
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#000088"
android:layout_toRightOf="#id/gray_layout"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="30dp"/>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/divider"
android:text="Title"
android:layout_marginBottom="5dp"
android:layout_alignBottom="#id/divider"/>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#id/divider"
android:text="18. aug 23:49"
android:layout_marginBottom="5dp"
android:layout_alignBottom="#id/divider"/>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/divider"
android:text="Short msg"
android:layout_marginTop="10dp"
android:layout_alignTop="#id/divider"/>
<ImageView
android:id="#+id/info_button"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:background="#ff0000"/>
<ImageView
android:id="#+id/arrow_button"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_above="#id/info_button"
android:layout_toLeftOf="#id/info_button"
android:background="#00ff00"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/arrow_button"
android:layout_toLeftOf="#id/info_button"
android:layout_alignLeft="#id/arrow_button"
android:gravity="center_horizontal"
android:text="30" />
</RelativeLayout>
You can nest multiple LinearLayouts with different orientation to achieve this.
I'm trying to create something that looks like this.
I can sort of get the header working, and the word cloud look-alike stuff on the right.
I'm calling it from a Fragment.
But I'm struggling to get the two column thing working.
I tried to get the width of the parent like this:
parentLayout = (RelativeLayout) view.findViewById(R.id.ParentLayout);
parentLayout.getMeasuredWidth()
this returns 0, while the parentLayout has layout_width="match_parent"
I can't seem to find tutorials/example on this type of "view", or maybe the keyword I'm using for the search is wrong.
Any input is appreciated!!
Thanks in advance!!
p.s. I tried to use onMeasure() as well, but got error "must override or implement a supertype method"
Linear Layouts really can handle this type of layout just fine. I would use an arrangement like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent"
android:background="#color/black"
android:orientation="vertical"
android:layout_width="fill_parent">
<!-- your header stuff here
-->
<LinearLayout android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:orientation="horizontal"
>
<LinearLayout android:id="left picture pane"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<ImageView android:layout_width="100dp"
android:background="#drawable/logo"
android:layout_height="50dp"
android:layout_margin="10dp"
/>
<ImageView android:layout_width="100dp"
android:background="#drawable/logo"
android:layout_height="50dp"
android:layout_margin="10dp"
/>
<ImageView android:layout_width="100dp"
android:background="#drawable/logo"
android:layout_height="50dp"
android:layout_margin="10dp"
/>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Some Text"
android:textColor="#FFFFFF"
android:layout_marginTop="20dp"
android:layout_marginLeft="10dp"
/>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Some Text"
android:textColor="#80ffff"
android:layout_marginTop="2dp"
android:layout_marginLeft="15dp"
/>
<!-- your fancy lettering in here
or you could put them in a relative layout
instead of this linear one -->
</LinearLayout>
</LinearLayout>
</LinearLayout>
The following is the XML of my layout. It explicitly states that the title, time and description TextViews should be under the image of the alarm. However, as the screen shot shows, the TextViews have moved into the ImageView. Why does this happen and how can I fix this? The problem only started happening when I added the scrollview.
XML
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/img_alarm"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/alarm"
android:layout_centerInParent="true"
android:contentDescription="#string/content_description_layout_alarm"/>
<TextView
android:id="#+id/lbl_alarm_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20dip"
android:textStyle="bold"
android:layout_centerHorizontal="true"
android:layout_below="#+id/img_alarm"
android:layout_alignLeft="#+id/img_alarm"
android:text="#string/empty"
/>
<TextView
android:id="#+id/lbl_alarm_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20dip"
android:textStyle="bold"
android:layout_centerHorizontal="true"
android:layout_below="#+id/img_alarm"
android:layout_alignRight="#+id/img_alarm"
android:text="#string/empty"
/>
<TextView
android:id="#+id/lbl_alarm_description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_below="#+id/lbl_alarm_title"
android:layout_alignLeft="#+id/lbl_alarm_title"
android:layout_alignRight="#+id/lbl_alarm_time"
android:maxLines="1"
android:ellipsize="marquee"
android:text="#string/empty"
/>
<Button
android:id="#+id/btn_stop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/lbl_alarm_description"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dip"
android:paddingLeft="20dip"
android:paddingRight="20dip"
android:text="#string/stop_layout_alarm"
android:gravity="center" />
</RelativeLayout>
</ScrollView>
Image
Cute app :)
hmm... not sure why it's doing it, looks like you have the right code, without busting out eclipse. but i've also had some weird bugs with relativelayout that i didn't understand and didn't have time to debug.
i do know of an alternative way you can accomplish what you're looking for -
have a scrollview that encases a linearlayout instead of a relative layout. Do these things:
For the linearlayout, you can set orientation = vertical so that it's still a top down order.
For the part where you need two textviews where one is aligned to the right and the other is aligned to the right, you need another inner linearlayout with its orientation=horizontal. then have one element align parent left, and the other align parent right. add a weightSum=1 attribute to this linearlayout and have each of the two textviews layout_width=0.5 so that each is half the width of the screen
Apply a weightSum=1 attribute to your outer most linearlayout, and see each element inside so that it's layout_weight sum adds up to 1. layout_weight will allow an element to take up that much % of real estate on the screen. like if you set your imageView to have android:layout_weight=0.8 then it'll take up 80% of the screen... since mathematically, (layout_weight/weightSum) = (.08/1) = 80%
try to use that mechanism instead, and if should work :) if it's confusing i can give code
example
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="1">
<ImageView
android:id="#+id/img_alarm"
android:layout_width="match_parent"
android:layout_height="0dip"
android:src="#drawable/alarm"
android:layout_weight="0.7"
android:contentDescription="#string/content_description_layout_alarm"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.1">
<TextView
android:id="#+id/lbl_alarm_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="20dip"
android:textStyle="bold"
android:text="#string/empty"
/>
<TextView
android:id="#+id/lbl_alarm_time"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="20dip"
android:textStyle="bold"
android:text="#string/empty"
/>
</LinearLayout>
<TextView
android:id="#+id/lbl_alarm_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="0.1"
android:maxLines="1"
android:ellipsize="marquee"
android:text="#string/empty"
/>
<Button
android:id="#+id/btn_stop"
android:layout_weight="0.1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="5dip"
android:paddingLeft="20dip"
android:paddingRight="20dip"
android:text="#string/stop_layout_alarm"
android:gravity="center" />
</LinearLayout>
</ScrollView>
i hope this deserves at least an upvote for the effort :D