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

How to put getLocation / compass button inside edittext field android studio

I want to put the getlocation / compass button inside my editfield, I am not quite sure how I can do this or where to start, please can someone guide me. What I have to do is, something like the two screenshots below;
I have tried playing around with the layout but I can't seem to figure out how I can do this, I have the basic layout done;
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:background="?attr/colorPrimary"
android:orientation="vertical" >
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="100dp">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPostalAddress"
android:ems="10"
android:hint="Your Post Code"
android:id="#+id/editText"
android:layout_gravity="center_horizontal"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Proceed"
android:background="#fff"
android:id="#+id/button"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp" />
</LinearLayout>
</LinearLayout>

You can use android:drawableRight attribute in xml:
https://developer.android.com/reference/android/widget/TextView.html#attr_android:drawableRight
Something like that:
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPostalAddress"
android:ems="10"
android:hint="Your Post Code"
android:id="#+id/editText"
android:drawableRight="#drawable/YOUR_COMPASS_DRAWABLE"
android:layout_gravity="center_horizontal"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"/>
where YOUR_COMPASS_DRAWABLE is a compass picture in res/drawable/ folder (you must used different pictures for different screen: mdpi, hdpi, etc.)

improper display of an app on nexus 5 marshmallow devices

i got a very weird type of problem while developing a basic android app.
While I've created an app in which the background image of an app is visible to all the devices except nexus devices of android marshmallow. Kindly help me in solving the error.
Below is the code and screenshot attached.
<?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:background="#drawable/abst"
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="project.scytech.mi_agenda.LoginActivity">
<include
android:id="#+id/linearLayout"
layout="#layout/appname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/loginLayout"
android:layout_centerHorizontal="true"
android:orientation="horizontal" />
<LinearLayout
android:id="#+id/loginLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:orientation="vertical"
android:paddingTop="16dp">
<EditText
android:id="#+id/editTextDomainName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:hint="#string/domainName"
android:inputType="textUri"
android:textColorHint="#FFF8E5" />
<EditText
android:id="#+id/editTextUsername"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:hint="#string/username"
android:textColorHint="#FFF8E5" />
<EditText
android:id="#+id/editTextPassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:fontFamily="#string/username"
android:hint="#string/password"
android:inputType="textPassword"
android:textColorHint="#FFF8E5" />
<Button
android:id="#+id/buttonLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center"
android:layout_marginTop="16dp"
android:clickable="true"
android:onClick="loginClicked"
android:text="#string/login" />
</LinearLayout>
</RelativeLayout>

Please try to use an ImageView and set it as background.
It means:
Use a RelativeLayout or a FrameLayout and define your ImageView as the
first child. The first objects defined are the lowest in the z-order
(i.e. they will be "below" the other views).
From: Setting an ImageView to the background Android
To fit it to whole screen device use match_parent or android:scaleType="fitXY"
Your code should look like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#000000" >
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="42dp"
tools:ignore="ContentDescription" />
//Rest of widgets......
Check also: How to make image fill RelativeLayout background without stretching
It should work

Android center two text fields in a frame layout at the same time

this might have been asked before (and I apologise for that) but I couldn't find it so here I am.
I have a frame layout which is horizontally and vertically centered.There are two editText's in it, and I would like to arrange both of them to the center of the screen while maintaining a certain distance between the two of them.
I hope my drawing can give you an idea of what i want.
I have tried many things, but it seems it wasn't enought.Thanks for the help, and sorry for bothering!
http://oi59.tinypic.com/qxa2vm.jpg
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" >
<EditText
android:id="#+id/editText_nume"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:text="#string/nume" />
<EditText
android:id="#+id/editText_parola"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:text="#string/parola" />
</FrameLayout>

Use LinearLayout instead of FrameLayout. FrameLayout is designed to block out an area on the screen to display a single item.
<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" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:orientation="vertical" >
<EditText
android:id="#+id/editText_nume"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:text="#string/nume" />
<EditText
android:id="#+id/editText_parola"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:inputType="textPassword"
android:text="#string/parola" />
</LinearLayout>
</RelativeLayout>

Number picker in android not showing properly

I'm starting to build an app with android studio and right away I'm having a bit of an issue. Currently my number pickers look like this in the XML preview:
But when I run the app (on the emulator) it looks like this:
There is a text view that you can't see in the preview but appears when the app is run, that is why you see the text "Time's up" in the emulator screenshot. What I'm wondering is why are the number pickers so close to my textview and off to the left? I don't mind the change in style (in fact I welcome it) but I can't figure out why they moved. Any help is greatly appreciated! Here is my XML code:
<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"
tools:context="com.skytbest.intervaltrainer.MainActivity">
<TextView
android:id="#+id/timer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:paddingRight="10dip"
android:paddinBottom="50dip"
android:textSize="50dp"
/>
<Button
android:id="#+id/button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="Start" />
<NumberPicker
android:id="#+id/numberPicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/timer"
android:layout_toLeftOf="#+id/timer"
android:paddingTop="50dp" />
<NumberPicker
android:id="#+id/numberPicker2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/numberPicker"
android:layout_toRightOf="#+id/numberPicker"
android:paddingTop="50dp" />
</RelativeLayout>

Here is a working layout using the suggestion in my comment. Note that it is helpful to put some text in the TextView to better enable the UI designer to show the layout. Even then it sometimes does not match what you see on screen, especially when you have invalid combinations of layout constraints.
<?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"
tools:context="com.skytbest.intervaltrainer.MainActivity">
<TextView
android:id="#+id/timer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentTop="true"
android:text="Label"
android:paddingBottom="50dp"
android:paddingTop="50dp"
android:textSize="50dp"
/>
<Button
android:id="#+id/button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="Start"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_below="#id/timer">
<NumberPicker
android:id="#+id/numberPicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<NumberPicker
android:id="#+id/numberPicker2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>

You need to set setMinValue and setMaxValue otherwise it will get stack on 0.