Develop Reference

Layout used on different resolution devices

I wrote this login layout that fit perfectly on my device. My problem is that on another device will not be displayed correct because specified values are used for top, left margins.
What I need to do to be sure that constrains will be keeped on any device?
P.S. I have images for mdpi, hdpi etc.
The code is:
<?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_login"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="#style/AppTheme.NoActionBar"
tools:context="com.abc.abc.Login"
android:layout_gravity="center_horizontal">
<RelativeLayout android:id="#+id/content_container"
android:layout_width="match_parent"
android:layout_height="710dp"
android:gravity="center_horizontal">
<RelativeLayout android:id="#+id/login_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
<ImageView android:id="#+id/login_button"
android:src="#drawable/login"
android:layout_marginTop="588dp"
android:layout_width="360dp"
android:layout_height="53dp" />
<ImageView android:id="#+id/email_and_password"
android:src="#drawable/email_and_password"
android:layout_marginTop="465dp"
android:layout_width="362dp"
android:layout_height="107dp" />
<ImageView android:id="#+id/separator"
android:src="#drawable/separator"
android:layout_marginStart="169dp"
android:layout_marginTop="412dp"
android:layout_width="25dp"
android:layout_height="12dp" />
<ImageView android:id="#+id/facebook_button"
android:src="#drawable/facebook"
android:layout_marginTop="383dp"
android:layout_width="166dp"
android:layout_height="66dp" />
<ImageView android:id="#+id/google_button"
android:src="#drawable/google"
android:layout_marginStart="196dp"
android:layout_marginTop="383dp"
android:layout_width="166dp"
android:layout_height="66dp" />
<ImageView android:id="#+id/dont_have_an_account"
android:src="#drawable/dont_have_an_account"
android:layout_marginStart="54dp"
android:layout_marginTop="665dp"
android:layout_width="255dp"
android:layout_height="19dp" />
<ImageView android:id="#+id/logo"
android:src="#drawable/logo1"
android:layout_marginTop="80dp"
android:layout_width="220dp"
android:layout_height="219dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
</RelativeLayout>

Try not to use marginTop on all the views. Instead set the top most view with a marginTop and then all the images below them can be placed by android:layout_below="<imagView id>" and with some marginTop relative to the view above and not the parent.
You can check this answer

How to add image background to imageview

I want to create this Image
My work: I am getting this result
I have created this using
<ImageView
android:id="#+id/grid_img"
android:layout_width="150dp"
android:layout_height="150dp"
android:paddingBottom="3.5dp"
android:paddingLeft="3.5dp"
android:paddingRight="3.5dp"
android:paddingTop="3.5dp"
android:scaleType="fitXY"
android:background="#drawable/image_frame_arc"
android:src="#mipmap/image_1" />
how to overcame these space on all sides.

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/ID_NAME"
android:src="drawable/IMAGE_NAME_YOU_WANT_TO_SHOW_FROM_DRAWABLEFOLDER"
/>
just replace "ID_NAME" with the name you desired and your desired image name which is in drawable folder. hopes it will fine.

What about doing like this as shown,
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/image_1"
android:scaleType="fitXY"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:src="#drawable/image_frame_arc" />
</merge>

try something like this:
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/grid_img"
android:layout_width="150dp"
android:layout_height="150dp"
android:background="#drawable/image_frame_arc"
android:padding="3.5dp"
android:scaleType="fitXY"
android:src="#mipmap/image_1"/>
<ImageView
android:layout_width="wrap_content"
android:background="#drawable/number"
android:layout_height="wrap_content"/>
</FrameLayout>

Android custom row layout issue

Sorry in advance I need to include a few pictures to make my problem a little easier to understand. I am using a linear layout for my custom rows and it is giving me lots of trouble trying to get the rows to look how I want. Currently it looks like this
Please forgive the quick paint picture I am about to show but it is how I would like the layout to look.
I would like to add the name textbox above the dog picture, and a time stamp textbox above each of the 1 and 2. Whenever I try to add textboxes to display this it really messes with the layout. The textbox above the dog picture always wants to go to the right or left of the dog image and push the image to the middle of the page and the buttons get spread out further. I do not have much experience with this layout I typically do relative layout where I can drag and drop pieces. Any advise or help is greatly appreciated.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageButton
android:layout_width="150dip"
android:layout_height="150dip"
android:id="#+id/dogimage"
android:clickable="true"
android:layout_alignParentLeft="true"
android:background="#drawable/dogpic"
android:onClick="sendProfile"
android:scaleType="fitXY" />
<ImageButton
android:layout_width="75dip"
android:layout_height="75dip"
android:id="#+id/dog1num1"
android:background="#drawable/num1"
android:clickable="true"
android:onClick="NumberOne"
android:layout_marginLeft="10dp"
android:layout_marginTop="75dp"
android:scaleType="fitXY" />
<ImageButton
android:layout_width="75dip"
android:layout_height="75dip"
android:id="#+id/dog1num2"
android:background="#drawable/num2"
android:clickable="true"
android:onClick="NumberTwo"
android:layout_marginLeft="10dp"
android:layout_marginTop="75dp"
android:scaleType="fitXY" />
</LinearLayout>

