Develop Reference

How to make a relative Layout app responsive without too many code changes?

I have an app in relative layout, inside there is:
1) A vertical linear layout having a switch and 2 editText.
2) A horizontal linear layout below the vertical one with 2 buttons.
It is working fine on a galaxy A8 phone but the horizontal linear layout is overlapping on bottom editText on smaller screen phone.
I need some guidance on how to make it responsive without too much code changes as my interface design technique is pretty poor.
Thanks for your help.
I tried to convert it to Constraint-Layout but it makes my user interface worse. The app stopped responding from it.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity"
android:animateLayoutChanges="true"
android:clipChildren="false">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="15dp">
<Switch
android:id="#+id/switch1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="French to English"
android:textSize="18sp"
android:checked="true"
android:thumbTint="#color/colorPrimary"
android:trackTint="#color/colorAccent" />
<EditText
android:id="#+id/pname"
android:layout_width="match_parent"
android:layout_height="225dp"
android:layout_marginTop="15dp"
android:maxLength="100"
android:background="#drawable/rounded_border_edittext"
android:ems="15"
android:gravity="top"
android:hint="Enter your text to translate here..."
android:inputType="textMultiLine"
android:padding="10dp" />
<EditText
android:id="#+id/target"
android:layout_width="match_parent"
android:layout_height="225dp"
android:layout_marginTop="30dp"
android:maxLength="100"
android:background="#drawable/rounded_border_edittext1"
android:ems="15"
android:gravity="top"
android:hint="Your translated text will appear here..."
android:inputType="textMultiLine"
android:padding="10dp" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:orientation="horizontal"
android:padding="15dp">
<Button
android:id="#+id/btnsave"
style="#style/Widget.AppCompat.Button.Colored"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Save" />
<Button
android:id="#+id/btntranslate"
style="#style/Widget.AppCompat.Button.Colored"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Translate" />
</LinearLayout>
</RelativeLayout>

try setting the height to 190dp for both EditTexts in the vertical LinearLayout
android:layout_height="190dp"
and also their margingTop value to 15dp
android:layout_marginTop="15dp"
which will fit the minimum screen size of an Android device which is 426x320

Working with the UI design of a ListView custom row (Android)

I made a custom row layout xml file for a ListView so I could design each row to look how I want, but I'm having trouble actually designing the UI in this xml file. I'm trying to make the the activity ultimately look like this:
As you can see there is a listView with rows, each consisting of a game with a textView as a title, two buttons, and an imageView as the background. I've been doing a lot of research through Google's UI documentation but I can't figure out how to get the elements to appear on top of each other like this while have the row scale perfectly to different screen sizes. The furthest I've gotten is using a FrameLayout to place the different views on top of each other, but from here I cannot place the views in the correct position relative to each other. Any advice on how to do this or where I can find out how to do this?
XML so far (terrible I know):
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|center_horizontal">
<ImageView
android:id="#+id/gameImageID"
android:layout_width="340dp"
android:layout_height="160dp"
android:scaleType="centerCrop"
app:srcCompat="#drawable/overwatch" />
<TextView
android:id="#+id/gameNameID"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal"
android:layout_marginTop="15dp"
android:text="TextView" />
<Button
android:id="#+id/btnJoinLobby"
android:layout_width="88dp"
android:layout_height="wrap_content"
android:onClick="myClickHandlerJoin"
android:text="Join Lobby"
android:layout_gravity="center_horizontal"
android:layout_marginTop="15dp" />
<Button
android:id="#+id/btnCreateLobby"
android:layout_width="102dp"
android:layout_height="wrap_content"
android:onClick="myClickHandlerCreate"
android:text="Create Lobby"
android:layout_gravity="center_horizontal"
android:layout_marginTop="15dp"
android:layout_toEndOf="#+id/gameNameID" />
</RelativeLayout>

Sure that is no problem. Just use weight to handle spacing and you don't need the frame layout just use relative as a root.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|center_horizontal">
<ImageView
android:id="#+id/gameImageID"
android:layout_width="match_parent"
android:layout_height="160dp"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:scaleType="centerCrop"
app:srcCompat="#drawable/overwatch" />
<TextView
android:id="#+id/gameNameID"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal"
android:layout_marginTop="15dp"
android:text="TextView" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:weightSum="2">
<RelativeLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content">
<Button
android:id="#+id/btnJoinLobby"
android:layout_width="102dp"
android:layout_height="wrap_content"
android:onClick="myClickHandlerJoin"
android:text="Join Lobby"
android:layout_centerHorizontal="true"
android:layout_marginTop="15dp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content">
<Button
android:id="#+id/btnCreateLobby"
android:layout_width="102dp"
android:layout_height="wrap_content"
android:onClick="myClickHandlerCreate"
android:text="Create Lobby"
android:layout_centerHorizontal="true"
android:layout_marginTop="15dp" />
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
You could also just use two nested Relative Layouts with gravity bottom left and bottom right and hold your buttons in there and align buttons to right with margins from side. Also don't use the "endOF" aligning as that will force a left alignment and make larger gaps on the right side of the screen even if you make it look good for one phone it will look bad on another. Aesthetics matter.
Or you could just float your buttons to the bottom left and bottom right with margins from side and make both set to match_parent so they fill the space but use padding to shrink the button look inside the space, but this can get messy. So I prefer the implementation above although some people won't like the extra layouts. It's just a matter of opinion though as the performance diff of using extra nested layouts is so tiny that no one can actually argue performance with a straight face haha.

