i am trying to get three rows in my recyclerview to fit the screen perfectly. In other words distributed evenly with no scrolling. I have a toolbar and a recyclerview with two columns/three rows. As of now i have just set the items height to fit the screen close enough but there has to be a better way?
activity_main.xml
<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=".MainActivity">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_below="#id/toolbar"
android:background="#CCCC"
android:layout_width= "match_parent"
android:layout_height = "match_parent"/>
</RelativeLayout>
item.xml
<?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">
<View
android:id="#+id/colorBlock"
android:layout_width="match_parent"
android:layout_height="170dp"
android:background="#CCCCCC" />
<ImageView
android:id="#+id/item"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_centerHorizontal="true"
android:padding="16dp"
/>
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="16dp"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:textColor="#android:color/white"
android:textSize="16sp"/>
</RelativeLayout>
By definition, the RecyclerView is supposed to be used in situations where recycling views can happen - a.k.a. scrollable because large amount of views. I don't mean to say it can not be used for smaller collections, but there's no value in using it upon other layouts. As a matter of fact, not being built for such scenarios, it becomes very difficult to make use of it in scenarios like in this question. If you absolutely want to use RecyclerView, I am not aware of any way to do it in xml only. I think you'll have to implement your own layout manager for this.
If you are open to using other layouts, here's a solution involving a bunch of linear layouts and weights. Not optimal, having to use nested weights, but a solution nevertheless:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_below="#id/toolbar"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#ff0000"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#fff000"/>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#ff0f00"/>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#ff00f0"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#00ff00"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#f0ff00"/>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#0fff00"/>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#00fff0"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#0000ff"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#f000ff"/>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#0f00ff"/>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#00f0ff"/>
</LinearLayout>
</LinearLayout>
Related
I'm trying to use a TableLayout to make a grid but the rowHeights are not distributed as I expected. I can't use gridlayout, because I want the rowheights to vary later on.
xml :
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TableRow
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">
<androidx.cardview.widget.CardView
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#f0f"/>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#ff0"/>
</LinearLayout>
</androidx.cardview.widget.CardView>
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#0ff">
</TextView>
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#0f0">
</TextView>
</TableRow>
</TableLayout>
The first row should only take up half of the tablelayouts height, but almost fills the screen. Replacing the cardViews content with:
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#f00"/>
gives me the expected spacing. What am I doing wrong?
Try using android:layout_height="wrap_content" for the CardView, LinearLayout & Views.
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 have an activity in which, on top i have a image slider, below this a layout in the form of grid which covers almost all of my phone's screen and below this at last i have a list view of of size approax half of my phone's screen.(i am using scroll view to scroll elements)
so altogether they are nearly of size twice of my phone's screen.
now whenever i start this activity, the screen automatically gets focused to the bottom part of my elements. in simple words, it does not show me the image slider and upper part of my grid view, it just show the lower part of grid view and the list view.
so i need to scroll it up manually when i start this.
i searched a lot but didn't get any way to focus it automatically to top elements of my activity. please suggest me how to proceed now.
thank in advance.
this is my xml:
<?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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.gehlot.nitin.kitchenspices.Main2Activity"
android:id="#+id/scrollView"
tools:showIn="#layout/app_bar_main2">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:descendantFocusability="beforeDescendants"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_margin="10dp"
android:layout_weight="1.0"
android:id="#+id/viewPager"/>
<TextView
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_weight="1.0"
android:text="Shop catagory"
style="#style/textStyle"
android:layout_gravity="center"
android:gravity="center"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="300dp"
android:orientation="vertical"
android:background="#drawable/back"
android:layout_weight="1.0">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="1.0">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1.0"
android:layout_margin="5dp"
android:scaleType="fitXY"
android:background="#drawable/back"
android:id="#+id/img1"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1.0"
android:layout_margin="5dp"
android:scaleType="fitXY"
android:background="#drawable/back"
android:id="#+id/img2"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1.0"
android:background="#drawable/back"
android:layout_margin="5dp"
android:scaleType="fitXY"
android:id="#+id/img3"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="1.0">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1.0"
android:background="#drawable/back"
android:layout_margin="5dp"
android:scaleType="fitXY"
android:adjustViewBounds="true"
android:id="#+id/img4"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1.0"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:background="#drawable/back"
android:layout_margin="5dp"
android:id="#+id/img5"/>
<ImageView
android:adjustViewBounds="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1.0"
android:scaleType="fitXY"
android:background="#drawable/back"
android:layout_margin="5dp"
android:id="#+id/img6"/>
</LinearLayout>
</LinearLayout>
<ListView
android:layout_width="match_parent"
android:layout_height="300dp"
android:id="#+id/lv_main"
android:layout_below="#id/img4">
</ListView>
</LinearLayout>
</ScrollView>
Try to add this line to your direct child of your ScrollView in xml. It prevents the auto scrolling to bottom part.
android:descendantFocusability="beforeDescendants"
Example:
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:descendantFocusability="beforeDescendants"
android:orientation="vertical">
//children views
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
Add this to your root layout in xml:
android:id="#+id/root_layout"
In your Acivity.java add:
ViewGroup layout = (ViewGroup) findViewById(R.id.layout);
layout.requestFocus();
This is the code of the XML file of the layout:
<?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.example.barda.wikirace.MainActivity"
android:background="#drawable/backgroundmain"
android:orientation="vertical"
android:weightSum="1"
android:id="#+id/activity_main"
>
<ImageView
android:id="#+id/wikiRaceTop"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#android:color/transparent"
app:srcCompat="#drawable/wikiracetop" />
<TextView
android:id="#+id/emptyView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="1"
>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"/>
<Button
android:layout_marginBottom="7dp"
android:id="#+id/twoPlayersBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/twoplayersbutton"
/>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"/>
<Button
android:layout_marginBottom="7dp"
android:id="#+id/singlePlayerBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/playbutton"
android:onClick="startSinglePlayerMenuActivity"/>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"/>
</LinearLayout>
</LinearLayout>
This is how it looks in the preview:
And this is how it appears on the device (LG G4):
What can cause the problem?
As you can see, I want the buttons to be on the right color for them.
why don't just use the constraint layout?
if you want to do it in the way you're doing it, you will have to setup the width with a fixed value or match_parent why? because when you say wrap_content and the image is big is going to be over the other views as is happening also you can setup a android:layout_weight for the button if you want to use the weight as "control" for your layout, be coherent with the method that you use to adapt the views.
I am currently using a linear layout structure that looks as follows:
The associated xml code is as follows:
<?xml version="1.0" encoding="utf-8"?>
<com.handmark.pulltorefresh.library.PullToRefreshLoadMoreScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/altercolor2"
android:layout_gravity="top">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:baselineAligned="true">
<LinearLayout
android:id="#+id/columnOne"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight=".53"
android:orientation="vertical">
<include
android:id="#+id/first_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
layout="#layout/item_header" />
<LinearLayout
android:id="#+id/first_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight=".47"
android:orientation="vertical">
<include
android:id="#+id/second_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
layout="#layout/item_header" />
<LinearLayout
android:id="#+id/second_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="top" />
<include
android:id="#+id/third_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
layout="#layout/item_header" />
<LinearLayout
android:id="#+id/third_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" />
</LinearLayout>
</LinearLayout>
</com.handmark.pulltorefresh.library.PullToRefreshLoadMoreScrollView>
However, I would like to rearrange that so that it looks like:
Is there a way I can rearrange the same with linearlayout? or do I have to use some other form of layout like relativelayout. I am pretty confused about the same. Also, would like to include the headers with the containers(the include code), is there a way I can easily achieve this?
Thanks!
After altering a code a bit, i had a little success moving the second header and second layout on top, but the first header is next to first layout instead on top, and same for third.Is there a way to fix it? I have attached the image here:
and the code is as follows:
<com.handmark.pulltorefresh.library.PullToRefreshLoadMoreScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/altercolor2"
android:layout_gravity="top">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:baselineAligned="true">
<LinearLayout
android:id="#+id/columnOne"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<include
android:id="#+id/second_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
layout="#layout/item_header" />
<LinearLayout
android:id="#+id/second_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:baselineAligned="true">
<include
android:id="#+id/first_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.50"
layout="#layout/item_dashboard_header" />
<LinearLayout
android:id="#+id/first_container"
android:layout_width="match_parent"
android:layout_weight="0.50"
android:layout_height="wrap_content"
android:orientation="vertical"
/>
<include
android:id="#+id/third_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.50"
layout="#layout/item_dashboard_header" />
<LinearLayout
android:id="#+id/third_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.50"
android:orientation="vertical" />
</LinearLayout>
</LinearLayout>
</com.handmark.pulltorefresh.library.PullToRefreshLoadMoreScrollView>
Something like this should get you close to what you want. Use the same amount of weight for the two Views to take up equal amounts of space. This is obviously pseudocode for the layout because it seems you know the properties.
<LinearLayout
android:orientation="vertical"
...>
<SecondView
width="match_parent"
height="wrap_content"
.../>
<LinearLayout
width="match_parent"
height="wrap_content"
...>
<LinearLayout
width="0dp"
height="wrap_content"
layout_weight="1"
orientation="vertical">
<include
android:id="#+id/first_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.50"
layout="#layout/item_dashboard_header" />
<LinearLayout
android:id="#+id/first_container"
android:layout_width="match_parent"
android:layout_weight="0.50"
android:layout_height="wrap_content"
android:orientation="vertical"
/>
</LinearLayout>
<LinearLayout
width="0dp"
height="wrap_content"
layout_weight="1"
orientation="vertical">
<include
android:id="#+id/third_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.50"
layout="#layout/item_dashboard_header" />
<LinearLayout
android:id="#+id/third_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.50"
android:orientation="vertical" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
When you use weight in a horizontal LinearLayout your width should be "0dp" and in a vertical LinearLayout your height should be "0dp".
Now wrap these
<include
android:id="#+id/first_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.50"
layout="#layout/item_dashboard_header" />
<LinearLayout
android:id="#+id/first_container"
android:layout_width="match_parent"
android:layout_weight="0.50"
android:layout_height="wrap_content"
android:orientation="vertical"
/>
in a vertical LinearLayout as I have above with ThirdView and FirstView. In whatever order you need them.
Use a RelativeLayout and it's really easy -
Just use Android:Layout_AlignToRightOf="#id/LeftView"
and Android:Layout_AlignBelow="#id/TopView" for the various views.
Ie: Your xmxl for your second pic should be:
<RelativeLayout
android:id="#+id/Organize"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout //or Whatever type of view you want
android:id="#+id/Second"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<include.../>
</LinearLayout>
<LinearLayout //or Whatever type of view you want
android:id="#+id/First"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/Second">
<include.../>
</LinearLayout>
<LinearLayout //or Whatever type of view you want
android:id="#+id/Third"
androidlayout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/Second"
android:layout_ToRightOf="#id/First>
<include.../>
</LinearLayout>
</RelativeLayout>
In your first pic, and your original MXML, you have created a LinearLayout and set it to horizontal (left to right) and then put a second LinearLayout after (to the right of) it. Inside that second one, you have populated it with two items, that get distributed top to bottom. Using RelativeLayout is personal preference, but it makes controlling where you want things to appear on the screen a little more straightforward.