I'm currently facing strange problems with Android's font Roboto. At first I had two TextViews in one horizontal LinearLayout, centered both vertically and horizontally. The first TextView was set font Roboto-Black.ttf and the second was Roboto-Light.ttf. Both was set to textSize="12sp", but the one with Roboto-Light.ttf was just a pixel higher then the Roboto-Black.ttf TextView. But it didn't happen when I've set textSize="13sp". So I've created new Android project, just to be sure it's not only in the one application. The result is almost identical, but in this case, textSize="12sp" works as expected but textSize="13sp" doesn't. I've made screenshots to show the issue.
12sp works as expected. Top edges align.
13sp has this strange behavior.
Strange is, that this happens only when I try to mix thin and thick lined variants. When I make one TextView Roboto-Bold.ttf and second Roboto-Black.ttf, result is good. When I try Roboto-Light.ttf and Roboto-Thin.ttf, it also work properly.
So I also tried to test this in photoshop and this is what I found:
It's the same for all fonts from Roboto family, except for the Roboto-Light.ttf. I can also post source code for the layout if needed.
Thanks in advance.
PS: I'm sorry for the links but due to low reputation (brand new account) I can't post images. Also in the last link i had to remove the "h" from "http", because it didn't allow me more than two links.
I can't tell you if its the fonts or how your phone interprets the fonts and displays them on the screen but I can tell you that I've had issues with centering views in the middle before.
Have you tried using a relativelayout and then align the second textviews top and bot with the first textview? That might solve the problem.
Related
I started the "Android 6 for Programmers: An App-Driven Approach" book and ran into a problem. I was following the step-by-step approach for one of the apps and got a pretty frustrating error that I cannot fix.
I've added a text and image views and on the Preview section they are shown as they should be but when I run the app on the emulator or on an actual device the text seem to be missing. I am going to attach photos below for more clarity.
The custom colour is Material Blue 500 (#2196F3). Tried changing it to another but the problem doesn't seem to be affected by it.
The text size is 40sp (80sp on a > 600x600 device).
You need to change tools:text to android:text. Using tools attribute you can only see preview in design time.
Try to remove Layout weight, it might be the problem .
When using a LinearLayout and layout weights, set height in your case to 0dp for both the text and image
If you're wanting to center things and align to each other, RelativeLayout or ConstraintLayout would be preferred.
Folks,
I cant design my android screens and see it on my emulator somehow the resolution, zoom (whatever) in the emulator is big and my layout is messed up.
The whole layout is inside a FrameLayout, the paragraph text in the emulator pic is inside a RelativeLayout, which is set to GONE after users upload rating, then LinearLayout shows up with the overall rating bar in the some place where the RelativeLayout was.
My question is why is this happening since in the preview it seems perfect and on the emulator it seems all messed.
Please see the screenshots:
Android Studio Preview:
Genymotion Emulator
It is really hard to determine what exactly is wrong without seeing your xml markup.
Possible Reasons
You gave your layouts some sort of fixed size, and therefore it appears to be fine on your markup, but whatever you are emulating on Genymotion is using a different ratio.
When you do a View.GONE, you say you are replacing a RelativeLayout with a LinearLayout. Well, do you make sure that the layout that is replaced is layoutAbove whatever that frame layout below it is?
Some layout just has some attribute, like an alignment issue, that is causing this.
Trace your steps backwards, removing one thing at a time. Get it to work with that view gone first, then add it and manipulate it after.
so I'm making a really simple app that just shows some buttons and images,
it looks great on the simulator (because I guess that's the resolution I've been working on ...)
but when I try to build it to my phone it looks differently (the buttons are more stretched out and there is allot more background space in between the buttons and the end of the screen,
I guess it's something that's suppose to be simple but how to I make my app "zoom stretch" to the phone content it's going to be on, meaning it will look the same on any phone and if necessary will stretch the image a bit to fit the screen ?
Thx
In your XML, its important to not use specific(dp,px,etc.) sizes for laying buttons/text boxes/etc. out. For example, for a button thats on the page, use a "layout_width" of "match_parent" and add padding (if necessary from there). This will allow your button to stretch properly without having that extra whitespace.
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!
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.