Inside a linearLayout I have put three RelativeLayouts with weight = 1. I want RelativeLayouts to be in the center of the screen. How can I manage their position?
below is my xml code:
<LinearLayout
android:id="#+id/layout_circular_items"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view_bg_profile_img"
android:padding="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:background="#color/color_backgrounds_light">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/circle_txt_view"
android:layout_margin="8dp"
android:gravity="center"
android:layout_gravity="center">
<TextView
android:id="#+id/txt_view_scores"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2843"
android:textSize="#dimen/dim_txt_size_times"
android:gravity="center"
android:foregroundGravity="center"
android:layout_centerHorizontal="true"/>
<TextView
android:id="#+id/txt_view_scores_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="scores"
android:layout_below="#id/txt_view_scores"
android:textSize="#dimen/dim_txt_size_times_title"
android:gravity="center"
android:foregroundGravity="center"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/circle_txt_view"
android:layout_margin="8dp"
android:gravity="center"
android:layout_gravity="center">
<TextView
android:id="#+id/txt_view_purchase"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="12"
android:textSize="#dimen/dim_txt_size_times"
android:gravity="center"
android:foregroundGravity="center"
android:layout_centerHorizontal="true"/>
<TextView
android:id="#+id/txt_view_purchase_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="purchase"
android:layout_below="#id/txt_view_purchase"
android:textSize="#dimen/dim_txt_size_times_title"
android:gravity="center"
android:foregroundGravity="center"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/circle_txt_view"
android:layout_margin="8dp"
android:gravity="center"
android:layout_gravity="center">
<TextView
android:id="#+id/txt_view_cash"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="21450"
android:textSize="#dimen/dim_txt_size_times"
android:gravity="center"
android:foregroundGravity="center"
android:layout_centerHorizontal="true"/>
<TextView
android:id="#+id/txt_view_cash_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="cash"
android:layout_below="#id/txt_view_cash"
android:textSize="#dimen/dim_txt_size_times_title"
android:gravity="center"
android:foregroundGravity="center"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
</LinearLayout>
and this is the screen shot of output:
I want the red spaces be equal.
In your top LinearLayout
simply use android:gravity="center"
It will definitely work. If it does not work remove all gravity from RelativeLayout. Only use android:gravity="center" in top LinearLayout.
You can try to this code and edit according your need
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/layout_circular_items"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="8dp"
android:gravity="center">
<TextView
android:id="#+id/txt_view_scores"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:foregroundGravity="center"
android:gravity="center"
android:text="2843" />
<TextView
android:id="#+id/txt_view_scores_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/txt_view_scores"
android:layout_centerHorizontal="true"
android:foregroundGravity="center"
android:gravity="center"
android:text="scores" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="8dp"
android:gravity="center">
<TextView
android:id="#+id/txt_view_purchase"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:foregroundGravity="center"
android:gravity="center"
android:text="12" />
<TextView
android:id="#+id/txt_view_purchase_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/txt_view_purchase"
android:layout_centerHorizontal="true"
android:foregroundGravity="center"
android:gravity="center"
android:text="purchase" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center">
<TextView
android:id="#+id/txt_view_cash"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:foregroundGravity="center"
android:gravity="center"
android:text="21450" />
<TextView
android:id="#+id/txt_view_cash_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/txt_view_cash"
android:layout_centerHorizontal="true"
android:foregroundGravity="center"
android:gravity="center"
android:text="cash" />
</RelativeLayout>
</LinearLayout>
Although this question is answered correctly but just want to add more explanation.
When you want to change the children positions you must work with their parent gravity, No need to change the children gravity. In your case you must simply change your LinearLayout's gravity to center or center_horizontal like this:
<LinearLayout
android:id="#+id/layout_circular_items"
android:layout_width="0dp"
android:layout_height="wrap_content"
<!-- Add this line-->
android:gravity="center"
> ...
android:gravity is the Inside gravity of that View. This means, in
which direction it's contents should align.
This link is also useful to find more info about gravity and layout_gravity:
Gravity and layout_gravity on Android
Related
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_gravity="top"
android:layout_weight=".1"
android:background="#color/colorPaleGrey2"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingTop="20dp">
<TextView
android:id="#+id/meeting_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-medium"
android:gravity="center_horizontal"
android:text="Entrepreneur Meet Up"
android:textColor="#color/blackDark"
android:textSize="20.1sp"
android:textStyle="normal" />
<TextView
android:id="#+id/time"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/meeting_text"
android:layout_centerInParent="true"
android:layout_marginTop="10dip"
android:fontFamily="sans-serif-medium"
android:gravity="center_horizontal"
android:lineSpacingExtra="6sp"
android:text="(11:30AM - 4:00PM)"
android:textColor="#color/bluey_grey_three"
android:textSize="14sp"
android:textStyle="normal" />
</RelativeLayout>
<com.kdcos.contsync.utilities.dragview.DragLayer
android:id="#+id/framelayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/rl_dropView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:padding="40dp">
<ImageView
android:id="#+id/imageView"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:background="#drawable/ic_drop_cards" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imageView"
android:layout_centerInParent="true"
android:layout_gravity="center_horizontal|center"
android:fontFamily="sans-serif"
android:gravity="center_horizontal"
android:lineSpacingExtra="10sp"
android:text="Drop Cards Here"
android:textColor="#color/blackDark"
android:textSize="10sp"
android:textStyle="normal" />
</RelativeLayout>
</com.kdcos.contsync.utilities.dragview.DragLayer>
</LinearLayout>
this is my xml i want keep rl_dropView center inside com.kdcos.contsync.utilities.dragview.DragLayer i wrote xml like this i am unable to set it please look my screen please look i want to set dropView center but from my code its coming top left please suggest how to set it in center.
below is my current Screen:
if DragLayer is SubClass of RelativeLayout then it should work otherwise try below solution
Solution 1
<com.kdcos.contsync.utilities.dragview.DragLayer
android:id="#+id/framelayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/rl_dropView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:padding="40dp">
<ImageView
android:id="#+id/imageView"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:background="#drawable/ic_drop_cards" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imageView"
android:layout_centerInParent="true"
android:layout_gravity="center_horizontal|center"
android:fontFamily="sans-serif"
android:gravity="center_horizontal"
android:lineSpacingExtra="10sp"
android:text="Drop Cards Here"
android:textColor="#color/blackDark"
android:textSize="10sp"
android:textStyle="normal" />
</RelativeLayout>
</RelativeLayout>
</com.kdcos.contsync.utilities.dragview.DragLayer>
UPDATE
Solution 2
as I can see android:orientation="vertical" in your code under DragLayer.its mean DragLayer is SubClass of LinearLayout, so in your RelativeLayout just change
android:layout_centerInParent="true"
to:
android:layout_gravity="center_vertical"
I have LinearLayout inside that relataive layout is there. I want to keep RelativeLayout right side of the LinearLayout. How to do this one. below is my code
<LinearLayout android:id="#+id/status_bar_contents"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingStart="6dp"
android:paddingEnd="8dp"
android:orientation="horizontal">
<com.android.keyguard.AlphaOptimizedLinearLayout android:id="#+id/system_icon_area"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/network"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:gravity="center"
android:layout_marginRight="20dp"
android:background="#drawable/network_strength_0"/>
<com.android.systemui.statusbar.policy.Clock
android:id="#+id/clock"
android:textAppearance="#style/TextAppearance.StatusBar.Clock"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:singleLine="true"
android:gravity="center"
android:layout_toRightOf="#id/network"
/>
</RelativeLayout>
</com.android.keyguard.AlphaOptimizedLinearLayout>
</LinearLayout>
use this one
<LinearLayout android:id="#+id/status_bar_contents"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingStart="6dp"
android:paddingEnd="8dp"
android:orientation="horizontal">
<com.android.keyguard.AlphaOptimizedLinearLayout android:id="#+id/system_icon_area"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:orientation="horizontal">
</com.android.keyguard.AlphaOptimizedLinearLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/network"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:gravity="center"
android:layout_marginRight="20dp"
android:background="#drawable/network_strength_0"/>
<com.android.systemui.statusbar.policy.Clock
android:id="#+id/clock"
android:textAppearance="#style/TextAppearance.StatusBar.Clock"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:singleLine="true"
android:gravity="center"
android:layout_toRightOf="#id/network"
/>
</RelativeLayout>
</LinearLayout>
Note:-Weight is divide you parent LinearLayout into 2 View with same space .IF you want space between 2 views that put weight in ratio....
# Shiv you can try this ..hope this can help you,,
<LinearLayout android:id="#+id/status_bar_contents"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingStart="6dp"
android:paddingEnd="8dp"
android:weightSum="1"
android:orientation="horizontal">
<com.android.keyguard.AlphaOptimizedLinearLayout android:id="#+id/system_icon_area"
android:layout_width="0dp"
android:layout_weight=".5"
android:layout_height="match_parent">
</com.android.keyguard.AlphaOptimizedLinearLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_weight=".5"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/network"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:gravity="center"
android:layout_marginRight="20dp"
android:background="#drawable/network_strength_0"/>
<com.android.systemui.statusbar.policy.Clock
android:id="#+id/clock"
android:textAppearance="#style/TextAppearance.StatusBar.Clock"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:singleLine="true"
android:gravity="center"
android:layout_toRightOf="#id/network"/>
</RelativeLayout>
</LinearLayout>
I'm trying to center the chilldren of my relative layout in the center of my screen but it's acting like it's aligned to the top of the parent and I can't figure out why.
my .XML:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:background="#f70909">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView2"
android:adjustViewBounds="true"
android:src="#drawable/dice"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:id="#+id/textMessage"
android:layout_centerHorizontal="true"
android:layout_below="#+id/imageView2" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/editUserSplash"
android:hint="Username"
android:gravity="center"
android:layout_centerHorizontal="true"
android:layout_below="#+id/textMessage" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/editPasswordSplash"
android:hint="Password"
android:layout_centerHorizontal="true"
android:gravity="center"
android:layout_below="#+id/editUserSplash" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Login"
android:id="#+id/btnSplash"
android:layout_centerHorizontal="true"
android:layout_below="#+id/editPasswordSplash" />
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/prgSplash"
style="#android:style/Widget.DeviceDefault.ProgressBar.Large"
android:layout_centerHorizontal="true"
android:indeterminate="true"
android:layout_below="#+id/btnSplash" />
</RelativeLayout>
I've tried making the parent a relativelayout without success and it won't align to the bottom either. Initially I thought the layout wasn't filling the whole screen but since its height and width are match_parent I don't think that's the problem. in android studio it is displaying correctly though so I must be missing something small.
I also tried using the gravity and layoutgravity parameters and a combination of the two but without success
Edit: I need the views to stay in the same formation relative to each other but centered in the screen vertically.
Edit 2:I set the background of the RelativeLayout to red and got this: So the relativelayout isn't filling my screen.
Edit 3:
Edit 4:
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="match_parent"
android:background="#f70909">
<RelativeLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView2"
android:adjustViewBounds="true"
android:src="#drawable/dice"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:id="#+id/textMessage"
android:layout_centerHorizontal="true"
android:layout_below="#+id/imageView2" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/editUserSplash"
android:hint="Username"
android:gravity="center"
android:layout_centerHorizontal="true"
android:layout_below="#+id/textMessage" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/editPasswordSplash"
android:hint="Password"
android:layout_centerHorizontal="true"
android:gravity="center"
android:layout_below="#+id/editUserSplash" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Login"
android:id="#+id/btnSplash"
android:layout_centerHorizontal="true"
android:layout_below="#+id/editPasswordSplash" />
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/prgSplash"
style="#android:style/Widget.DeviceDefault.ProgressBar.Large"
android:layout_centerHorizontal="true"
android:indeterminate="true"
android:layout_below="#+id/btnSplash" />
</RelativeLayout>
</RelativeLayout>
Try something 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">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView2"
android:adjustViewBounds="true"
android:layout_centerInParent="true"/>
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:layout_centerInParent="true">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:id="#+id/textMessage" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/editUserSplash"
android:hint="Username"
android:gravity="center" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/editPasswordSplash"
android:hint="Password"
android:gravity="center" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Login"
android:id="#+id/btnSplash" />
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/prgSplash"
style="#android:style/Widget.DeviceDefault.ProgressBar.Large"
android:indeterminate="true" />
</LinearLayout>
</RelativeLayout>
UPDATE:
If setting the xml in an AlertDialog, it's possible that there is a space allotted at the bottom. I google and found this alert_dialog.xml for reference. It seems that there is a buttonPanel at the bottom with a minimum height of 54dip.
<LinearLayout android:id="#+id/buttonPanel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="54dip"
android:orientation="vertical" >
<LinearLayout
style="?android:attr/buttonBarStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingTop="4dip"
android:paddingStart="2dip"
android:paddingEnd="2dip"
android:measureWithLargestChild="true">
<LinearLayout android:id="#+id/leftSpacer"
android:layout_weight="0.25"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:visibility="gone" />
<Button android:id="#+id/button1"
android:layout_width="0dip"
android:layout_gravity="start"
android:layout_weight="1"
style="?android:attr/buttonBarButtonStyle"
android:maxLines="2"
android:layout_height="wrap_content" />
<Button android:id="#+id/button3"
android:layout_width="0dip"
android:layout_gravity="center_horizontal"
android:layout_weight="1"
style="?android:attr/buttonBarButtonStyle"
android:maxLines="2"
android:layout_height="wrap_content" />
<Button android:id="#+id/button2"
android:layout_width="0dip"
android:layout_gravity="end"
android:layout_weight="1"
style="?android:attr/buttonBarButtonStyle"
android:maxLines="2"
android:layout_height="wrap_content" />
<LinearLayout android:id="#+id/rightSpacer"
android:layout_width="0dip"
android:layout_weight="0.25"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:visibility="gone" />
</LinearLayout>
</LinearLayout>
I think this may help you
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:gravity="center">
<RelativeLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Login"
android:textStyle="bold"
android:textAppearance="?android:attr/textAppearanceLarge"
android:id="#+id/textMessage"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<EditText
android:layout_margin="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/editUserSplash"
android:hint="Username"
android:layout_below="#+id/textMessage"
android:gravity="center" />
<EditText
android:layout_margin="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/editPasswordSplash"
android:hint="Password"
android:layout_below="#+id/editUserSplash"
android:gravity="center" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Login"
android:id="#+id/btnSplash"
android:layout_below="#+id/editPasswordSplash"
android:layout_centerHorizontal="true" />
</RelativeLayout>
Thanks to ank I was able to figure out that the reason why the RelativeLayout didn't fill my screen is that I used it in an alertDialog. So RelativeLayouts parent isn't the screen but the alertDialog. Since an alertDialog wraps its content it doesn't fill the entire screen.
I have a ScrollView with 1 RelativeLayout which has 3 sub RelativeLayouts:
I set top RelativeLayout to alignParentTop="true",
The bottom RelativeLayout to alignParentBottom="true".
The middle layout to
android:layout_below="#id/topLayout"
android:layout_above="#+id/bottomLayout"
Problem: Scrollview does not scroll when screen is small, instead topLayout stays at top and bottomLayout stays at the bottom. The middle layout gets small and (even lost) as like below:
Desired: I want topLayout stay at top and bottomLayout stay at bottom. But when there is no space there must be scroll so they middle layout must not get lost.
Code:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
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="#color/white"
tools:context="com.jemshit.itu.fragments.TakeAttendanceFragment"
android:fillViewport="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:paddingBottom="#dimen/halfClassic"
android:paddingLeft="#dimen/halfClassic"
android:paddingRight="#dimen/halfClassic"
android:paddingTop="#dimen/halfClassic">
<RelativeLayout
android:id="#+id/layoutWeekChoice"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:padding="0dp"
android:background="#color/white"
android:layout_alignParentTop="true">
<Spinner
android:id="#+id/spinnerWeekChoice"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minHeight="50dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#+id/buttonSetDate"
android:layout_toStartOf="#+id/buttonSetDate"
/>
<Button
android:id="#+id/buttonSetDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:maxWidth="150dp"
android:textSize="16sp"
android:text="Set Date"
android:gravity="center"
android:textColor="#color/white"
android:textAllCaps="false"
android:background="#drawable/button_background"
android:paddingLeft="#dimen/halfClassic"
android:paddingRight="#dimen/halfClassic"
android:layout_alignBottom="#+id/spinnerWeekChoice"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/layoutCardRead"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
android:gravity="center"
android:layout_marginTop="32dp"
android:layout_below="#id/layoutWeekChoice"
android:layout_above="#+id/layoutShowAttendance"
android:layout_centerHorizontal="true">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageCard"
android:src="#drawable/std_card"
android:layout_alignParentTop="true"
android:layout_marginBottom="16dp"
android:layout_centerHorizontal="true"/>
<TextView
android:id="#+id/textWarningCard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Checking..."
android:textColor="#color/black"
android:textSize="14sp"
android:layout_below="#+id/imageCard"
android:layout_centerHorizontal="true"
/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/layoutShowAttendance"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="#dimen/halfClassic"
android:background="#color/white"
android:layout_alignParentBottom="true">
<TextView
android:id="#+id/textAttended"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Attended: "
android:textColor="#color/black"
android:layout_alignParentTop="true"
android:textSize="16sp"/>
<TextView
android:id="#+id/textNotAttended"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Not Attended: "
android:textColor="#color/black"
android:textSize="16sp"
android:layout_marginBottom="32dp"
android:layout_below="#+id/textAttended"/>
<Button
android:id="#+id/buttonManualAttendance"
android:layout_width="wrap_content"
android:layout_centerHorizontal="true"
android:layout_height="wrap_content"
android:text="Manual Attendance"
android:gravity="center"
android:textAllCaps="false"
android:textSize="16sp"
android:textColor="#color/white"
android:background="#drawable/button_background"
android:minHeight="50dp"
android:layout_below="#id/textNotAttended"
android:paddingLeft="#dimen/halfClassic"
android:paddingRight="#dimen/halfClassic"/>
</RelativeLayout>
</RelativeLayout>
</ScrollView>
Note: I do not want to use LinearLayout with weight="1" which will make my 3 layouts same height
EDIT: now ScollView scrolls with new code below but my bottom TextViews get lost:
Code Updated:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
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="#color/white"
tools:context="com.jemshit.itu.fragments.TakeAttendanceFragment"
android:fillViewport="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
android:paddingBottom="#dimen/halfClassic"
android:paddingLeft="#dimen/halfClassic"
android:paddingRight="#dimen/halfClassic"
android:paddingTop="#dimen/halfClassic">
<RelativeLayout
android:id="#+id/layoutWeekChoice"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:padding="0dp"
android:background="#color/white"
android:layout_alignParentTop="true">
<Spinner
android:id="#+id/spinnerWeekChoice"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minHeight="50dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#+id/buttonSetDate"
android:layout_toStartOf="#+id/buttonSetDate"
/>
<Button
android:id="#+id/buttonSetDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:maxWidth="150dp"
android:textSize="16sp"
android:text="Set Date"
android:gravity="center"
android:textColor="#color/white"
android:textAllCaps="false"
android:background="#drawable/button_background"
android:paddingLeft="#dimen/halfClassic"
android:paddingRight="#dimen/halfClassic"
android:layout_alignBottom="#+id/spinnerWeekChoice"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/layoutCardRead"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
android:gravity="center"
android:layout_marginTop="32dp"
android:layout_below="#id/layoutWeekChoice"
android:layout_centerHorizontal="true">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageCard"
android:src="#drawable/std_card"
android:layout_alignParentTop="true"
android:layout_marginBottom="16dp"
android:layout_centerHorizontal="true"/>
<TextView
android:id="#+id/textWarningCard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Checking..."
android:textColor="#color/black"
android:textSize="14sp"
android:layout_below="#+id/imageCard"
android:layout_centerHorizontal="true"
/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/layoutShowAttendance"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="#dimen/halfClassic"
android:background="#color/white"
android:layout_below="#id/layoutCardRead"
android:layout_alignParentBottom="true">
<TextView
android:id="#+id/textAttended"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Attended: "
android:textColor="#color/black"
android:layout_above="#+id/textNotAttended"
android:textSize="16sp"/>
<TextView
android:id="#+id/textNotAttended"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Not Attended: "
android:textColor="#color/black"
android:textSize="16sp"
android:layout_marginBottom="32dp"
android:layout_above="#+id/buttonManualAttendance" />
<Button
android:id="#+id/buttonManualAttendance"
android:layout_width="wrap_content"
android:layout_centerHorizontal="true"
android:layout_height="wrap_content"
android:text="Manual Attendance"
android:gravity="center"
android:textAllCaps="false"
android:textSize="16sp"
android:textColor="#color/white"
android:background="#drawable/button_background"
android:minHeight="50dp"
android:layout_alignParentBottom="true"
android:paddingLeft="#dimen/halfClassic"
android:paddingRight="#dimen/halfClassic"/>
</RelativeLayout>
</RelativeLayout>
</ScrollView>
Set your parents RelativeLayout height to wrap_content. Match_parent needs only ScrollView, everything inside it can spend all the space it needs.
From your 2nd relative layout,that is layoutcard remove android:layout_above="#+id/layoutShowAttendance"
and from layoutShowAttendance remove
android:layout_alignParentBottom="true"
and add android:layout_below="#+id/layoutCardRead" to layoutShowAttendance
It will work.
I have two buttons inside a linear layout which have same properties defined. But to my surprise, both have different height. Please see the xml code below
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
android:paddingBottom="10dp"
android:paddingTop="5dp" >
<ImageView
android:id="#+id/imgUser"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_margin="5dp"
android:layout_marginTop="10dp"
android:adjustViewBounds="true"
android:src="#drawable/default_people_thumb" />
<TextView
android:id="#+id/tvUploadHeader"
style="#style/Text.Quaternary.Small.Bold"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/choose_a_profile_photo" />
<TextView
android:id="#+id/tvDescription"
style="#style/Text.Quaternary.ExtraSmall.Bold"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:gravity="center"
android:text="#string/photo_upload_initial" />
<Button
android:id="#+id/btnChoosePhoto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#drawable/login_button_selector"
android:text="#string/choose_photo_from_gallery" />
<Button
android:id="#+id/btnSkip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#drawable/login_button_selector"
android:text="#string/choose_photo_from_gallery" />
</LinearLayout>
Can you please help me to have the same height. I am wondering as to how both behaves differently. Also added includeFontPadding for the button. But no hope :(.
Your background drawables have different padding or height. check #drawable/btn_large_gray and #drawable/login_button_selector
put both the button inside linear layout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
android:paddingBottom="10dp"
android:paddingTop="5dp" >
<ImageView
android:id="#+id/imgUser"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_margin="5dp"
android:layout_marginTop="10dp"
android:adjustViewBounds="true"
android:src="#drawable/default_people_thumb" />
<TextView
android:id="#+id/tvUploadHeader"
style="#style/Text.Quaternary.Small.Bold"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/choose_a_profile_photo" />
<TextView
android:id="#+id/tvDescription"
style="#style/Text.Quaternary.ExtraSmall.Bold"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:gravity="center"
android:text="#string/photo_upload_initial" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
android:paddingBottom="10dp"
android:paddingTop="5dp" >
<Button
android:id="#+id/btnChoosePhoto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#drawable/login_button_selector"
android:text="#string/choose_photo_from_gallery" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
android:paddingBottom="10dp"
android:paddingTop="5dp" >
<Button
android:id="#+id/btnSkip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#drawable/btn_large_gray"
android:text="#string/skip" />
</LinearLayout>
</LinearLayout>
and adjust both linear layouts as you like it
Try defining property android:layout_weight for each element in your LinearLayout, so they can have the same height.
For example :
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
android:paddingBottom="10dp"
android:paddingTop="5dp" >
<ImageView
android:id="#+id/imgUser"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_weight="1"
android:layout_margin="5dp"
android:layout_marginTop="10dp"
android:adjustViewBounds="true"
android:src="#drawable/default_people_thumb" />
<TextView
android:id="#+id/tvUploadHeader"
style="#style/Text.Quaternary.Small.Bold"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/choose_a_profile_photo" />
<TextView
android:id="#+id/tvDescription"
style="#style/Text.Quaternary.ExtraSmall.Bold"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:gravity="center"
android:text="#string/photo_upload_initial" />
<Button
android:id="#+id/btnChoosePhoto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_margin="5dp"
android:background="#drawable/login_button_selector"
android:text="#string/choose_photo_from_gallery" />
<Button
android:id="#+id/btnSkip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_margin="5dp"
android:background="#drawable/login_button_selector"
android:text="#string/choose_photo_from_gallery" />
</LinearLayout>
The idea is to give as much space to each element. Your LinearLayout contains different elements so by choosing wrap_content in the android:layout_height and android:layout_width, space available will be allocated for each element added. And as you TextViews and Buttons are not the same...
Hope it'll help
You are using different style for both the buttons,
i.e. "#style/Text.Quaternary.Small.Bold" and "#style/Text.Quaternary.ExtraSmall.Bold" you should use only one style for both buttons