ListView Alignment - android

I'm new to Android and having problems with ListView control. Whenever I add a ListView to the View, I face the following problems:
The ListView goes 100% width, 100% height, I want to add button on the top and can't do it because of this. I want to manually specify the width,height.
The ListView has some kind of padding enabled, I want it to be 100% width, but it looks like it's 90%
How can I solve these problems? I'm using Eclipse. Thanks!
ListView:
<ListView
android:id="#+id/listView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="0dp" >
</ListView>
Row:
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rowTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="10dp" android:textSize="12sp" >
</TextView>
Complete Layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.kb.kl.MainActivity" >
<ListView
android:id="#+id/listView1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</ListView>
</RelativeLayout>

Use android:layout_weight to prevent listview from hogging all the available space. Example:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<Button
android:id="#+id/someButton"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<ListView
android:id="#+id/listView1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:padding="0dp" />
</LinearLayout>
As for the padding problem, I'm not sure what you're describing.... is it the 10dp padding in your rowTextView that could be causing it?

If you want to put a button on the top of listview, you should use some layouts to help you, like linearLayout. Here is instruction. http://developer.android.com/guide/topics/ui/layout/linear.html
As for padding of ListView, I don't think there is such kind of setting. Usually, there is setting like divider/entries/dividerHeight in XML. But they all have nothing to do with padding.

Related

Image does not touch the edges, Android [duplicate]

I am creating an Android app which has a main RelativeLayout and some LinearLayout within it.
Now i have this problem. When dragging items to the editor, e.g. a LinearLayout, it doesn't fit to the full width of the screen. How can I make this possible? This is my XML:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
android:gravity="fill"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<LinearLayout
android:id="#+id/itemDetailLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:orientation="vertical"
android:fillViewport="true" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/itemImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minHeight="40dp"
android:minWidth="40dp"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/itemName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:text="Name"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
android:fillViewport="true" >
<TextView
android:id="#+id/itemRecentHigh"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Recent High" />
<TextView
android:id="#+id/itemRecentLow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Recent Low" />
<TextView
android:id="#+id/itemAverage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Average" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/listViewLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/itemDetailLayout"
android:layout_marginTop="10dp"
android:fillViewport="true"
android:gravity="fill_horizontal"
android:orientation="vertical" >
<ListView
android:id="#+id/searchListView"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:fillViewport="true" >
</ListView>
</LinearLayout>
Added a screenshot for more info. Added blue background to have some contrast.
Replace this:
android:layout_width="wrap_content"
android:layout_height="wrap_content"
With
android:layout_width="match_parent"
android:layout_height="wrap_content"
into your LinearLayout or Remove all the Padding from main RelativeLayout
Removing padding makes the linear layout fit the entire screen of the device
The space between the blue part and the "end of the screen". On the sides and above the part where the back button and home button are.
Remove the padding from the root RelativeLayout.
Try
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical>
// Other views within the linear layout
</LinearLayout>
I suppose you are using Eclipse. Personally, I hate the Graphical Editor of Eclipse and I usually write the XML code directly because working with the editor is a real pain
Don't use fill_parent as it is deprecated.
Instead to your RelativeLayout set
android:layout_width="fill_parent"
android:layout_height="fill_parent"
Then, to the list view that you want to fill the rest of the screen, you can set this tags
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
By doing so, you are telling the XML that you want your ListView to do what fill_parent used to do in previous versions of Android.
Kind regards!
you should try something like the following :
<LinearLayout
android:id="#+id/itemDetailLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
...
</LinearLayout>
what i mean you should do this :
android:layout_width="fill_parent"
for every LinearLayout that you want its width to fill_parent .
FILL_PARENT means that the view wants to be as big as its parent as mentioned in the documentation .
and please give me some feedback
Hope That Helps .

Android listview overlaps edit text field when keyboard shows