<RelativeLayout
android:layout_width="340dp"
android:layout_height="160dp"
android:scaleType="centerCrop"
android:background="#drawable/overwatch" >
<TextView
android:id="#+id/gameNameID"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal"
android:layout_marginTop="15dp"
android:text="TextView" />
<Button
android:id="#+id/btnJoinLobby"
android:layout_width="88dp"
android:layout_height="wrap_content"
android:onClick="myClickHandlerJoin"
android:text="Join Lobby"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="15dp" />
<Button
android:id="#+id/btnCreateLobby"
android:layout_width="102dp"
android:layout_height="wrap_content"
android:onClick="myClickHandlerCreate"
android:text="Create Lobby"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="15dp"
android:layout_toEndOf="#+id/btnJoinLobby" />
</RelativeLayout>
Try this. And let me know if that helps.

Relative layout on different devices

I have an app which is supposed to work on different layouts of phone and tablets.
On my phone it uses a vertical layout and uses all the screen while on my tablet it stays tiny instead of using the whole screen.
I used a relative layout but referring to fill_parent for widths thinking that this was the right way to use all the parent's space (the whole screen).
Here is my code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#bbbbbb" >
<!-- Parte1 -->
<TextView
android:id="#+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="Distanza Km m Gare"
android:textAppearance="?android:attr/textAppearanceLarge" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_alignParentLeft="true"
android:layout_below="#+id/textView1"
android:onClick="OnClickButton1"
android:text="#string/calcola" />
<EditText
android:id="#+id/editText1_1"
android:layout_width="#dimen/single_textEdit"
android:layout_height="50dp"
android:layout_marginLeft="10dp"
android:background="#fff123"
android:inputType="numberDecimal"
android:singleLine="true"
android:textSize="40sp"
android:gravity="center"
android:imeOptions="actionDone"
android:layout_toRightOf="#+id/button1"
android:nextFocusDown="#+id/editText1_2"
android:layout_below="#+id/textView1"/>
<EditText
android:id="#+id/editText1_2"
android:layout_width="#dimen/double_textEdit"
android:layout_height="50dp"
android:layout_below="#+id/textView1"
android:layout_marginLeft="10dp"
android:background="#fff123"
android:layout_toRightOf="#+id/editText1_1"
android:gravity="center"
android:inputType="numberDecimal"
android:nextFocusDown="#+id/editText2_1"
android:singleLine="true"
android:textSize="40sp" />
<Spinner
android:id="#+id/gare_spinner"
android:layout_width="fill_parent"
android:layout_below="#+id/textView1"
android:layout_height="50dp"
android:layout_marginLeft="10dp"
android:background="#layout/border"
android:gravity="center_vertical|center_horizontal"
android:dropDownSelector="#drawable/ic_launcher"
android:layout_toRightOf="#+id/editText1_2" />
....

Make a new layout folder. Your normal folder is just called layout, but make a second one called layout-sw600dp. This is for screen width of 600 pixels, so basically for tablets. You can make the exact same xml layouts and just give them different dimensions in here.

How to make my layout fit in all screens

I have gone through many relative answers on stockoverflow and link's such as Supporting Different Screens or Screen Compatibility Mode
I have created the following relative layout and I am trying to make it look alike in all android screens.
My images fit perfect for 4.8 inch phones but when I try to use a 2.8 inch display or something like like that, some buttons go on top of others, and they do not shrink.
Does anyone have any suggestion how to improve that?
And preferably without increasing the size of my app.
Thanks in advance!
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:mm="http://millennialmedia.com/android/schema"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background"
tools:context=".MainActivity" >
<ImageButton
android:id="#+id/Switch_off"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:onClick="someMethod"
android:background="#drawable/switch_off"/>
<ImageView
android:id="#+id/warning_shot"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#drawable/more"
android:onClick="someMethod" />
<ImageView
android:id="#+id/imageViewBatteryState"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_below="#+id/Switch_off"
/>
<ImageView
android:id="#+id/sh"
android:layout_width="147dp"
android:layout_height="54dp"
android:layout_below="#+id/Switch_off"
android:layout_centerHorizontal="true"
android:background="#drawable/me"/>
<ImageView
android:id="#+id/sit"
android:layout_width="100dp"
android:layout_height="50dp"
android:layout_below="#+id/Switch_off"
android:layout_centerHorizontal="true"
/>
<TextView
android:id="#+id/textViewBatteryInfo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:textSize="12sp"
android:textStyle="bold"
android:typeface="monospace"
android:layout_alignBottom="#+id/sit"
android:layout_centerHorizontal="true"/>
</RelativeLayout>

