How to achieve a layout in Android studio with two Layouts - android

I am trying to achieve the below layout but I am not sure how I can split / have two layouts on one screen, with one being empty and one containing other elements. Like shown in the image below, I want to have layout 1 that contains other elements and layout that is empty. With a divider line between the two layouts.
Any help would be nice, I am not sure where to start. I have came accross having two layouts on 1 screen and splitting them to about 40:60 ratio.


Try to use
<?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: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="com.example.rushabh_pc.lin.MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:id="#+id/textView2"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Label2"
android:id="#+id/toggleButton"
android:layout_below="#+id/textView2"
android:layout_centerHorizontal="true"
android:checked="false" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Label 3"
android:id="#+id/lab3"
android:layout_below="#+id/toggleButton"
android:layout_toLeftOf="#+id/toggleButton"
android:layout_toStartOf="#+id/toggleButton" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Label 4"
android:layout_alignBaseline="#+id/lab3"
android:layout_alignBottom="#+id/lab3"
android:layout_toRightOf="#+id/toggleButton"
android:layout_toEndOf="#+id/toggleButton"
android:id="#+id/l4"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="last"
android:layout_below="#id/l4"/>
</RelativeLayout>


Code Below:
<?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_main3"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.staff.app.Main3Activity"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/holo_orange_light">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="textView"
android:layout_centerHorizontal="true"/>
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="textView"
android:textSize="20dp"
android:layout_centerHorizontal="true"
android:layout_below="#+id/textView1"/>
<LinearLayout
android:id="#+id/linearLyout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/textView2"
android:orientation="horizontal">
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="editText1"
android:layout_weight="1"/>
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="editText2"
android:layout_weight="1"/>
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="textView"
android:textSize="40dp"
android:layout_centerHorizontal="true"
android:layout_below="#+id/linearLyout"/>
</RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#android:color/black"></View>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"></RelativeLayout>
</LinearLayout>


Use LinearLayout with layout_weight to specify the ratio for the space occupied by each child layout. For a 40:60 split, use the below
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.4"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:background="#android:color/holo_green_light"
android:text="Label"
android:textSize="20sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:background="#android:color/holo_blue_bright"
android:text="Label"
android:textSize="30sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:layout_weight="1"
android:background="#android:color/holo_green_light"
android:hint="Textbox1" />
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:layout_weight="1"
android:background="#android:color/holo_green_light"
android:hint="Textbox2" />
</LinearLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="0sp"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:layout_weight="1"
android:background="#android:color/holo_blue_bright"
android:text="Label" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginBottom="5dp"
android:layout_marginTop="5dp"
android:background="#android:color/black" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.6"></LinearLayout>
</LinearLayout>

Related

how to give space at the bottom of page if using scroll view

here i have used scroll view and I want to make a space in the bottom of page so only terms and conditions can scroll and checkable box and button does not scroll it should be in the bottom of page can you help me with the xml. I have attached a image I want a design like this where buttons at the bottom not moves Design Example herea
<?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"
tools:context=".Common.PolcyPage">
<LinearLayout
android:id="#+id/liner_layout_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="35dp"
android:layout_marginLeft="35dp"
android:layout_marginTop="60dp"
android:fontFamily="#font/segoe_ui_bold"
android:text="#string/terms_of_services"
android:textColor="#color/colorTandC"
android:textSize="25sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="35dp"
android:layout_marginLeft="35dp"
android:text="#string/updated_date_terms"
android:textColor="#color/colorTandC_titles" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="2dp"
android:layout_marginTop="38dp"
android:background="#color/colorTandC_desc" />
</LinearLayout>
<ScrollView
android:scrollbars="none"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="35dp"
android:layout_marginLeft="35dp"
android:layout_marginTop="35dp"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/segoe_ui_semibold"
android:text="#string/terms_one_title"
android:textColor="#color/colorTandC_titles"
android:textSize="14sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginEnd="30dp"
android:layout_marginRight="30dp"
android:text="#string/terms_one_desc"
android:textColor="#color/colorTandC_desc"
android:textSize="13sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:fontFamily="#font/segoe_ui_semibold"
android:text="#string/terms_two_title"
android:textColor="#color/colorTandC_titles"
android:textSize="14sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginEnd="30dp"
android:layout_marginRight="30dp"
android:text="#string/terms_two_desc"
android:textColor="#color/colorTandC_desc"
android:textSize="13sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="25dp"
android:layout_marginLeft="25dp"
android:layout_marginEnd="30dp"
android:layout_marginRight="30dp"
android:text="#string/terms_two_desc_terms"
android:textColor="#color/colorTandC_desc"
android:textSize="13sp" />
</LinearLayout>
</ScrollView>
</LinearLayout>
</RelativeLayout>

