Develop Reference

Working with android layout

I'm new to android and the positioning elements are way different than as it is for web.
So What I want to do is this:
Login: ______
Password: _____
What I can get is this, by setting the linearLayout to vertical orientation:
Login:
__
Password:
__
Or this, with horizontal orientation:
Login:_____Password:_____
How may I mix it and achieve what I need?
Current code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="wrap_content"
android:orientation="horizontal"
android:id="#+id/mainActivity"
tools:context=".MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="Login:"
android:textSize="14pt"/>
<EditText
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/loginText"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="Senha:"
android:textSize="14pt"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/passText"/>
</LinearLayout>

Nest your linearlayouts. Have a vertical top level linear layout, with 2 horizontal linear layouts inside, each of which does one line of your output.

First of all you should use sp instead of pt for android:textSize.
You can achieve your expected layout using Nested LinearLayout as follows:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:id="#+id/mainActivity"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="Login:"
android:textSize="14pt" />
<EditText
android:id="#+id/loginText"
android:layout_width="wrap_content"
android:layout_height="match_parent" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="Senha:"
android:textSize="14pt" />
<EditText
android:id="#+id/passText"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
However a good practice would be to use ConstraintLayout, which reduces the view hierarchy, as follows:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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:id="#+id/mainActivity"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context=".MainActivity">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Login:"
android:textSize="14pt"
app:layout_constraintBottom_toBottomOf="#+id/loginText"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/loginText"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/textView2"
app:layout_constraintEnd_toEndOf="#+id/textView2"
app:layout_constraintStart_toEndOf="#+id/textView2"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Senha:"
android:textSize="14pt"
app:layout_constraintBaseline_toBaselineOf="#+id/passText"
app:layout_constraintStart_toStartOf="#+id/textView" />
<EditText
android:id="#+id/passText"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/textView2" />
</android.support.constraint.ConstraintLayout>

try this:
you can use linear layout for each block like text view and edit text and set linear layout orientation horizontal
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:id="#+id/linear_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="Username"
android:paddingLeft="10dp"
android:textColor="#color/black"
android:textSize="18dp" />
<EditText
android:id="#+id/user_et"
android:layout_width="wrap_content"
android:layout_height="match_parent" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="Password:"
android:paddingLeft="10dp"
android:textSize="18dp"
android:textColor="#color/black"/>
<EditText
android:id="#+id/password_et"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:background="#color/black"
android:textColor="#color/white"
android:text="Login"
android:textSize="18dp"
android:textAllCaps="false"
android:layout_marginTop="10dp"/>

It's best practice if you can use ConstraintLayout to decrease layout hierarchy. Otherwise, you can use nested LinearLayout.

Usually on mobile you do not need to use label like in web. setHint on EditText should be enough to make the purpose of the fields clear for your users.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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="wrap_content"
android:orientation="horizontal"
android:id="#+id/mainActivity"
tools:context=".MainActivity">
<EditText
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:hint="Username"
android:inputType="textEmailAddress"
android:id="#+id/usernameEditText"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password"
android:inputType="textPassword"
android:id="#+id/passwordEditText"/>
</LinearLayout>
You can also use the material text field if you want something like a label to be always there, https://material.io/design/components/text-fields.html
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/usernameEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
android:hint="Username"/>
</android.support.design.widget.TextInputLayout>

The layout changes greatly on rotation. How to fix it?

I made a layout for my app using linear layout. It looks fine and works fine but on rotation the layout changes very differently like the edit text becomes very small and disappears when keyboard appears. So how to provide a consistent look for my application. Or what am I missing?
Here is the code of the layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
tools:context="com.example.nobodyme.errorrepository.MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:background="#F5F5F5"
android:elevation="3dp"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginTop="16dp"
android:text="Folders"
android:textAppearance="?android:textAppearanceLarge"
android:textColor="#android:color/background_dark" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="2"
android:gravity="center"
android:orientation="horizontal"
android:layout_marginBottom="16dp">
<EditText
android:id="#+id/foldername"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:layout_weight="4"
android:background="#android:color/background_light" />
<Button
android:id="#+id/enterFolderButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:layout_weight="1"
android:text="OK"
android:textColor="#android:color/background_light"
android:background="#000000" />
</LinearLayout>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="5">
<ListView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/folderlistview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:cacheColorHint="#color/colorPrimary" />
<TextView
android:id="#+id/empty_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Create folders to add error"
android:textAppearance="?android:textAppearanceMedium" />
</RelativeLayout>
</LinearLayout>
Here how it looks on my device, four images below show how it looks on vertical and horizontal position with and without clicking on edit text, i.e with keyboard on and off.