I will suggest you to use LinearLayout instead of Relativelayout specially for the issue :
My images fit perfect for 4.8 inch phones but when I try to use a 2.8
inch display or something like like that, some buttons go on top of
others, and they do not shrink.
Because When you give orientation to Linearlayout then Its child will never get on top of each other for any resolution or screen size.
And If you give them Weight then Views will be in fix position for Each and Every device.
For example Put below Xml in your project and Check this out in Any resolution, It will give the same Result.
XML:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:mm="http://millennialmedia.com/android/schema"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
tools:context=".MainActivity" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button 1" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button 2" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button 3" />
</LinearLayout>
</LinearLayout>

How to implement correct UI for several screens in android

Here i am trying to handle different screens ,These are several screens i am trying to handle ,Here if i adjust for one screen remaining screens getting error ,not getting what is problem
here is
Here is my code
<?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:background="#drawable/transactionpagebg" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="160dp"
android:gravity="center"
android:paddingLeft="50dp"
android:text="Current Meter Reading"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#android:color/white" />
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:gravity="center"
android:orientation="horizontal" >
<EditText
android:id="#+id/editText1"
android:layout_width="130dp"
android:layout_height="wrap_content"
android:inputType="number" />
<Spinner
android:id="#+id/spinner1"
android:layout_width="150dp"
android:layout_height="50dp" />
</LinearLayout>
<AbsoluteLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<Button
android:id="#+id/saveButton"
android:layout_width="113px"
android:layout_height="wrap_content"
android:layout_x="61dp"
android:layout_y="330dp"
android:background="#drawable/savebutton" />
<Button
android:id="#+id/settingsButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="208dp"
android:layout_y="330dp"
android:background="#drawable/settingbutton" />
</AbsoluteLayout>
</RelativeLayout>

to do as it need to be, you need to have support for different screen sizes you need to have different layouts, and also some changes in your manifest file...
check this question How to support different screen size in android
and this link http://developer.android.com/guide/practices/screens_support.html

There are many ways to make each view look right on various screens. However, I have found two methods are working best for me (at the moment):
To get the views to dynamically set their screen positions, wrap the widgets in a LinearLayout (LL), and put those LLs in a single LL. Set the weight of the inner LL to 1, and they will space themselves equally within the parent LL. This works for horizontal and vertical layouts. The distance between the widgets gets adjusted automatically by the OS.
create different dimens.xml folders/files for the different screen sizes (small, medium, large) and further differentiate them by density of needed (mdpi, hdpi, xhdpi, etc.). This way you can set margins, paddings, font sizes, for each size/density to get what you want.
EDIT: I see you put "TRANSACTION" in the background drawable? You can't do that! You need to create an image with just the text, and put it in an ImageView at the top of the layout. That way, you can set its position and size as needed for different screens, and make the other widgets adjust their positions relative to that image.
Even better would be to find a free font (ttf file) you can use that matches what you want, and put it in a TextView.
Here is a quick example of your layout with the ideas I mentioned. You would put the margins and font sizes in a dimens.xml file, so that you can adjust them.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#0000ee"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/hh"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="36dp"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="36dp"
android:text="TRANSACTION"
android:textColor="#ffffff"
android:textSize="28sp" />
<TextView
android:id="#+id/test_textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="Current Meter Reading"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#android:color/white" />
</LinearLayout>
<LinearLayout
android:id="#+id/test_linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal" >
<EditText
android:id="#+id/test_editText1"
android:layout_width="130dp"
android:layout_height="wrap_content"
android:layout_marginRight="24dp"
android:background="#ffffff"
android:inputType="number" />
<Spinner
android:id="#+id/test_spinner1"
android:layout_width="150dp"
android:layout_height="50dp"
android:background="#999999" />
</LinearLayout>
<LinearLayout
android:id="#+id/LinearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_weight="1" >
<Button
android:id="#+id/test_saveButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="24dp"
android:text="Save" />
<Button
android:id="#+id/test_settingsButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>