I have a background in iPhone development, which may be a cause of some of my confusion with Android, which I am very new at developing.
My question is this: How to I create two TextViews, and specify their exact location on screen? For example, on the iPhone, I would create a UILabel, generate a rectangular frame that specified the label's size and position, and then set this rectangle to the frame property of the UILabel.
If you can help me understand the similarities with Objective C and iOS' UILabel, that would be most helpful.
On Android, we don't use absolute screen positions. This is highly discouraged. It's pretty understandable that you think this way if you are coming from iOS. But you need to revise your habits.
Instead of absolute positions, we use layouts, such as LinearLayout, RelativeLayout or FrameLayout. All of these allow you to arrange your views dynamically. And in many cases, it will automagically adapt to the screen size, which vary a lot from device to device.
Actually, there's nothing exotic about dynamic layouts. Many major UI toolkits, such as GTK, or Qt, work similarly. Pixel position are a bad idea in my opinion, except maybe in the Apple world, where the OS and the hardware are tightly coupled, but this is an exception actually.
So, in your case, all that you need is to put your text views into the appropriate layout. Please read the documentation and tutorials about the different types of layouts mentioned above to decide which one is best. The question is how you want your views to be placed relatively to each other.
Create a basic Android project in eclipse. You will be having a main.xml layout file in your project. You can open it in Eclipse using Ctrl+Shift+r and keying in main.xml
copy paste this in your xml after clearing its content.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:id="#+id/textView1"
android:layout_width="fill_parent"
android:text="TextView One"
android:layout_height="fill_parent"
android:layout_weight="1"></TextView>
<TextView
android:id="#+id/textView2"
android:layout_width="fill_parent"
android:text="TextView Two"
android:layout_height="fill_parent"
android:layout_weight="1"></TextView>
</LinearLayout>
Related
So I received a graphic interface for an application I'm building. It has some images and texts and the images are set in a specific way, and some text goes inside or on top some images.
In the android project I opened I get the default activity which is RelativeLayout, but it's hard to set all the elements exactly where they should be with the designer and editing the XML directly seems like a pain.
I also see that elements that I add always "align" to something or right/left to some other element - but what I really want to do is place them at a specific location (so the end result will be the same as the design I got). If I was building it for the web I would have used absolute positions.
What is the correct way to go about this in android?
Thanks
EDIT
I managed to start implementing some elements of the design in a manner that makes them look ok on the eclipse Graphical Layout and on my device.
Is this XML ok - or am I using it wrong:
<ImageView
android:id="#+id/imgClouds"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:contentDescription="#string/layout_activity_main_imgClouds"
android:scaleType="centerCrop"
android:src="#drawable/clouds_ltr" />
<ImageView
android:id="#+id/imgBaby"
android:layout_below="#+id/imgClouds"
android:layout_width="50dp"
android:layout_height="52dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="5dp"
android:layout_marginTop="75dp"
android:contentDescription="#string/layout_activity_main_imgBaby"
android:src="#drawable/baby" />
<ImageView
android:id="#+id/imgBubble"
android:layout_toLeftOf="#+id/imgBaby"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="false"
android:layout_alignParentTop="false"
android:layout_marginLeft="56dp"
android:layout_marginTop="-5dp"
android:layout_marginRight="5dp"
android:src="#drawable/bubble_ltr" />
</RelativeLayout>
This is primarily opinion based, but there's certain things most android developers will agree, "Absolute Position" is not an option in Android, because of the OS Nature like Fragmentation in Device Screen Sizes/Densities, having an absolute position of the elements will lead to a crappy app, it will look good only in the device you are using and chances are that all the other devices will not look as you expect, you really need to look at the android design patterns and best practices to avoid a terrible GUI implementation, RelativeLayout is the best way to go, in android you must learn to love it...
Also the sooner you get used to work with XML directly in layouts will be better for you, most IDEs that help out with this functionality end up adding a lot of unnecessary code, once you go through the learning curve to build layouts using XML it totally worth it.
Hope it helps!
Regards!
I have an activity with four buttons, when i play it on the emulator everything is OK, but when i test it on my mobile the buttons grow bigger or actually the background or the screen gets smaller but the buttons stay the same, so it looks bigger.
Can i make the buttons adapt with the screen the same way the background of the activist do?
Here is my xml file
<?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/mainn"
android:gravity="top" >
<Button
android:id="#+id/b_labor"
android:layout_width="250dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="114dp"
android:background="#drawable/labb" />
<Button
android:id="#+id/b_mosul"
android:layout_width="250dp"
android:layout_height="wrap_content"
android:layout_above="#+id/b_labor"
android:layout_alignLeft="#+id/b_labor"
android:layout_marginBottom="32dp"
android:background="#drawable/ninaa" />
<Button
android:id="#+id/b_trafic"
style="#style/Theme.Transparent"
android:layout_width="250dp"
android:layout_height="wrap_content"
android:layout_above="#+id/b_mosul"
android:layout_alignLeft="#+id/b_mosul"
android:layout_marginBottom="28dp"
android:background="#drawable/traficc" />
<Button
android:id="#+id/b_nati"
android:layout_width="250dp"
android:layout_height="wrap_content"
android:layout_above="#+id/b_trafic"
android:layout_alignLeft="#+id/b_trafic"
android:layout_marginBottom="34dp"
android:background="#drawable/natiii"
/>
I think you are new to Android so you need to learn several things before creating UI elements on android devices. UI is not simple to create you should understand different concepts to create complex GUI in Android. The main problem in your above case is each device have different resolutions and if you Hard code your button then it will not adapt according to your device resolution and screen size. So before creating any UI element you need to keep some of the points in your mind:
Never try to hard code anything specially GUI parameters because these can change according to devices.
Always create and update your GUI from UIThread only.
Use asynchronous tasks, services and threads to perform heavy tasks and background tasks.
Always try to keep UI thread with minimum load.
To learn more about GUI characteristics try to explore LayoutParams for different layouts and views.
There are lot more thing you need to learn. According to me while creation of GUI you should start from Relative layouts and try not to use Absolute layout ever.
You can check below links for some help:
https://stackoverflow.com/questions/2992754/ui-design-tips-and-tutorials-for-android
http://mobile.smashingmagazine.com/2012/07/26/android-design-tips/
As we all are aware of different screen sizes of android devices , We should check for the alignment of buttons in different devices , For start check this link Developer.google
There is stackoverflow answers , that will help you
screen size vs button position
I'm fairly new to Android development and planning to build a simple news reader app to further familiarize myself to the platform.
The problem is; I want each of the news-item to look like Google+'s post item below:
Well, basically a big headline picture with a title and some description underneath.
I tried to re-create it using a Button (because the whole thing needs to be clickable by the user) while setting a drawable at the top of the text. It worked quite nicely.. until I decided to add more drawables to it:
Here's my XML code (although I doubt anyone would need it):
<?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" >
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/ic_launcher"
android:drawablePadding="8dp"
android:drawableTop="#drawable/temp_jakarta"
android:text="Button" />
</RelativeLayout>
Can you tell me why is this happening or maybe, suggest me another way to accomplish this?
Thanks in advance!
p.s., I'm pretty sorry about the link; as a new user, SO didn't allow me to post images just yet. :(
Put everything inside a RelativeLayout and place one relative to others (event on top, this doesn't matter at all) using the layout_below/above/left_of/right_of/... etc.
See http://developer.android.com/guide/topics/ui/layout/relative.html for usage, http://developer.android.com/reference/android/widget/RelativeLayout.html for a complete reference of the RelativeLayout class and "Android Layout Tricks" series in the Developer Blog for some tips_
http://android-developers.blogspot.com.es/2009/02/android-layout-tricks-1.html
http://android-developers.blogspot.com.es/2009/02/android-layout-tricks-2-reusing-layouts.html
http://android-developers.blogspot.com.es/2009/03/android-layout-tricks-3-optimize-with.html
I want to achieve the following:
It works with the following layout:
<?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="horizontal">
<LinearLayout
android:layout_weight="3"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:orientation="vertical" >
<fragment
android:name="com.bobjohn.DetailsMenuFragment"
android:id="#+id/detailsMenuFragment"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="6"
/>
<fragment
android:name="com.bobjohn.SummaryFragment"
android:id="#+id/summaryFragment"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_margin="10dp"
android:layout_weight="4"/>
</LinearLayout>
<TextView
android:layout_width="0dp"
android:layout_weight="7"
android:layout_height="fill_parent"
android:text="Test Text"/>
</LinearLayout>
However, I get the warning about nested weights being bad for performance. I understand the error but I don't know how to express this layout in another way. What is the alternative?
There are NEW updates in SUPPORT Libs, Please check Accepted Answer too.
Updated Answer :-
Whenever you create any view, It calls it's measure events to know the height width of view on the screen, If you are not using WRAP_CONTENT or FILL_PARENT or FIXEDSIZE and using Weights then it's becoming more complex to render your layout on the screen.
Means,
First your main layout is rendered and calls it's measure..then based on weight all child views calls it's measure events recursively so it consumes more time to load.
So, One should avoid nesting of weights.
Alternative to Nested weights :-
You should consider using different layout and drawable folder specific to different sizes. Write your views in your XML with specific height-width OR make it wrap_content and use specific background images OR make it fill_parent.
I believe that as developer we may be wrong several time, but as creator Android (Lint) they may be wrong only in rare case, should listen to those warnings to make your code better.
BELOW ANSWER WAS WRITTEN WITH LACK OF KNOWLEDGE ABOUT ANDROID LAYOUT
AFAIK, I think you have done right, this is the best written XML for the same.
You have used the weight attribute perfectly as it should have been used. You just ignore the Warnings.
What is the alternative?
I have coded all my XML in the same way in my projects so This has been the best alternative to me,So I dont think there is any other alternative to CODE the XML to get Such layout until and unless you use RelativeLayout as parent layout with some fixed sizes height and width of the child views. Still I advice you keep it as it is.
I would have deleted this answer as I still don't completely know Android Layouts but keeping it to receive new comments and answer based on this
Yes we have the alternative for nested LinearLayout weight by android's percent support library
Code and concept HERE !
GitHub Project HERE !
Consider this simple layout where I have totally avoided weight property of LinearLayout
<android.support.percent.PercentRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/fifty_huntv"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#ff7acfff"
android:text="20% - 50%"
android:textColor="#android:color/white"
app:layout_heightPercent="20%"
app:layout_widthPercent="50%" />
<TextView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_toRightOf="#id/fifty_huntv"
android:background="#ffff5566"
android:text="80%-50%"
app:layout_heightPercent="80%"
app:layout_widthPercent="50%"
/>
</android.support.percent.PercentRelativeLayout>
Really awesome !!!
I think (and I will probably be flamed for this), but again I think my phone has a quad core processor to rival (if not utterly destroy) most peoples home PC's.
I also think this kind of hardware capability is the future of phones.
So I come to a conclusion, that as long as you are not getting carried away with nesting (in MHO a layout should never be more then 4 levels deep, and if it is you are probably doing it wrong), your phone could care less about having weights.
There are many things you can do that will have a much more far reaching effect on performance, then worrying about your processor doing some extra math.
(please note that I am being slightly humorous, and so not to take anything too seriously from this post, other then the idea that there are other things you should optimize first, and that worrying about a 2-3 level deep weight is not helping your health)
I'm trying to make an Android layout like the one below. I have a couple of questions:
1 - what is the element called that FB uses for posts? Ie, it doesn't look like a text view, but the element looks like it separates each post with a divider line. Also, the text style is different for a person's name and how long ago they posted. I'm looking to duplicate this (minus pictures) but I can't find the right UI elements.
What is the element called at the bottom? It's like a static menu. IE, it's the same as a menu but instead of pressing "menu" to access it, it's on the page at all times.
Finally, are there good tutorials/examples on how to make nice looking, professional layouts like the apps on the market? The tutorials that I've found on layouts are really basic. I'd like to understand what elements exist, what all of the attributes mean and see examples, etc. So far I'm only able to see the capabilities from other applications. I'd like to have a handbook or some type of some type of reference manual to go to.
For the "fancy" text views you can make a linear layout that hosts a <RelativeLayout>:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_weight="0">
<ImageView
android:id="#+id/userPhoto"
android:layout_height="64dip"
android:layout_width="64dip"
/>
<TextView
android:id="#+id/userFullName"
android:layout_height="25dp"
android:layout_width="fill_parent"
android:layout_marginLeft="70dp"
/>
</RelativeLayout>
Once you have a relative layout you can add different views inside of that to create a sort of customeized view.
As far as good examples I would look at this book. It's easy to understand and very helpful on such things.
I found a really helpful tutorial to solve a problem in ListView Row design a bit like yours. It goes a bit further explaining how to do Async Image loading but the first part should help you.
Also, I might be wrong (I am still a bit new to this) but I think the answer above lacks a TextView for the actual message besides the userName and the relative positions of the elements since it is a relative layout. Something like:
<TextView
android:id="#+id/userName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#id/userPhoto"
android:layout_toRightOf="#id/userPhoto"
android:textSize="17dp"
android:textStyle="bold" />
<!-- actual message -->
<TextView
android:id="#+id/message"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/userName"
android:layout_marginTop="1dip"
android:layout_toRightOf="#id/userPhoto"
android:textSize="15dp" />
The key in organizing a relative layout is:
android:layout_alignTop="#id/userPhoto"
android:layout_toRightOf="#id/userPhoto"
and
android:layout_below="#id/userName"
android:layout_toRightOf="#id/userPhoto"
I might be wrong but if it helps, great! Just adding my bit to the other answer.
Cheers