Develop Reference

centered element in background doesn't match centered element in foreground

I'm working on an Android application where I want to create a windowBackground with a centered element and a layout also with a centered element. I want these elements to be in the exact same position, with the layout overlapping the background. The problem I'm having is that the layout and the background seem to be calculating center differently (see image). Why is this happening, and what can I do to line the elements up?
This is what I see right now. The red box is created by the background and the green box is created by the foreground. Screenshot was created with a Nexus 5X API 26 emulator.
Foreground layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:background="#color/foreground_box"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_centerInParent="true" />
</RelativeLayout>
Background Drawable (applied via android:windowBackground in my theme)
<?xml version="1.0" encoding="UTF-8" ?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/background" />
<item android:gravity="center">
<shape
android:gravity="center"
android:shape="rectangle">
<solid android:color="#color/background_box" />
<size android:width="10dp"
android:height="10dp" />
</shape>
</item>
</layer-list>
For clarity, my colors file is
<?xml version="1.0" encoding="utf-8"?>
<resources>
...
<color name="background">#ffffff</color>
<color name="background_box">#AAFF0000</color>
<color name="foreground_box">#AA00FF00</color>
</resources>
Full source for this sample project is available at https://github.com/HofmaDresu/AndroidCenteredTest

The reason windowBackground includes both the heights 1) statusBar and 2) actionBar
Modify below line in your background.xml
<item android:gravity="center" android:top="80dp"> // 56 actionBarSize + 24 statusBarHeight
You may need to manage this programatically as statusBarHeight and actionBarSize varies based on device API/resolution.
Here is the result. For testing, have resized background size bit bigger so that overlapping between views and background become visible.

It is probably because of the extra space taken up by the ActionBar in the foreground.
To fix this, you can add a margin to your View in the foreground layout as:
android:layout_marginBottom="?android:attr/actionBarSize"

After test it in AS, I can say you that the right code for you background_drawable is this:
<?xml version="1.0" encoding="UTF-8" ?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/background" />
<item android:gravity="center" android:bottom="48dp">
<shape
android:gravity="center"
android:shape="rectangle">
<solid android:color="#color/background_box" />
<size
android:width="10dp"
android:height="10dp" />
</shape>
</item>
using android:top, the red square go more down than center. Need to use android:bottom instead to center background. By my tests results that 48dp is the right value.

"dp" Issue in Xamarin Android Layer-List with multiple Rectangles

I'm using Xamarin Android in Visual Studio and trying to do a simple task of displaying two rectangles, one above the other. When I use a measure size of "px" everything works as expected, but when I use "dp", the second rectangle does not get rendered. Here's my xml file with the rectangles:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="0dp" >
<shape android:shape="rectangle">
<solid android:color="#6EF562" />
</shape>
</item>
<item android:top="57dp">
<shape android:shape="rectangle">
<solid android:color="#000000" />
</shape>
</item>
Note the "dp" above. That code does not work. But if changed to "px", it works as expected.
Here's the source of my Main.axml file:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#E6EDF0"
android:paddingTop="50dp">
<Button
android:id="#+id/MyButton"
android:layout_width="178.1dp"
android:layout_height="wrap_content"
android:text="#string/Hello"
android:layout_gravity="center"
android:padding="5dp"
android:layout_margin="5dp"
android:textColor="#000000"
android:background="#drawable/splitColors" />
Obviously, I want to use "dp" rather than pixels "px" for scaling reasons taking into different device form factors, but I can't get this to work.

The height of the button, is set at wrap_content. And in your drawable you specify you want to draw the black bottom part at 57dp. So if you're button smaller than 57dp it will never show. That's why it does the job at pixels, because 57px isn't that high. So if you want to use DP make sure your button is at least as high as the value you give <item android:top="57dp">

setting edittext border when is on focus

