I am new to Android and am reading Wrox's professional android 4 app dev book. In chapter 4 of the book it explains how to modify the existing text view. The problem i am facing is that the listview in my app hides the edit text box. Its hidden (can be seen in the background) but still works that is more stuff can be added to the list through it. Below is the code for my main activity 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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<EditText
android:id="#+id/myEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:contentDescription="#string/addItemContentDescription"
android:hint="#string/addItemHint"
/>
<ListView
android:id="#+id/myListView"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</RelativeLayout>
and my todolist_item xml
<?xml version="1.0" encoding="utf-8"?>
<com.example.wroxexample.ToDoListItemView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:scrollbars="vertical"
android:textColor="#color/notepad_text"
android:fadingEdge="vertical"
/>
The first option you have is to use a LinearLayout instead of a RelativeLayout.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<EditText
android:id="#+id/myEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:contentDescription="#string/addItemContentDescription"
android:hint="#string/addItemHint"
/>
<ListView
android:id="#+id/myListView"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
A RelativeLayout will allow you to position the elements relatively to the others.
On the other hand a LinearLayout will position the elements one below the other in the order they appear in the xml file.
The second option you have is to keep your RelativeLayout and just add the following tag to your ListView:
android:layout_below="#id/myEditText"
This will position the ListView below the EditText.
Try this:
<?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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<EditText
android:id="#+id/myEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:contentDescription="#string/addItemContentDescription"
android:hint="#string/addItemHint"
android:layout_alignParentTop="true"
/>
<ListView
android:id="#+id/myListView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/myEditText"/>
</RelativeLayout>
Use a LinearLayout and the property android:layout_weight
http://developer.android.com/reference/android/widget/LinearLayout.LayoutParams.html
Try something like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ListView
android:id="#+id/myListView"
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:entries="#array/testea"
android:layout_height="wrap_content"/>
<EditText
android:id="#+id/myEditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/addItemContentDescription"
android:hint="#string/addItemHint"
/>
</LinearLayout>
This way ListView will grow to fill only the unused space.
Timothee got there before me but ill just add a little more.
you can, as he says, use a linear layout, or as user1387035 says, you can set the listview to be below the editText.
Relative Layout means "i want to lay things out relatively" and if you dont tell things where to go they will just float to where the 'gravity' is pulling them. The default gravity is top - so I'm guessing your items both ended up bunched at the top left?
As a rule of thumb - do you want your items to come one after another, bunched together (either horizontally or vertically)? if yes then use linear layout. If you want them to be pushed in different directions, use a relative layout. There are some exceptions, normally involving the "weight" attribute you can set in a linearlayout. (here's one I've just had to use: http://www.curious-creature.org/2010/08/15/scrollviews-handy-trick/)
If you have a Relative layout and are just using the layout_below/above attributes, without any 'alignParentBottom' or other thing set, then you probably just want a linearlayout
In your case I would say it sounds like you want Timothee's solution. If you want a little separation between the objects, you can use padding/margins to space them a little.
As for gravities, here is a useful blog entry that helped me get my head around LinearLayout's gravities (as well as generally): http://sandipchitale.blogspot.co.uk/2010/05/linearlayout-gravity-and-layoutgravity.html
Related
I have a login layout with two EditText and a Button. When I'm typing some text in EditText, as the keyboard open it overlap the some of my layout. I try to scroll up but not able to scroll up layout to be visible. Ｉ'm using Relative Layout to create it. How to solve it?
Thank you.
Place your EditTexts and Button inside a ScrollView. Whatever is inside ScrollView can be scrolled. So your problem will be solved.
Note that ScrollView can host only one child. So you have to place all your Views inside a ViewGroup like LinearLayout or RelativeLayout
Although Julia Zhao's answer is correct, it uses RelativeLayout. If you use RelativeLayout you have to do more work to make your Views appear one below the other. So I suggest you to use LinearLayout with android:orientation="vertical" inside it. It will automatically place one View below the other without any extra effort. So you won't issues like one View overlapping on other.
<?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="wrap_content">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="UserName"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:hint="Password"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="Login"/>
</LinearLayout>
</ScrollView>
Try nesting everything in a ScrollView, hope this helps.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#id/RLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
xmlns:android="http://schemas.android.com/apk/res/android"
>
// Your code
</RelativeLayout>
</ScrollView>
I have an activity Which has Text to show then Some content under that then a list view.
While some content could be a picture, relative layout, Video control, or a linear layout. Depending upon the data it got from previous activity.
Is that possible to do that or I have to make separate layouts for all items?
You need a layout like this:
<?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:id="#+id/textview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TextView" />
<FrameLayout
android:id="#+id/flSpecialContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</FrameLayout>
<ListView
android:id="#+id/listView1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</ListView>
</LinearLayout>
You can add any View you want in code to the FrameLayout (flSpecialContainer) based on what you need.
you can create all possible items in one layout and set visible and gone them depend on data you receive
in this case you don't need create them in code , and can preview activity layout in design mode.
As easy as it seems to be, as stubbornly this ListView won't center itself (or it's content within - doesn't matter to me).
This is activity layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:context="com.drobiazko.den.mobineon.MainActivity"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center_horizontal"
android:background="#drawable/bg">
<RelativeLayout android:id="#+id/clock_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<!--<RelativeLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/holo_blue_dark">-->
<com.drobiazko.den.mobineon.ListViewRowsHeight
android:id="#+id/listview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:overScrollMode="never"
android:scrollbars="none"
android:divider="#null"
android:listSelector="#android:color/transparent"
android:persistentDrawingCache="scrolling|animation"
android:background="#android:color/holo_green_dark" />
<!--</RelativeLayout>-->
</LinearLayout>
This is ListView's item layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView android:id="#+id/btn_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/custom_btn_icon" />
<TextView android:id="#+id/btn_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/custom_btn_name" />
<TextView android:id="#+id/btn_count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/custom_btn_count" />
</RelativeLayout>
I've tried everything (including simplifying layout to max), but it still won't go.
Funny that the first relative layout clock_container - centers like a charm, due to parent LinearLayout's android:gravity="center_horizontal". Why won't ListView?
Added later:
Inspired by FOliveira's answer, I've done some investigation and found that:
everything works fine, parent LinearLayout has android:gravity="center_horizontal" and centers his children respectfully. The reason for ListView's children are left-aligned is that ListView takes all possible width despite his android:layout_width="wrap_content" attribute.
Anyone knows why is that?
First of all , i would remove the first linear layout and stay only with the relative layout as the parent.
After having the relative layout as the main parent , set the CENTER_IN_PARENT attribute to true.
The mistake you are making is that you are setting the gravity of Linear Layout child to center horizontal, which is correct, but the only children being affected by this option is the Relative layout itself.
I've decided to use 2 RelativeLayouts for my app, one Layout for one portion of child Views on the screen to the left, the other for child Views to go to the right.
The problem is I don't know how to lay them out in XML so that the middle white space isn't included when I inflate my Layout.
This is what I want.
When I use 1 RelativeLayout, the middle white space is filled with the RelativeLayout, and I can't touch anything behind it.
Thank you very much for reading.
Do something similar to the following example.
This will create a LinearLayout with 2 RelativeLayouts using layout_weight to space the RelativeLayouts and then you can populate the RelativeLayouts with whatever you want.
The Buttons are just place holders for the example.
<?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="fill_parent"
android:orientation="horizontal" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" >
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TEST1" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" >
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TEST2" />
</RelativeLayout>
</LinearLayout>
I need your advice regarding my design and if you have a better idea (or you agree with me) that it is good. for some reason I have a feeling it is a "stone age programming style" but lets see.
Basically I have my xml relative layout. In the center (vertical and horizenatlly). I want to display "either" 3 buttons OR 3 texts depending on some user input. So what I did is the following:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clipChildren="false"
android:clipToPadding="false" >
<RelativeLayout android:id="#+id/Buttons"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" >
<Button1 .../>
<Button2 .../>
<Button3 .../>
</RelativeLayout>
<RelativeLayout android:id="#+id/Texts"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" >
<TextView1 .../>
<TextView2.../>
<TextView3.../>
</RelativeLayout>
</RelativeLayout>
Depending on the user input in the code I set visibility to either Visible or Invisible
Is this alright? and if not what do you suggest?
What you need is View.GONE, and View.VISIBLE.
With View.GONE - the layout doesn't occupy any space (almost as if it didn't exist at all). If you use View.INVISIBLE, to the user, the view (buttons, or text in your case) will not be visible, but they will still be there on the screen, thus shifting the other view (buttons, or text) up or down (the view won't be in dead center).
TIP: You can use 'android:layout_centerInParent' instead of 'android:layout_centerHorizontal' and 'android:layout_centerVertical'.
In my opinion, what you have done may be primitive, but it is simple, which is good :) But if you still want some options and make life complicated, then
Put each of the blocks in a separate xml and use include.
Make 2 views and then use ViewFlipper to flip them based on user requirements.
But for the simple requirement that you have, I think u r doing fine.
The include option would work something like this,
layout_1.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/Buttons"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" >
<Button1 .../>
<Button2 .../>
<Button3 .../>
</RelativeLayout>
layout_2.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/Texts"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" >
<TextView1 .../>
<TextView2.../>
<TextView3.../>
</RelativeLayout>
your main_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clipChildren="false"
android:clipToPadding="false" >
<include layout="#layout/layout_1" />
<include layout="#layout/layout_2" />
</RelativeLayout>
The include helps you in making reusable layouts and also helps in keeping your xml files grow out of proportions, specially when you have complicated UIs.
First option is:
You can add all the three buttons or textviews in Linearlayout and center it in parent by using android:layout_centerInParent.
Second option is:
You can center the middle button out of all the three buttons and adjust the other two buttons with respective to the middle button. Same way we should also repeat this for textviews. In this option, we should make all the three views visibility to View.GONE explicitly.