Try adding Buttons at the bottom of screen & even below of Scroll view
Add this lime in scrollView or Parent LinearLayout
<ScrollView>
android:layout_above="#+id/bottom_panel"
Add this at the very bottom of your xml
</ScrollView>
</LinearLayout>
--------------- ADD HERE - Below Scroll View -------
<LinearLayout
android:id="#+id/bottom_panel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center|bottom" OR android:layout_alignParentBottom="true"
android:orientation="horizontal">
<Button
android:layout_width="0dip"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="Decline"/>
<Button
android:layout_width="0dip"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="Accept"/>
</LinearLayout>
</RelativeLayout>
Let me know if its working fine or not

If I correctly understand your question, you can make it like this:
<?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">
<LinearLayout
android:id="#+id/bottom_parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="32dp"
android:paddingRight="32dp"
android:gravity="center"
android:orientation="horizontal">
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:text="I agree with the Terms and Conditions"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="32dp"
android:paddingRight="32dp"
android:gravity="center"
android:orientation="horizontal">
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:text="I agree with the Privacy Policy"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="32dp"
android:paddingRight="32dp"
android:paddingTop="16dp"
android:paddingBottom="32dp"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".5"
android:layout_marginRight="32dp"
android:text="decline"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".5"
android:text="accept"/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/top_parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="32dp"
android:paddingRight="32dp"
android:paddingTop="16dp"
android:paddingBottom="8dp"
android:gravity="center_vertical"
android:orientation="horizontal">
<ImageView
android:layout_width="70dp"
android:layout_height="70dp"
android:src="#drawable/your_image"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20sp"
android:text="Terms of service"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Update date"/>
</LinearLayout>
</LinearLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/bottom_parent"
android:layout_below="#id/top_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<!-- ADD YOUR TEXTVIEWS HERE -->
</LinearLayout>
</ScrollView>
use android:layout_above and android:layout_below to define your ScrollView position

How to add a textview towards left and edittext towards right inside a background with delete button near to the background android

Below is the image what I required.
You can see there is blue background and inside that, it has
Trailer Number 1 which is textview and 01010 is editext (input field)
Also outside the background, there is delete button near to the blu background.
What I tried is,
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:background="#color/app_white">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<RelativeLayout
android:id="#+id/relative_1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/blue_light"
android:layout_marginRight="60dp"
android:layout_marginLeft="60dp">
<TextViewÒ
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Trailer number"
android:padding="#dimen/margin_5"
android:layout_margin="5dp"
android:layout_alignParentLeft="true"/>
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="number"
android:text="01010"
android:layout_alignParentRight="true"/>
</RelativeLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginRight="0dp"
android:layout_toRightOf="#+id/relative_1"
android:background="#drawable/ic_delete_cion" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
But delete icon is not at all displaying and also line is displaying in 01010 eddittext.
This is my screenshot.

I made some changes in ur layout and it is fit in ur requirement and fit for every device.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/relative_1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#color/default_blue_light">
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center|start"
android:padding="10dp"
android:text="Trailer number" />
<EditText
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginStart="5dp"
android:layout_marginEnd="5dp"
android:background="#null"
android:inputType="number"
android:padding="5dp"
android:text="01010"
android:textSize="14sp" />
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/ic_delete_icon" />
</LinearLayout>

