Develop Reference

place an image between other elements so that it scales to fit all screens while keeping aspect ration intact

I want to do that in my xml. Currently I'm doing this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.example.MainActivity">
<ImageView
android:id="#+id/main_drawable_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/text" />
<LinearLayout
android:id="#+id/main_drawable_logo"
android:layout_width="match_parent"
android:layout_below="#id/main_drawable_text"
android:layout_height="wrap_content">
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.1"
android:layout_centerHorizontal="true"
android:adjustViewBounds="true"
android:src="#drawable/logo" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_below="#id/main_drawable_logo"
android:layout_height="wrap_content">
<TextView
android:id="#+id/credits"
android:layout_width="wrap_content"
android:layout_centerHorizontal="true"
android:layout_height="wrap_content"
android:text="#string/credits" />
</LinearLayout>
</RelativeLayout>
In my testing device I only get part of the #drawable/logo, the rest falls out of the screen as does the credit's text. I can of course adjust the weight until I have the desired outcome, but how can I make sure I will get the expected result on all devices?
What I want is main_drawable_text always matching the width of the screen (from margin to margin), credits always being on the bottom of the screen and drawable_logo been scaled to fit the free space between them, yet with the original aspect ratio.

If I well understand UI you want to design you don't need LinearLayout but only existing RelativeLayout and inside it you can place your element according to each others positions (with android:layout_above, android:layout_below and so on). To keep original ratio of your drawable use android:scaleType="fitCenter".
Here is a layout which display (my interpretation of) what you want:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin">
<ImageView
android:id="#+id/main_drawable_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/text"/>
<ImageView
android:id="#+id/logo"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_above="#id/credits"
android:layout_below="#id/main_drawable_text"
android:layout_centerHorizontal="true"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/logo"/>
<TextView
android:id="#+id/credits"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:text="#string/credits"/>
</RelativeLayout>

How to bring imageView in front of cardview ? When both are of Relative Layout childs

I have a layout XML:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/containor"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff6da"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.vats.vatishs.cardviewprogrammatically.MainActivity">
<FrameLayout
android:id="#+id/card"
android:layout_width="220dp"
android:layout_marginTop="10dp"
android:layout_height="wrap_content">
<TextView
android:background="#color/white"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp"
android:text="Hello I am a text View." />
</FrameLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="210dp"
android:background="#drawable/select_delete_chim" />
</RelativeLayout>
which works fine. The result will be a image view above frame layout but when I use the following xml in which i have replace frame layout with CardView:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/containor"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff6da"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.vats.vatishs.cardviewprogrammatically.MainActivity">
<android.support.v7.widget.CardView
android:id="#+id/card"
android:layout_width="220dp"
android:layout_marginTop="10dp"
android:layout_height="wrap_content">
<TextView
android:background="#color/white"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp"
android:text="Hello I am a text View." />
</android.support.v7.widget.CardView>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="210dp"
android:background="#drawable/select_delete_chim" />
</RelativeLayout>
then the result will be: ImageView at the back of CardView.
Any Solution for this?
One thing more, It will work fine on pre-lollipop devices but on lollipop it doesn't work.
Output with CardView on pre-lollipop devices (required output)
Output with CardView on lollipop devices

CardView has default elevation which is greater than ImageView, So we have to add greater elevation in ImageView than CardView's elevation.
e.g. imageView.setElevation(10); and cardView.setElevation(5);
Now, its working fine on all devices.

You can use this attr
app:cardElevation="0dp"
to the CardView in XMl .
Like this
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
app:cardElevation="0dp"
app:cardUseCompatPadding="true">
This will make other view in Front of CardView

Do it like this,
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/myCardView"
android:layout_width="match_parent"
android:layout_height="match_parent"
card_view:cardBackgroundColor="#android:color/transparent"
card_view:cardElevation="0dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_edit"
android:background="#android:color/transparent"/>
</android.support.v7.widget.CardView>
It will bring the ImageView to front.

Write this line in your java code after initializing the ImageView.
imageView.bringToFront();

Adding just app:cardElevation="-1dp" to the CardView in your xml will fix the issue.

Write Image view Above cardview,hopefully it solve the problem
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/containor"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff6da"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.vats.vatishs.cardviewprogrammatically.MainActivity">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="210dp"
android:src="#drawable/select_delete_chim" />
<android.support.v7.widget.CardView
android:id="#+id/card"
android:layout_width="220dp"
android:layout_marginTop="10dp"
android:layout_height="wrap_content">
<TextView
android:background="#color/white"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp"
android:text="Hello I am a text View." />
</android.support.v7.widget.CardView>
</RelativeLayout>

