UI Layout Issues - android

First let me attempt to layout what I am trying to accomplish here.
EditText
EditText SearchButton
ListView (search result. there can be only one, ListView with adapter and height of wrap_content seems to work for this, there is a button to add the result to the ListView below. Once the add button is clicked this ListView collapses, which is exactly what I am after)
TextView (label for objects added)
ListView (list of objects added, again I'm using an adapter for the list row layout)
SaveButton
I was going to paste the code that I have but there is just too much to go through. The issues I am having are with the ListViews. Basically, the ListView that contains the objects added will end up pushing the SaveButton off of the screen. I have tried a ton of solutions laid out on this and many other sites but they just don't seem to work right.
Basically, I want the SaveButton to always be at the bottom and I don't want it to get pushed off the screen when the ListView gets too big. The only solution I have found to "work" was to explicitly set the height of the ListViews. However, this causes problems when going from tablet to phone (Nexus7 & Galaxy S3). I thought that using dip for sizes would prevent this from happening but apparently not.
If anyone has a good strategy for creating this type of layout that would be great. Or even a good resource for learning how to use Android's clunky UI system (it really leaves a bit to be desired).
Edit: here is my attempt at using a RelativeLayout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/main_background"
android:orientation="vertical" >
<EditText
android:id="#+id/plan_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:ems="10"
android:hint="#string/plan_name_hint"
android:textColor="#color/text_color" >
<requestFocus />
</EditText>
<EditText
android:id="#+id/object_search_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/plan_name"
android:ems="10"
android:hint="#string/search_objects_text"
android:textColor="#color/text_color" >
</EditText>
<Button
android:id="#+id/objects_search_button"
style="#style/button_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/object_search_text"
android:layout_below="#id/plan_name"
android:layout_alignParentRight="true"
android:background="#drawable/black_button"
android:text="#string/search_objects_button_label" />
<ListView
android:id="#+id/search_result"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/object_search_text"
android:background="#color/main_background"
android:textColor="#color/text_color" >
</ListView>
<TextView
android:id="#+id/objects_list_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/search_result"
android:paddingBottom="8dip"
android:paddingLeft="8dip"
android:text="#string/plan_objects_list_label"
android:textColor="#color/text_color"
android:textSize="22sp"
android:textStyle="bold" />
<ListView
android:id="#+id/plan_objects"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/objects_list_label"
android:background="#color/main_background"
android:textColor="#color/text_color" >
</ListView>
<Button
android:id="#+id/save_plan_button"
style="#style/button_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#drawable/black_button"
android:paddingLeft="8dip"
android:text="#string/save_button_label" />

If you think the Android UI system is clunky, you obviously haven't tried to understand it. For most things its extremely well designed.
If you want a certain view (or views) to always be at the bottom, then you want to make your screen a RelativeLayout and put android:layout_alignParentBottom="true" on those element(s). Then add android:layout_above="id" on whatever you want to be above them, where id is the id of the element you want at the bottom.

Make the SaveButton and ListView at the same hierarchy level. e.g if your parent layout is RelativeLayout in your SaveButton add this property android:layout_alignParentBottom="true"

It looks like the only real solution here is to use explicit sizes for the list views and plan accordingly for different screen sizes (i.e. create different layouts for different screens and outlined here.). I was hoping for something a little more generic. Oh well.

Related

Android ScrollView with heavy layout Memory issue

In my app, I made a list view in MainActvity it opens 12 fragment. To open them I used fragmentTransaction.replace. Every fragment has swipe tabs with 3 fragment. In one of them I used two scroll view. I divide the screen
left and right side.Like this [ scroll view | scroll view ]
I wrote every codes in layout file. (Java files are empty I don't know what to write).
Here what scroll views have. (There are 20 items in it)
<ScrollView
android:layout_width="0dp"
android:layout_height="match_parent"
android:isScrollContainer="false"
android:layout_weight="1">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="400dp"
android:layout_height="400dp"
android:src="#drawable/akrep_ahmet_kural"/>
<TextView
android:layout_width="210dp"
android:layout_height="wrap_content"
android:background="#color/burc_akrep"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Ahmet Kural"
android:textColor="#color/white"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"/>
<TextView
android:layout_width="210dp"
android:layout_height="wrap_content"
android:background="#color/burc_akrep"
android:text="10 Kasım 1982"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:textColor="#color/white" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="400dp"
android:layout_height="400dp"
android:src="#drawable/akrep_alp_kirsan" />
<TextView
android:layout_width="210dp"
android:layout_height="wrap_content"
android:background="#color/burc_akrep"
.
.
.
The problem is when user click the scroll view tab it comes slowly but scrolling has no lags. Then the user go back memory usage stay the same. Then user open another scroll view tab, memory usage increse again and it becomes like stairs. After that force close comes.
So what to do?
You should use either Listview or RecyclerView as it wont load all the views at the beginning but only what are visible plus one or two more which will be quite less resource-intensive than your approach.
It does look like you should be using a ListView and an adapter.
Please also note that "wrap_content" is quite unhelpful for efficiency as changes to the width (for example, setting the text in a TextView with width set to "wrap_content") can cause the entire view to be re-drawn, slowing down the application.

placing TextView, EditText and Button in Android Layout xml file

I am new to android programming and am trying to understand the android architecture and how are applications built around it.
So there is no real world need for this as of now. Its just some experimentation that I am doing to learn the stuff. What I want here is 3 different views, TextView, EditText and Button, horizontally next to each other. To achieve this here's the activity_main.xml that I am using : -
<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: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" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hello_world" />
<EditText android:id="#+id/edit_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="#string/edit_message" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/text_to_appear_on_button" />
</LinearLayout>
On running the MainActivity.java, that has setContentView(R.layout.activity_main);, in the onCreate(), I get the TextView and the EditText widgets on the screen, horizontally next to one another, but not the Button. I wonder why ?
And strangely I have observed that the last element inside
<LinearLayout>..</LinearLayout>
is the one that gets vanished from the screen. So if <Button .. /> is exchanged with say <TextView .. />then its the <TextView> element that will not be visible on the screen now.
Please explain what am I missing out here.
I am running the MainActivity.java on the emulator and am using Eclipse as my IDE, if this information helps further.
It depends on what you want to do. If you want three things horizontally in a LinearLayout, you will likely run out of space on the screen. To guarantee that all three fit, set:
android:layout_width="match_parent"
android:layout_weight="1"
For all 3. You can mess around with the weight as you see fit, but basically this will tell the rendering to fit all three objects on the screen horizontally, each one taking up 1/3 of the screen (if you change weight, it will be different values).
If using LinearLayout, you will probably nest multiple layouts, with a main vertical LinearLayout containing several horizontal ones. It is a valid approach, and is probably a matter of preference. LinearLayout allow for weights, which can be extremely useful because they are one way of guaranteeing things don't get cut off the screen.
RelativeLayout is another approach, wherein you specify where things on the screen are relative to each other (Left, Right, Above, Below). While these don't use weights, you can align elements with the edges of the screen and get the same effect.
As I said, the approach is largely a matter of preference, and usually some mesh of both works pretty well.
I recommend to you use relative layout for your xml ,If you use linear your widgets are assigned one by one,not your wish.its for your further developement
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="101dp"
android:layout_marginTop="50dp"
android:text="TextView" />
<EditText
android:id="#+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/textView1"
android:layout_below="#+id/textView1"
android:layout_marginTop="67dp"
android:ems="10" >
<requestFocus />
</EditText>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/editText1"
android:layout_below="#+id/editText1"
android:layout_marginTop="59dp"
android:text="Button" />
</RelativeLayout>

Easier way to create and maintain many layouts

I have got an application that is essentially a giant calculator. Within this application it has a total of 75 unique equations and each one has different number of variables and displayed results. I currently have a sliding drawer implemented with the list of the equations of them to choose from and when they click on it, I have a fragment area to put the screen for calculating it. I am currently just implementing a fragment activity for each calculation along with a layout for each one. Does anyone know what best practice is for accomplishing something with this many screens? Do I accomplish them by creating the layout on the fly in the activity? Do I keep it how it is? I am just trying to figure out if the tedious work I am doing with this can be accomplished in an easier manner (I know I have to create the activities to do the work) .
EDIT
The layouts vary in complexity depending on the calcuation. Some of them are to the nth entry from the user and requires a gridview while others will just be simple like example below:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android=blah blah
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:background="DCDCDC"
android:orientation="horizontal" >
<EditText
android:id="#+id/etTempInput"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_below="#+id/tvTempInputLabel"
android:ems="10"
android:inputType="numberSigned" >
<requestFocus />
</EditText>
<TextView
android:id="#+id/tvTempInputLabel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="10dp"
android:text="Medium_Text"
android:textAppearance="?androd:attr/textAppearanceMedium" >
</TextView>
<Spinner
android:id="#+id/spinner1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/etTempInput"
android:layout_toRightOf="#+id/etTempInput" />
<TextView
android:id="#+id/tvTempResult"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/etTempInput"
android:layout_marginTop="22dp"
android:text="Medium_Text"
android:textAppearance="?androd:attr/textAppearanceMedium" >
</TextView>
<Button
android:id="#+id/btnTempCalc"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/tvTempResult"
android:text="Calculate" />
</RelativeLayout>
really hard without seeing the layouts, but it sounds as building up the layouts dynamically ( perhaps from building-blocks in xml ) could tidy things up
The answer I came to with this is to just create each page by itself as there is no consistency between the pages. I looked at several options but none of them met my needs. So look out 75 layouts and code files here I come.

RelativeLayout crashes, LinearLayout works fine! WHY?

I'm new to Android programming (although I'm an expert in C and intermediate in Java).
I don't understand why my app crashes when I try to setContentView() with the default RelativeLayout that Eclipse automatically generates when I create a new project.
It crashes both in Emulater and on my phone.
But if I change the layout to a LinearLayout it works perfectly fine.
Can anybody give me a clear explanation to why this hapens?
Thanks
Firstly let me explain you about layouts and follow the given example:
Now let’s turn our attention to those helpful layout controls that organize other controls. The most commonly used layout classes are:
FrameLayout – designed to display a stack of child View controls. Multiple view controls can be added to this layout. This can be used to show multiple controls within the same screen space.
LinearLayout – designed to display child View controls in a single row or column. This is a very handy layout method for creating forms.
RelativeLayout – designed to display child View controls in relation to each other. For instance, you can set a control to be positioned “above” or “below” or “to the left of” or “to the right of” another control, referred to by its unique identifier. You can also align child View controls relative to the parent edges.
TableLayout – designed to organize child View controls into rows and columns. Individual View controls are added within each row of the table using a TableRow layout View (which is basically a horizontally oriented LinearLayout) for each row of the table.
try the following code for relative layout:
<?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:layout_gravity="center"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
android:padding="5dp">
<TextView
android:id="#+id/textMsg"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#000000"
android:textSize="14dp" />
</LinearLayout>
<Button
android:id="#+id/btn2"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="Contacts"
android:textColor="#342D7E" />
<Button
android:id="#+id/btn1"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:text="Send"
android:textColor="#342D7E" />
<EditText
android:id="#+id/edittext1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/btn2"
android:layout_alignParentLeft="true"
android:ems="10"
android:hint="Type a Message"
android:maxLines="5" >
<requestFocus />
</EditText>
</RelativeLayout>
let me know if it crashes again
I just had the same problem.
How I fixed it:
After changing the layout in main.xml I had the layout declared in the mainActivity.java file still as a LinearLayout.
Go into your mainActivity.java file and change it to relatively out.
Check yours it might solve it

View overlapping with RelativeLayout on Android 1.5

I am having a problem with views overlapping in a RelativeLayout on Android 1.5... Everything is working fine on Android 1.6 and above.
I do understand that Android 1.5 has some issues with RelativeLayout, but I was not able to find anything on StackOverflow or the android beginners group for my specific problem.
My layout consists of four sections, each of which are made up of a TextView, a Gallery, and another TextView aligned vertically:
Running Apps
Recent Apps
Services
Processes
When all four sets of these items are displayed everything works fine. However, my app allows the user to specify that some of these are not displayed. If the user turns off Running Apps, Recent Apps, or Services then the remaining sections all of a sudden overlap eachother.
Here is my code for the layout. I'm not sure what I am doing wrong. When the user turns off display of a section I use the View.GONE visibility setting:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_vertical"
android:layout_gravity="center_vertical"
android:background="#null"
>
<!-- Running Gallery View Items -->
<TextView
style="#style/TitleText"
android:id="#+id/running_gallery_title_text_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:paddingLeft="1sp"
android:paddingRight="10sp"
android:text="#string/running_title"
/>
<Gallery
android:id="#+id/running_gallery_id"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/running_gallery_title_text_id"
android:spacing="5sp"
android:clipChildren="false"
android:clipToPadding="false"
android:unselectedAlpha=".5"
/>
<TextView
style="#style/SubTitleText"
android:id="#+id/running_gallery_current_text_id"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/running_gallery_id"
android:gravity="center_horizontal"
/>
<!-- Recent Gallery View Items -->
<TextView
style="#style/TitleText"
android:id="#+id/recent_gallery_title_text_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/running_gallery_current_text_id"
android:gravity="left"
android:paddingLeft="1sp"
android:paddingRight="10sp"
android:text="#string/recent_title"
/>
<Gallery
android:id="#+id/recent_gallery_id"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/recent_gallery_title_text_id"
android:spacing="5sp"
android:clipChildren="false"
android:clipToPadding="false"
android:unselectedAlpha=".5"
/>
<TextView
style="#style/SubTitleText"
android:id="#+id/recent_gallery_current_text_id"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/recent_gallery_id"
android:gravity="center_horizontal"
/>
<!-- Service Gallery View Items -->
<TextView
style="#style/TitleText"
android:id="#+id/service_gallery_title_text_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/recent_gallery_current_text_id"
android:gravity="left"
android:paddingLeft="1sp"
android:paddingRight="10sp"
android:text="#string/service_title"
/>
<Gallery
android:id="#+id/service_gallery_id"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/service_gallery_title_text_id"
android:spacing="5sp"
android:clipChildren="false"
android:clipToPadding="false"
android:unselectedAlpha=".5"
/>
<TextView
style="#style/SubTitleText"
android:id="#+id/service_gallery_current_text_id"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/service_gallery_id"
android:gravity="center_horizontal"
/>
</RelativeLayout>
I ommitted the xml for the Processes section in a (somewhat vain) attempt to keep this shorter...
What can I do to make this work in Android 1.5? I don't think it is just a matter of reordering the views in the xml because it works fine when everything is displayed.
Two possible solutions:
Try setting the element's height to 0 or 1 px and visibility to INVISIBLE instead of GONE.
Wrap each Gallery/TextView in a LinearLayout set to wrap_height, and set the above/belows on the layouts instead of the subviews. Then set the subelements to View.GONE, leaving the linear layouts used for the relative positioning still visible but with wrapped height 0.
The idea with either solution is to make sure you're never positioning something relative to a view that's View.GONE; I'd suspect that's the source of the bug you're running into.
If I may ask, though... why do you even need to use a RelativeLayout here at all? From what I can see at a glance, everything here would fit fine into a vertical LinearLayout, and in fact seems to be conceptually simpler for this arrangement.

Categories

Resources