you can achive this by only putting android:weightSum into linear layout.
try below code
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/app_white"
android:orientation="horizontal"
android:padding="10dp"
android:weightSum="1">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_weight=".9"
android:background="#color/blue_light"
android:orientation="horizontal"
android:weightSum="1">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".7"
android:text="Trailer number" />
<EditText
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".2"
android:background="#null"
android:inputType="number"
android:text="01010"
android:textSize="14sp" />
</LinearLayout>
<ImageView
android:layout_width="0dp"
android:layout_height="20dp"
android:layout_weight=".1"
android:layout_gravity="center"
android:background="#drawable/ic_delete_cion" />
</LinearLayout>

Try this xml code : (Please replace dimensions, padding, styles with your own)
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="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:background="#FFF"
android:orientation="vertical">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<RelativeLayout
android:id="#+id/relative_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="60dp"
android:layout_marginRight="60dp"
android:layout_weight="6"
android:background="#f5f5f5">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_margin="5dp"
android:gravity="center_vertical"
android:padding="5dp"
android:text="Trailer number" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_marginEnd="0dp"
android:layout_marginRight="0dp"
android:inputType="number"
android:text="01010" />
</RelativeLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginEnd="8dp"
android:src="#drawable/ic_delete_black_24dp" />
</LinearLayout>
</LinearLayout>

RecyclerView in dialog takes up (almost) whole area

I have a dialog with layout
subject_view.xml
<?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="wrap_content"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:paddingTop="8dp"
android:paddingBottom="8dp">
<TextView
android:layout_marginLeft="15dp"
android:layout_marginTop="15dp"
android:text="Subject"
android:textSize="18sp"
android:textColor="#color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/subject_name"/>
<LinearLayout
android:weightSum="2"
android:gravity="end"
android:layout_below="#id/subject_name"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ViewSwitcher
android:layout_weight="1"
android:layout_marginTop="8dp"
android:layout_below="#id/subject_name"
android:id="#+id/switcher"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_gravity="center"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:paddingLeft="8dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/please_wait"/>
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:layout_marginTop="10dp"
android:id="#+id/studentRecycler"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.v7.widget.RecyclerView>
</ViewSwitcher>
<Button
android:layout_weight="1"
android:layout_below="#id/switcher"
android:layout_alignParentRight="true"
android:id="#+id/ok_Btn"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:background="#drawable/blue_button"
android:text="ok"
android:textColor="#fff"/>
</LinearLayout>
</RelativeLayout>
When the dialog is created, I am fetching data from server to populate RecyclerView. At that time ViewPager's first child (with the progressbar) is visible. When I get data from server I set RecyclerView as visible child.
The problem here is, when RecyclerView have a lot of rows, the button under under ViewSwitcher containing the RecyclerView is only partially visible (Like, one third of the button is not visible).
Screenshot (How it is not supposed to look)
But when the recyclerView doesn't have that much rows its showing as expected,
Screenshot (How it is supposed to look)
How can I solve this?

Whenever you are adding weight for linear layout point to keep in mind are:
Give android:weightSum="1" as one and child layout weight from 0.0 to 1.0
ex:android:layout_weight="0.3"
Use layout weight as 0dp instead pf hardcoded value ex: android:layout_height="0dp" instead of android:layout_height="30dp"
Try this layout instead.Hope it works
<?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="wrap_content"
android:paddingBottom="8dp"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:paddingTop="8dp">
<TextView
android:id="#+id/subject_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_marginTop="15dp"
android:text="Subject"
android:textColor="#color/black"
android:textSize="18sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/subject_name"
android:gravity="end"
android:orientation="vertical"
android:weightSum="1">
<ViewSwitcher
android:id="#+id/switcher"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_below="#id/subject_name"
android:layout_marginTop="8dp"
android:layout_weight="0.9">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:orientation="horizontal">
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="8dp"
android:text="#string/please_wait" />
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/studentRecycler"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"></android.support.v7.widget.RecyclerView>
</ViewSwitcher>
<Button
android:id="#+id/ok_Btn"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_alignParentRight="true"
android:layout_below="#id/switcher"
android:layout_weight="0.1"
android:background="#drawable/blue_button"
android:text="ok"
android:textColor="#fff" />
</LinearLayout>