Organizing layouts with edit text at bottom?

I wanted to make a layout with 3 LinearLayouts. In the 2nd LinearLayout I would have a ListView and the 3rd LinearLayout I would have an EditText and Button at the bottom. This was my attempt:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:fresco="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/view_post"
android:layout_width="fill_parent"
android:layout_height="200dp"
android:background="#color/com_facebook_blue">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/view_status"/>
</LinearLayout>
<LinearLayout
android:id="#+id/view_comments"
android:layout_below="#+id/view_post"
android:layout_width="match_parent"
android:layout_height="250dp">
<ListView
android:id="#+id/lv_comments_feed"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</ListView>
</LinearLayout>
<LinearLayout
android:layout_below="#+id/view_comments"
android:id="#+id/send_message"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:orientation="horizontal" >
<EditText
android:id="#+id/write_comment"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:layout_weight="5"
android:gravity="top|left"
android:inputType="textMultiLine"
android:scrollHorizontally="false" />
<Button
android:id="#+id/send_comment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:gravity="center"
android:text="send"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
</RelativeLayout>
Now the design looks great but when I load the app on my phone, I have 2 problems:
I don't want to hardcode the LinearLayout heights. I have looked into layout_weight but I can't seem to have these layout_weights work without running into the 2nd problem below:
When I click the EditText, the EditText is hidden even though I have declared android:windowSoftInputMode="adjustResize|stateHidden" in my activity and I'm not sure why that's happening. Also, the EditText and Button are not directly at the bottom of the screen which is what I would want. Any help is appreciated, thanks!

you don't need to add listview as child of linear layout. and avoid fill_parent & use match_parent. if first linear layout is only for textview then don't use it inside of linearlayout. or only use wrap_content instead of a specific layout_height
Here i made some changes hope it will work
<?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:orientation="vertical">
<LinearLayout
android:id="#+id/view_post"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#222dc9">
<TextView
android:id="#+id/view_status"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<ListView
android:id="#+id/listView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/send_message"
android:layout_below="#id/view_post"
></ListView>
<LinearLayout
android:id="#+id/send_message"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:layout_alignParentBottom="true"
android:orientation="horizontal">
<EditText
android:id="#+id/write_comment"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:layout_weight="5"
android:gravity="top|left"
android:inputType="textMultiLine"
android:scrollHorizontally="false" />
<Button
android:id="#+id/send_comment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:gravity="center"
android:text="send"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
</RelativeLayout>
and use in Manifest with activity name is
android:windowSoftInputMode="adjustPan"

<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=".MainActivity">
<RelativeLayout
android:id="#+id/view_post"
android:layout_width="match_parent"
android:background="#color/material_grey_300"
android:padding="5dp"
android:layout_height="wrap_content">
<TextView
android:id="#+id/view_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="hello" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/view_comments"
android:layout_above="#+id/send_message"
android:layout_below="#+id/view_post"
android:layout_width="match_parent"
android:background="#color/material_deep_teal_200"
android:padding="10dp"
android:layout_height="match_parent">
<ListView
android:id="#+id/lv_comments_feed"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</ListView>
</RelativeLayout>
<LinearLayout
android:id="#+id/send_message"
android:background="#color/material_blue_grey_800"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentBottom="true">
<EditText
android:id="#+id/write_comment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:inputType="textMultiLine"
android:scrollHorizontally="false" />
<Button
android:id="#+id/send_comment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="3dp"
android:layout_weight="1"
android:text="send" />
</LinearLayout>
</RelativeLayout>

Prevent recycler view from taking up whole space

