Wrap_Layout does not wrap layout, unless in a RelativeLayout - android

Inside this
<androidx.constraintlayout.widget.ConstraintLayout 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/backgroundColor"
xmlns:app="http://schemas.android.com/apk/res-auto">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="12dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clipChildren="false"
android:clipToPadding="false"
android:orientation="vertical">
I have this
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:id="#+id/banner_rl"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="330:128"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="0.9">
<ImageView ... />
<TextView ... />
</RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</RelativeLayout>
Unless I insert that outermost RelativeLayout, the ConstraintLayout would not wrap the Image. it would be 0dp instead of the content's.
Why is that? Why does the CL need to be wrapped by a RL to identify it's contents?

Related

Button in the bottom of LinearLayout

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).

ScrollView stacked with another page

The issue is the background of my scrollview is somewhat have pretty same content as my scroll view. i have try looking but can't found the problem, because every place tell that i just have to place the content into the scrollview. Please Help!
The design of the layout
This is my layout code
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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=".ui.home.HomeFragment">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/category_rv"
android:layout_width="match_parent"
android:background="#color/colorAccent"
android:elevation="3dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/LinearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/category_rv">
<include layout="#layout/horizontal_scroll_layout" />
</LinearLayout>
<LinearLayout
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/LinearLayout">
<include layout="#layout/sliding_ad_layout" />
</LinearLayout>
<LinearLayout
android:id="#+id/LinearLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/LinearLayout1">
<include layout="#layout/grid_product_layout" />
</LinearLayout>
</LinearLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
Put recyclerview and scrollview into nestedscrollview
This will solve your problem.
Add constraints to your scroll view, not to LinearLayout
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/category_rv">

How to center a progressbar in screen

The progress bar is appearing on the left of the screen. I would want it centered, like in the example.
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:gravity="center"
android:background="#drawable/semi_circle"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_marginTop="50dp"
android:layout_gravity="center_horizontal"
android:id="#+id/relative">
<ProgressBar
android:id="#+id/progress_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:visibility="visible" />
<LinearLayout android:layout_width="match_parent"
android:id="#+id/lilPolicy"
android:layout_height="match_parent"
android:layout_marginBottom="20dp">
</LinearLayout>
You should get the ProgressBar outside the ScrollView, because logically you can know the height of the ScrollView at Runtime, so you can't figure out where the ProgressBar will place until running your app.
So, get out the ProgressBar from the ScrollView, create another root layout, wrap both ProgressBar & ScrollView in it; I picked RelativeLayout as the root, you can decide another layout manager if you wish.
layout_centerInParent attribute is used to center a view within a RelativeLayout
<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="match_parent"
android:background="#drawable/semi_circle"
android:gravity="center">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/relative"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="50dp">
<LinearLayout
android:id="#+id/lilPolicy"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="20dp">
</LinearLayout>
</RelativeLayout>
</ScrollView>
<ProgressBar
android:id="#+id/progress_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:visibility="visible" />
</RelativeLayout>
Note: I don't know what you're going to accomplish, so I left android:background="#drawable/semi_circle in the root layout
Inside your scrollView
Using RelativeLayout:
<?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">
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
</RelativeLayout>
Using ConstraintLayout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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="match_parent">
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Add ConstraintLayout to your project, Build a Responsive UI with ConstraintLayout
You can easily implement it.
The way I would have done it is:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ScrollView
android:layout_width="0dp"
android:layout_height="0dp"
android:fillViewport="true"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/item_1"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:layout_above="#id/item_2"
android:background="#0000FF"
android:layout_marginTop="10dp"
android:orientation="horizontal"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<LinearLayout
android:id="#+id/item_2"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:layout_below="#id/item_1"
android:background="#FF0000"
android:orientation="horizontal"
app:layout_constraintTop_toBottomOf="#id/item_1" />
<LinearLayout
android:id="#+id/item_3"
android:layout_marginTop="10dp"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:layout_below="#id/item_2"
android:background="#FFFF00"
android:orientation="horizontal"
app:layout_constraintTop_toBottomOf="#id/item_2" />
</android.support.constraint.ConstraintLayout>
>
</ScrollView>
</android.support.constraint.ConstraintLayout>
If you have used relative layout as a parent layout . so we need to add this attribute android:layout_centerInParent="true" to align view in parent center. and scroll view by default remove extra spacing in view . add android:fillViewport="true" to make scroll view match parent
Try this code
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:gravity="center"
android:background="#000"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<RelativeLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_marginTop="50dp"
android:layout_gravity="center_horizontal"
android:id="#+id/relative">
<ProgressBar
android:id="#+id/progress_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:visibility="visible" />
<LinearLayout android:layout_width="match_parent"
android:id="#+id/lilPolicy"
android:layout_height="match_parent"
android:layout_marginBottom="20dp"
android:orientation="horizontal">
</LinearLayout>
</RelativeLayout>
</ScrollView>
use android:layout_centerInParent="true" as you are using RelativeLayout.