I am new to android programming so please bear with me...
I am trying to create a chat UI in android, for that I need to have an edittext field and send message button at bottom and listview (of message) at the rest of the screen (top to just above edittext and send message button). I am able to create the UI for that but when i show keyboard, the last message in listview overlaps the edittext field.
Here's my code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="codes.electrux.lets_start_android.PostAuthenticate">
<ListView
android:layout_width="wrap_content"
android:layout_height="410dp"
android:id="#+id/listView" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true">
<EditText
android:id="#+id/edit_msg"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="#string/msg_to_send"
android:layout_gravity="bottom" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/button_send"
android:layout_gravity="bottom"
android:onClick="sendMessage" />
</LinearLayout>
</RelativeLayout>
Here's what happens when keyboard shows up:
Here's what it looks like without keyboard:
I tried all solutions I could find on stackoverflow, but honestly, couldn't understand most of them.
Please help,
Thanks and Regards,
electrux.
Try like this.
Here your linear layout will be contains within the list view so it is overlaying last item of list. Just change as below and it will work.
Just replace this code with your xml.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="codes.electrux.lets_start_android.PostAuthenticate">
<ListView
android:id="#+id/listView"
android:layout_width="match_parent"
android:layout_height="410dp"
android:layout_above="#+id/linearLayout" />
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_alignParentBottom="true">
<EditText
android:id="#+id/edit_msg"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight="1"
android:hint="Send Msg" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:onClick="sendMessage"
android:text="Send Data" />
</LinearLayout>
</RelativeLayout>
And it's Done.
Hope this will help you.
Try to do like the following,
Just change the list height from default to wrap_content,
And give a id to the linearLayout , make the listView to be placed above LinearLayout.
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/listView"
android:layout_above="#+id/test"/>
<LinearLayout
android:id="#+id/test"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
The first thing you should do is set the ListView to match_parent widht and height.
The next, in your manifest you should declare your activity like this:
<activity android:name=".ConversationChatActivity"
android:windowSoftInputMode="adjustResize"
>
and in the activity the listView should apply this:
listview = (ListView) this.findViewById(R.id.listMessages);
listview.setTranscriptMode(ListView.TRANSCRIPT_MODE_NORMAL);
listview.setStackFromBottom(true);
Hope it helps you!!

Drawable dividers for a GridView

