I am trying to built a ListView which has a line per player.
Each line should be very small but instead it is filling the whole screen with 2 massive lines.
This is my XML:
<?xml version="1.0" encoding="utf-8"?>
<SlidingDrawer android:id="#+id/slidingDrawer" android:handle="#+id/drawerHandle"
xmlns:android="http://schemas.android.com/apk/res/android"
android:content="#+id/contentLayout" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_alignParentBottom="true"
android:visibility="visible"
android:background="#000000">
<ImageView android:id="#+id/drawerHandle"
android:src="#drawable/blue_arrow_up_flat"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</ImageView>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/contentLayout" android:gravity="center"
android:layout_width="fill_parent" android:layout_height="wrap_content">
<ListView
android:id="#+id/lvwScores"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:divider="#FFFFFF" android:dividerHeight="1dip"
android:layout_weight="1" android:layout_marginBottom="60dip"
android:footerDividersEnabled="true" android:headerDividersEnabled ="true"
android:background="#000000"/>
</LinearLayout>
</SlidingDrawer>
Row:
<?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:orientation="horizontal">
<TextView android:id="#+id/tvwPlayerName" android:gravity="left"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:layout_alignParentLeft="true"/>
<TextView android:id="#+id/tvwPlayerScore" android:gravity="right"
android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginRight="12sp"
android:layout_alignParentRight="true"/>
</RelativeLayout>
Try changing android:layout_weight="1" of ListView to 3 or >3..Might work out..
I think the ListView is drawn correctly.
You can see the two lines, the only problem is that they are drawn in the center and therefore look like they span the whole screen.
So I assume if you remove
android:gravity="center"
from your LinearLayout it should work.
And as a sidenote:
I never worked with SlidingDrawer, but its documentation states that you should use match_parent ( or fill_parent ) for its width and height. I assume you do not want to let the SlidingDrawer span over the whole screen if there is almost no content. Maybe this class does not allow other behavior, I do not know. But maybe this is the real source for your problem and not the ListView itself.
Edit:
Disregard my sidenote, the SlidingDrawer is drawn ontop with the blank area being transparent, therefore there should be no problem with its look...
Related
I would like to obtain this layout for an Android app for mobile phones:
Icon - Object1
List with entries related to Object1
Icon - Object2
List with entries related to Object2
So far I have used the following layout tree (edited graphically with the editor in Android Studio):
Root-LinearLayout
Vertical LinearLayout
Horizontal LinearLayout with icon and text
ListView
Vertical LinearLayout
Horizontal LinearLayout with icon and text
ListView
May be this is not the best way to organize such layout (may be I should use lists with header, but suggestions very welcome), however it can be a good case for understanding deeper how ListView works.
This is the graphical layout generated:
the blue row corresponds to the first LinearLayout. As you can see from the second screenshot that follows, the second list goes all the way down to Hell, bringing me with her. Is there any way to make the lists respect the wrap_content+ weight behaviour?
The XML code follows. I have tried several combos (both reasonable and unreasonable) of layout:weights but none works. I also tried to set the min-width of the first LinearLayout (the hidden one), but nothing changes.
Could you please help me?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="2">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:minHeight="50dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView15"
android:src="#drawable/abc_ic_menu_share_mtrl_alpha" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Object1"
android:id="#+id/textView24"
android:textSize="26dp"
android:paddingLeft="10dp" />
</LinearLayout>
</LinearLayout>
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/listView2"
android:layout_weight="1" />
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView16"
android:src="#drawable/abc_ic_commit_search_api_mtrl_alpha" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Object2"
android:id="#+id/textView25"
android:textSize="26dp"
android:paddingLeft="10dp" />
</LinearLayout>
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/listView"
android:layout_weight="1" />
</LinearLayout>
It should work if you put your ListViews inside of the child LinearLayouts which hold the LinearLayout that has the TextView and ImageView. You also should be using "0dp" for the height when using weight with a vertical layout.
Something like this, I believe, should work
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="2">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:gravity="center_vertical"
android:minHeight="50dp"
android:layout_weight=".2">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView15"
android:src="#drawable/abc_ic_menu_share_mtrl_alpha" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Object1"
android:id="#+id/textView24"
android:textSize="26dp"
android:paddingLeft="10dp" />
</LinearLayout>
<ListView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:id="#+id/listView2"
android:layout_weight=".8" />
</LinearLayout>
Note the other changes: I gave the inner-LinearLayout an arbitrary weight of ".2" then the ListView a weight of ".8". And, of course, set the height to "0dp". You may need to play with those weights a bit but I think doing something like that for both first child LinearLayouts should get you close.
That may get your current layout to work but using headers and/or an ExpandableListView may be a better option.
I'm making a layout (XML file) in Android that has two child views (one on the right side of the screen and one on the left). I want the view on the right to take up a pre-determined space (in dp) and have the view on the left take up all the remaining space up to a limit, at which point it will stop expanding and the two layouts will just move further apart as the screen gets larger.
The odd thing is this would be very easy if I wanted the view on the right side to be the one that expands, and the view on the left to be the one that takes up a preset space. If you set each view to the width you want (in a horizontal linear layout) Android will automatically shrink the one on the left in the event that both views don't fit.
I would like to do this in one layout file; this layout is already designed for displays between sw512dp-land and sw765dp-land.
The code below would work if I could find a way to make Android shrink the layout on the left (when layouts both cannot fit at the size specified). But by default the system will shrink the layout on the right first.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<RelativeLayout
android:id="#+id/left"
android:layout_width="150dip"
android:layout_height="fill_parent"
android:background="#color/red" >
</RelativeLayout>
<LinearLayout
android:id="#+id/right"
android:layout_width="100dip"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#color/green" >
</LinearLayout>
This code (from #Lokesh) would work if I didn't need the layout on the left to stop expanding at a certain point.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/left"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_toLeftOf="#+id/right"
android:background="#color/red" >
</LinearLayout>
<LinearLayout
android:id="#+id/right"
android:layout_width="100dip"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#color/green" >
</LinearLayout>
It would also be nice to know if anyone thinks this isn't possible so I can resort to doing it pragmatically or changing my approach to the layout.
Thanks!
This works for me. I've set the right layout to 100dip, change as per your needs.
<?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"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/left"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_toLeftOf="#+id/right"
android:background="#color/red" >
</LinearLayout>
<LinearLayout
android:id="#+id/right"
android:layout_width="100dip"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#color/green" >
</LinearLayout>
</RelativeLayout>
EDIT 1: I used the background color just to distinctly show the layouts. Not necessary at all. :)
EDIT 2: If you want a way to expand the left layout upto only a limit then try this -
<?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"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/left"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_toLeftOf="#+id/right">
<LinearLayout
android:id="#+id/inner"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#color/yellow">
<TextView
android:id="#+id/myTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This will expand only to a limit"
android:maxWidth="300dip"
android:textAppearance="?android:attr/textAppearanceLarge"
android:background="#color/red" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/right"
android:layout_width="100dip"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#color/green" >
</LinearLayout>
</RelativeLayout>
Here you need to place your widgets in inner layout and this is what it looks like in different screens.
3.1in HVGA
5.2in QVGA
Colors used : red(#FFFF00), yellow(#FFFFFF00), green(#FF00FF00).
Yes I read this question. No it didn't help.
The problem is that only the highlighted area of my ListView cell is clickable. It is the area that is filled with text. Take a look on the picture:
So when you click on the circled area - it wouldn't respond.
Any ideas on how to make it work properly???
Edit: my list layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp">
<ImageView
android:id="#+id/shoulderLogo"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="20dp"
android:layout_marginTop="5dp">
</ImageView>
<TextView
android:id="#+id/shoulderLabel"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</TextView>
</LinearLayout>
I'm pretty sure this is because your list layout LinearLayout has a layout_width of wrap_content. This will cause your row to only be as wide as the views contained within. If you set it instead to fill_parent or match_parent it will extend to fill the width of your list.
Try changing to this
<?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="wrap_content"
android:padding="5dp">
<ImageView
android:id="#+id/shoulderLogo"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="20dp"
android:layout_marginTop="5dp">
</ImageView>
<TextView
android:id="#+id/shoulderLabel"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</TextView>
I have a vertical LinearLayout which has a list view and one ImageView at the bottom and one at top and the list view filled up the space left behind.
It looks like this:
<LinearLayout layout_height="match_parent" layout_width="#dimen/width"
orientation="vertical">
<ImageView layout_height="#dimen/width" layout_width="#dimen/width" id="#+id/top">
<ListView android:layout_height="0px"
android:background="#00ffff"
android:layout_width="#dimen/width"
android:layout_weight="1" />
<ImageView layout_height="#dimen/width" layout_width="#dimen/width" id="#+id/bottom" layout_gravity="bottom|center_horizontal">
It works fine whenever I have the list view visible.
But whenever I set the ListView to visibility gone, the 'bottom' ImageView will popup to be just underneath the top Image View.
My question is why the bottom ImageView does not stay at the bottom despite I said ' android:layout_gravity="bottom|center_horizontal"' I have looked at hierarchyViewer, the height of the parent does match the screen's height. So the bottom Image view should honor the android:layout_gravity="bottom|center_horizontal" and stay at the bottom, right?
As alternative to my comments, you can replace your LinearLayout with a RelativeLayout. Agarwal already suggested this, but his code is a bit of a mess and at the time of this writing not correct in terms of what you want it to do.
Give below code a try. When you set the ListView to gone, the top and bottom images will stay positioned identical to when it's visible. Do note that I replaced the #dimens/width references, so you might want to put those back in.
<?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 android:id="#+id/top" android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<ListView android:layout_width="fill_parent"
android:layout_height="fill_parent" android:layout_above="#+id/bottom"
android:layout_below="#+id/top" android:background="#00ffff" />
<ImageView android:id="#+id/bottom" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
The best solution is to use ralaticelayout for this::::
<?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"
android:background="#0000FF">
<ImageView android:layout_height="wrap_content" android:layout_width="fill_parent" android:id="#+id/top" />
<ImageView android:layout_height="wrap_content" android:layout_width="fill_parent" android:id="#+id/bottom" android:layout_alignParentBottom="true"/>
<ListView android:layout_height="fill_parent"
android:background="#00ffff"
android:layout_width="fill_parent"
android:layout_below:#id/top android:layout_above:#id/bottom />
</RelativeLayout>
I've searched for an answer for this all over but the solutions offered did not solve my problem.
I have a layout where I display some views (a few buttons and a background). To this i've added a custom control i've made extending linear layout. This control is displayed above the layout quite nicely.
What I wish to do is add an additional ImageView which is larger than this control but it will be in front of it.
edited: Sorry, I hope this will clear things up.
I have one large layout (Relative) for my activity, I would like to stack on this layout two additional views\layout so the final version will be the picture attached:
This is my layout - which stacks the imageview right on the menubar, and not over the others. Trying to put the FrameLayout elsewhere still didn't give me the wanted result.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background">
<RelativeLayout android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="450dip">
<com.myproject.controls.SearchControl
android:id="#+id/scSearch"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<ExpandableListView android:id="#+id/lstItems"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/scSearch"
android:layout_marginLeft="26dip"
/>
</RelativeLayout>
<FrameLayout android:layout_width="fill_parent"
android:layout_height="fill_parent">
<com.myproject.controls.MenubarMain
android:id="#+id/mbMenuBarMain"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="bottom"
/>
<ImageView android:src="#drawable/myicon"
android:layout_width="200dip"
android:layout_height="200dip"
/>
</FrameLayout>
</LinearLayout>
Not sure it this will work or not cause I'm typing this up at work. But moral of the story here is get used to using RelativeLayout. You have much more control over your layout.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background">
<com.myproject.controls.MenubarMain
android:id="#+id/mbMenuBarMain"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
</com.myproject.controls.MenubarMain>
<com.myproject.controls.SearchControl
android:id="#+id/scSearch"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true">
</com.myproject.controls.SearchControl>
<ExpandableListView android:id="#+id/lstItems"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/scSearch"
android:layout_above="#id/mbMenuBarMain"
android:layout_paddingLeft="26dp"/>
<ImageView android:src="#drawable/myicon"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_alignBottom="#id/mbMenuBarMain"
android:layout_alignRight="#id/mbMenuBarMain"/>
</RelativeLayout>