I am wondering how I would design a calculator with graphics similar to the following: Design help for Calculator App or https://play.google.com/store/apps/details?id=jp.Appsys.PanecalST.
The key requirements:
The buttons must be squared (it can pop out etc. but squares are more aesthetically pleasing than rectangles).
It must be device compatible and retain square buttons upon orientation change
My problem is that Relative formatting (as I attempted) disorients the layout in different devices and is not as nice as I hoped. (i.e. trying to design the button to harbor no empty space in one device using relative instructions. One idea I fancy is putting a center button and orienting the others above left etc. so at the very least, no empty space is in the center.
Below is the designs I made:
I prefer the first image but I neglected 0 (only buttons for 1-9). How would attempt at transforming these designs to code?
*I think I may use ImageButtons. I will include images based on density but how would I account for different screen sizes?
First of all, for your calculator, use LinearLayout.
Link: Documentation will be found here
Secondly, To Support multiple screen,
This documentation will help, documentation1, documentation2
What would I do in this situation?
First of all, I would use the LinearLayout as my primary layout and give it an orientation > Vertical instead of RelativeLayout. This LinearLayout is for the whole screen (The output, the numbers and other functions). Then for each line, say for the output screen, I would put it in another LinearLayout (Orientation Horizontal) inside the previous LinearLayout (NestedLayout). For numbers in each row, I would use a new LinearLayout.
For the second problem of yours, I would use buttons instead of images as images take large space in perspective of buttons which will unnecessary increase the app size. To support my button for multiple screen, I would use Weight option in android for buttons. This stackoverflow answer has a nice description.
I hope it helps.
Cheers mate!
Related
I am trying to create an android app where I have a single relatively big button in the middle (the light blue in the picture) and it is surrounded by other smaller buttons as shown in the picture (some of small buttons might be visible or invisible based on some criteria).
I started with the RelativLayout setting the big on in the center and making the rest placed in relation to it, but it is a miss and the central button get shifted and doesn't stay in the center. I tried placing them in FrameLayout and used margin to adjust their locations, that worked the best however, the spacing changes on different screen resolutions.
So what is the best way to achieve such layout that will look consistent on any device?
Android's Percent Support Library allows you to use proportions to lay out your views, which may allow you to get closer to your goal.
http://developer.android.com/tools/support-library/features.html#percent
In my project, I have a 3x3 TableLayout consisting of nine different Buttons. Each Button has an image drawable above it and a small string of text below it. To be clear, the drawable and text are the Buttons using the "drawableTop" and "android:text" variables defined in XML.
I'd like to know that if it would be possible to move the drawable and the text closer together because the UI looks a bit off on big screened phones.
App on Nexus 4
App on Nexus 6
I realize that I will have to make different XML layout files for small phones, phones, small tablets and big tablets. But Nexus 6 is, as I classify it, a phone so I will probably not be making a separate layout file for it.
Any feedback helps unless you tell me that I need to use a LinearLayout with an ImageButton and TextView in it because I've already tried that and it didn't turn out that well.
When it comes to this, I usually use two views, one for the text and one for the image and put them into a ViewGroup, which then gets assigned onClickListener. This gives me more freedom and customization with the downside of lowering performance a bit.
But to answer your question, you can use android:drawablePaddingin conjunction with android:paddingTop to control the space between the image and the text.
Well the simple answer is probably mess around worth the text view's top padding. If that's not working for you the other solution is using the relative layout which is intended for such cases. That way you can keep the visual effect you're looking for while keeping the layout structure flat which is good for performance.
I have a design that I need to follow in my app. In it there are several buttons, images and textviews placed all over the screen (some are aligned to the left, some to the right, some are centered etc). What I need to do is make all those elements appear EXACTLY as they are in the design image. The problem is, if I try to do this using dp, it can be wider or narrower than the design image specifies, and it depends on the properties of the screen. (I've had an app where I did it all in dp, and on my high-res phone it works perfectly, but on my friend's older phone it cuts away the edges of the activity)
My question is, what elements do I use for this? I've heard of using weight in Linear Layouts, but how to make items different width and height and position them all across the screen how I see fit? How to make sure it looks exactly the same on all screen sizes?
Thanks in advance! :)
Edit:
The point is, I need the buttons to be just as they are on the screen (this will be a listview element, I'm trying to make an xml for it). The distance, proportion, everything, it needs to scale to the width of the screen and be this size and distribution. And, I'm not just looking for a solution to THIS particular problem, I want to learn how to do it in general...
You don't. For very large and very small screens, you use separate layouts that scale the sizes, completely drop parts of the UI, or lays it out in a different manner. It's absolutely silly to think you can fit all the stuff on a 10 inch tablet and a 3.5 inch phone. If your designer expects that, tell him he's an idiot and he needs to get back to work.
For a more general answer on the best way of laying things out- it depends on the effect you're trying to get. You should never use pixel counts, and dp should only be used for small things- a bit of padding between 2 fields. Most things should be done via layout, either by using a linear layout and getting things in rows/columns, or a RelativeLayout and describing how to layout views relative to their siblings. But even with these tools you will not be able to fit on all screens and look good.
Is there a more precise way of arranging components in App Inventor than using the Vertical/Horizontal/Table Arrangement formatting elements?
I want to sparsely position about six buttons across my app screen - all different sizes.
Thank you in advance.
the short answer is: no
well, additionally you also could use empty labels as delimiter between components...
another answer is: you could use a canvas and sprite components instead of buttons. You can define sprite positions exactly at x/y coordinates of your canvas.
However keep in mind, that there are different Android devices with different screens sizes and resolutions, so normally you wouldn't set buttons exactly at x/y coordinates to avoid strange layouts for e.g. smaller or larger devices.
The bit longer answer is to use labels as spacers.
Example:
Need to center a button at the top of the screen.
Add horizontal layout with 2 label texts and button in center inside of the layout.
Click each text label and remove the actual text from right side properties menu and choose fill parent width and height.
This centers the button because the layout automatically assigns one third size to each.
Labels are the best, but longer coding answer.
I am struggling with a Layout Problem on Android. This is very simple to do on the iPhone, but with the various screen sizes and the Layout classes available. I am having a hard time doing this.
One thing that I have noticed is that setting backgrounds on objects in the xml really messes up the layout on the device. I generally have to put in a FrameLayout and an ImageView to get a background.
So Am trying to get to this. http://www.calidadsystems.com/images/AndroidListItem.png (Sorry I don't have enough pts to post the image)
his is a status view and is an item in a List View. There are 8 TextViews that need to be set. Each of the 222 fields will change. The current background has the colors in there at specific locations and I am trying to line up the Labels and TextViews to get the picture below. I built this one with AbsoluteLayout which is deprecated, but it also does not work very well on the device.
I have constantly struggled with the layouts on Android. Does someone have some good sample code that could do this?
You're probably going to want to use a RelativeLayout. You can use the android:layout_alignTop="id" attribute to make the rows be in line correctly. And android:layout_alignLeft="id" for the columns. Other than that its just a matter of playing with the android:layout_marginLeft="XXdip" attribute to get the space between them how you want it. Check out this page for an overview and examples of all of the Layout types. Here is some more sample RelativeLayout code. And one more page with another example. RelativeLayout is a bit tricky to get used to but once you've used it a few times its pretty easy to understand and get the Layout that you want. The benefit of it is that your UIs look nice on several different screen sizes when you define them this way.
Why not just composed the layout in a table layout and set the table layout's background to a custom made graphic you make? This should work well with you. Specifically the design of your design would be like 4 columns with x rows. Then using the strechcolumn property, you should be able to accomplish what you are trying to do!
If you scale the graphic properly, then you shouldn't have this problem overall.