Android Shape Inverse Rectangle - android

Is there any xml that i can use to perform something like this ?
I want to have an single ImageView where i show my picture. The picture is "fillparent" that it goes on the whole screen. But i only want to see the pink part normal and all outside the lines i want something like an "alpha = 0.5" or just that it is a little bit less seen than the main.
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="120px" android:right="120px" android:bottom="120px" android:left="120px">
<shape android:shape="rectangle">
<solid android:color="#9fffffff" />
</shape>
</item>
I want to put an xml as foreground to perform this. With an shape of an rectangle and an alpha of 0.5 it works exactly the opposite side. Now i just need something like an inverse rectangle or something.
Thanks for your time.

Related

How to set background color of an image, but within the border?

My goal is to display a circular image, and allow the user to set its foreground and background colors respectively, for example:
My attempt was to create an image asset with transparent background, then use ImageView::setColorFilter to change its foreground, and use ImageView::setBackgroundColor to set its background. The image asset looks like this:
My problem is that pixels outside of what we humans call 'border' are also transparent, so the result looks like this:
How do people usually deal with this issue? Although I was doing Android development, but any ideas or code snippets in any language are appreciated!
at the first, you must create a new drawable file and write below code for creating the circle with yellow color with blue border:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#cab816" />
<size android:width="50dp"
android:height="50dp"/>
<stroke android:width="2dp"
android:color="#color/darkBlue"/>
</shape>
and now you must set this drawable to the background of your imageview and set your image with src.
if your image covered all of this circle, use padding for decrease image size.

Android edge to edge gradient

I am trying to get a gradient inside a rectangle to look like this
The closest I get using following xml is
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<gradient
android:type="radial"
android:startColor="#color/lightPurple"
android:endColor="#color/lightGreen"
android:gradientRadius="600"
android:angle="270"
android:centerX="1"
android:centerY="0"/>
</shape>
Is there anything I can do to make my gradient go from the top right corner to bottom left corner?
Try android:type='linear' and android:angle='45'.
This would get you more closer to edge-to-edge. Android doesn't provide arbitrary angles for this. The only valid angles are the ones which are a multiple of 45. However as far as I can see, the gradient you require is not actually edge-to-edge and I suspect it to be the one with angle 45.

Gradient like this?

I'm not UI designer so I can't feel xml colors enough, I want to make gradient like this:
http://t1.uccdn.com/en/images/6/5/2/img_2256_ins_45517_600.jpg
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<gradient
android:startColor="#1f313d"
android:endColor="#2c3942"
android:angle="135"/>
</shape>
</item>
but... I think that 2 colors are not enough, how to make it similar gradieƱt to this image then? *last screen
How to create Gradient ??
Create Gradient is very easy
Right click on drawable folder and create xml file.
Create shape Tag
Inside shape tag create gradient tag
Gradient Properties........
android:startColor="put here your color"
android:endColor="put here your color"
android:centerColor="put your color here"
android:angle="45"
if you need gradient in
horizontal way put angle = "0"
vertical way put angle = "90"
corner horizontal way put angle = "45"
and opposite of corner horizontal way put angle = "135"
use this .......
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient android:startColor="#915d5b"
android:endColor="#418c47"
android:angle="45"></gradient>
</shape>
enjoy coding.......
Or you could simply use Gradient Generator tools at AngryTools, which is much easier and fun to use.

Android tiled image with beginning and end

I'd like to do something like this:
The closest I got was with a layer list, which aligns the left image to the left, the right to the right, and sets the center image to repeat itself.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<bitmap android:src="#drawable/left"
android:gravity="left"/>
</item>
<item android:left="16dp" android:right="16dp">
<bitmap android:src="#drawable/center"
android:tileMode="repeat"/>
</item>
<item>
<bitmap android:src="#drawable/right"
android:gravity="right"/>
</item>
</layer-list>
The problem is, that the pattern doesn't know it has to repeat only "complete" iterations of center image, so on some screens it looks like this:
Because Android just repeats the center image for example 4.5 times and it doesn't properly join with the right one.
Is it possible to do this without implementing this functionality as a custom View, where I'd calculate and render the image?
If the image is actually that simple as in your example. may be the best way would be to implement your own Drawable and paint the image in the draw() method.
Don't worry, this in relatively simple and probably the only way anyways to achieve what you want.

Round ring button in Android

I want to create a button background (or button itself) that look exactly like the below one.
I'm doing it currently with an image. I tried to create a similar one using the following XML, but it doesn't look as expected.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid
android:color="#f0600000"/>
<stroke
android:width="10dp"
android:color="#FFFF6666"/>
</shape>
Actually I want a round button with 3 pixel shadow and 1/4 width stroke in red color around the white circle. I have not succeeded with the shadow part at all. Thanks for any sort of help.
Well, the solid fills the middle and stroke paints the border. Since you want 3 colors you will have to use 2 drawables, painting white circle over the red circle with grey border. You can then use LayerDrawable to keep these as one unit

Categories

Resources