its something you may think is duplicated question but i could not found simple solution .
i want edittext to be with border when focus .
this is what i try'd , if you have simple or better solution i will be happy to read .
define shape xml :
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#80000000" />
<stroke android:width="2dp" android:color="#5480F7" />
<padding android:left="1dp" android:top="1dp" android:right="1dp"
android:bottom="1dp" />
</shape>
this simple <shape> create border with transparent background .
define xml for edittext :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/edittext_border" android:state_focused="true" />
<item android:drawable="#drawable/notfocus"/> <!-- default -->
</selector>
the problem here is that the xml that create the border is insert to my edittext as drawable meaning that i cant change the background image for the edittext .
i want my edittext to be with spcefic background image and when focus i want the image to stay but will be with border .
thanks .

You can achieve it by two ways:
By creating two different image for the EditText.
By creating two different shape color for the EditText.
By two different image:
Just follow Siddhesh comment to achieve this.
By Different shape for EditText:
you have done right with this way. but i think you have enter wrong background color code to solid attribute.
add:
<solid android:color="#00000000" />
instead of:
<solid android:color="#80000000" />
Hope this help you. If not then let me know. Will like to help you.
Enjoy Coding... :)

make One background image with border and other will be just background of focus set with border else without border.

Seekbar or progress bar with multiple colors

I want to create a bar like this initially when progress is zero it will be a fade in color but and as progress goes on it will become bright on that part(This is best I can explain) main thing is i want bar to show all colors at the same time.

Clip your "on" drawable:
over your "off" drawable:
by using res/drawable/custom_progress_drawable.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- Background -->
<item
android:id="#android:id/background"
android:drawable="#drawable/custom_progress_bar_off"/>
<!-- Secondary progress - this is optional -->
<item android:id="#android:id/secondaryProgress">
<clip android:drawable="#drawable/custom_progress_bar_secondary" />
</item>
<!-- Progress -->
<item android:id="#android:id/progress">
<clip android:drawable="#drawable/custom_progress_bar_on" />
</item>
</layer-list>
From an Activity, use
Drawable progressDrawable = ResourcesCompat.getDrawable(getResources(), R.drawable.custom_progress_drawable, getTheme());
myProgressBar.setProgressDrawable(progressDrawable);
or in xml, use
android:progressDrawable="#drawable/custom_progress_drawable"
And here's the result when using android:max="10" in xml:
It's a little bit off, but you could use setMax() with something more like 10000 and do some offsetting calculations when calling setProgress() to make it cleaner.

