Why isn't my custom view drawing the foreground elements? - android

I'm stepping through "Professional Android 4 Application Development". I'm working on the "ToDoList" example in chapter 4, and to the point of implementing a custom view for the list item. When I run my version of the app, the custom view renders its background color, but the margin line and the text don't appear to render. I've compared my version against the version from the code bundle, and I only see what seem like inconsequential differences, but there must be something subtle that is different.
I obviously want to fix the problem, but something like this is a better lesson on how to figure out what's wrong, but I just don't see it.
I wish I could just zip up the two apps and attach them here, but that doesn't appear to be an option. I did upload my sample app to a shared Google Drive folder, which is included here. I believe I've made it public so that other people can download it.
If someone reports that they can't get to it, I guess I'll just try pasting in the relevant source files here.

...and I only see what seem like inconsequential differences, but
there must be something subtle that is different.
There is a difference that is quite important. In your init method you initialize the float margin variable like this:
margin = myResources.getColor(R.color.notepad_margin);
But, from looking at your code(where you draw the lines) the margin variable seems to be the point at which you draw the vertical lines(in your case margin will be something big and out of the screen). Shouldn't this be:
margin = myResources.getDimension(R.dimen.notepad_margin);
Also, you may want to increase the stroke width to see those lines:
linePaint.setStrokeWidth(3.0f);

Related

Create transparent form

I work with FireMonkey in C++Builder, and I'm trying to make a transparent form, so that the components that are on it are displayed, but in the space where there are no components you can see what is below the form (transparent)...
I have set the Transparency property of the form to true, but the areas of the form that should be transparent look BLACK.
I have searched the Internet and found solutions for Delphi, but none for C++.
I tried to include this in the manifest:
SetActivityAttribute(MYFormTransparent ,android:theme, #android:style/Theme.Translucent.NoTitleBar)
but still, the same issue.
Any ideas?
This is a known problem that was introduced in 10.3 Rio. It has already been reported to Embarcadero (unfortunately, it has been closed as "works as expected"):
RSP-22314: Transparency Property
Marco Cantu commented on that report:
Sorry for not commenting sooner. We have done some research on it for the last update, but decided to defer a fix.
The core issue (in short) is that we use Android SurfaceView and this is a limitation of that platform control (only 2 SurfaceView instances are available). We are using this platform element as it allows us to mix styled and platforms controls (a feature we introduced in 10.30). By chancing the internal implementation, the transparency become unavailable.
There is an alternative implementation of forms via TextureView, but so far our tests have shown that the speed of rendering 2 times slower, and we don't want to slow down all FMX applications on Android for this feature.
There are some workarounds, one of them is to use a frame instead of a form. It works perfectly with transparency and uses less resources than separate form.
For existing code the fast way is to add a Layout to the form and have the controls inside it. When you need to display the form with transparency you can just move Layout from the specific form to main form as a child and align it on content Align = Content.
Other commenters noted:
I tested an alternative with formStyle = popup and stylelookup = popupboxstyle
with a rectangle in the form with transparency = 0.4 and some instructions to size the form with setBounds
The result is acceptable
As said by Herve Escriou, a work around is to set your formstyle property of the form to "Popup". This will make the form transparent again. But this wil have the effect of the wsMaximized style not working properly. You can go around this by making the following code additions to your form: ...

Is there a "readable content guide" on Android?

Now that it's 2022 and Android tablets (and their cousins, foldables) are getting more prevalent, I got my interest ramped up in building a better tablet version of one of my apps. Coming from iOS, there is a useful layout feature that one can use when designing tablet UIs called "readable content guide". Apple describes it as follows:
This layout guide defines an area that can easily be read without forcing users to move their head to track the lines. The readable content area follows the following rules:
The readable content guide never extends beyond the view’s layout margin guide.
The readable content guide is vertically centered inside the layout margin guide.
The readable content guide’s width is equal to or less than the readable width defined for the current dynamic text size.
A picture is worth a thousand words. To the right is some text aligned to the readable content guide (the left version just spans the width of the main view):
Looks great when reading long-form content, doesn't it? Thus, my question:
is there a standardized version (that is, without me having to code one myself) of a feature similar to this on Android?
Now that version 12L is out, I thought it would incorporate something like this, especially with Google promoting Jetpack Compose (and other new UI extensions) as a faster and easier way to build UIs.
If you know what a comfortable width is you can use android:maxWidth="yourWidth" to limit the width of your textview to what you want

Android masking background with round gradient shape

I need to implement following component, but not sure where to start.
I have two fragments stacked. Top fragment has gradient background and other content as well. Fragment below that has also own content and you should be able to see below content.
Following picture demonstrates the situation and the white round should be movable, so user can see below content on certain position.
I recommend the solution from Romain Guy. As far as I know this is the simplest (and possibly most efficient method since he recommended it). The solution is based on Shaders.
You can find code, description, whole project, sample video and screenshots here: http://www.curious-creature.org/2012/12/13/android-recipe-2-fun-with-shaders/
You would start your customization by adjusting the mask PNG file. Then you'd probably supply a shader parameter for the fragments which they would utilize when drawing. Finally you'd set the proper shader for each of the fragments after every pointer movement event.
I know it's just a sketch of the solution, but the whole project code provided in the link above should get you going really fast.

Creating a 9 Patch with repeatining pattern

iam stuck with the creation of a nine patch for a progressbar background.
It has a repeating pattern like a ruler-scala and that given me headache.
here is a image of what i want(at the bottom) and what i have (top).
can someone give me a hint how to acomplish my goal?
edit: or is it generelly possible to do this with a 9patch?
my other attempt was to make a with android:tileMode="repeat" but there i get problems with the height of my image (repeating in the second line), i need something like repeat-x.
Thanks in advance
edit2: ok i managed to do my repeating 9patch by stretching the whole repeating pattern, but its not ideal :(
You seem to be overestimating the power of 9-patches. The most you could do is have a ruler image with expanding space between the ticks. You can't, however, make a 9-patch that automatically tiles parts of your image.
On the other hand, if you create a BitmapDrawable programatically, you can set the tile mode separately for the X and Y axes.
I used to do this in my webview project using border image which provides both options (repeat, stretch, fill).
As webview has kind of it's own problems in android (mostly fixed element) I decided to be more android for the next project and I found out that it's not possible to have the repeated border using 9Patch. It's so awkward as it's needy but not implemented.
In a word android development area makes me crazy, one option here one option there is a usual thing here.

Android Layout On Top of an Image

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.

Categories

Resources