I have the following code and I want to convert the RelativeLayout to be ConstraintLayout and want it to show exactly the same. However, The ViewPager tag doesn't settle in the center like expected. I want the following code to be in constraint layout but unable to achive it. I converted layout_above to layout_constraintTop_toTopOf and such but cannot make it work well. It would be lovely if you can share me some examples or tips! I would love to hear from you !
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_alignParentTop="true">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:src="#drawable/d"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
<View android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="1dp"/>
</LinearLayout>
<androidx.viewpager.widget.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/footer"
android:layout_below="#id/header"
android:overScrollMode="never">
</androidx.viewpager.widget.ViewPager>
<LinearLayout
android:id="#+id/footer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical">
<include layout="#layout/pagerlayout"/>
</LinearLayout>
</RelativeLayout>
If you just want a ConstraintLayout template with header and footer with a viewpager in between, then here ya go:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:orientation="horizontal"
app:layout_constraintTop_toTopOf="parent">
</LinearLayout>
<androidx.viewpager.widget.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/footer"
android:layout_below="#id/header"
android:layout_marginTop="8dp"
android:overScrollMode="never"
app:layout_constraintBottom_toTopOf="#+id/footer"
app:layout_constraintTop_toBottomOf="#+id/header"></androidx.viewpager.widget.ViewPager>
<LinearLayout
android:id="#+id/footer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent">
<!-- include layout="#layout/pagerlayout"/ -->
</LinearLayout>
</android.support.constraint.ConstraintLayout>
You should be able to start from there and acheive what you want.
If you ask any follow up questions, they will be ignored because your question has so little information included that if would be unfair to do so.
Related
I am making an app in which I have a RecyclerView. I have also added a button, but it isn't shown. See the left photo. What I now want is to make the RecyclerView so that may button is visible, like in the photo on the right. How can I achieve this?
Under the photos you can see my xml code. I'd like the RecyclerView to be relative/dynamic.
<?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"
tools:context="com.test.test.MainActivity"
android:orientation="vertical"
android:background="#color/colorAccent">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar"/>
<androidx.cardview.widget.CardView
android:id="#+id/cardViewMiddle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginRight="20dp"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
app:cardCornerRadius="15dp">
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent">
</androidx.recyclerview.widget.RecyclerView>
</androidx.core.widget.NestedScrollView>
</androidx.cardview.widget.CardView>
<Button
android:id="#+id/btnCheckout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/round_corner"
android:backgroundTint="#color/colorPrimaryDark"
android:elevation="16dp"
android:text="START"
android:textColor="#FFFFFF"
android:textStyle="bold" />
</LinearLayout>
The problem is that you set the CardView height to match_parent so it takes up the entire screen. It's best to use ConstraintLayout for these kinds of layouts, but you can also fix it with minimal effort like this:
<?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"
tools:context="com.test.test.MainActivity"
android:orientation="vertical"
android:background="#color/colorAccent">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar"/>
<androidx.cardview.widget.CardView
android:id="#+id/cardViewMiddle"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginRight="20dp"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:layout_weight="1"
app:cardCornerRadius="15dp">
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent">
</androidx.recyclerview.widget.RecyclerView>
</androidx.core.widget.NestedScrollView>
</androidx.cardview.widget.CardView>
<Button
android:id="#+id/btnCheckout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/round_corner"
android:backgroundTint="#color/colorPrimaryDark"
android:elevation="16dp"
android:text="START"
android:textColor="#FFFFFF"
android:textStyle="bold" />
</LinearLayout>
Note I only changed CardView's layout_height to 0dp and then added the following:
android:layout_weight="1"
Which will tell the layout to stretch as much as it can (while not covering other elements below it).
It seems to me that I have read all the topics on stackoverflow and have not found a solution.
The problem is that ImageView is always under RecyclerView, whatever I do, but I need to display ImageView on top of RecyclerView.
Question: Why is this happening and how can I fix it?
Example of right and wrong:
My XML:
<androidx.core.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:clickable="true"
android:focusable="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/bottom_style"
android:overScrollMode="never"
app:behavior_hideable="false"
app:behavior_peekHeight="150dp"
app:layout_behavior="....BottomSheetController.MyBottomSheetBehavior">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_marginTop="6dp"
android:layout_marginBottom="6dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp">
<....BottomSheetController.MyRecyclerView
android:id="#+id/recycler_view"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:overScrollMode="never" />
<ImageView
android:id="#+id/close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_button_close" />
</RelativeLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.core.widget.NestedScrollView>
Try below code
<androidx.core.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:clickable="true"
android:focusable="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#color/colorAccent"
android:overScrollMode="never"
app:behavior_hideable="false"
app:behavior_peekHeight="150dp"
app:layout_behavior="....BottomSheetController.MyBottomSheetBehavior">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_marginTop="6dp"
android:layout_marginBottom="6dp">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp">
<....BottomSheetController.MyRecyclerView
android:id="#+id/recycler_view"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:overScrollMode="never" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
<ImageView
android:id="#+id/close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:src="#drawable/ic_button_close" />
</RelativeLayout>
</androidx.core.widget.NestedScrollView>
Is there any specific reason why you need to wrap the content in RelativeLayout if not making use of a FrameLayout should fix your issue, remember to set android:layout_gravity="end|top" to position your close button on top-end. So the code looks something like below:
<androidx.core.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:clickable="true"
android:focusable="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/bottom_style"
android:overScrollMode="never"
app:behavior_hideable="false"
app:behavior_peekHeight="150dp"
app:layout_behavior="....BottomSheetController.MyBottomSheetBehavior">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_marginTop="6dp"
android:layout_marginBottom="6dp">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp">
<....BottomSheetController.MyRecyclerView
android:id="#+id/recycler_view"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:overScrollMode="never" />
<ImageView
android:id="#+id/close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|top"
android:src="#drawable/ic_button_close" />
</FrameLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.core.widget.NestedScrollView>
As for the reason, from what I believe, why RelativeLayout was showing the incorrect output was because the the distance of views on z-axis is set based on the order they are generated. So even though the ImageView is set after recyclerview, to be on the Top, but the holders inside are generated afterwards and are therefore on top of the imageview.
If it was a simple view generated before the imageview, image would be on top as desired.
P.S.: I didn't find any documentation for this and is purely how I believe it works so if that is not the case anyone is free to correct me.
Try to add this code in your adapter
close = (ImageView) itemView.findViewById(R.id.close);
close.bringToFront();
I have tried the below code but it doesn't scroll when I rotate my application it will cover most of screen but I need to scroll there it doesn't working there. Is it right way to use scroll view in constraint layout. I have seen this type of example. There it was in working condition I have tried the below code but it doesn't scroll when I rotate my application it will cover most of screen but I need to scroll there it doesn't working there. Is it right way to use scroll view in constraint layout. I have seen this type of example.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<include layout="#layout/tool_bar" />
<ScrollView
android:id="#+id/scrollView2"
android:layout_width="match_parent"
android:layout_height="611dp"
android:layout_marginTop="70dp"
android:scrollbars="none"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="0dp"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="2">
<ImageView
android:id="#+id/main_bmi"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/bmi" />
<ImageView
android:id="#+id/bmr"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/bmr" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="horizontal"
android:weightSum="2">
<ImageView
android:id="#+id/ideal_weight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ideal" />
<ImageView
android:id="#+id/water_intake"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/water" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="horizontal"
android:weightSum="2">
<ImageView
android:id="#+id/calorie"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/calories" />
<ImageView
android:id="#+id/nutrition"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/nutrition" />
</LinearLayout>
</LinearLayout>
</ScrollView>
</android.support.constraint.ConstraintLayout>
follow this layer it might work.put appbarlayout inside ConstraintLayout layout
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--add your scrollview or nestedscrollview here-->
</LinearLayout>
</android.support.design.widget.AppBarLayout>
Your ScrollView height is fixed to 611dp.
If you use a fixed size, then the content should be greater than 611dp to be able to scroll.
You should use
<ScrollView
android:id="#+id/scrollView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
....>
I'm building and android application using android studio and I'm using scroll view in my layout, but the problem is that the scroll view doesn't start after the action bar and leaves huge white space at the bottom (as you can see in the screenshots below).
and here's my 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:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="false"
android:background="#fefcf8"
android:orientation="vertical"
android:weightSum="1">
<FrameLayout
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:layout_gravity="center"
android:orientation="vertical"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="0dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:padding="5dp"
android:orientation="vertical">
<ImageButton
android:id="#+id/info1"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_margin="2dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:background="#android:color/transparent"
android:scaleType="fitCenter"
android:src="#drawable/info1" />
</LinearLayout>
.
.
.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:padding="5dp"
android:orientation="vertical">
<ImageButton
android:id="#+id/info6"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_margin="2dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:background="#android:color/transparent"
android:scaleType="fitCenter"
android:src="#drawable/info6" />
</LinearLayout>
</LinearLayout>
</ScrollView>
</FrameLayout>
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:background="#3a3c3a"
app:menu="#menu/navigation"
app:itemTextColor="#ffffff"/>
</LinearLayout>
As you can see my xml above, i didn't any padding or margin. Yet there's a white space at the bottom and the scroll view starts at the very top of the activity not after the action bar. How to solve this?
Try by putting this inside your ScrollView or FrameLayout containing ScrollView
<ScrollView
...
app:layout_behavior="#string/appbar_scrolling_view_behavior"
...>
i want to create layout as attached below.
As you see i have added fixed buttons to bottom on the layout.
and now i have problem when content part has more than 9 elements.
While it is going to scroll, last elements are hiding back of the bottom buttons and not scrolling fully as below:
Please give me advise how to do it? Please notice i am not professional android developer.
I am now going to attach my xml layout files. Here you are:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="0dp"
android:popupTheme="#style/AppTheme.PopupOverlay"
android:theme="#style/ToolbarColoredBackArrow" />
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
style="#style/MyCustomTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar"
app:tabGravity="fill" />
</android.support.design.widget.AppBarLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</ScrollView>
<LinearLayout
android:id="#+id/ButtonsLinearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#F5F5F5"
android:orientation="vertical">
<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:background="#808080" />
<LinearLayout
android:id="#+id/footer_button_icons_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#F5F5F5"
android:orientation="horizontal">
<android.support.v7.widget.AppCompatButton
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#F5F5F5"
android:drawablePadding="3dp"
android:drawableTop="#drawable/ic_xxx"
android:gravity="center|center"
android:text="#string/footer_xxx"
android:textAllCaps="false"
android:textColor="#color/xxx_gray_darker"
android:textSize="12sp" />
<android.support.v7.widget.AppCompatButton
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_margin="2dp"
android:layout_weight="1"
android:background="#drawable/borderless_button"
android:drawablePadding="3dp"
android:drawableTop="#drawable/ic_xxx"
android:gravity="center|center"
android:text="#string/footer_xxx"
android:textAllCaps="false"
android:textColor="#FFFFFF"
android:textSize="12sp" />
<android.support.v7.widget.AppCompatButton
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#F5F5F5"
android:drawablePadding="3dp"
android:drawableTop="#drawable/ic_xxx"
android:gravity="center|center"
android:text="#string/footer_xxx"
android:textAllCaps="false"
android:textColor="#color/xxx_gray_darker"
android:textSize="12sp" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
Here is a First Fragment layout xml of ViewPager
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:paddingTop="40dp"
android:showDividers="middle"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<GridView
android:id="#+id/gridView"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:numColumns="3"
android:stretchMode="columnWidth"
android:verticalSpacing="20dp"></GridView>
</LinearLayout>
set android:layout_above in your scrollView
<ScrollView android:layout_above="#id/ButtonsLinearLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
your ScrollView should be above LinearLayout which consist Buttons.
There is no need to use ScrollView in view pager. Remove ScrollView for the ViewPager whose id is pager.
paddingBottom is what you want. Add paddingBottom to your ScrollView or any other layout which is the container of the items. The padding should be slightly greater than the height of the bottom strip.
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingBottom="48dp">