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>
Related
I am trying to design the layout of my Android project, but I must have done something wrong. Now when I try to drag the text boxes around, they just would not move on the screen. I am guessing it is one of the format setting, but not sure which one it is.
This is the XML file of how it looks:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.oldimagerevieal.MainActivity"
tools:ignore="MergeRootFrame" >
<TextView
android:id="#+id/textLat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/textLong"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium" />
</FrameLayout>
FrameLayouts use gravity to position items on a screen using the
android:layout_gravity="left|top" //whatever you want.
Unless you need the FrameLayout, you can change the root element to a RelativeLayout or LinearLayout (don't forget to specify orientation), and you should be able to drag things around like normal.
I would high recommend getting familiar with building views in XML. It will significantly help you.
Enable "Autoconnection to parent" by clicking on the magnet button in the design tools section.
I'm new to Eclipse and Android and I need to align controls to each other.
In Visual Studio, I can easily align controls and distribute spaces between them. How can I do this in Eclipse?
I got this xml. Just dragged and dropped them to layout. There must be an easy way to align and disstribute. Especially distrubute.
<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="com.example.sbs.MainActivity" >
<!-- Ders adları -->
<TextView
android:id="#+id/lblTurkce"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="42dp"
android:layout_marginTop="78dp"
android:text="#string/Turkce" />
<TextView
android:id="#+id/lblDil"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/lblTarih"
android:layout_alignParentBottom="true"
android:layout_marginBottom="166dp"
android:text="#string/ingilizce" />
<TextView
android:id="#+id/lblMatematik"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/lblTurkce"
android:layout_below="#+id/lblTurkce"
android:layout_marginTop="15dp"
android:text="#string/Matematik" />
<TextView
android:id="#+id/lblFen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/lblMatematik"
android:layout_below="#+id/lblMatematik"
android:layout_marginTop="18dp"
android:text="#string/FenveTeknoloji" />
<TextView
android:id="#+id/lblTarih"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/lblFen"
android:layout_below="#+id/lblFen"
android:layout_marginTop="24dp"
android:text="#string/tarih" />
<TextView
android:id="#+id/lblDin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/lblTarih"
android:layout_centerVertical="true"
android:text="#string/din" />
So, this is what a friend did and than I started doing too and I can align stuff pretty well.
So ,what you have to do ,is to work with LinearLayouts and their property Orientation property.
Now I don't exactly know what you want to do but I can give you a little example so that you ,hopefully understand what I am writing here.
Let's say you got 3 TextViews and you want to arrange them like two on top of the screen and the last one, you want to be below the two already aligned button.It would look pretty much like a pyramid but with the top being pointed down.
You would do this like that: The first two textViews will be put in a LinearLayout with the Orientation being set to Horizontal (so that the second textView will be in the right of the first textView but on the same line (so aligned to the first textView's right).
Now, the other one won't be necessary to be contained by a LinearLayout ,BUT, the first LinearLayout (with the first and second TextView) and the third textView have to be contained by a LinearLayout that has the Orientation being Vertical.This way the third textView is below the LinearLayout containing the two textViews.
Let me know if you need more explication.
RelativeLayout provides various alignment attributes you can use. For example, if you want to line up the left edges of two different TextViews in your RelativeLayout, you can use the layout_alignLeft attribute like so:
<?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">
<TextView
android:id="#+id/textViewOne"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:text="Text One"/>
<TextView
android:id="#+id/textViewTwo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/textViewOne"
android:layout_alignLeft="#id/textViewOne"
android:text="Text Two"/>
</RelativeLayout>
Note that I forced the first TextView to have a left margin and that the second TextView correctly left aligns to the first. If you take the layout_alignLeft attribute off of the second TextView, it will align to the parent's left edge instead.
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.
I have a layout with 4 buttons (which I am trying to get of equal size). The problem is I don't want the text on my first button to be ellipsized. I have tried many things: setting the ellipsize attribute to "none", setting the singleLine attribute to false, cutting off the paddings, none of them worked.
Everything looks fine in eclipse graphical layout, but when I try it on a real device, the said issue occurs, no matter how large the screen is.
At first, I thought it was because the paddings ( I define a custom background for the button in an .xml and I use paddings on that shape). However, removing them did not work.
<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"
android:gravity="center"
android:background="#drawable/gradient_bkg"
tools:context=".StartActivity" >
<TableLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TableRow android:layout_weight="1.0">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="15dp"
android:gravity="center">
<Button
android:id="#+id/random_words"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="15dp"
android:layout_weight="1.0"
android:background="#drawable/button_sexy"
android:text="Random two words"
android:drawableLeft="#drawable/drinks"/>
<Button
android:id="#+id/no_data"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="15dp"
android:layout_weight="1.0"
android:background="#drawable/button_sexy"
android:text="No data"
android:drawableLeft="#drawable/body_data" />
</LinearLayout></TableRow>
<TableRow android:layout_weight="1">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:gravity="center" >
<Button
android:id="#+id/result"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginRight="15dp"
android:layout_weight="1"
android:background="#drawable/button_sexy"
android:text="Result"
android:drawableLeft="#drawable/results" />
<Button
android:id="#+id/reset"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="15dp"
android:layout_weight="1"
android:background="#drawable/button_sexy"
android:text="Reset"
android:drawableLeft="#drawable/reset"/>
</LinearLayout>
</TableRow>
</TableLayout>
</RelativeLayout>
Your code is amazing and perfect. The problem you indicated will occur only for lower APIs, because you added a Theme.Holo in your manifest, which acts strange for older APIs.
Simplest solution, since you are using a custom LAF anyway, : replace Theme.Holo with Theme.Black in your manifest.
I think the problem is related to the usage of wrap_content on so many levels of your layout. I have seen that this causes the individual items trying to be smart sometimes and are auto adjusting incorrectly or at leas in an unexpected way. Try to put your buttons on top level layout to test if you can get the correct behaviour when using match_parent instead.
But in the end, playing around with combinations of wrap_content and match_parent can consume quite lot of time. A fast way forward may be to set the buttons to fixed size, but then please make sure you set them somewhat bigger than you think is enough to make sure it will work on many different screen sizes.
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.