How do you set up custom dividers for a GridView?
I mean, there's a .png item with that blue gradient divider, but how do I put it in the GridView at the right place?
Searching through internet didn't bring any viable results..
Expectation:
Reality:
gridview wrapper xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/primary_blue_dark"
android:orientation="vertical">
....
<GridView
android:id="#+id/gv_stock"
android:paddingEnd="#dimen/activity_horizontal_margin"
android:paddingStart="#dimen/activity_horizontal_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchMode="columnWidth"
android:numColumns="2"/>
</LinearLayout>
gridview item xml:
<?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:background="#color/primary_blue_dark"
style="#style/padded_layout"
android:weightSum="2">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="1">
<TextView
android:id="#+id/tv_title"
android:layout_width="match_parent"
android:layout_height="match_parent"
style="#style/teal_text_middle"
android:gravity="center"
android:text="test"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="1"
android:gravity="center">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="2">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.7"/>
<ImageView
android:id="#+id/iv_arrow"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom"
android:layout_weight="1.3"
android:src="#drawable/ic_arrow_green"/>
</LinearLayout>
<TextView
android:id="#+id/tv_value"
android:layout_width="wrap_content"
android:layout_height="match_parent"
style="#style/white_text_big"
android:gravity="center"
android:text="test"/>
</LinearLayout>
</LinearLayout>
Use GridLayoutManager with Recyclerview and add the Itemdecoration from the following gist.You can vary offset's as per your requirement.
By using this answer here and simply changing the grey solid color background color for an image like this one (I set it for hdpi resolution - but it should stretch well both up and down),
you should get an effect like this (here it's on an ldpi device, so scaled down twice):
Which is not too far from what you're looking for.
It works, at least in principle. It may need some tweaking (narrowing the vertical central part), but you got the concept.
You might also want to cover some of the top (and possibly the bottom part, too) part, so to hide the trick.
With a simple "see through" effect, you can avoid messing with styles/themes.
[EDIT]
Yes, I know, it's MAINZ, not MEINZ (but, well... the pronounce is indeed the same! Hurry is a bad advisor, you know).

android Layout - scrollview don't show

I have a ScrollView which contains EditText, but the problem is it doesn't show properly in the emulator and on a physical device. Can anyone see any problems with my code?
XML snippet
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
android:background="#drawable/background2"
tools:context="com.jack.cheng.buddhistcopy.Activity1">
<ScrollView
android:layout_width="300dp"
android:layout_height="300dp"
android:id="#+id/scrollView"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:fillViewport="true"
android:isScrollContainer="true"
android:saveEnabled="true">
<TableLayout
android:id="#+id/sutra"
android:layout_width="295dp"
android:layout_height="295dp"
android:orientation="vertical"
>
<TableRow
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<EditText
android:text="Test"
android:layout_width="10dp"
android:layout_height="10dp"
>
</EditText>
</TableRow>
</TableLayout>
</ScrollView>
</RelativeLayout>
Did you try adding the following attribute to the ScrollView?
xmlns:android="http://schemas.android.com/apk/res/android"
Try using:
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="TestText"
/>
You might want to use the conditions : wrap_content, fill_parent or match_parent as using these allows your view elements to adjust accordingly to the device screen which can vary.
Also you might want to add an android:id="#id/myIdentifier" to that EditText so you can link it to whatever process you have going on in your app.

Top view in RelativeLayout ignoring clicks

I have a ListView inside a RelativeLayout and a small LinearLayouot with an EditText that should hover above the List. However when I click the EditText it registers a click on the ListView underneath. It seems it's a focus problem.
Here is code:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/llSearchPlaces"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:background="#dedede"
android:clickable="true"
android:focusable="true"
android:focusableInTouchMode="true" >
<EditText
android:id="#+id/etSearchPlaces"
android:layout_width="300dp"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_marginTop="2dp"
android:hint="Search for Places"
android:inputType="textCapWords" />
</LinearLayout>
<ListView
android:id="#id/android:list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:listSelector="#drawable/nav_selector" >
</ListView>
</RelativeLayout>
It want focus to be on the id llSearchPlaces. But the two focus attributes I set do not work.
Try reordering the views in your XML layout. Ignoring the other views/viewgroups:
<RelativeLayout ...>
<ListView .../>
<EditText .../>
</RelativeLayout>
The reason is ViewGroups tend to draw their children in the order described and pass touch events down in the opposite order, so Views that are drawn on top have a chance to act on touches first. If you order them in the XML as I describe, EditText draws later (on top of) ListView and will receive touch events before ListView does.
Try this one:
First: Create layout xml for listview say listview.xml
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ListView
android:id="#id/android:list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:listSelector="#drawable/nav_selector"
android:paddingBottom="50dp" >
</ListView>
</LinearLayout>
Second: Create layout xml for edit text say edittext.xml
<?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="vertical" >
<EditText
android:id="#+id/etSearchPlaces"
android:layout_width="300dp"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_marginTop="2dp"
android:hint="Search for Places"
android:inputType="textCapWords" />
<requestFocus />
</LinearLayout>
Third: Merge these two layouts in layout say mainlayout.xml
<merge xmlns:android="http://schemas.android.com/apk/res/android" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<include
android:layout_alignParentTop="true"
android:id="#+id/lv"
android:layout_width="match_parent"
android:layout_height="match_parent"
layout="#layout/listview"/>
<include
android:layout_alignTop="#+id/lv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
layout="#layout/edittext"/>
</RelativeLayout>
Note: Replace ids and other attributes with your ones....
On second look, I don't see why you need a RelativeLayout at all. The effect you are achieving is a fixed EditText below your ListView. In actuality, the ListView and the EditText overlap, and you are working around this by giving the ListView padding on the bottom equal to the height of the EditText container.
A better choice would be to use a vertical LinearLayout to contain the ListView and the EditText container beneath it. Here the ListView will take up all the space available that is not used by the EditText container.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ListView
android:id="#id/android:list"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
... />
<LinearLayout
android:id="#+id/llSearchPlaces"
android:layout_width="match_parent"
android:layout_height="..."
android:orientation="horizontal"
... >
</LinearLayout>
</LinearLayout>

Categories

Resources