You should maintain your weightSum and weight properly in layout.for more knowledge you may check this solution and apply like this
<LinearLayout
android:weightSum="2"
android:gravity="end"
android:layout_below="#id/subject_name"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ViewSwitcher
android:layout_weight="1.5"
android:layout_marginTop="8dp"
android:layout_below="#id/subject_name"
android:id="#+id/switcher"
android:layout_width="match_parent"
android:layout_height="0dp">
<LinearLayout
android:layout_gravity="center"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:paddingLeft="8dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/please_wait"/>
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:layout_marginTop="10dp"
android:id="#+id/studentRecycler"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.v7.widget.RecyclerView>
</ViewSwitcher>
<Button
android:layout_weight="0.5"
android:layout_below="#id/switcher"
android:layout_alignParentRight="true"
android:id="#+id/ok_Btn"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:background="#drawable/blue_button"
android:text="ok"
android:textColor="#fff"/>
</LinearLayout>

use android:layout_marginBottom="30dp" in recycle view
<android.support.v7.widget.RecyclerView
android:layout_marginTop="10dp"
android:layout_marginBottom="30dp"
android:id="#+id/studentRecycler"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.v7.widget.RecyclerView>

Try this:
<?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="wrap_content"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:paddingTop="8dp"
android:paddingBottom="8dp">
<TextView
android:layout_marginLeft="15dp"
android:layout_marginTop="15dp"
android:text="Subject"
android:textSize="18sp"
android:textColor="#color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/subject_name"/>
<RelativeLayout
android:layout_below="#id/subject_name"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ViewSwitcher
android:layout_marginTop="8dp"
android:id="#+id/switcher"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_gravity="center"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:paddingLeft="8dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/please_wait"/>
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:layout_marginTop="10dp"
android:id="#+id/studentRecycler"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.v7.widget.RecyclerView>
</ViewSwitcher>
<Button
android:layout_below="#id/switcher"
android:layout_alignParentRight="true"
android:id="#+id/ok_Btn"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:background="#drawable/blue_button"
android:text="ok"
android:textColor="#fff"/>
</RelativeLayout>

Ok Check now!
<?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="wrap_content"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:paddingTop="8dp"
android:paddingBottom="8dp">
<TextView
android:layout_marginLeft="15dp"
android:layout_marginTop="15dp"
android:text="Subject"
android:textSize="18sp"
android:textColor="#color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/subject_name"/>
<RelativeLayout
android:layout_below="#id/subject_name"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ViewSwitcher
android:layout_marginTop="8dp"
android:id="#+id/switcher"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_gravity="center"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:paddingLeft="8dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Please wait"/>
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:layout_marginTop="10dp"
android:id="#+id/studentRecycler"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.v7.widget.RecyclerView>
</ViewSwitcher>
<Button
android:layout_weight="1"
android:layout_alignParentRight="true"
android:id="#+id/ok_Btn"
android:layout_below="#id/switcher"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:background="#369"
android:text="OK"
android:textColor="#fff"/>
</RelativeLayout>
</RelativeLayout>

Align 2 linear layouts and image view inside Relative layout

