Develop Reference

ImageView overlay not working

I have 2 layouts in my xml, a CircularImageView and a ImageView, and the ImageView must appear on top of the CircularImageView.
I've tried:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fragment_kids_register_ll_kid"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/md_white_1000"
android:orientation="horizontal">
<RelativeLayout
android:padding="16dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<com.mikhaellopez.circularimageview.CircularImageView
android:id="#+id/fragment_kids_row_img_kids"
android:layout_width="70dp"
android:layout_height="70dp"
android:src="#drawable/ic_boy"
/>
<ImageView
android:id="#+id/fragment_kids_row_iv_crown"
android:layout_toRightOf="#+id/fragment_kids_row_img_kids"
android:layout_marginLeft="-26dp"
android:layout_marginTop="-22dp"
android:layout_width="48dp"
android:layout_height="48dp"
android:src="#drawable/ic_crown"/>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/fragment_kids_row_tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:textColor="#color/md_black_1000"
android:textSize="24sp" />
<TextView
android:id="#+id/fragment_kids_row_tv_age"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="1 ano e 4 meses"
android:textColor="#808080"
android:textSize="12sp" />
</LinearLayout>
</LinearLayout>
And it is getting cut off:
I need the image to be shown exactly at that position in the picture, but not "cropped", what I am missing here ?
BTW, this component is part of a RecyclerView row.
EDIT ---
I forgot to mention, the image is just a placeholder to show the Avatar, but the image is dinamically populated !
Thanks !

The padding (16dp) that you are applying to the first relativeLayout makes you think that there is more place and that you can move up the imageView. Actually the margin is like a gap, it doesn't extend your layout.
This is the solution I suggest , using a FrameLayout
<FrameLayout
android:layout_width="100dp"
android:layout_height="100dp">
<com.mikhaellopez.circularimageview.CircularImageView
android:id="#+id/fragment_kids_row_img_kids"
android:layout_gravity = "center"
android:layout_width="70dp"
android:layout_height="70dp"
android:src="#drawable/ic_boy"
/>
<ImageView
android:id="#+id/fragment_kids_row_iv_crown"
android:layout_width="48dp"
android:layout_height="48dp"
android:src="#drawable/ic_crown"
android:layout_gravity="right|top" />
</FrameLayout>
EDIT : You don't have to use a frameLayout, you can use a relativeLayout if you want to set different margins. The point here is really to make your containing layout bigger so you can place the imageview easily.

If you want one image to be on top of another, why you use android:layout_toRightOf?
Remove it and second image should cover first one.
Also you can try to remove margins at second image and use centerInParent, centerVertically or centerHorizontally.
Or maybe I didn't got all the problem ) then pls provide more details. Thanks.

Have you tried Using an image editor like Paint/Photoshop and merging the two images? Then you can just display one image in your view.

try using a linear layout with the orientation set to vertical.

How to build a layout like this?

I want to build an activity with the following design. Up until now I just used relative and linear layouts.
Is it possible to make the following design with this group views or should I be useing something else?
I want to put some animations on the shapes no.2 and no.3 but not the "text1" and "text2".
What should I do? Is it possible to design this only in my xml file or should I be doing some work in my java code?
* just the colored part is the layout , the numbers and the arrows are not part of it.

This is what I did, I used 3 invisible views to help me put my imageviews where I want them.
As for the sizes, I will use "dimens.xml" and different values for different screen sizes.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/background" >
<View
android:id="#+id/center"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_centerInParent="true"
android:visibility="invisible" />
<view
android:id="#+id/up"
android:layout_width="1dp"
android:layout_height="1dp"
android:layout_above="#id/center"
android:layout_toRightOf="#id/center"/>
<view
android:id="#+id/down"
android:layout_width="1dp"
android:layout_height="1dp"
android:layout_below="#id/center"
android:layout_toLeftOf="#id/center"/>
<ImageView
android:id="#+id/p_button"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_above="#id/down"
android:layout_toLeftOf="#id/up"
android:src="#drawable/p"
tools:ignore="ContentDescription" />
<ImageView
android:id="#+id/s_button"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_below="#id/up"
android:layout_toRightOf="#id/down"
android:src="#drawable/s"
tools:ignore="ContentDescription" />

Android Single Layout to FIt All Screen Sizes

