Develop Reference

How can I get a view like this using recyclerview

Hello guys how can I get a view like this link, it has to be scrollable from vertical and horizontal, I started doing it with recyclerview and it works horizontally but how can I make it to work vertically.
Link of the view to acomplish
https://i.stack.imgur.com/puxEi.png
This is the code for the layouts am using fragments and replacing those on the framelayouts because the test requires me to do so.
--activity main layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
tools:context=".MainActivity"
android:background="#color/colorBlack">
<FrameLayout
android:id="#+id/section1"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
>
</FrameLayout>
<FrameLayout
android:orientation="vertical"
android:id="#+id/section2"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
>
</FrameLayout>
</LinearLayout>
----section1 and section2 code are the same
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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:orientation="horizontal"
tools:context="fragments.SectionOne"
android:background="#f2f2f2">
<androidx.recyclerview.widget.RecyclerView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:id="#+id/recyclerView"
android:orientation="horizontal">
</androidx.recyclerview.widget.RecyclerView>
</LinearLayout>
If use scrollview and wrap all this under a single framelayout both sections are overlapping each other
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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:orientation="vertical"
tools:context=".MainActivity"
android:background="#color/colorBlack">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<FrameLayout
android:id="#+id/section1"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
>
</FrameLayout>
<FrameLayout
android:orientation="vertical"
android:id="#+id/section2"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
>
</FrameLayout>
</FrameLayout>
</ScrollView>

Android XML: How to place widget below included layout

