Develop Reference

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:

scrollbar in constraint layout not working

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

One layout over another layout

I need one layout over another layout (they can have any heights), like this:
When screen become smaller, I need that brown layout become lower, like this:
I have this code to do this:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<FrameLayout
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_gravity="top|center_horizontal"
android:background="#dd6600">
<TextView
android:layout_width="wrap_content"
android:layout_height="100dp"
android:text="One"/>
</FrameLayout>
<FrameLayout
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:background="#bbbbbb">
<TextView
android:layout_width="wrap_content"
android:layout_height="150dp"
android:text="Another"/>
</FrameLayout>
</FrameLayout>
On small heights it works fine, but on big screens I have this:
Can you help me please with this?

you could benefit from CoordinatorLayout here to do such effects

Use Linear layout with percentage weights, so that percent of screen covered will always be same despite of resolution as in
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="top"
android:orientation="vertical"
android:weightSum="1">
<FrameLayout
android:layout_width="100dp"
android:layout_height="0dp"
android:layout_weight ="0.6"
android:layout_gravity="top|center_horizontal"
android:background="#dd6600">
<TextView
android:layout_width="wrap_content"
android:layout_height="100dp"
android:text="One"/>
</FrameLayout>
<LinearLayout/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom"
android:orientation="vertical"
android:weightSum="1">
<FrameLayout
android:layout_width="150dp"
android:layout_height="0dp"
android:layout_weight ="0.6"
android:layout_gravity="bottom|center_horizontal"
android:background="#bbbbbb">
<TextView
android:layout_width="wrap_content"
android:layout_height="150dp"
android:text="Another"/>
</FrameLayout>
</LinearLayout/>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<FrameLayout
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_gravity="top|center_horizontal"
android:background="#dd6600">
<TextView
android:layout_width="wrap_content"
android:layout_height="100dp"
android:text="One"/>
</FrameLayout>
<FrameLayout
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:layout_marginTop="70dp"
android:background="#bbbbbb">
<TextView
android:layout_width="wrap_content"
android:layout_height="150dp"
android:text="Another"/>
</FrameLayout>
Use RelativeLayout and add android:layout_marginTop="70dp" to second child of RelativeLayout. You can change margin as per your requirement.

ImageView not displaying in android xml (relative layout)

![I had coded it in linear layout (code given below) but want to know how to do the same using relative layout, or is that just a bad idea given the layout?
linear layout -
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:src="#drawable/ocean"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:scaleType="centerCrop"
/>
<TextView
android:text="You're invited!"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:textSize="45sp"
android:paddingTop="16dp"
android:paddingLeft="16dp"
android:background="#009688"/>
<TextView
android:text="Bonfire at the beach"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:paddingTop="8dp"
android:paddingBottom="16dp"
android:paddingLeft="16dp"
android:textSize="24sp"
android:background="#009688"/>
][1]When using relative layout my ImageView does not appear on the screen:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageView
android:src="#drawable/ocean"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:scaleType="centerCrop"
android:id="#+id/ocean"
/>
</RelativeLayout>

Its because you are using android:layout_height="0dp"
Please use android:layout_height="wrap_content"

Change your ImageView's height like this.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageView
android:src="#drawable/ocean"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="centerCrop"
android:id="#+id/ocean"
/>

You can only use layout_weight in LinearLayout.
Try this.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertizal">
<ImageView
android:src="#drawable/ocean"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:scaleType="centerCrop"
android:id="#+id/ocean"/>

android:layout_height="0dp" This is wrong in your ImageView
Change this to
android:layout_height="match_parent"
or
android:layout_height="wrap_content"
Basically you set your height as 0. So nothing to show.
Edit :
Also you can remove this android:layout_weight="1". No need for weight in RelativeLayout