I am updating my Android app and realized that I have created a layout for every possible screen size (layout-small, layout-large, etc...) It would be a huge pain to go through every XML file and manually make a small change. I am attempting to create a single XML file to support all screen sizes. After reviewing the Android documentation and other questions on stackoverflow, it seems LinearLayout is the best choice as you can provide a weightSum and layout_weight for each item in the layout. This is not working as expected (see below code and images). I am doing this correctly? Do I have to go back to creating a RelativeLayout for every possible screen size?
My images are an a single drawable folder and my layouts are in a single layout folder.
XML
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bg"
android:gravity="center"
android:orientation="vertical"
android:weightSum="100" >
<ImageButton
android:id="#+id/btn1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/image0"
android:background="#null"
android:layout_weight="30" />
<ImageButton
android:id="#+id/btn2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/image1"
android:background="#null"
android:layout_weight="30" />
<ImageButton
android:id="#+id/key"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="30"
android:background="#null"
android:src="#drawable/image0_key" />
<TextView
android:id="#+id/tvScore"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="Score: 0"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_weight="10"
android:layout_gravity="left" />
</LinearLayout>
Resulting View (overflow of items and layout not consistent for screen sizes)
Nexus One:
Tablet:
EDIT:
I have added the following drawable-____ folders. It produces the same result.

You might want to consider creating compatibility layout folders. :)

Yes we have a solution for the same by using android's percent layout we can now use app:layout_heightPercent and app:layout_widthPercent to fit all the screens using single layout.
compile 'com.android.support:percent:23.0.0'
Why use LinearLayout weight property now we have simpler solution.
Demo HERE !
GitHub project HERE !
Consider a simple sample
<android.support.percent.PercentRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/fifty_huntv"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#ff7acfff"
android:text="20% - 50%"
android:textColor="#android:color/white"
app:layout_heightPercent="20%"
app:layout_widthPercent="50%" />
<TextView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_toRightOf="#id/fifty_huntv"
android:background="#ffff5566"
android:text="80%-50%"
app:layout_heightPercent="80%"
app:layout_widthPercent="50%"
/>
</android.support.percent.PercentRelativeLayout>
Hope it's useful for someone :-)

Use Below layout for arranging your ImageButton and TextView. It works for all screen size Layouts.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="3" />
<ImageButton
android:id="#+id/imageBtn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/ic_launcher" />
<ImageButton
android:id="#+id/imageBtn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/ic_launcher" />
<TextView
android:id="#+id/tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Score: 0" />
</LinearLayout>

Never put an weight sum like hundred ,just try using single digits

DisplayMetric dm =new DisplayMetric();
getWindowManager().getDefaultDisplay().getMetrics(dm);
int h= dm.heightPixels;
int w= dm.widthPixels;
h=h/10; // 10 is for example for 10% of display height
w=((w*20)/100); // 20%of display width
LinearLayout.LayoutParams params= new LinearLayout.LayoutParams(w,h);
YourObject.setLayoutParams(params);
//(YourObject) can be everything such as button , image button, textview,...

There are two issues here, one is to fill the size of the screen and the other is supporting the various resolution sizes of mobiles. Even within xxxhdpi, there are variations as new flagship Samsung Mobiles are drifting to 19.5 x 16.
Linear layout along with weight attributes does give a good coverage but beware of the nested tags and performance. It worked out well for most of the scenarios I have handled.
In addition, as pointed out in other answers, different drawables/resources for the standard sizes helps maintaining similar view in all devices.

Bring an ImageView in front of another?

Is there anyway to bring an ImageView in front of another in android . For example , i have a big image and how i put a small one in the top left of the big ones. Something like the small one will overlap the bigs one . thanks for helping

Wrap the images in a RelativeLayout. Place the image you want on top last in the xml, like so:
<RelativeLayout
...>
<ImageView
android:background="#drawable/backgroundimage"
... />
<ImageView
android:background="#drawable/foreground"
... />
</RelativeLayout>

Use framelayout as your root layout and then place your big image and then your small image
like this
<framelayout
......
......
......>
<ImageView
// your big image
......
.....
.....>
</ImageView>
<ImageView
// your Small image
......
.....
.....>
</ImageView>
</framelayout>

For me frameLayout is best choose ,
Than you will need just to call this line
ImageViewSmall.bringToFront();
no need even for this line , just create from code imageViews first big after small. position x y also with :
ImageViewSmall.setX( float X );
ImageViewSmall.setY( float X );

I used this to create a video "play" overlay over a thumbnail as suggested by Randy.
Here's some slightly more complete code which also makes sure the images are centered in the parent
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center">
<ImageView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/ivBackground"
android:scaleType="fitCenter"
android:layout_centerInParent="true"
android:src="#drawable/downloadplaceholder"/>
<ImageView
android:layout_height="wrap_content"
android:layout_gravity="center"
android:scaleType="fitCenter"
android:layout_width="wrap_content"
android:layout_centerInParent="true"
android:id="#+id/ivPlayOverlay"
android:src="#drawable/play_button_overlay"/>
</RelativeLayout>

