Fixed button over a scrollview
Ok i got it :
render() {
return (
<View>
<Header />
<ScrollView>
<View>
<ItemSquareDisplay
items={this.props.items && this.props.items.length > 0
? this.props.items
: ''} />
</View>
</ScrollView>
<Button style={styles.buttonStyle}>
<Text style={styles.buttonTextStyle}>+</Text>
</Button>
</View>
);
}
Quite obviously, I needed to extract my button from my Container component.
Thanks for your answers guys.
Android - Bring scroll view above fixed button
- Constraint the ScrollView bottom to Button's top constraint.
- Then set android:layout_height="0dp" of the scrollView
I have made changes in your code, copy-paste whole code and try it
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout
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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".JobInfo">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView3"
style="@style/HeaderStyle"
android:layout_width="252dp"
android:layout_height="39dp"
android:layout_marginTop="24dp"
android:fontFamily="@font/roboto_bold"
android:text="Find Your Next Gig"
android:textSize="30sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/menuIcon"
app:layout_constraintTop_toTopOf="parent" />
<SearchView
android:id="@+id/search"
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_centerHorizontal="true"
android:layout_marginStart="16dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="80dp"
android:background="@drawable/rounded_button"
android:iconifiedByDefault="false"
android:paddingLeft="-10dp"
android:queryBackground="@android:color/transparent"
android:queryHint="Search Jobs"
android:searchIcon="@drawable/ic_magnifying_glass"
android:textColor="#fff"
android:visibility="visible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView3"
app:theme="@style/Search" />
<ImageButton
android:id="@+id/menuIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="29dp"
android:background="@null"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/ic_burger_button" />
<ImageButton
android:id="@+id/imageButton2"
android:layout_width="30dp"
android:layout_height="35dp"
android:layout_marginTop="37dp"
android:background="@null"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.4"
app:layout_constraintStart_toEndOf="@+id/search"
app:layout_constraintTop_toBottomOf="@+id/textView3"
app:srcCompat="@drawable/ic_noun_filter" />
<ScrollView
android:id="@+id/scrollView"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_marginTop="20dp"
android:layout_weight="1"
android:background="#fff"
app:layout_constraintBottom_toTopOf="@+id/constraintLayout5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/search">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="358dp"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/search">
<ImageView
android:id="@+id/prof_pic_info"
android:layout_width="110dp"
android:layout_height="110dp"
android:layout_marginStart="16dp"
android:layout_marginTop="40dp"
android:layout_marginBottom="10dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="@+id/jobName_info"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="42dp"
android:layout_marginEnd="16dp"
android:fontFamily="@font/roboto_bold"
android:textColor="#000"
android:textSize="16sp"
android:textStyle="normal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="@+id/prof_pic_info"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/recruiterName_info"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:fontFamily="@font/roboto"
android:textColor="#000"
android:textSize="10sp"
android:textStyle="normal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="@+id/prof_pic_info"
app:layout_constraintTop_toBottomOf="@+id/jobName_info" />
<TextView
android:id="@+id/jobLocation_info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:fontFamily="@font/roboto_light"
android:textColor="#000"
android:textSize="12sp"
android:textStyle="normal"
app:layout_constraintStart_toEndOf="@+id/prof_pic_info"
app:layout_constraintTop_toBottomOf="@+id/recruiterName_info" />
<TextView
android:id="@+id/jobCharge_info"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:fontFamily="@font/roboto_light"
android:textColor="#000"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="@+id/jobLocation_info"
app:layout_constraintTop_toBottomOf="@+id/recruiterName_info" />
<TextView
android:id="@+id/jobDate_info"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:fontFamily="@font/roboto"
android:textColor="#000"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="@+id/prof_pic_info"
app:layout_constraintTop_toBottomOf="@+id/jobCharge_info" />
<TextView
android:id="@+id/jobTime_info"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:fontFamily="@font/roboto"
android:textColor="#000"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="@+id/prof_pic_info"
app:layout_constraintTop_toBottomOf="@+id/jobDate_info" />
<TextView
android:id="@+id/jobDesc_header"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="30dp"
android:layout_marginEnd="16dp"
android:fontFamily="@font/roboto_medium"
android:text="Job Description"
android:textColor="#000"
android:textSize="16sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/prof_pic_info" />
<TextView
android:id="@+id/jobTasks_header"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:fontFamily="@font/roboto_medium"
android:text="Your Tasks"
android:textColor="#000"
android:textSize="16sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/jobDesc" />
<TextView
android:id="@+id/additonalPref_header"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:fontFamily="@font/roboto_medium"
android:text="Additional Preferences"
android:textColor="#000"
android:textSize="16sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/jobTasks" />
<TextView
android:id="@+id/jobTasks"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:fontFamily="@font/roboto"
android:textColor="#000"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/jobTasks_header" />
<TextView
android:id="@+id/additionalPref"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:fontFamily="@font/roboto"
android:textColor="#000"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/additonalPref_header" />
<TextView
android:id="@+id/jobDesc"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:fontFamily="@font/roboto"
android:textColor="#000"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/jobDesc_header" />
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/constraintLayout5"
android:layout_width="300dp"
android:layout_height="55dp"
android:layout_marginBottom="16dp"
android:background="@drawable/request_hire_container"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<Button
android:layout_width="150dp"
android:layout_height="40dp"
android:layout_marginStart="16dp"
android:background="@drawable/rounded_button"
android:fontFamily="@font/roboto_bold"
android:text="Request For Hire"
android:textAllCaps="false"
android:textColor="#272343"
android:textSize="12dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
<com.google.android.material.navigation.NavigationView
android:id="@+id/hamburger_menu"
android:layout_width="250dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="@drawable/rounded_corner_drawer"
app:headerLayout="@layout/nav_header"
app:itemHorizontalPadding="30dp"
app:itemIconSize="16dp"
app:itemIconTint="#272343"
app:itemTextAppearance="@style/Nav_text"
app:menu="@menu/hamburger_menu" />
</androidx.drawerlayout.widget.DrawerLayout>
How do i make a fixed position button in a scrollable xaml
It's easy to achieve by Grid:
<Grid Margin="20">
<ScrollView VerticalOptions="FillAndExpand">
<Label Text="FOR the most wild,d, yet most homely narrative which I am about to pen, I neither expect nor solicit belief. Mad indeed would I be to expect it, in ad, yet most homely narrative which I am about to pen, I neither expect nor solicit belief. Mad indeed would I be to expect it, in ad, yet most homely narrative which I am about to pen, I neither expect nor solicit belief. Mad indeed would I be to expect it, in ad, yet most homely narrative which I am about to pen, I neither expect nor solicit belief. Mad indeed would I be to expect it, in ad, yet most homely narrative which I am about to pen, I neither expect nor solicit belief. Mad indeed would I be to expect it, in a yet most homely narrative which I am about to pen, I neither expect nor solicit belief. Mad indeed would I be to expect it, in a case where my very senses reject their own evidence. Yet, mad am I not -- and very surely do I not dream. But to-morrow I die, and to-day I would unburthen my soul. My immediate purpose is to place before the world, plainly, succinctly, and without comment, a series of mere household events. In their consequences, these events have terrified -- have tortured -- have destroyed me. Yet I will not attempt to expound them. To me, they have presented little but Horror -- to many they will seem less terrible than barroques. Hereafter, perhaps, some intellect may be found which will reduce my phantasm to the common-place -- some intellect more calm, more logical, and far less excitable than my own, which will perceive, in the circumstances I detail with awe, nothing more than an ordinary succession of very natural causes and effects." />
</ScrollView>
<Button BackgroundColor="Red" Text="Press Me" HorizontalOptions="End" VerticalOptions="End"/>
</Grid>
Here is the result:
How can I fix a button at the bottom in the scrollview android?
@Shink
Check this removed -- weight -- from scrollview and replaced 0dp to wrap_content, changed the parent to relative layout, and button without having its container relativelayout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@android:color/darker_gray"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="50dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="80dp"
android:orientation="vertical" >
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="61dp"
android:gravity="center"
android:text="Interest Rates on Domestic Term Deposits (w.e.f. 26th Septemr, 2013)"
android:textColor="@android:color/white" />
<ScrollView
android:id="@+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TableRow
android:id="@+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@android:color/black"
android:gravity="center" >
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="Pariculars"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="@android:color/white" />
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="General"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="@android:color/white" />
<TextView
android:id="@+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="Senior Citizens(p.a.)"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="@android:color/white" />
</TableRow>
<TableRow
android:id="@+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center" >
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="Revised for deposit upto"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="@android:color/white" />
<TextView
android:id="@+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="Revised for deposit upto"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="@android:color/white" />
<TextView
android:id="@+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="Revised for deposit upto"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="@android:color/white" />
</TableRow>
<TableRow
android:id="@+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center" >
<TextView
android:id="@+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="Rs. 15 Lacs"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="@android:color/white" />
<TextView
android:id="@+id/textView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="Rs. 15 Lacs"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="@android:color/white" />
<TextView
android:id="@+id/textView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="Rs. 15 Lacs"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="@android:color/white" />
</TableRow>
<TableRow
android:id="@+id/tableRow4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center" >
<TextView
android:id="@+id/textView9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="7days to 14 days"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="@android:color/white" />
<TextView
android:id="@+id/textView10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="7.25%"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="@android:color/white" />
<TextView
android:id="@+id/textView11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="7.25%"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="@android:color/white" />
</TableRow>
<TableRow
android:id="@+id/tableRow5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center" >
<TextView
android:id="@+id/textView12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="15 days to 90 days"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="@android:color/white" />
<TextView
android:id="@+id/textView13"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="7.75%"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="@android:color/white" />
<TextView
android:id="@+id/textView14"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="7.75%"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="@android:color/white" />
</TableRow>
<TableRow
android:id="@+id/tableRow6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center" >
<TextView
android:id="@+id/textView15"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="91 days to 180 days"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="@android:color/white" />
<TextView
android:id="@+id/textView16"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="8.50%"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="@android:color/white" />
<TextView
android:id="@+id/textView17"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="8.50%"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="@android:color/white" />
</TableRow>
<TableRow
android:id="@+id/tableRow7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center" >
<TextView
android:id="@+id/textView18"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="181 days to 12 months"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="@android:color/white" />
<TextView
android:id="@+id/textView19"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="9.50%"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="@android:color/white" />
Related Topics
How to Use CSS to Justify Text with Hyphenating Words at The End of a Line
Media Query to Target Most of Smartphone
Making Responsive Images with Different Aspect Ratios The Same Height
Are There Any View Helpers to Generate CSS
How to Implement Rtl Bootstrap 4 Navbar
How to Remove Parent Opacity in CSS
Django Staticfiles at Url Root
Twitter Bootstrap Navigation Bar Fixed
How to Add Focus to a Table Row <Tr>
Image Shifting/Jumping After CSS Transition Effect with Scale Transform in Firefox
How to Add Some Pixels to The Current Height of Div
Background Image in Styled Components React
Moz-Placeholder Does Not Work in Firefox
CSS3 Transform Scale and Container with Overflow
CSS Background Image Before and After H1 Tag