Finally! I went on a mission to figure this out for you, so if this suffices, feel free to give me that bounty, haha.
Try using this in your layout:
<View android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight=".20"/>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:orientation="horizontal"
android:gravity="center"
android:layout_weight="0.62">
<View android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight=".03"/>
<ProgressBar style="?android:attr/progressBarStyleHorizontal"
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="0.94"
android:progressDrawable="#drawable/progressmask"
android:progress="0"
android:max="10"
android:rotation="180"/>
<View android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight=".03"/>
</LinearLayout>
<View
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight=".18"/>
</LinearLayout>
which references this drawable (progressmask.xml):
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<shape>
<corners android:radius="50dip" />
<gradient android:startColor="#00000000" android:endColor="#00000000" android:angle="270" />
<stroke android:width="1dp" android:color="#00000000" />
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<corners android:radius="50dip" />
<gradient android:startColor="#aa000000" android:endColor="#aa000000"
android:angle="270" />
<stroke android:width="1dp" android:color="#00000000" />
</shape>
</clip>
</item>
</layer-list>
and this image (colorprogress.png)
What it does is set the image as the background of a linearlayout, which contains a progressbar. The progressbar adds a semi-transparent black mask to the image to make it appear that the lights are off.
NOTE: In order to get this affect, I had to monkey with the progress bar (i.e. flip it, and set it to only 10 intervals. You will have to do some math to get the progress to line up with the image. i.e. setprogress((100-trueprogress)/10). Sorry I did not do this part for you.
This is what it will look like at progress 50% (the small x's and triangles will disappear on the device)
I hope this answers your question!

Like already suggested i think you should go for an layer-list and set multiple drawables then.
Main problem on this is that i need to be resizeable. An fixed size solution would be quite easy to implement.

You can't actually set the progress bars to different colors. You can however use only the on drawable and get the effect that you want. You could just apply a layer mask. What I mean is add a Relative layout which is initially say dark grey throughout i.e the gradient has only ONE color which is dark gray. Now, use code to set the gradient color on the left programmatically. Obviously the color on the left is going to be transparent. Learn more about Linear Gradients. That's about it. You just need to calculate the position from where the right gradient starts, rather where the left gradient(transparent)ends.
This method is slightly flawed and may not work on ALL devices.
The flawless method would be to create multiple .9png images and set the drawable of the progress dialog programmatically every time.

How To Display Border To Imageview?

Friends How To Display Border To Imageview ?
I Want To Result Like Mobile gallery all image display with border.
plz give me ans thanks for advance....

You can create a resource (layer drawable xml) for your ImageView's "border" (actually background), and declare in your theme that the ImageView's background resource is the drawable xml.
If you need this "border" to be changed based on the ImageView's state (focused, selected, etc.), then you should create more layer drawables, and put them together into a selector xml (state drawable).
Then in your theme you should set the ImageView's background to be this selector.xml.
Update
Below is a sample of how to specify a simple border to your images, that will result in
You have to
create a new layer drawable file (image_border.xml),
modify/create your styles.xml file
modify/create your colors.xml file
modify your layout xml file (or your code) to apply the style to the ImageView.
res/drawable/image_border.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<gradient android:angle="90"
android:startColor="#color/image_border_start"
android:centerColor="#color/image_border_center"
android:endColor="#color/image_border_end" />
</shape>
</item>
<item android:top="2dp" android:left="2dp"
android:right="2dp" android:bottom="2dp">
<shape android:shape="rectangle">
<solid android:color="#color/default_back_color" />
</shape>
</item>
</layer-list>
res/values/styles.xml
Add the following lines:
<style name="myImageView">
<!-- 3dp so the background border to be visible -->
<item name="android:padding">3dp</item>
<item name="android:background">#drawable/image_border</item>
<item name="android:scaleType">fitCenter</item>
</style>
res/values/colors.xml
Add the following lines:
<color name="image_border_start">#40990000</color>
<color name="image_border_end">#FF660000</color>
<color name="image_border_center">#FFFF3333</color>
And finally specify the style of your ImageView in your layout xml:
<ImageView android:id="#+id/my_image"
android:layout_width="100dp" android:layout_height="100dp"
android:src="#drawable/efteling"
style="#style/myImageView" />

You can use this XML file as a drawable instead of multiple files, but this
file is placed in drawable folder. In ImageView use this XML file as a
background drawable, like: android:background="#drawable/following code file
name".
I hope this is helpful for you.
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFF" />
<stroke android:width="1dp" android:color="#000000" />
<padding android:left="1dp" android:top="1dp" android:right="1dp"
android:bottom="1dp" />
</shape>

I tried all the above solutions but they didn't work for me!
So I figured out a simple solution to this! :-)
I remember that I read about FrameLayout of Android in the following article saying that it helps us to stack up our UI elements on top of each other in the same order we add them up.
Solution:
<FrameLayout
android:layout_width="112dp"
android:layout_height="112dp"
android:layout_marginLeft="16dp" <!-- May vary according to your needs -->
android:layout_marginRight="16dp" <!-- May vary according to your needs -->
android:layout_centerVertical="true">
<!-- following imageView acts as the boarder which sitting in the background of our main container ImageView -->
<ImageView
android:layout_width="112dp"
android:layout_height="112dp"
android:background="#000"/>
<!-- following imageView holds the image as the container to our image -->
<!-- layout_margin defines the width of our boarder, here it's 1dp -->
<ImageView
android:layout_width="110dp"
android:layout_height="110dp"
android:layout_margin="1dp"
android:id="#+id/itemImageThumbnailImgVw"
android:src="#drawable/banana"
android:background="#FFF"/>
</FrameLayout>
Preview:
And that's it. You will get the following like imageView!
Pros and Cons:
I think this is pretty easy solution to be used in anywhere else and it's all the things you do sits in one single place so easier to modify it. However I don't like to having to add two ImageViews.