Develop Reference

Sticky view with vertical scrolling using constraint layout or any other way in android

The red portion is wrap content and can be expanded, depends on how much data it contains. The green part/view always sticks between red and white. The screen is vertically scrollable.
THE attached XML code having scrollview and layout weight but it divides the screen into two parts from the middle, which is not as per the requirement.
Please suggest how to achieve this.
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.cardview.widget.CardView
android:id="#+id/card_img_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:elevation="10dp"
app:cardBackgroundColor="#color/back_screen_color_list"
app:cardElevation="10dp"
app:cardUseCompatPadding="true"
app:contentPadding="20dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/frm_club_img_wrapper"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#drawable/circle_border_orange_bg">
<ImageView
android:id="#+id/img_club"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:contentDescription="#string/img_desc"
app:srcCompat="#drawable/ic_logo_img_white" />
</FrameLayout>
<de.meinverein.app.view.RegularFontTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="20dp"
android:layout_toRightOf="#+id/frm_club_img_wrapper"
android:text="Jetzt Profil\nverfolständigen"
android:textColor="#color/black"
android:textSize="#dimen/h1_lbl_size" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="2">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#0C0F12">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginLeft="40dp"
android:layout_marginTop="50dp"
android:orientation="vertical">
<ImageView
android:id="#+id/img_club1"
android:layout_width="#dimen/dashboard_logo_width"
android:layout_height="#dimen/dashboard_logo_height"
android:layout_marginBottom="20dp"
android:contentDescription="#string/img_desc"
app:srcCompat="#drawable/ic_logo_img_white" />
<de.meinverein.app.view.BoldFontTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="MEINVEREIN"
android:textColor="#color/refs_btn"
android:textSize="#dimen/dashboard_app_txt_size" />
<de.meinverein.app.view.BoldFontTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_marginTop="30dp"
android:text="Hallo Daniel,\ngerade nichts Neues!"
android:textColor="#color/white"
android:textSize="#dimen/list_view_item_txt_size_h1" />
</LinearLayout>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#F6F6F6">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rvAnimals"
android:layout_width="match_parent"
android:layout_marginTop="20dp"
android:layout_height="match_parent"/>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rvAdnimals"
android:layout_below="#+id/rvAnimals"
android:layout_width="match_parent"
android:layout_marginTop="20dp"
android:layout_height="match_parent"/>
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
</ScrollView>

You can use constraint layout inside a nestedScrollView like this :
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.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">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/redPortion"
android:layout_width="match_parent"
android:layout_height="wrap_content" //Red Portion
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.card.MaterialCardView
android:id="#+id/green_sticky_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/redPortion" //Green Sticky View
app:layout_constraintBottom_toBottomOf="#+id/redPortion"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
/>
<LinearLayout
android:id="#+id/whitePortion"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" //White Portion
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/redPortion"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
Use any layout you want for your red, white and green views.
I hope This helps.

Align Recycler View above linear layout

The list of things expected in the outout
1.a linear layout to the buttom of the activity as shown in the expected image
2.a recycler view above the linear layout to achieve the scrolling funtionality as shown in the expected image
The problem can be solved if I give the height to the recycler view.But in this case the layout won't be responsive to the samller sized screens
How can I achieve it?
xmlfile.xml
<?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:numberpicker="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:orientation="vertical"
tools:context=".CartPage">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="70dp"
android:padding="20dp">
<ImageView
android:id="#+id/back_icon"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_centerVertical="true"
android:src="#drawable/ic_arrow_back_black_24dp" />
<TextView
android:id="#+id/product_buy"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_vertical|center_horizontal"
android:layout_marginLeft="20dp"
android:layout_toRightOf="#+id/back_icon"
android:fontFamily="#font/carter_one"
android:text="My Cart"
android:textColor="#color/black"
android:textSize="20sp"
tools:ignore="RtlCompat" />
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/product_recycler"
android:layout_width="match_parent"
android:layout_height="400sp"
android:padding="0dp" />
// this is the buttom recycler
<LinearLayout
android:layout_alignParentBottom="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:id="#+id/buttom"
android:gravity="bottom|end"
android:layout_gravity="bottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/border_gray"
android:orientation="vertical"
android:padding="5dp">
<TextView
android:id="#+id/details"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/border_gray"
android:fontFamily="sans-serif"
android:lineHeight="28dp"
android:padding="5dp"
android:text="Price Details"
android:textColor="#color/grey_400"
android:textSize="18sp"
tools:ignore="RtlCompat" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>