I am trying to place a chart widget (com.android.AnyChartView, #+id/piechart) from the AnyChart library (https://github.com/AnyChart/AnyChart-Android) below an included layout (#layout/content_main) that contains a TabHost. I tried giving the include an id and setting the layout_below property of the chart widget, but that has not worked. The app graph fills the entire screen, covering the Tab view.
Below is my code:
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"/>
<include layout="#layout/content_main"
/>
<com.anychart.AnyChartView
android:id="#+id/piechart"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
content_main.xml
<?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"
android:padding="5dp"
android:paddingLeft="5dp"
android:paddingTop="5dp"
android:paddingRight="5dp"
android:paddingBottom="5dp"
android:background="#ffffff"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".MainActivity"
tools:showIn="#layout/activity_main">
<TabHost
android:id="#+id/tab_host"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#ffffff"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/tab1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" />
<LinearLayout
android:id="#+id/tab2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" />
<LinearLayout
android:id="#+id/tab3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" />
</FrameLayout>
</LinearLayout>
</TabHost>
</androidx.constraintlayout.widget.ConstraintLayout>
Below is a screenshot of the app:

You need to remove your pie chart from main_activity and put it under content_main like 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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff"
android:padding="5dp"
android:paddingLeft="5dp"
android:paddingTop="5dp"
android:paddingRight="5dp"
android:paddingBottom="5dp"
tools:context=".MainActivity"
tools:showIn="#layout/activity_main">
<TabHost
android:id="#+id/tab_host"
android:layout_width="0dp"
android:layout_height="match_parent"
android:background="#ffffff"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/tab1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" />
<LinearLayout
android:id="#+id/tab2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" />
<LinearLayout
android:id="#+id/tab3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" />
</FrameLayout>
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</TabHost>
<com.anychart.AnyChartView
android:id="#+id/piechart"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintTop_toBottomOf="#+id/tab_host" />
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
I have added the scrollview but you can remove it if it's not in your requirements.

There are a number of possible solutions
Solution 1
On the include tag indicate android:layout_width="match_parent" and android_height="wrap_content"
<include layout="#layout/content_main"
android:layout_width="match_parent"
android_height="wrap_content"
/>
Solution 2
Using LinearLayout as the parent ViewGroup provide android:layout_weight="1" and android:layout_height="0dp" on the include tag, this will allow the content_main.xml to occupy the remaining space and yet fit on the screen.
<include layout="#layout/content_main"
android:layout_width="match_parent"
android_height="0dp"
android_layout_weight="1"
/>

Android: Displaying images in Expandablelist View

I am trying to display high-resolution images inside the expandable list view. Although I was able to display the image but it is not covering the entire screen width. I have tried numerous combination of match_parent and wrap_content, but still doesn't get any success. I am using picasso library to load image from url and display it in expandable list view.
activity_main.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:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="deev.com.company.albumsdetails.MainActivity">
<TabHost
android:id="#+id/tabsForDetailsandAlbums"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TabWidget
android:id="#android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/albumsTab"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/metallicSilver"
android:orientation="vertical">
<ExpandableListView
android:id="#+id/albumsList"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:indicatorLeft="android:attr/expandableListPreferredItemIndicatorLeft"
android:divider="#color/blackBottom"
android:dividerHeight="2dp">
</ExpandableListView>
</LinearLayout>
<LinearLayout
android:id="#+id/postsTab"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/metallicSilver"
android:orientation="vertical">
<ListView
android:id="#+id/tab2List"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="#color/blackBottom"
android:dividerHeight="2px"
/>
</LinearLayout>
</FrameLayout>
</LinearLayout>
</TabHost>
</LinearLayout>
album_header.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingLeft="8dp">
<TextView
android:id="#+id/albumHeader"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textSize="20dp"
android:paddingLeft="?android:attr/expandableListPreferredItemIndicatorLeft"
/>
</LinearLayout>
album_list.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/albumContent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="5dp"/>
<ImageView
android:id="#+id/albumContent2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="5dp"
android:paddingTop="5dp" />
</LinearLayout>

android layout with fragment breaks when toolbar is there

Couldn't find a more appropriate title but my problem is the following. I have a LinearLayout that contains another LinearLayout and a fragment. I also want to add the toolbar but when I do so, then I only see the toolbar and the other screen is just white.
Here is the layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="horizontal"
tools:context="xeniasis.mymarket.MainActivity">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:baselineAligned="false"
android:weightSum="4">
<LinearLayout
android:id="#+id/categories_layout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:paddingRight="20dp">
<ExpandableListView
android:id="#+id/categories_listView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<fragment
android:id="#+id/mainPane"
android:name="xeniasis.mymarket.Products"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
tools:layout="#layout/activity_main" />
</LinearLayout>
</LinearLayout>
Toolbar:
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="4dp"
android:padding="5dp"
android:theme="#style/ToolbarTheme" />
And the fragment layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
tools:context="xeniasis.mymarket.MainActivity">
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/swipeRefreshContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:paddingTop="#dimen/activity_vertical_margin">
<GridView
android:id="#+id/productsGridview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:numColumns="3"></GridView>
</android.support.v4.widget.SwipeRefreshLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/settings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|start"
android:layout_margin="8dp"
android:clickable="true"
android:elevation="5dp"
android:src="#android:drawable/ic_menu_search" />
</android.support.design.widget.CoordinatorLayout>
</LinearLayout>
This only happens when I have a fragment, cause I previously had the same xml with a static layout where the fragment is now.

The problem is that you used a LinearLayout with
android:orientation="horizontal"
and since the toolbar has match_parent as width it occupies all the screen.
Try to use
android:orientation="vertical"
in the root layout

Android ScrollView below Toolbar fails to show all content

I have made a base-activity with a toolbar and add my layouts to this. But when I add a scrollview in the main content it doesn't show the bottom part when scrolling down. The missing part seems to be the same height as the toolbar.
My activitybase.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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/ToolBarStyle"
android:background="?attr/colorPrimary" />
<FrameLayout
android:id="#+id/root_container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
My fragmentinfo.xml:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/default_margin">
<TextView
android:id="#+id/info_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/default_margin"
android:text="hei"
style="#style/TextLarge" />
<TextView
android:id="#+id/info_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/small_margin"
android:text="-SOME LONG TEXT-"
style="#style/TextNormal" />
<TextView
android:id="#+id/info_header2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/default_margin"
android:text="Test"
style="#style/TextLarge" />
</LinearLayout>
</ScrollView>
Screenshot below. This is scrolled all the way down. "Test" should be showing with 16 dp margin below it...

In FrameLayout
<FrameLayout
...
android:layout_marginBottom="56dp"
...
/>
Here 56dp is the Action Bar size.

Add android:layout_marginBottom to the ScrollView, using the action bar height dimen.
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/abc_action_bar_default_height_material"
android:fillViewport="true">