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

EditText and Button side by side

I want to present in my layout an EditText and a Button side by side with a small space (margin) between them. I don't want to set a fixed size (I think that's a bad habit).
How to do that?
My Try:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_alignParentLeft="true" />
<Button
android:id="#+id/btn_search"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_gravity="right"
android:text="Search" />
</RelativeLayout>

You're using a RelativeLayout; however, you cannot created a flexible design within that type of ViewGroup. You must use a LinearLayout.
We use android:layout_weight="1" along with the android:layout_width="0dp" to create a flexible control. Adjust the weight number for different size ratios.
Afterwards, we use android:layout_margin on both controls so the resulting weighted size of each is equal.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<EditText
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_marginRight="8dp" />
<Button
android:id="#+id/btn_search"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="Search"
android:layout_marginLeft="8dp" />
</LinearLayout>

You can use Linear layout with horizontal orientation and add an EditText and Button in the following way
<LinearLayout
orientation="horizontal"
layoutwidth="match_parent"
layoutheight="wrap_content">
<EditText
layoutwidth="0dp"
layoutheight="wrap"
layout_weight=".8"/>
<Button
layoutwidth="0dp"
layoutheight="wrap"
layout_weight=".2"/>
</LinearLayout>
Hope this will solve your problem. Make sure to change the weights according to your needs.
Thanks

Use Linear layout to show both side by side and use 'match_parent' and 'wrap_content' appropriately.
Here's a piece of xml code
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" >
<EditText
android:id="#+id/et"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10" >
<requestFocus />
</EditText>
<Button
android:id="#+id/go"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Go!!" />
</LinearLayout>

How to set the size of layout more efficiently?

I need my view to be placed in the center and it's width is not a match parent or wrap content but a size of particular percentage of a screen the app is running on. To have a more flexible layout I didn't set its size using dimensions, but defined weights for the elements to have a required size of the main one. In order to do so I've inserted two additional LinearLayouts and defined weights for them. I don't think this is the best solution to increase Views amount within the XML. Can you guys let me know the more efficient way of doing that?
<?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/right_back"
android:orientation="horizontal"
android:gravity="center">
<!-- The first one I think which is redundant -->
<LinearLayout
android:layout_weight="25"
android:layout_width="0dip"
android:layout_height="wrap_content"/>
<!-- Main view I need to be of a required size on each screen size -->
<LinearLayout
android:layout_width="0dip"
android:layout_height="wrap_content"
android:background="#drawable/layout_round_corners"
android:orientation="vertical"
android:layout_weight="50"
android:padding="20dip">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/welcome_text"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/text_color"
android:layout_gravity="center_horizontal"/>
<EditText
android:id="#+id/edt_firsttimeactivity_first_field"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="#string/password"
android:password="true"
android:singleLine="true"/>
<EditText
android:id="#+id/edt_firsttimeactivity_second_field"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/repeat_new_password_again"
android:password="true"
android:singleLine="true"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:onClick="onButtonClick"
android:text="#string/create_account_for_me"/>
</LinearLayout>
<!-- The second one I think which is redundant -->
<LinearLayout
android:layout_weight="25"
android:layout_width="0dip"
android:layout_height="wrap_content"></LinearLayout>
</LinearLayout>

This is how you should write the layout:
<?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="horizontal"
android:background="#drawable/right_back"
android:weightSum="1"
android:gravity="center">
<!-- Main view I need to be of a required size on each screen size -->
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#drawable/layout_round_corners"
android:layout_weight=".5"
android:padding="20dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/welcome_text"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/text_color"
android:layout_gravity="center_horizontal"/>
<EditText
android:id="#+id/edt_firsttimeactivity_first_field"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/password"
android:password="true"
android:singleLine="true"/>
<EditText
android:id="#+id/edt_firsttimeactivity_second_field"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/repeat_new_password_again"
android:password="true"
android:singleLine="true"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:onClick="onButtonClick"
android:text="#string/create_account_for_me"/>
</LinearLayout>
</LinearLayout>
Try this. You can change the layout_weight of the 2nd LinearLayout to make it look big or small as you like.