If you wish to tell your RecyclerView to fill the left over space of your LinearLayout you have to use the following layout_height and layout_weight on your RecyclerView:
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/product_recycler"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:padding="0dp" />

How to align buttons side by side in scroll view?

I just started using android studio.. I am trying to align ImageButtons inside a scroll view side by side, but i cannot put them side by side, neither can i resize them from the left side. How do i align them side by side?
I already tried the solution given in one of the answers: Aligning TextView Side By Side Inside A ScrollView Inside a Linear Layout but it didn't work
<?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=".StoryIndex">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<ScrollView
android:layout_width="fill_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageButton
android:id="#+id/titlee"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#android:color/black"
app:srcCompat="#drawable/alami1" />
<ImageButton
android:id="#+id/imageButton8"
android:layout_width="375dp"
android:layout_height="116dp"
android:background="#android:color/black"
app:srcCompat="#drawable/alami2" />
<ImageButton
android:id="#+id/imageButton9"
android:layout_width="195dp"
android:layout_height="169dp"
app:srcCompat="#drawable/alami3" />
</LinearLayout>
</ScrollView>
</RelativeLayout>
</android.support.constraint.ConstraintLayout>
I want the Image buttons to be side by side, but they are in rows, on top of each other.. but it shows like the one in picture:
Image of the design view
Thanks.

You have to change the orientation in LinearLayout from vertical to horizontal.
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">

Try this
<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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
//The question you mentioned can be obtained by using weightSum
android:weightSum="15">
//replace src ic_launcher_background by your drawable source.
<ImageButton
android:id="#+id/titlee"
android:layout_width="0dp"
android:layout_weight="5"
android:layout_height="wrap_content"
android:background="#android:color/black"
android:src="#drawable/ic_launcher_background" />
<ImageButton
android:id="#+id/imageButton8"
android:layout_width="0dp"
android:layout_weight="5"
android:layout_height="wrap_content"
android:background="#android:color/black"
android:src="#drawable/ic_launcher_background" />
<ImageButton
android:id="#+id/imageButton9"
android:layout_width="0dp"
android:layout_weight="5"
android:background="#android:color/black"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher_background"/>
</LinearLayout>
</ScrollView>
</LinearLayout>
Try this and let me know. Happy coding.

<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">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="15">
<ImageButton
android:id="#+id/imageButtonOne"
android:layout_width="0dp"
android:layout_weight="5"
android:layout_height="wrap_content"
android:background="#android:color/black"
android:src="#drawable/ic_launcher_background" />
<ImageButton
android:id="#+id/imageButtonTwo"
android:layout_width="0dp"
android:layout_weight="5"
android:layout_height="wrap_content"
android:background="#android:color/black"
android:src="#drawable/ic_launcher_background" />
<ImageButton
android:id="#+id/imageButtonThree"
android:layout_width="0dp"
android:layout_weight="5"
android:background="#android:color/black"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher_background"/>
</LinearLayout>
</ScrollView>
</LinearLayout>
Try this if you still find any issue, let me know.

Show the Image buttons to be side by side, and in rows.
Change the orientation of LinearLayout from vertical to horizontal.
Please try below code:
<?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">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="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="horizontal">
<ImageButton
android:id="#+id/titlee"
android:layout_weight=".3"
android:layout_width="0dp"
android:layout_height="116dp"
android:background="#android:color/black"
app:srcCompat="#drawable/stars_one"
android:layout_margin="4dp"/>
<ImageButton
android:layout_weight=".4"
android:id="#+id/imageButton8"
android:layout_width="0dp"
android:layout_height="116dp"
android:background="#android:color/black"
app:srcCompat="#drawable/stars_one"
android:layout_margin="4dp"/>
<ImageButton
android:layout_weight=".3"
android:id="#+id/imageButton9"
android:layout_width="0dp"
android:layout_height="116dp"
app:srcCompat="#drawable/stars_one"
android:layout_margin="4dp"/>
</LinearLayout>
</ScrollView>
</RelativeLayout>
</android.support.constraint.ConstraintLayout>
The output of above code is like:

