How can I get a view like this using recyclerview - android

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>

Related

Master Detail columns disappear after including toolbar in layout

After including a toolbar within the master detail layout, the master and detail columns (along with vertical divider) have disappeared for some reason. What needs to be done in order to fix this?
<?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="horizontal"
android:divider="#drawable/divider_vertical"
android:showDividers="middle"
android:baselineAligned="false">
<include layout="#layout/myToolbar"/>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:id="#+id/master_container"/>
<FrameLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
android:id="#+id/detail_container"/>
</LinearLayout>
Try this:
<?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">
<include layout="#layout/myToolbar"/>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:baselineAligned="false"
android:divider="#drawable/divider_vertical"
android:orientation="horizontal"
android:showDividers="middle">
<RelativeLayout
android:id="#+id/master_container"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
<FrameLayout
android:id="#+id/detail_container"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"/>
</LinearLayout>
</LinearLayout>

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>

how to include two separate layouts in one layout

i have a layout titled "status2.xml" and its code is posted below. and i have a main layout titled "meine_vertaege.xml" and its code is posted below as well. the "act_main.xml" includes the aforementioned layouts,
which are namely "status2.xml" and "meine_vertaege.xml".
I am including "status2.xml" and "meine_vertaege" in the "act_main.xml" as shown below in the code of the "act_main.xml".
the problem i have is when i include both of "status2.xml" and meine_vertaege" in the "act_main.xml", i cant see the entire contents of the "status2.xml" because it seems that the contents of "status2.xml" and "meine_vertaege.xml"
got mixed up
please let me know how to include both of "status2.xml" and "meine_vertaege" in "act_main.xml" so that i can see their entire contents in such way that they are organized vertically
status2.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:weightSum="10">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/gray"
android:paddingStart="10dp"
android:gravity="center_vertical"
android:text="Status"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="3dp"
android:layout_weight="5">
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/gray"
android:paddingStart="10dp"
android:text="vertraege"/>
</LinearLayout>
</LinearLayout>
output of status2.xml:
meine_vertaege.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/actMain_meine_vertraege_layout_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="#dimen/padding">
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#color/gray"
android:gravity="center_vertical|start"
android:paddingStart="#dimen/padding"
android:text="Meine Verträge" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:id="#+id/actMain_lisVie"
android:layout_width="match_parent"
android:layout_height="match_parent"></ListView>
</ScrollView>
</LinearLayout>
output of meine_vertaege.xml:
act_main.xml:
<?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:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
tools:context="com.example.bestandlayout_00.ActMain">
<include
android:id="#+id/lay1"
android:layout_width="match_parent"
android:layout_height="match_parent"
layout="#layout/status2"></include>
<include
android:id="#+id/lay2"
android:layout_width="match_parent"
android:layout_height="match_parent"
layout="#layout/meine_vertaege"></include>
</LinearLayout>
output of act_main.xml:
Try like this .
<?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:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<include
android:id="#+id/lay1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1dp"
layout="#layout/status2"></include>
<include
android:id="#+id/lay2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1dp"
layout="#layout/meine_vertaege"></include>
</LinearLayout>

Android: Issue with ScollView and ViewPager

I am creating UI like as per below code
View pager with images and then other UI controls.
It is working fine with 2-3 controls, but if UI is out of page with 10 UI controls then scroll view not wokring.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fadeScrollbars="true"
android:fillViewport="true" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:weightSum="3">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<android.support.v4.view.ViewPager
android:id="#+id/scheduleViewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/create_account_create_password" />
// Other UI controls
</LinearLayout>
</LinearLayout>
</ScrollView>
Please try this below code ...
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fadeScrollbars="true"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="160dp">
<android.support.v4.view.ViewPager
android:id="#+id/scheduleViewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/create_account_create_password" />
// Other UI controls
</LinearLayout>
</LinearLayout>
</ScrollView>

second fragment doesn't appear

Vertical layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:paddingTop="30dp"
android:paddingRight="16dp"
android:orientation="vertical"
tools:context="john.unitconverter.UnitConverter">
<fragment
android:id="#+id/unitConverter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:name="john.unitconverter.ConverterFragment"></fragment>
</RelativeLayout>
horizontal layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent">
<fragment
android:id="#+id/unitConverter"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:name="john.unitconverter.ConverterFragment"></fragment>
<fragment
android:id="#+id/discConverter"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:name="john.unitconverter.DisclaimerFragment"></fragment>
</LinearLayout>
what's inside the second fragment
<FrameLayout 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="john.unitconverter.DisclaimerFragment">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/disclaimer"
android:text="landscape mode is missing some features." />
</FrameLayout>
what happens is the second fragment doesn't show in landscape. why is that happening? basically, only the first fragment is showing up in the screen both horizontal and vertical layout.
thanks
As said in the comment you have to use the weight attribute:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent">
<fragment
android:id="#+id/discConverter"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:name="com.example.trist_000.teststack.ArticleFragment"></fragment>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.1"/>
<fragment
android:id="#+id/unitConverter"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:name="com.example.trist_000.teststack.ArticleFragment"></fragment>
</LinearLayout>
My fragment layout:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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="#android:color/holo_red_light">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/disclaimer"
android:text="landscape mode is missing some features." />
</FrameLayout>
The result:

Categories

Resources