I believe the problem is that you haven't defined a weightSum. You should add android:weightSum="100" (for example) to your outermost LinearLayout, and then divide that sum however you want into your inner layouts.
Edit: If I understood the issue correctly, I think you should be able to solve the problem by simply using android:paddingLeft and android:paddingRight for your "main view". You could also try android:layout_marginLeft and android:layout_marginRight. Of course, leaving the height as fill_parent in this case. Hope that helps.

Android text will not align to center

I have a TextView and 3 Buttons centered in a RelativeLayout, and the text in all three of them is left-justified with the parent center as the leftmost line.
I've tried changing the gravity of the TextView, Buttons, and layout but nothing is working and I'm baffled because I've never seen Android align text like this before.
I want the Button text to be centered within each Button and the top text to be center-justified.
An image of what it looks like is here: http://i.stack.imgur.com/9lHEd.png
Here's my xml:
<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" >
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_margin="20dp"
android:gravity="center_horizontal"
android:text="#string/greeting"
android:textAppearance="?android:attr/textAppearanceLarge" />
<Button
android:id="#+id/startQuizButton"
android:layout_width="280dp"
android:layout_height="wrap_content"
android:layout_below="#+id/textView1"
android:layout_centerHorizontal="true"
android:onClick="#string/startQuiz"
android:text="#string/start_quiz" />
<Button
android:id="#+id/lessonsButton"
android:layout_width="280dp"
android:layout_height="wrap_content"
android:layout_below="#+id/startQuizButton"
android:layout_centerHorizontal="true"
android:onClick="#string/startLesson"
android:text="#string/lessonsString" />
<Button
android:id="#+id/viewAllButton"
android:layout_width="280dp"
android:layout_height="wrap_content"
android:layout_below="#+id/lessonsButton"
android:layout_centerHorizontal="true"
android:onClick="#string/showAll"
android:text="#string/view_all" />

I included a RelativeLayout because you have it as your parent layout. However, i am not sure that it is needed. See if the following code is what you are looking for.
<?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:orientation="vertical" >
<LinearLayout
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:gravity="center_horizontal"
android:text="Greetings" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Start Quiz" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Lessons" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="View all questions" />
</LinearLayout>
</RelativeLayout>

add in button tab android:gravity="center"...see if it works..

u need to set layout width and height to fill_parent and everything will work fine
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:text="your text" />

if you want to centre some text, then you could also do it this way:
<TextView
android:text="Quantity"
android:textSize="34sp"
android:textColor="#ffffff"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-light"
android:layout_centerHorizontal="true"
android:paddingTop="10dp"/>
here i have changed made it horozontal by using android:layout_centerHorizontal="true"which takes a boolean value of true or false, by making it true, it will automatically be centred on all devices
hope that helps

how to separate textviews in android?

It is a simple question but I don't know how to do it because I'm new in android.
I have two TextViews in a relative layout and when the first TextView getting bigger it writes on the other TextView which I want to avoid it. How can I do it ?
<RelativeLayout 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="wrap_content"
android:layout_height="wrap_content"
android:text="first"
android:gravity="left"/>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="second"
android:layout_alignParentRight="true"/>
</RelativeLayout>
but when the text = firstfirstfirst.... it overrides the second textview.

You need to give you TextViews ids. Since you're using a RelativeLayout you can use layout_toLeftOf and layout_toRightOf, but you only need to use one of them.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_toLeftOf="#+id/textView2"
android:gravity="left"
android:text="firstfirstfirstfirstfirstfirsitseirodsifjdsoijfoisddsefdfadafdafad" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_alignParentRight="true"
android:text="second" />

give some advice:
first you can set the left textview's max width using android:maxWidth="" to control the left size, but if the size bigger than the size the text will become like this:text...
or you need make the left and right area cleanly, for example:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="2" >
<TextView
android:id="#+id/left"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_weight="1"
android:text="firstdasssssssssssssssssssssssssssssssssssssssssssssssssssssssss" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_weight="1"
android:gravity="left"
android:text="secondsdasdasdarerewrwcxcadasdasdsadsdasdasdadadsd" />
it make the left and right half area, also you can change the android:weightSum size.