I have a simple fragment dialog with a listview, EditText and two button (accept and cancel).
I want my layout to look like this:
Listview on top
EditText right below
and
Buttons side by side below edittext.
Now my problem is that listview can have 0 or a 100 elements.
So if I put everythis in a vertical LinearLayout and listview has a lot of elements the edittext and buttons get pushed out of view. And if I use relative layout and say that edit text is aligned parent bottom and below the listview that it looks ok for 100elements but when the listview is empty the dialog uses all of the screen space.
Here is an example of my code when using relativeLayout. Is there another way to make is so that linearLayout with id "below" is below the listview but will still be visible(if list view has a lot of items) without using alignParentBottom="true" because that is the reason the layout stretches to full screen.
<?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="wrap_content"
android:orientation="vertical" >
<ListView
android:id="#+id/ListViewPreNotes"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/bottom" />
<LinearLayout
android:id="#+id/below"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_alignParentBottom="true">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:padding="3dp">
<TextView
android:layout_height="#dimen/label_height"
android:layout_width="130dip"
android:text="#string/note"
android:layout_marginLeft="10dip"
android:gravity="center_vertical"
android:textSize="#dimen/text_size_large"/>
<EditText
android:id="#+id/OMnote"
android:layout_height="wrap_content"
android:layout_width="200dp"
android:textSize="#dimen/text_size_large"
android:inputType="textNoSuggestions|textCapSentences"
android:selectAllOnFocus="true"
android:hint="#string/note"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:baselineAligned="false">
<Button
android:id="#+id/dialogButtonClose"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="50dp"
android:text="#string/ok"
style="?android:attr/borderlessButtonStyle"
android:textStyle="bold" />
<Button
android:id="#+id/dialogButtonCancel"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="50dp"
android:text="#string/cancel"
android:textStyle="bold"
style="?android:attr/borderlessButtonStyle" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
Set ListView.Visibility to Gone when no records found and use RelativeLayout and align parent bottom.
you can add what you need to show below the ListView in its footer. You can add it like this.
View footerView = ((LayoutInflater) ActivityContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE)).inflate(R.layout.footer_layout, null, false);
ListView.addFooterView(footerView);
You can use FrameLayout as the root and then you can place your LinearLayouts on top of the ListView.
http://developer.android.com/reference/android/widget/FrameLayout.html
Some credit goes to Arsalan Shah for his suggestions.
This is the final version of how I solved my problem (kind of hacky):
First I check how many elements I have in a list view then depending on that and depending on the device and orientation mode (portrait or landscape) I inflate eather the layout in my question or another layout with listview footer that Arsalan Shah suggested.
Example:
If the device is below 7" and it is in landscape mode and the number of items in my list is above 4 I will use my layout otherwise I will use Arsalan Shah suggestion. I sort of tested for what the number of items on which layout/device should be for what layout to find the best case scenario for my design.
Hope this helps anyone else that might have the same problem.
If anyone has a suggestion how to do all this in only one layout then please comment below.
Related
I have a layout contain one image and 3 text field
I've tried to align the image to right and text field to left but I've failed
I've used
android:layout_gravity="right" for image and left to text but it did not work also I've used end and start in gravity with no success
this is the layout code:
<?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="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:layout_marginBottom="2dp"
android:orientation="vertical"
android:background="#drawable/card_background">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/listthumb"
android:layout_width="80dp"
android:layout_height="50dp"
android:layout_gravity="center_vertical"
android:contentDescription="Rss video thumbnail"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/listtitle"
style="#style/listTitle"
android:maxLines="3"/>
</LinearLayout>
<TextView
android:id="#+id/shortdescription"
android:layout_width="wrap_content"
android:ellipsize="end"
android:maxLines="2"
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/listpubdate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="11dp"/>
</LinearLayout>
</FrameLayout>
Try to use a <RelativeLayout> instead of a <LinearLayout>
With the RelativeLayout you could place a widget depending on the position of another widget
Here the Relative Layout description
Hope this will help, I have not had time to test....
One linear layout should have vertical orientation and contain the 3 text fields.
One linear layout should have horizontal orientation and contain both the above linear layout and the image.
To push two views to the edges of the screen, you can also give each a left/right margin and then put a blank view with weight = 1 in between them.
Please read a bit more on how layouts work on Android and the different types available to you. A LinearLayout will stack the containing Views either Horizontally or Vertically one after the other. A FrameLayout is simply a container and the items within have to position themselves. RelativeLayout allow you to position your views with a relative reference to other views (in your case, you can position your ImageView, and then your 3 TextViews relative to where the ImageView is).
If you can use LinearLayout instead of RelativeLayout, you should do so, as RelativeLayout is always slower, due to having to perform two passes prior to rendering as it needs to measure each view and then also perform the layouts based on that. You might be looking for something like (pseudo-code):
<LinearLayout orientation=horizontal>
<LinearLayout orientation=vertical>
<TextView />
<TextView />
<TextView />
</LinearLayout>
<ImageView />
</LinearLayout>
You have not described your question well . Check below code if it works .
You just forgot to add orientation in linear layout containing one text view and a Image view .
Add Orientation to Your Linear Layout.
In a layout file I have a Listview whose size can grow/shrink dynamically. I have a button btn_rec_add and it's click event I add an item in the ListView. I have tried many changes in the Layout file but haven't been able to make the button shift its location based on number of items in the ListView. If I keep the button in the same RelativeLayout which has the ListView, then the button moves dynamically which is exactly how I want but I can't see the button after adding 5 or more elements in 4.3 inch display phones. If I keep the button outside the RelativeLayout of the ListView, then it is fixed on the screen.
Currently, the btn_rec_add is fixed to the bottom of the layout. Can someone please help me solve this problem.
Here is the XML code:
<?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="#drawable/bg" >
<ImageView
android:id="#id/top_bar_view"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#drawable/top_bar"
android:contentDescription="#string/content" />
<TextView
android:id="#+id/txt_recipients"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="8dp"
android:padding="8dp"
android:text="#string/text_recipients"
android:textColor="#FFFFFF"
android:textSize="16sp" />
<ImageButton
android:id="#id/btn_back"
android:layout_width="80dp"
android:layout_height="50dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:contentDescription="#string/content"
android:paddingTop="6dp"
android:src="#drawable/ic_back" />
<RelativeLayout
android:id="#+id/Rlayout_recipients"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#id/btn_rec_add"
android:layout_alignParentLeft="true"
android:layout_below="#id/top_bar_view" >
<ListView
android:id="#+id/rec_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:divider="#null"
android:dividerHeight="0dp"
android:paddingTop="20dp" />
</RelativeLayout>
<ImageButton
android:id="#+id/btn_rec_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:contentDescription="#string/content"
android:src="#drawable/icon_add" />
</RelativeLayout>
If I understand correctly, you want the behavior of the button to be as follows:
Appear below the last ListView item if the ListView does not extend to fill screen
If the ListView extends the full height of the screen, the button should be at the bottom of the screen, but the list should remain scrollable
If my understanding is correct, you should place your ListView and your button in a LinearLayout as follows:
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ListView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<Button
android:layout_width="match_parent"
android:layout_height="#dimen/button_height"
android:background="#drawable/button_image" />
</LinearLayout>
The effect of the above layout is as follows:
Layout in which items are vertically placed
Layout which will be as wide as parent, but as tall as ListView and Button
ListView will take up all of the space in the layout that the button does not occupy (this is layout_weight="1" whereas Button has no layout weight so it will simply fill as much space as it needs as defined in this case by #dimen/button_height)
Great Android layout question!
Your Problem is related to User Experience.
You have to decide whether user will like to scroll to end of the list to press add button
or user want to add without scrolling to end of list.
Since you only have two options with our scenario,
either keep add button fixed or add it as footer of listview.
Anyone know how to set a View (Button) in the middle of another View ? For example i want that the two Buttons on the top or adjust with the middle of the Button connexion. I presice that there is something in the left of my parent view so i cannot align with the layout, thanks
what i have :
what i want :
Place both buttons inside a LinearLayout. The LinearLayout's orientation should be horizontal. Give each button layout_weight of 1. Example:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<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_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
</LinearLayout>
You can set android:gravity="center"(or just android:gravity="center_vertical" on your demand) to its parent if you are using LinearLayout.
If you are using RelativeLayout, then you can set the view wherever you want by using layout_alignParentBottom, layout_centerHorizontal, ... and other attrs.
I am not very sure where do you want to put the two buttons at, please try above solutions and give more details (maybe your current xml) if it still can not be solved.
The row of my ListView is made of two TextViews:
I have to position the first TextView at the leftmost position and the second TextView at the rightmost position. How can I achieve this?
(Minimum API support should be at least 2.3 Gingerbread)
Simple make a layout xml file, which will be inflated into each row and in that layout you can use for example android:gravity="left" and android:gravity="right" for first and second TextView
You need to implement Custom List Adapter and in the Layout add RelativeLayout with two textview one aligning to left with parent and one with right.
See ListView Customization
and Custom List adapter
Best practice it is using RelativeLayout for this purpose
<?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:paddingLeft="16dp"
android:paddingRight="16dp"
android:layout_gravity="center"
>
<TextView
android:id="#+id/txtViewTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView
android:id="#+id/desk"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/txtViewTitle"
/>
</RelativeLayout>
Only the following markup worked for me:(tested on Android 2.3 device)
For the 1st TextView:
android:layout_alignParentLeft="true"
android:layout_alignParentRight="false"
For the 2nd TextView:
android:layout_alignParentLeft="false"
android:layout_alignParentRight="true"
I have a LinearLayout with a number of TextView followed by a ListView at the bottom - see code below.
The problem is the TextView/CheckBox's take around 75% of the screen - ListView then has a scroll inside it at the bottom, not massively usable - how do I disable the ListView scroll and enable the whole LinearLayout Scroll. Please provide some example code.
<LinearLayout android:orientation="vertical"
android:layout_margin="5dip"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout android:layout_width="fill_parent"
android:layout_margin="5dip"
android:layout_height="wrap_content"
android:background="#CCCCCC">
<TextView android:id="#+id/_text_title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/text1"
android:layout_marginTop="14dip"
android:textColor="#FFFFFF"
android:gravity="center_horizontal"
android:textSize="17dip"
android:textStyle="bold" />
<CheckBox ..../>
<CheckBox ..../>
<TextView android:id="#+id/_text_title" ..../>
<CheckBox ..../>
<CheckBox ..../>
<ListView .../>
</LinearLayout>
Never put a scrollable view inside another scrollable view. It will not work. if you run into such a problem you have a UI design flaw. An UI redesign/rethink is imminent.
Ok, So I found the solution to this.
I dont have the code to hand, but roughly speaking what I did was,
create new class extending ListView
Override the onMeasure method,
Using the data set I have - I know the hight of each row, I calculate the height of the list and set this manually.
I also faced the same problem. To remove this you have to put your list view in sap rate layout.