Here is a complete answer to your question
You can wrap CardView with a FrameLayout and put an ImageView outside of the CardView's parent like that
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout ...>
<FrameLayout...>
<android.support.v7.widget.CardView...>
<Content/>
</android.support.v7.widget.CardView>
</FrameLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
... />
</RelativeLayout>
alternatively here is the Java code that supports Android versions below and after lollipop
image.bringToFront();
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
image.setElevation(10);
}
this will bring the image to the front

an easy way is to use something like this:
<RelativeLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content">
....
</android.support.v7.widget.CardView>
</LinearLayout>
<ImageView
android:layout_width="wrap_parent"
android:layout_height="wrap_content">
note that this is because the elevation of cardview. its default elevation is bigger than ImageView.
this way you can use a LinearLayout to put CardView inside it. then you can use RelativeLayout to make ImageView on the top of CardView!
https://stacklearn.ir/course/kotlin-basic-programming-course

CardView -> app:cardElevation ="4dp"
ImageView -> android:translationZ="6dp"
Send the CardView to the back.

Image button in relative layout android not showing the image

I am unable to see the image of the Image button when the image is in relative layout. If i use a different layout, image is working fine.
My layout is as follows:
<?xml version="1.0" encoding="utf-8"?>
<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:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin">
<android.support.v7.widget.RecyclerView
android:id="#+id/cardList"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<ImageButton
android:layout_width="56dp"
android:layout_height="56dp"
android:src="#drawable/plus"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginRight="16dp"
android:layout_marginBottom="16dp"
android:id="#+id/fab"
android:elevation="1dp"
/>
</RelativeLayout>
the same image if i set in some other layout things work fine. Can any one give me some pointers where to look out.
There are no error or warnings in the log.
The actual png image is as follows:

If you want to implement floating button, the better way will be using existing library:
Add this line on your build.gradle dependencises:
compile 'com.getbase:floatingactionbutton:1.3.0'
And change your layout to:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin">
<android.support.v7.widget.RecyclerView
android:id="#+id/cardList"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<com.getbase.floatingactionbutton.AddFloatingActionButton
android:id="#+id/common_ring_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="10dp"
android:layout_marginEnd="10dp"
android:layout_marginRight="10dp"/>
</RelativeLayout>
if you want to customise your floating button for example change colour, add this line as RelativeLayout attribute :
xmlns:fab="http://schemas.android.com/apk/res-auto"
and add the attribute below to the AddFloatingActionButton xml
fab:fab_colorNormal="#color/floating_button_bg"
fab:fab_colorPressed="#color/floating_button_bg_pressed"

Android minus Margin/Padding

I work with android, I want to draw design like this
There are two LinearLayuots ( blue and white ), I want add picture their borders, I have tryied to use minus margin but not work
Can Anybody help me?

You'd want something like this:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/firstRow"
android:layout_width="match_parent"
android:layout_height="70dp"
android:background="#013032"
android:orientation="horizontal"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="70dp"
android:background="#ff3e7730"
android:layout_below="#+id/firstRow"/>
<ImageView
android:layout_alignParentRight="true"
android:layout_marginRight="30dp"
android:layout_width="140dp"
android:layout_height="140dp"/>
</RelativeLayout>

you can use a RelativeLayout for your layout's parent and then add two LinearLayout and one ImageView or Button. and set your Button (or ImageView,etc) to centerVertical and alignParentLeft and give some marginLeft to it!
<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="wrap_content"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
tools:context="com.example.neo.myapplication.MyActivity">
<LinearLayout
android:id="#+id/aboveLayout"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#android:color/darker_gray"
></LinearLayout>
<LinearLayout
android:layout_below="#+id/aboveLayout"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#android:color/holo_green_dark"></LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="10dp"
android:src="#drawable/ic_launcher"/>
</RelativeLayout>

Problems with RelativeLayout Android

I am new to Java and Android and I am facing this problem:
I would like to add a photo to the top/left corner of a Rectangle. However, the ImageView of my photo gets always more space and so, it creates a blank space on top that I would not like to have. Here is a screenshot:
The code of my Layout is:
<?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"
android:padding="25dp">
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="#drawable/profile_frame" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageView1"
android:layout_centerVertical="true"
android:src="#drawable/foto_facebook_juan_mejorada" />
</RelativeLayout>

Try this:
android:scaleType="fitStart"
android:adjustViewBounds="true"

It may be because of
size of the image. If the image not fit in the space given it will add blank space.

// try this way
<?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:gravity="center">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="30dp">
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/profile_frame" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:src="#drawable/foto_facebook_juan_mejorada" />
</FrameLayout>
</LinearLayout>