You can use RelativeLayout; you can test this code, I test it and it works fine:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/a_t1"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_marginLeft="10dp"
android:background="#000000" />
<ImageView
android:id="#+id/a_t2"
android:layout_width="34dp"
android:layout_height="34dp"
android:layout_gravity="top|left"
android:background="#c12fff" />

I have tried to do a similar thing with an edit text in front of a linear layout, I found that just placing the XML for the edit text after the XML for the linear layout brought it on top when the app was run. Hope this helps.

How to achieve this kind of layout in Android

I'm new to Android development and I'm trying to achieve a layout for my app that is capable of handling different screen resolutions/ratios.
I've been reading a lot of the documentation and questions on this site to try to understand the basics and concepts.
First I went through:
developer.android.com/guide/practices/screens_support.html
And questions like:
stackoverflow.com/questions/6403619/how-to-support-all-the-different-resolutions-of-android-products
I've got a pretty basic idea on how to handle things out. But still, its pretty difficult for a starter to get going, and I found myself stucked trying to achieve the solution I came up with.
I designed my app to a target resolution of 480x800, and set it up to always show in portrait mode.
This is how it looks like and how I understand it should work (I used Waldo for the sake of example haha):
(sorry for the link, I need 10 rep to post images)
http://i.imgur.com/KXTAXir.jpg
My root Layout is a LinearLayout, wich contains 3 other Layouts being A and C set up to a weight of 0.8 while B is at 8.4. This is all fine, but the contents of B are set up to DP units at the moment just to be able to test.
B consists of a frame Layout who has 3 other Layouts inside, where 2 of them are working fine, and shown only when needed. The problem is that I need B to be able to adapt based on the contents of it first child: a LinearLayout wich contains 2 ImageView and 1 ProgressBar. I need that those ImageView always keep their ratio.
Here is an example of how it should work:
http://i.imgur.com/cH7fUze.jpg
Imagine those 4 are real screens, wich vary in ratio and size. So my app should only adapt B (from my first image) to keep the images original ratio.
Here is the layout code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/darkgray"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.8"
android:background="#666666" >
<TextView
android:id="#+id/level_text_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="LEVEL"
android:textAppearance="?android:attr/textAppearanceSmall" />
<TextView
android:id="#+id/level_text_score"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="SCORE"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/level_text_clock"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="01:59"
android:textAppearance="?android:attr/textAppearanceSmall" />
</RelativeLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="8.4" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="200dp"
android:adjustViewBounds="true" />
<ProgressBar
android:id="#+id/progressBar1"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="1000"
android:progress="0" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="200dp"
android:adjustViewBounds="true" />
</LinearLayout>
<RelativeLayout
android:id="#+id/pauseMask"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
android:visibility="gone" >
</RelativeLayout>
<RelativeLayout
android:id="#+id/gameoverMask"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
android:visibility="gone" >
</RelativeLayout>
</FrameLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.8"
android:background="#666666" >
<TextView
android:id="#+id/level_text_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="0/0"
android:textAppearance="?android:attr/textAppearanceMedium" />
<Button
android:id="#+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="Button"
android:onClick="useHint" />
<Button
android:id="#+id/button2"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/button1"
android:layout_centerVertical="true"
android:text="Button"
android:onClick="toggleSound" />
<Button
android:id="#+id/button3"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/button2"
android:layout_centerVertical="true"
android:text="Button"
android:onClick="togglePause" />
</RelativeLayout>
The last thing that stays unclear to me is how to handle the text and button sizes. Should I set them in DPs? How do I get them to scale accordingly like it can be seen on the bottom of my second picture.
Thank you for your help, I also want this to serve as an example to others that are having trouble to understand how to handle this kind of scenarios.

I'm not sure, if I got your question right.
However, you can specify different layouts for different screen sizes and orientations, as described here: http://developer.android.com/guide/practices/screens_support.html
Just give the respective suffix in the name of your layout XML file.

I ended up creating a custom View for my images. The view calculates the space thats left on its parent, scales the images manually and then resizes itself to the same size of the resulting image.
To resize the progress bar to have the same width as the images, I used a custom listener that gets triggered when my custom views get resized. Then I resize the progressbar to match their width.
With this I achieved what I wanted, a layout that will work perfectly in all screen sizes.