You need to wrap your imageview/textview combo in a LinearLayout. And you should set the imageButton using src, not background. Do it like this:
<?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:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Title" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageButton
android:id="#+id/dogimage"
android:layout_width="150dip"
android:layout_height="150dip"
android:clickable="true"
android:onClick="sendProfile"
android:scaleType="fitXY"
android:src="#drawable/dogpic" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Timestamp 1" />
<ImageButton
android:id="#+id/dog1num1"
android:layout_width="75dip"
android:layout_height="75dip"
android:layout_marginLeft="10dp"
android:clickable="true"
android:onClick="NumberOne"
android:scaleType="fitXY"
android:src="#drawable/num1" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Timestamp 1" />
<ImageButton
android:id="#+id/dog1num2"
android:layout_width="75dip"
android:layout_height="75dip"
android:layout_marginLeft="10dp"
android:clickable="true"
android:onClick="NumberOne"
android:scaleType="fitXY"
android:src="#drawable/num2" />
</LinearLayout>
</LinearLayout>
</LinearLayout>

ImageView: scale properly above Button

I'm new to Android and everything went well until now I have to deal with the layout.
What I want is this layout:
Layout how it should be:
The image should be properly scaled and keep its ratio.
That's why I tried this XML code, but it doesn't work the way I want. The image keeps its ratio but the left and right side are out of the screen when vertical and cut at the top and bottom when horizontal:
Layout how it is:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:orientation="vertical"
android:background="#color/background">
<ImageView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center"
android:src="#drawable/logo"
android:gravity="center"
android:scaleType="centerCrop"
android:contentDescription="#string/app_logo"
android:layout_weight="2.5" />
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4"
android:gravity="center">
<Button
android:id="#+id/id1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="20dp"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:text="#string/text1"
android:textSize="40sp"
/>
<Button
android:id="#+id/id2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:text="#string/text2"
/>
<Button
android:id="#+id/id3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:layout_gravity="center"
android:text="#string/text3" />
</LinearLayout>
</LinearLayout>
I googled a lot but just could not find what I was looking for.
Please help!

It looks like android:scaleType="fitCenter" is what you are looking for

you have to design 2 layout for you vertical state and horizontal state and put them in two different folder in your android project:
while you put your regular layout in the layout folder you should put the landscape layout in the layout-land folder.

Try setting android:scaleType="fitXY" to your ImageView.

Is there a way to offset a view from center?

I'm trying to possition my button not exactly in center, but let's say in the 2/5s of the screen height, I was looking for attribute unsuccessfully, so I tried this approach
<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="#drawable/background"
android:padding="20dp" >
<ImageButton
android:id="#+id/flashlight_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_above="#+id/fakeView"
android:background="#null"
android:contentDescription="#string/flashlight_button_description"
android:src="#drawable/freeml_bright" />
<View
android:id="#+id/fakeView"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_centerInParent="true"
android:background="#FFAABB" />
</RelativeLayout>
However it does not work, even if I set margin on the fake view.
Padding attribute works, however as it is a big image and if I want it to start at 2/5ths of screen height, it covers the center point of screen, so if I use padding attribute it works but it pushes it away from center and does not allow it to cover it.
Alhough, I made it work using LinearLayout, which I wanted to avoid because there are more Views on top and bottom next to each other so it would lead to nested views using linear layout. Unfortunately I think its the only option.
It basically it uses another linear layout that fills the remaining space left unused by top and bottom views with height=0dp and weight=1 and sets its gravity to center.
<?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:orientation="vertical"
android:padding="20dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/application_logo_description"
android:src="#drawable/mylight" />
<ImageButton
android:id="#+id/settings_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:background="#null"
android:contentDescription="#string/settings_button_description"
android:src="#drawable/settings_button" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<ImageButton
android:id="#+id/flashlight_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#null"
android:contentDescription="#string/flashlight_button_description"
android:src="#drawable/flashlight_button_selector" />
<View
android:id="#+id/fakeView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="60dp"
android:background="#FFAABB" />
</LinearLayout>
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:contentDescription="#string/powered_by_description"
android:src="#drawable/powered_by" />
<ImageButton
android:id="#+id/ad_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:background="#null"
android:contentDescription="#string/ad_button_description"
android:src="#drawable/freeml" />
</LinearLayout>

Depending on the screen size of the target device, padding by X dp might move it more than just a fifth of the height.
You might have to code this movement yourself. However, nothing prevents you from doing:
<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="#drawable/background"
android:padding="20dp" >
<View
android:id="#+id/fakeView"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_centerInParent="true"
android:background="#FFAABB" />
<ImageButton
android:id="#+id/flashlight_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_above="#+id/fakeView"
android:marginBottom="50dp"
android:background="#null"
android:contentDescription="#string/flashlight_button_description"
android:src="#drawable/freeml_bright" />
</RelativeLayout>

Don't use margin, use padding (top), like so:
<View
android:id="#+id/fakeView"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_centerInParent="true"
android:paddingTop="80dp"
android:background="#FFAABB" />
That should work, though I've not tested it!

try using attribute android:layout_toLeftOf="#+id/fakeView"