Strange behaviour of recyclerview in nestedscrollview

I have a layout like below. Problem is that the recyclerview height only shows one item.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView 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="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_margin="#dimen/activity_horizontal_margin">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Live Transactions"
android:textStyle="bold"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#drawable/ic_refresh"
android:background="#android:color/transparent"/>
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
Strange thing is that when I change the attribute
app:srcCompat="#drawable/ic_refresh"
in the ImageButton to something like
app:srcCompat="#android:drawable/ic_menu_search"
the recyclerview height becomes normal most items show. The ImageButton is on a layout above RecyclerView. Why does this happen?
You have to make your inner linear layout as match parent
<android.support.v4.widget.NestedScrollView 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="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_margin="16dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Live Transactions"
android:textStyle="bold"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#mipmap/ic_launcher"
android:background="#android:color/transparent"/>
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
Solved it simply by adding
android:fillViewport="true"
to the NestedScrollView
Make the layout_height on the Recycler View to match_parent
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />

Scrollview not working for Relative Layout

I am trying to populate a Relative layout with 4 card views in it. Each cardview consists one image and a text view. I wrapped all the card views in a relative layout and the relative layout in a scroll view. It's not working. If I remove scrollview, its working fine. Tried by putting scrollview inside the relative layout. But didnt work
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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:fillViewport="true"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#659D32"
android:paddingBottom="16dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:orientation="vertical"
android:paddingTop="16dp"
tools:context="com.example.MainActivity">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="200dp"
app:cardCornerRadius="5dp"
android:id="#+id/cardview_1"
app:cardElevation="10dp"
app:cardMaxElevation="15dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="170dp"
android:src="#drawable/img_1"
android:id="#+id/cardImage_bang"
android:scaleType="centerCrop"/>
<TextView
android:layout_below="#+id/cardImage_1"
android:id="#+id/cardTitle_1"
android:gravity="center_horizontal"
android:text="Text1"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="200dp"
app:cardCornerRadius="5dp"
android:layout_below="#+id/cardview_1"
android:id="#+id/cardview_2"
app:cardElevation="10dp"
android:layout_marginTop="10dp"
app:cardMaxElevation="15dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="170dp"
android:src="#drawable/img_2"
android:id="#+id/cardImage_2"
android:scaleType="centerCrop"/>
<TextView
android:layout_below="#+id/cardImage_2"
android:id="#+id/cardTitle_2"
android:gravity="center_horizontal"
android:text="Text2"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
Hope this will help you.. (this snippet worked in my case)
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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:fillViewport="true"
android:paddingLeft="5dp"
android:background="#color/bg"
android:paddingRight="5dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:orientation="vertical"
android:padding="10dp"
android:weightSum="1">
<!-- put entire thing here -->
</RelativeLayout>
</ScrollView>
you have written the scroll view tag wrong. That's the reason its not working. Change it from <Scrollview> to <ScrollView> and add the Scroll view end tag like </ScrollView>and re run the project, it will work fine.
Hope this will help you !
1) You've misspelled the ScrollView tag it must be <ScrollView> not <Scrollview>
2) You didn't close the <ScrollView> tag at the end of the code
-->Here's the right 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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:fillViewport="true"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#659D32"
android:paddingBottom="16dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:orientation="vertical"
android:paddingTop="16dp"
tools:context="com.example.MainActivity">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="200dp"
app:cardCornerRadius="5dp"
android:id="#+id/cardview_1"
app:cardElevation="10dp"
app:cardMaxElevation="15dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="170dp"
android:src="#drawable/img_1"
android:id="#+id/cardImage_bang"
android:scaleType="centerCrop"/>
<TextView
android:layout_below="#+id/cardImage_1"
android:id="#+id/cardTitle_1"
android:gravity="center_horizontal"
android:text="Text1"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="200dp"
app:cardCornerRadius="5dp"
android:layout_below="#+id/cardview_1"
android:id="#+id/cardview_2"
app:cardElevation="10dp"
android:layout_marginTop="10dp"
app:cardMaxElevation="15dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="170dp"
android:src="#drawable/img_2"
android:id="#+id/cardImage_2"
android:scaleType="centerCrop"/>
<TextView
android:layout_below="#+id/cardImage_2"
android:id="#+id/cardTitle_2"
android:gravity="center_horizontal"
android:text="Text2"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
</ScrollView>

Categories

Resources