I'm new to developing with Android, and the biggest new thing is the way the UI is rendered (relative to other views instead of absolute locations and sizes). As a result, I've been experimenting a lot with layouts, and find myself changing 1 view or even just 1 property of a view, then having to recompile and launch it back into the emulator to see the result. Is there a tool that quickly (or at least quicker) shows what a UI looks like give a layout xml file?
You can look at http://www.droiddraw.org/ but it is not perfect.
You can use Eclipse with Android Development Tools, when opening a layout file you get a preview of what looks like. Besides, ADT provides some nice features for developing and debugging in the Android platform.
When you're in the XML view, simply click the "Layout" tab on the bottom, and you'll be taken to a visual representation of your layout:
Like so:
There are some limitations for sure (e.g. text shadowing, for one, will not be depicted in this view), but it's a good way to get a general idea of how your layout is working.
Versions 2.x and higher of Android Studio render the XML in real-time in the Preview pane of the IDE and it even juxtaposes the XML and outline views side by side.
Related
I have a somewhat complex layout.xml file (353 xml lines, 16kb) with multiple nested constraint layouts. This particular xml file is only showing a blank white screen in the design tab but works well when I run it on device and emulator. I have other smaller layout files which show the design normally on android studio but it seems that there is a bug with viewing larger xml files.
Is this a known issue? I tried refreshing layout and removing android studio cache but nothing seems to work. any ideas?
I do not think it has anything to do with the code since it runs normally on device and I am not sure posting the whole xml file on SO is a good idea.
update
What I realised is that all the elements in the layout seem to be 'invisible' at the top left corner since when I hover over them the pointer turns into a hand and when I click , certain elements get highlighted in the component tree. This is a screenshot of what I am seeing:
I added android:visibility="gone" which is vital to my app. Little did I know that it also applies to the design view which I find to be really useless. I want the visibility to be gone during runtime, not on a platform where I am supposed to be tweaking the design of the UI. This is ridiculous to me.
Does anyone know If I can keep visibility="gone" but still see the design in the design view of the layout?
You can use tools:visibility="visible" for designing purposes.
It has zero effect on the view in real use.
Don't forget to keep your android:visibility="gone".
In general, use tools attributes whenever you'd like to manipulate a preview in the designer while keeping your view attributes valid for real use.
Edit:
Keep in mind that there is a huge difference between invisible and gone. More about that
Is there a quick and easy way to see how my application will look on different screen sizes and shapes? Currently, I'm going into the AVD manager, editing my device definition, and then launching a fresh emulator. It takes maybe ten minutes for each one.
They layout is defined entirely from resource files. I don't actually need to execute the app. Is there a faster way to do this?
Edit: I should add: there are some custom widgets in the app.
While looking at a layout open the "Design" tab or open the "Preview" tab on the side. On the top of the window you will see a list where you can change the layout and orientation.
May not solve your entire issue, but it's a good to know.
If you want to have a preview of a static page (not rendered at runtime, like recyclerview), you could use android studio to do that.
I've recently switched from eclipse to IntelliJ IDEA for Android development. I'm not missing any features, beside the rather helpful designer preview in eclipse. I populate certain views in my activities at runtime, there are no texts defined in the corresponding XML files. In eclipse, it looks like this:
It fills the empty views with placeholder text which is nice to get a rough impression of the layout without having to start the app. But in IDEA, the designer looks like this:
The views are empty, and it's difficult to even see them without selecting them in the Component Tree. I haven't found anything in the options, is this missing from IDEA or did I miss an option?
It's not possible right now, but it would be nice to have, I've created a new feature request, please vote.
I am very new to Android development and am having some trouble. I am creating an XML file using Eclipse, both the Graphical Layout feature is what I'm having trouble with.
Also, I am working in Android 2.3 for compatibility reasons.
I am wondering if there is a layout which enables me to place buttons or text fields or any attribute where I want to put them. This may sound stupid, but it seems that every layout has some sort of order in which it lets you add attributes, and whenever I try to drag them elsewhere on the layout things just get very very messy.
If what you want is an AbsoluteLayout, this has been deprecated since Android 2 (IIRC). You can try using the RelativeLayout, which let you position freely your widgets. Else, if you only use LinearLayout, then yes the widget will be positioned in a strict way.
use Relative Layout. I recommend that you read up on Android layouts so you understand why, what and hows of Android way. There are some good tutorials that I found helpful. TutsPlus: Android Layouts
There is also a very good video from Marakana.
Marakana: Android Bootcamp
If you are just starting out with Android check other tutorials/videos on Marakana. They are a very good resource for beginners.
Working with Android for the first time, I've blocked out a layout using the relative layout and laid down some buttons and text widgets how I like them. However when I go back to rename the IDs the layout goes all crazy moving elements around and in general destroying the hours of work I spent laying them out.
Does anyone know how I can rename the widgets without Android destroying the positioning for widgets in the Relative Layout? Is this some "feature" of Android? I can't imagine why it would be hard for the UI builder to handle simple renaming of a widget ID without destroying the positioning information.. Do I have to use an external text editor and modify the XML files directly? Ughh I hope not.. I'm using Eclipse IDE.
You can use find and then replace all to change the names every place that they appear. Shouldn't take anywhere near an hour if you're dealing with a small layout.
In general the graphical UI creator that is currently included with the Android SDK is not so great for creating anything but very simple layouts. In my experiences (which were a long time ago, it may have gotten better since) it was terrible with RelativeLayouts.
If you have not modified your xml directly then it is time that you jump in and start learning to do it that way. You'll find that you have a much greater level of control over your layout, and once you get the basics figured out you'll probably be able to create quicker using raw xml then with the graphical tool anyway. I do wish that there were a nice GUI creator for android out there, the best one that I've ever come across is Droid Draw which I found to be better than the one included with the SDK, but still not as good as I was hoping.
To modify the xml directly you don't need any additional text editors, you do it inside eclipse. Open up your layout file and at the bottom click on the tab that says "Source" when you want to switch back to graphical (good to see the changes that you make to the xml graphically) just click back to the tab that says "Design"