Develop Reference

How to glow effect behind the edit text like in the image?

I am trying to get a glow effect like the background for edittext
I tried doing it but the background is not as much effective as the image
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#68F30606"/>
<corners android:radius="10dp" />
</shape>
</item>
<item
android:left="1.7dp"
android:right="1.7dp"
android:top="1.7dp"
android:bottom="1.7dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/white"/>
<corners android:radius="10dp" />
</shape>
</item>
</layer-list>
Can someone help me to solve this mystery?

Then you will need to use the old-technique(kind of) of 9-Patch Drawing. I used to do it too. Examples are scarce because they are big, but there is documentation.
Documentation: https://developer.android.com/studio/write/draw9patch.
Also, if this helps you can check this too: Outer glow in edittext
To use the 9-Patch images in Xml to this (remember this is after you have created the 9-Patch Images):
Reference the drawable with the name but don't include .9.png (auto-complete in eclipse will take care of this)
Make sure you only have 1 image under the main /drawable folder (not a version for each dpi folder)
The image must be specified using :background, not :src (this got me stuck for a while)
android:background="#drawable/splash_logo"
Make sure the image and layout that contains it are using:
android:layout_width="fill_parent"
android:layout_height="fill_parent"
Credit To: Creating & Using 9-patch images in Android
Also, check this website out, it contains a lot of useful examples that the documentation doesn't provide:
https://tekeye.uk/android/examples/ui/android-9-patch-image-files

Using a bitmap with android:alpha="x" does the opposite effect when used as activity background

A bit new to android design.
I'm trying to add an image as the background to an activity. I want this image to be partly transparent and have a black gradient at the bottom.
For this, I created a drawable resource (openscreenbgg.xml) and created a <layer-list> as follows:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<bitmap
android:src="#drawable/bgnew"
android:gravity="fill"
android:alpha="0.4">
</bitmap>
</item>
<item>
<shape android:shape = "rectangle" >
<gradient
android:startColor="#000000"
android:type="linear"
android:angle="90"/>
</shape>
</item>
bgnew is the image name
I set android:alpha for the desired transparency effect and a added <shape> item for the gradient
The preview of this xml is perfect and exactly what i want:
expected
But when I use this drawable as a background for my activity, like so:
android:background="#drawable/openscreenbgg"
The preview is much brighter:
Actual
Am I misinterpreting the use of android:alpha here? Does making it more transparent mean more "light" passes through it and so it is brighter?

I suspect the problem is that your theme gives you a default white background for all windows, and so your semi-transparent image is overlaying a light color rather than a dark one.
One way to solve this is to change how you build your background image. Instead of using alpha on the bitmap, you could mask the entire image with semi-transparent black. The end result should be approximately the same, but you wouldn't have to worry about the window background "bleeding through" the image.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<bitmap
android:src="#drawable/bgnew"
android:gravity="fill">
</bitmap>
</item>
<item>
<shape android:shape="rectangle">
<gradient
android:startColor="#FF000000"
android:endColor="#99000000"
android:type="linear"
android:angle="90"/>
</shape>
</item>
</layer-list>
Alternatively, you could set the window background to be dark instead of light, and then you'd get what you expect. But this may be difficult to achieve without affecting other activities in your app.

How can I add extra shapes to a ProgressBar that move along with progress?

I was given a design for a custom ProgressBar that looks like this:
The way it works is that the bar is completely blue at 0 progress, and as progress is incremented, each side fills in equally white toward the center until the entire bar is white at max progress.
I've got the bar set up just fine. I'm using two ProgressBar objects, one that moves left-to-right, and the other rotated so that it moves right-to-left.
The part I'm stuck at is how to draw those extra circle shapes that move toward the center along with the white progress <clip>. I tried just adding an extra <shape> to my <clip> item in the XML, but that stretched the circle out as if it was using the circles to fill in the bar.
Is there a way I can add these extra shapes to the ProgressBar XML itself, or do I need to create another drawable for these shapes and then update their position manually in code? I'm not sure what the correct approach is here and I haven't been able to find any similar examples in my research. Any help is appreciated!
Here's the XML I'm using for the progressDrawable:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="#android:id/background">
<shape>
<corners
android:topLeftRadius="12dp"
android:bottomLeftRadius="12dp"/>
<solid android:color="#29A4DD"/>
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<corners
android:topLeftRadius="12dp"
android:bottomLeftRadius="12dp"
android:topRightRadius="0dp"
android:bottomRightRadius="0dp"/>
<solid android:color="#F05926"/>
</shape>
</clip>
</item>
</layer-list>

Adding percentage to gradients

I'm trying to create an button with xml gradient code. (Because I'm a new user can't upload the image :( ) This image has two colors and corners in its edges.The color which starts the gradient will start from 15% of all gradient length and ending color ends on 75% of gradient length.
I use this code to create Gradient with two colors:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item >
<shape android:shape="rectangle">
<gradient
android:angle="-45"
android:startColor="#64bcfb"
android:endColor="#2f8fd4"
android:type="linear"/>
<corners android:radius="10dp" />
</shape>
</item>
</layer-list>
The problem is that i don't know how to add the start percentage and the end percentage of gradient.I have some searches about this and ind some things in:
banded background with two colors?
Gradients and shadows on buttons
in both there is some solutions but i it's not work for me. The solutions is about creating a simple bar with two colors but i want to create a button that have some corners in its edges also.
I cant also use the original image in my app because i need to changes its colors pragmatically.
Have any body some idea about how we can add percentages in gradients?

This is quite old but no answer and I think I was having the issue and found a fix.
If you only need a gradient with 2 colors, a single transition and with corners, you can do the following:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners
android:bottomLeftRadius="10dp"
android:bottomRightRadius="10dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp" />
<gradient
android:angle="270"
android:startColor="#android:color/transparent"
android:centerColor="#android:color/transparent"
android:centerY="0.65"
android:endColor="#color/colorPrimary"
android:type="linear" />
</shape>
The trick here is adding a centerColor and centerY and modifying it's center. This will allow you to modify where the transition occur.

How to draw a layout of this type in android?

I want to provide a background drawable, similar to the one shown in the figure, to a layout. How can i do it using a drawable xml? Please suggest a suitable approach to go about this.

It is not possible to do this with single xml drawable but probably you can club two to create this effect. I would do it this way
Create a drawable of square type with black borders
Create a clip drawable and clip the bottom of sqaure drawable.
Reference here
http://developer.android.com/guide/topics/resources/drawable-resource.html#Clip
You can use the android:gravity="top" and then programmatically set the level to reveal 90% (or more) of the image
ImageView imageview = (ImageView) findViewById(R.id.image);
ClipDrawable drawable = (ClipDrawable) imageview.getDrawable();
drawable.setLevel(drawable.getLevel() + 9500);

I know this is 4+ years after the fact but for anyone else wanting to achieve the same result, there's a very simple way to achieve this by creating a layer-list xml drawable.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<padding
android:top="5dp"
android:left="5dp"
android:right="5dp" />
<solid
android:color="#android:color/black" />
</shape>
</item>
<item>
<shape>
<solid
android:color="#android:color/white" />
</shape>
</item>
</layer-list>
Save this to your project's drawable folder and reference it like any other drawable (android:src / android:background, or programatically)