I am working on an android app where I want to align 2 linear layouts in a row with image view in between these 2 layouts.I am not able to use android studio layout editor to achieve this.
Code for the layout is:
<?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="match_parent"
android:background="#android:color/white"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/nav_header_container"
android:layout_width="match_parent"
android:layout_height="160dp"
android:background="#color/colorPrimary">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/rounded_corner"
android:orientation="vertical"
android:layout_marginEnd="17dp"
android:layout_centerVertical="true"
android:layout_alignParentEnd="true">
<TextView
android:text="DEFG"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView8"
android:layout_gravity="center"
/>
<TextView
android:text="TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView16"
tools:text="1250"
android:textSize="30sp"
android:textColorLink="?attr/colorBackgroundFloating" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#drawable/rounded_corner"
android:layout_marginEnd="30dp"
android:layout_toStartOf="#+id/profile_image">
<TextView
android:text="ABCD"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView3"
android:layout_gravity="center"
/>
<TextView
android:text="TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView13"
tools:text="1250"
android:textSize="30sp"
android:textColorLink="?attr/colorBackgroundFloating" />
</LinearLayout>
<ImageView
android:id="#+id/profile_image"
android:layout_width="60dp"
android:src="#drawable/face"
android:layout_height="60dp"
android:layout_centerHorizontal="true" />
</RelativeLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/drawerList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"/>
</LinearLayout>
Current Output:
Expected Output:
2 linear layouts in a row with Image view at the center of a relative layout (With Green background)
Am I doing something wrong with the arrangement of layout? How to implement such scenario?

Change the RelativeLayout to LinearLayout (Horizontal)
set width to 0dp and weight to 1 thus they will have the same width. And use gravity to put things in the center
<?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="match_parent"
android:background="#android:color/white"
android:orientation="vertical">
<LinearLayout
android:orientation="horizontal"
android:id="#+id/nav_header_container"
android:layout_width="match_parent"
android:layout_height="160dp"
android:background="#color/colorPrimary">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:background="#drawable/rounded_corner"
android:orientation="vertical"
android:layout_marginEnd="17dp"
android:layout_weight="1"
android:gravity="center">
<TextView
android:text="DEFG"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView8"
android:layout_gravity="center"
/>
<TextView
android:text="TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView16"
tools:text="1250"
android:textSize="30sp"
android:textColorLink="?attr/colorBackgroundFloating" />
</LinearLayout>
<ImageView
android:id="#+id/profile_image"
android:layout_width="0dp"
android:src="#drawable/rounded_corner"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:layout_weight="1"
android:layout_gravity="center" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/rounded_corner"
android:layout_marginEnd="30dp"
android:layout_weight="1"
android:gravity="center">
<TextView
android:text="ABCD"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView3"
android:layout_gravity="center"
/>
<TextView
android:text="TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView13"
tools:text="1250"
android:textSize="30sp"
android:textColorLink="?attr/colorBackgroundFloating" />
</LinearLayout>
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/drawerList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"/>
</LinearLayout>

By using weight to the LinearLayout you can achieve this.
Check this code, but before copy pasting learn the logic of weight in LinearLayout:
<?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="match_parent"
android:background="#android:color/white"
android:orientation="vertical">
<LinearLayout
android:id="#+id/nav_header_container"
android:layout_width="match_parent"
android:layout_height="160dp"
android:background="#ffffff"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="4"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="#drawable/rounded_corner" />
<TextView
android:id="#+id/textView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="DEFG" />
<TextView
android:id="#+id/textView16"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/textView8"
android:layout_centerHorizontal="true"
android:text="TextView"
android:textColorLink="?attr/colorBackgroundFloating"
android:textSize="30sp"
tools:text="1250" />
</RelativeLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="2"
android:gravity="center">
<ImageView
android:id="#+id/profile_image"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:src="#drawable/face" />
</LinearLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="4"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="#drawable/rounded_corner" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="ABCD" />
<TextView
android:id="#+id/textView13"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/textView3"
android:layout_centerHorizontal="true"
android:text="TextView"
android:textColorLink="?attr/colorBackgroundFloating"
android:textSize="30sp"
tools:text="1250" />
</RelativeLayout>
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/drawerList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp" />
</LinearLayout>

Why my element is not staying at the bottom as supposed?