I am using RecyclerView in a fragment and have set it's height to wrap_content and with a button below it. But the problem is RecyclerView takes up the whole space and button is not visible. What is going wrong?
This is my xml file -
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:background="#fff"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/empty_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="17sp"
android:layout_marginTop="20dp"
android:visibility="gone"
android:text="You haven't added any names yet!"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/names_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical"/>
<Button
android:id="#+id/add_name"
android:layout_width="203dp"
android:layout_height="wrap_content"
android:layout_below="#+id/recycler_view"
android:padding="15dp"
android:textColor="#F3F3F3"
android:textSize="17sp"/>
</LinearLayout>`

You should set weight to the RecyclerView and change the height to 0dp
<android.support.v7.widget.RecyclerView
android:id="#+id/names_list"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:scrollbars="vertical"/>

Wrap the RecyclerView and the Button in a LinearLayout, than add
android:layout_height="0dp"
android:layout_weight="1"
to RecyclerView.
Your code should look like:
<?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="#fff"
android:orientation="vertical">
<TextView
android:id="#+id/empty_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:gravity="center"
android:text="You haven't added any names yet!"
android:textSize="17sp"
android:visibility="gone"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="false"
android:layout_alignParentEnd="true"
android:layout_below="#+id/empty_view"
android:orientation="vertical">
<android.support.v7.widget.RecyclerView
android:id="#+id/names_list"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:scrollbars="vertical"/>
<Button
android:id="#+id/add_name"
android:layout_width="203dp"
android:layout_height="wrap_content"
android:layout_below="#+id/recycler_view"
android:padding="15dp"
android:textColor="#F3F3F3"
android:textSize="17sp"/>
</LinearLayout>
</LinearLayout>

ListView rows disappear when adding a RelativeLayout below a ListView

Here's a simplified version of the portrait UI I want from my layout:
It's a ListView above another layout.
The complication is that I want the whole bottom layout (in this case 'Button2') to be visible when lots of lines get added to the EditText:
I've been trying to achieve this by nesting a RelativeLayout inside a LinearLayout. Unfortunately, the ListView disappears when I get the effect I want with the EditText, e.g.
I've tried loads of alternatives, but nothing seems to achieve both goals.
Here's my XML:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<FrameLayout
android:id="#+id/AAA"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</FrameLayout>
<LinearLayout
android:id="#+id/BBB"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/AAA"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/list_container"
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1" >
<ListView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:entries="#array/list_items"/>
</LinearLayout>
<RelativeLayout
android:id="#+id/input_parent"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button1"
android:layout_above="#+id/bottom_layout"
android:layout_width="100dip"
android:layout_height="50dip"
android:clickable="true"
android:text="Button1" />
<EditText
android:id="#+id/edittext"
android:layout_above="#+id/bottom_layout"
android:layout_toRightOf="#+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="50dip"
android:imeOptions="flagNoExtractUi"
android:inputType="textMultiLine"
android:maxLines="8"
android:scrollbars="vertical" />
<!-- Align this with the bottom so when the input text area gets
really big it doesn't push this section off screen -->
<LinearLayout
android:id="#+id/bottom_layout"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="150dip"
android:layout_gravity="bottom"
android:clickable="true"
android:text="Button2" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
If I remove the android:layout_alignParentBottom="true" from the bottom_layout then the ListView contents appears, but then I lose the effect I want with the EditText.
Can anybody help? I need to support OS 2.2+.

Simplifying the layout a bit like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<FrameLayout
android:id="#+id/AAA"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</FrameLayout>
<RelativeLayout
android:id="#+id/BBB"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/AAA"
android:orientation="vertical" >
<ListView
android:id="#+id/list"
android:layout_above="#+id/edittext"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:entries="#array/list_items"/>
<Button
android:id="#+id/button1"
android:layout_above="#+id/bottom_layout"
android:layout_width="100dip"
android:layout_height="50dip"
android:clickable="true"
android:text="Button1" />
<EditText
android:id="#+id/edittext"
android:layout_above="#+id/bottom_layout"
android:layout_toRightOf="#+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="50dip"
android:imeOptions="flagNoExtractUi"
android:inputType="textMultiLine"
android:maxLines="8"
android:scrollbars="vertical" />
<!-- Align this with the bottom so when the input text area gets
really big it doesn't push this section off screen -->
<LinearLayout
android:id="#+id/bottom_layout"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="150dip"
android:layout_gravity="bottom"
android:clickable="true"
android:text="Button2" />
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
seems to give the result you were describing.