Does anybody have any idea on how to approach custom UI for an app?
I mean, there are several amazing looking apps out there, that DO NOT look like they were made using the layouts and views offered by Android.
Such as: PIE UI,
Color in the Dark, or look at this collection Collection
I basically want to know how to draw custom shapes and arrange them while making them clickable.
I know how to draw regular custom shapes, but how do I arrange them how do I make really custom shapes like parts of a circle or an ellipsis or even irregular shapes?
I know a little Photoshop, so there I can draw whatever my imagination lets me, but how do I integrate yhe images/shapes drawn there in the UI since I cannot place a shape by it's coordinates? Not all shapes can be placed inside a rectangle, because some parts might overlap. So how are they doing it?
Related
I want to create this type of slider
I don't want the code but the directions. what is the best thing todo this?
is there any similar library project available?
is there any similar view already available natively.
is this more easy to create in jetpack compose UI.
Thank you so much for your help.
Since you refer to the view you want as a "slider", I assume that you are thinking about using something from the Material Design library. My personal experience with the Material Design views are that they primarily enforce the MD guideline and are not very flexible although they may work for you in this case.
is there any similar library project available?
As for libraries, it looks like the other answers point to some that may be capable of what you are looking for.
is there any similar view already available natively.
I suggest that you take a look at using a SeekBar not because I think that it is necessarily better, but I believe that you can get the result you want with a little effort that would not have external dependencies other than the standard libararies.
Here is another answer of mine that explains how to build a SeekBar similar in structure that you are looking for. Your background would be the rounded rectangle with gradient shading. The background colors can be defined as explained here. Your seek bar can be built using a LayerList. The layer list can be defined in XML and modified in code. You can also forgo the layer list and draw that seek bar programmatically or fit everything into one drawable. Which you do will depends on your design constraints.
The thumb can easily be a custom thumb.
You will likely wind up with mostly XML but some code but not much. I would consider placing the code in a custom view that extends from a standard SeekBar.
You can edit the following resources.
https://github.com/divyanshub024/ColorSeekBar
custom scroll able multi color seek bar
I built something similar with Jetpack Compose, instead of using different colors with intervals it creates gradients from colors, but what you ask is a little work on current build and it can display anything as thumb. You can check source code and implement drawing over track section. If it's much work i can add similar features when i'm available.
The easiest way of doing this in Compose Canvas, for View it's a custom View that draws inside onDraw.
You basically draw a line with width and rounded cap or a rounded rectangle and draw border with a stroke around it. Do some interpolation for changing from your value range to pixels on screen and get the current value based on users touch position and interpolate it to range defined.
Let's say your Slider is 1000px wide. And your range is between 0f and 1f, you translate touch on 600px to 0.6 value and vice versa. For different colors you can pass a List<Pair<Color,Float> to divide slider between color based on float based stops.
For drawing lines you set 3 types of heights and use modulus to assign each height in every 1, 5 and 20 value. I have something similar for building Compass with View here
https://github.com/SmartToolFactory/Compose-Colorful-Sliders
I'm converting a project that I wrote in AIR a long time ago to native Android. In AIR, positioning views was fairly easy in x,y coordinate systems. With native Android though, I am trying to approach this in a correct way, but I'm unsure how to approach.
My view will consist of two circles in the background, with small objects within those circles that can roll around. There will be another view drawn on top of the circles to make it seem like there is glass over the circle, entrapping the small objects. The small objects are bound to the background circles.
I guess what I'm really asking is canvas drawing the best approach here, or is a view-based layout workable as well?
It sounds like your best option would be to use a SurfaceView. This is basically a hardware accelerated canvas. On of the benefits is that you can overlay standard widgets over top of it if you need to so you can mix and match custom and standard components. Here is a link to a website that walks you through getting a SurfaceView up and running
easy now.
What I want eventually:
I want to have 2 bitmaps overlayed on a view. Same bitmaps with the one above have higher brightness than the below one.
Now when the user strokes(with touch event (like paint brush)) on the upper bitmap, I want those parts of the upper bitmap to go invisible.
For those who are familiar with adobe photoshop perhaps this will make more sense:
I want to draw a mask on an image being display so that only the unmasked parts remain visible. But the mask can be drawn from a brush with variable hardness/size.
How do I achieve this functionality? Direct me in in the line where I should research or give sample code.
Also, is it possible to draw strokes on an imageview with a brush which has variable hardness? I know that I can drawPath and drawArc on a canvas, but I do not know how to achieve the different brush strokes/styles.
Please pardon me if I haven't phrased my question right, or wasn't able to find similar duplicates.
You can use FrameLayout to overlay one image over other in Android and for Custom Masking search FingerPaint on google.
I think the best way is to do your own off-screen compositing, then render the composited image using an ImageView or perhaps a subclass with custom interaction. See this sample code for an example of how to do such compositing using the Porter-Duff transfer modes.
I need a graphical needle gauge (like a speedometer etc) for my app but such a UI widget is not part of the SDK so I probably have to create it myself.
My idea is to have the background with the tickmarks and coloured fields (green, yellow, red) as one bitmap and the needle as another bitmap drawn on top of the background, but rotated in the appropriate angle.
In my book, Professional Android 2 Application Development, there is a somewhat similar example with a compass rose, although that one is drawn using line graphics, not pre-fabricated images like I will have to use to get the desired look.
However, in the compass example the whole canvas is rotated before drawing the tick marks. I cannot use this approach as it will also rotate the gauge background. So I need to somehow rotate the needle image (which should be transparent) before superimposing it. But I don't know how to do accomplish this.
Can anyone lead me in the right direction on how to proceed with the needle gauge? Also, if there is a better way to build the meter than sketched above, please let me know.
You can divide your guage into different layers. One for background, one for tick marks. Layer for tick marks can be rotated to draw marks and when turned back and combined with 'background' layer.
You can see the following example with layer technique described above: http://mindtherobot.com/blog/534/android-ui-making-an-analog-rotary-knob/
P.S. This is not my blog, i've just found this technique there.
I'm working on a game that in some ways is similar to Tetris (imagine a 2D array of colored squares that sometimes move around)
I am trying to animate the individual squares so they will smoothly slide down from coordinate to the next. Since I wanted to use Android's built-in tweening feature, the animation has to apply to the whole View (rather than parts of it). This doesn't work well for me because I only want some of the colored squares to slide down, and the rest of them to stay still.
The (theoretical) solution I came up with to resolve this is to make 2 Views, layered directly on top of each other. The top view is for animating squares when they need to move, and the bottom layer is for the static squares. The animation-layer is transparent until I am ready to animate something. I then simply turn on the colored square in the animation-layer, tween it to the new location, and turn it back off when done. In the same time span, the static-layer just turns squares on and off at the right time to make the whole thing look seamless to the end user.
The proposed solution is just a theory, since I haven't been able to make it work correctly yet. Since I have been having trouble, I was wondering if this is even the best way to solve the problem? Perhaps there is a more elegant solution that I am over looking? Anyone know of a better way?
If you just want to animate a single element check out the namespace android.view.animation.Animation. You can also use Drawable shapes and draw them directly. Finally, if you want a simulation then you will have to look into threading. Basically you will create a timer to update the canvas for you based on an interval. There are some other view canvases you can use as well like the GLView canvas.