Unable to scroll linear layout inside a horizontal scrollview in android

I am adding few image views inside a horizontal LinearLayout which is again inside a HorizontalScrollView. But the linear layout is not scrolling. Below is my code. Can someone guide me where exactly my xml formation is going wrong?
<?xml version="1.0" encoding="utf-8"?>
<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="15dp"
android:layout_marginBottom="2dp"
android:fillViewport="true"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/lyt_items"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/iv_icon1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:contentDescription="#string/app_name"
android:layout_marginRight="1dp"
android:src="#drawable/default_ic" />
<ImageView
android:id="#+id/iv_icon2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:contentDescription="#string/app_name"
android:layout_marginRight="1dp"
android:src="#drawable/default_ic" />
<ImageView
android:id="#+id/iv_icon3"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:contentDescription="#string/app_name"
android:layout_marginRight="1dp"
android:src="#drawable/default_ic" />
</LinearLayout>
</HorizontalScrollView>

I would suggest use Constraint Layout As Parent and Inside it Use Nested Scroll View With Linear Layout
Here is a sample code, modify according to your need.
<?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="suraj.iitgandhinagar.Login">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
tools:layout_editor_absoluteX="72dp"
tools:layout_editor_absoluteY="0dp"
tools:ignore="MissingConstraints">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="36dp">
<ImageView
android:id="#+id/imageView4"
android:layout_width="272dp"
android:layout_height="237dp"
android:layout_gravity="center"
android:layout_marginTop="40dp"
android:src="#drawable/unnamed"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="59dp" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.constraint.ConstraintLayout>

Take a look at this situation. if you use the linear layout as match_parent then don't get the layout width. Use wrap_content. If its don't work then set the fixed size for your image.
<HorizontalScrollView android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="15dp"
android:layout_marginBottom="2dp"
android:fillViewport="true"
android:orientation="horizontal"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:id="#+id/lyt_items"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/iv_icon1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:contentDescription="#string/app_name"
android:layout_marginRight="1dp"
android:src="#mipmap/ic_launcher" />
<ImageView
android:id="#+id/iv_icon2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:contentDescription="#string/app_name"
android:layout_marginRight="1dp"
android:src="#mipmap/ic_launcher" />
<ImageView
android:id="#+id/iv_icon3"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:contentDescription="#string/app_name"
android:layout_marginRight="1dp"
android:src="#mipmap/ic_launcher" />
</LinearLayout>
</HorizontalScrollView>

Linear Layout with Weights and Scroll View

I'm trying to create a responsive layout using weights but I also need to use a scroll view in this case.
This is my code at this moment:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".EncyclopediaFragment">
<!--Linear Container-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="100">
<!--Title Box-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="20"
android:orientation="horizontal"
android:weightSum="100">
<!--Empty Space-->
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="5">
</LinearLayout>
<!--Text Box-->
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="95">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/encyclopedia_mosntersLabel"
android:gravity="center"
android:textAlignment="viewStart"/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="40">
</LinearLayout>
</LinearLayout>
but it needs to be like this.
That layout is suppose to be responsive with weights but at the same time I need to make it possible to scroll.
So my question is: how can I create a layout responsive with weights and at the same time a layout that can scroll down, just like in the picture?

If you have a determined number of 6 Monsters and 8 Towers, here is how you should organize your layout:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Monsters"/>
<!-- the following LinearLayout should be repeated twice for 6 Monsters -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<MonsterView
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content" />
<MonsterView
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content" />
<MonsterView
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content" />
</LinearLayout>
...
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Towers"/>
<!-- the following LinearLayout should be repeated twice for 6 Towers -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TowerView
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content" />
<TowerView
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content" />
<TowerView
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content" />
</LinearLayout>
...
<!-- attention here for two Towers in the last row -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3">
<TowerView
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content" />
<TowerView
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
</ScrollView>

The content inside your ScrollView should use wrap_parent, and if you want to stretch the content inside it set android:fillViewport="true". Try this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".EncyclopediaFragment">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--Linear Container-->
</RelativeLayout>
</ScrollLayout>
</RelativeLayout>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".EncyclopediaFragment">
<!--Toolbar-->
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--Linear Container With Weights-->
</RelativeLayout>
</ScrollLayout>
</RelativeLayout>