Google Chrome logo using Android - java

I couldn't find a similar example as close as the Google chrome logo. I want to make this logo using Android, forget about the colors or exact design. Imagine the blue dot is an ImageView, the red,green and yellow are ImageButtons. I want an ImageView surrounded by 3 or 4 ImageButtons like this. All what I came up to is the Oval layout shape with ImageView centered. I only need a hint if anybody has.

http://en.wikipedia.org/wiki/File:Chrome_Logo.svg and http://upload.wikimedia.org/wikipedia/commons/e/e2/Google_Chrome_icon_%282011%29.svg are SVG versions of the chrome logo. You should be able to get quite exact coordinates from those.

Related

Make an imageview blurred towards the vertical edges in Android

I would like to design a layout containing an imageview and a background view with two special effect. First is where the main imageview gets transformed with faded towards the vertical edges and second is a background imageview with a blurred effect like the image
The result that i am able to achieve
I saw this post for my first effect and currently using it, but it does not work when I change my phone into dark mode so I am not getting a perfect solution.
And the second special blur effect that i am able to achieve is far way different from what i want to achieve. The required blur effect has some hardness of the different shades of color and mine one is quite smooth. For my blur effect I am using the below code and I am using the library Fresco for my image.
ImageRequest request = ImageRequestBuilder.newBuilderWithSource(Uri.parse(imageUrl))
.setPostprocessor(new IterativeBoxBlurPostProcessor(60)).build();
PipelineDraweeController controller = (PipelineDraweeController) Fresco.newDraweeControllerBuilder()
.setImageRequest(request)
.setOldController(backgroundImage.getController())
.build();
backgroundImage.setController(controller);
Can anyone please suggest me any good solution or any good library for it or some code sample that can help me to achieve what I want.
The point to note here is the blurred background is an extension of the image itself. So if the left side of the screen has a purple hue the blurred region at the top left will be purple as well.
YOu can use a library like Blurry where it blurs the contents of the screen and then set that as a background. You can control the amount of blur you want.
Once you get the blurred image set it as the background of the container layout and set the picture in front
eg:
val bitmap = Blurry.with(this)
.radius(10) // make it more if you want the lue to be more
.sampling(8)
.capture(findViewById(R.id.right_bottom)).get() // get the view you want to blur
imageView.setImageDrawable(BitmapDrawable(resources, bitmap)) // set the value to the background

Android studio XML centercrop doesn't center the image

I have added a background-image in Android Studio, I used center-crop to center it.
The problem I have is that the image does not center properly. it's slightly off to the right and I want it perfectly centered
Look on the right the stars are not well centered.
Here's what I have tried
Could you help me ?
Thank you.
Thanks for updating your question with the background image (bouclier.jpg) that you're using. The issue you're experiencing is not to do with your layout (XML) code, but rather with the image itself.
As you can see, your background image appears to be offset to the right ever so slightly (I've added a green cross in the above image to illustrate this). As a result, when you use android:scaleType="centerCrop" the image is correctly centred but doesn't look right.
My recommendation would be to choose a different (properly centred) image to use as your background, or alternatively to centre the image you're presently using.
I hope that helps!

Image that has multi clickable zones/surface/area

I want to have an image on the android screen where different parts of the image can be clickable. What I mean is that, If its an image of 3 circles, I want to be able to click each of these circles,
Then I can add different functionalities to each of these clickable circles.
For an instance in this image below I want to be able to click each distinct color. Is it possible to have on-touch-listener and get you the color ? and can it be an image or has to be drawn in Java OR XML ?
I found a really good widget that helps you make any image muli-clickable. They have some good notes on how to use their widget as well.
The widget has a similar approach as Image mapping in html. The good thing about this widget is that the image can be zoomed and it will not lose the coordinates or areas associated to specific clicks.
Here is the link to their website. the guy who made the widget apparently had similar problem and came up with this widget.
Another solution would have been
creating an ImageView containing the png file referenced
making the whole ImageView clickable
setting an OnTouchListener to the ImageView which overrides the onTouch method
check the colors of the image pixel at the touch position
This is often done with an invisible mask image with one color for each zone (see the popular detailed tutorial), but here the image itself has distinct colors for each zone which makes it more interesting.

Android border layout with an EditText overlapping on it

I want to code a layout like the following image in xml in Android.
One approach would be to have a RelativeLayout and make a 9 patch rounded rectangle border image, have it as the background around a layout which has the two blue buttons, and then have and EditText overlapping it, with its background set to a red color.
What could be other approaches?
As I understood your question you want to make series of photos ..like Gallery application
you can do it with more option also.
1)this is gallery type application .
so . you can use this basic code :Android Gallery Application
2)If you want to see all the photos in circle this is also possible..
It depends upon your need ..please write in brief you want more...

Canvas vs Image Android

I have a background image that is white and semi-transparent. This is used as a text container so you can differentiate between the background image and text.
Currently I am using an image that is a white rectangle with rounded corners, but of course when using this on different screen sizes the image is distorted, not massively or that noticeably, but would it be better or possible to draw this image with a canvas?
If it is possible would it slow down the app considerably?
UPDATE:
Thank you #jkhouw1 I have looked into 9 patch images and this seems very suitable. I am still interested in knowing the benefit of canvas against images, but if you post something as an answer I will accept it. Thank you.
use a nine patch is a graphic that android can scale appropriately. see here: http://developer.android.com/guide/developing/tools/draw9patch.html
and here http://www.higherpass.com/Android/Tutorials/Android-9-Patch-Scaled-Png-Image-Guide/
Haven't tried this yet, but I think this should be possible by defining a shape drawable. You can define round corners and you can make it semi-transparent by defining the color with alpha-value, for example #80FF0000 should be semi-transparent red.
I assume this would be a good solution both in terms of compatibility and performance.

Categories

Resources