I have this layout xml file:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true">
<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: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=".MainActivity">
<TextView
android:layout_marginTop="40dp"
android:id="#+id/emalLbl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="#string/test" />
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/testTxtLay"
android:layout_marginTop="10dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/emalLbl"
android:orientation="horizontal"
android:padding="10dp"
android:weightSum="1">
<EditText
android:id="#+id/testTxt"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:background="#drawable/edit_text_design" />
</LinearLayout>
<TextView
android:layout_marginTop="60dp"
android:id="#+id/reminderLbl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/testTxtLay"
android:layout_centerHorizontal="true"
android:text="#string/reminder" />
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_marginTop="10dp"
android:id="#+id/reminderTxtLay"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/reminderLbl"
android:orientation="horizontal"
android:padding="10dp"
android:weightSum="1">
<EditText
android:id="#+id/reminderTxt"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:lines="2"
android:background="#drawable/edit_text_design" />
</LinearLayout>
<View
android:id="#+id/spacer"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_below="#id/reminderTxtLay"
android:layout_centerHorizontal="true" />
<Button
android:layout_marginTop="200dp"
android:id="#+id/pickDateBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#id/reminderTxtLay"
android:layout_toLeftOf="#+id/spacer"
android:onClick="showDatePickerDialog"
android:text="#string/datePickerBtnTxt" />
<Button
android:id="#+id/pickTimeBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#id/pickDateBtn"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/pickDateBtn"
android:onClick="showTimePickerDialog"
android:text="#string/pickTimeBtn" />
<View
android:id="#+id/spacerTxt"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_below="#id/reminderTxtLay"
android:layout_centerHorizontal="true" />
<EditText
android:layout_marginTop="15dp"
android:id="#+id/selectedDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#id/spacerTxt"
android:layout_below="#id/pickDateBtn"
android:layout_toLeftOf="#+id/spacerTxt" />
<EditText
android:id="#+id/selectedTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#id/selectedDate"
android:layout_below="#id/pickTimeBtn"
android:layout_toRightOf="#+id/selectedDate" />
<Button
android:id="#+id/submitBtn"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerInParent="true"
android:onClick="submitData"
android:text="#string/submitBtn" />
</RelativeLayout>
</ScrollView>
This is the custom design for 7 inch tablets, placed in res\layout-sw600dp
Anyways in the android studio landscape preview it seems just fine:
But in the emulator something is going wrong and here is how it looks strange. What I mean is that the submit button is not on the bottom and the pickDate and pickTime buttons are at the bottom of the layout.
I know that I'm missing a basic point here, but as an android developer, I'm not able to spot it.
Can you give me a push?

Here is a complete way to do what you seem to try accomplish. You don't need to create any Views for "spaces" etc. You only need to add margin or padding to either side of your views to make it move away from another view.
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin">
<LinearLayout
android:id="#+id/linear_wrapper"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center_horizontal"
>
<TextView
android:layout_marginTop="40dp"
android:id="#+id/emalLbl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/test" />
<EditText
android:id="#+id/testTxt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/edit_text_design" />
<TextView
android:layout_marginTop="60dp"
android:id="#+id/reminderLbl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/reminder" />
<EditText
android:id="#+id/reminderTxt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:lines="2"
android:background="#drawable/edit_text_design" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="200dp"
>
<Button
android:id="#+id/pickDateBtn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:onClick="showDatePickerDialog"
android:text="#string/datePickerBtnTxt" />
<Button
android:id="#+id/pickTimeBtn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:onClick="showTimePickerDialog"
android:text="#string/pickTimeBtn" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<EditText
android:id="#+id/selectedDate"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<EditText
android:id="#+id/selectedTime"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"/>
</LinearLayout>
</LinearLayout>
<Button
android:id="#+id/submitBtn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_below="#+id/linear_wrapper"
android:onClick="submitData"
android:text="#string/submitBtn" />
</RelativeLayout>

you can place 2 buttons next to each other!
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="10dp"
android:weightSum="1">
<Button
android:id="#+id/btn1"
android:layout_width="wrap_content"
android:gravity="left"
android:layout_height="wrap_content"
android:lines="2" />
<Button
android:id="#+id/btn2"
android:layout_width="fill_parent"
android:gravity="right"
android:layout_height="wrap_content" />
</LinearLayout>

Categories

Resources