Problem I want view-layout like the following photo, on top I want image view, in the middle a text view and bottom list of items. All this I want to be scrollable (black arrow in the picture). in this way, the user for first see image-text-and part of list items, if scroll down, see the list of item.
For the bottom I thought to use listView, but in this way I think I'll have 2 scrollable view (???) and then I want to make the list in 2 columns, and I don't know if it is possible with ListView
Question
I didn't write code, because I want to know what kind of view or somethings else I've to study.
I sketchy something like this, but the result is really horrible
activity_main.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"
android:layout_width="match_parent" android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent" android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="200dp"
app:srcCompat="#drawable/nope"
android:id="#+id/imageView4"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true" />
<View
android:id="#+id/centerShim5"
android:layout_height="0dp"
android:layout_width="match_parent"
android:layout_centerInParent="true"
android:visibility="invisible" />
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/list"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<TextView
android:text="TextView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/textView2"
android:textColor="#color/ame_default_cluster_circle_color_medium"
android:textSize="26dp"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
</RelativeLayout>
</ScrollView>
I can't use listview in Scrollview, and inspired by the matryoshka I found the solution.
I define xml1 file in which I have only ScrollView and LinearLayout inside
<?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
android:orientation="vertical"
android:id="#+id/linear">
</LinearLayout>
</ScrollView>
after, for each kind of items that I want to add inside, I define another xml2 and after I add element:
<?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:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/ame_default_cluster_text_color">
<TextView
android:text="TextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxLines="5"
android:textSize="32sp"
android:textColor="#color/ame_default_cluster_circle_shadow_color"
android:id="#+id/text1"
android:textAlignment="center" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:srcCompat="#drawable/nope"
android:id="#+id/photo" />
<TextView
android:text=" "
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="18sp"
android:id="#+id/descrtiption"
android:textColor="#color/ame_default_cluster_circle_shadow_color"
android:layout_margin="10sp" />
</LinearLayout>
with code:
layoutInflater = (LayoutInflater)ctx.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View item_view=layoutInflater.inflate(R.layout.xml1,container,false);
LinearLayout linearLayout=(LinearLayout)item_view.findViewById(R.id.linear);
LayoutInflater inflater= LayoutInflater.from(ctx);
View view1 = inflater.inflate(R.layout.xml2, linearLayout, false);
TextView text1=(TextView)view1.findViewById(R.id.text1);
text1.setText();
ImageView imageview=(ImageView)view1.findViewById(R.id.photo);
and obviously I can define XML for element to add like listview and add it with normal foreach ,Hope this will help someone.
Related
I tried to create an actionBar like this one, "this is a website template "
so I created a file action_bar.xml which I'll inflate, A RelativeLayout which has a height of wrap_content & a width of match_parent , it has the gear icon and all other details except that I can't get a part of the round picture outside of the RelativeLayout like the picture.
I tried using margins but it doesn't get out of the RelativeLayout, The RelativeLayout gets extended instead. so, More margin in the picture results in more height in RelativeLayout.
Any suggestions?
<?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="wrap_content">
<ImageButton android:src="#drawable/roundPicture"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginTop="30sp"
android:layout_marginLeft="30sp"
android:padding="0sp"/>
<ImageButton
android:id="#+id/gearIcon"
android:layout_alignParentRight="true"
android:background="#drawable/gearICON"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10sp"
/>
</RelativeLayout>
No Libraries please, I'm not making an app, I'm just trying to understand.
quick recap. I want a part of the first ImageButton outside of the RelativeLayout
Check if it is this what you are looking for
EDIT:
<?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:background="#000">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fff">
<ImageButton
android:id="#+id/gearIcon"
android:layout_alignParentRight="true"
android:background="#android:drawable/ic_delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10sp"
/>
</RelativeLayout>
<ImageButton
android:background="#android:drawable/ic_delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginTop="30sp"
android:layout_marginLeft="30sp"
android:padding="0sp"/>
</FrameLayout>
First, I ran into a problem that my data appears under the ImageView, not behind it
but I fixed it by adding my data which is a listview, after the relativeLayout in the frameLayout, Thanks P.Juni for the idea btw
The XML which runs totally fine is
<?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="wrap_content"
android:background="#android:color/transparent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000">
<ImageButton
android:id="#+id/gearIcon"
android:layout_alignParentRight="true"
android:background="#drawable/ic_launcher_background"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10sp"
/>
</RelativeLayout>
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent">
</ListView>
<ImageButton android:id="#+id/imageButton"
android:background="#drawable/ic_launcher_background"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginTop="60sp"
android:layout_marginLeft="30sp"
android:padding="0sp"/>
</FrameLayout>
I want to Scroll ReyclerView inside a Fixed height/region.
Sample XML to demonstrate the use case
<?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/ele_parent_ll"
android:layout_width="match_parent"
android:orientation="vertical"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_height="match_parent">
<android.support.v4.widget.NestedScrollView
android:id="#+id/election_parent_sv"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:id="#+id/sample_id"
android:background="#color/white"
android:fitsSystemWindows="true">
<ImageView
android:contentDescription="#string/btn_youtube"
android:layout_width="match_parent"
android:layout_height="115dp"
android:id="#+id/election_banner"
android:background="#drawable/some_drawable"
android:adjustViewBounds="true"/>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/mid_parent"
android:layout_marginLeft="#dimen/view_margin_10"
android:layout_marginRight="#dimen/view_margin_10"
android:layout_marginTop="#dimen/view_margin_10"
android:orientation="horizontal"
android:weightSum="1">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".5"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/shaded_purple_new_local"
android:text="Layout heading"
android:textColor="#color/white" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Choose one"
android:textColor="#color/icon_yellow"
android:textSize="13sp" />
<android.support.v7.widget.RecyclerView
android:id="#+id/candidate_recycler"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:nestedScrollingEnabled="false">
</android.support.v7.widget.RecyclerView>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/view_margin_10"
android:layout_marginLeft="#dimen/view_margin_10"
android:layout_weight=".5"
android:orientation="vertical">
</LinearLayout>
</LinearLayout>
</LinearLayout>
<!--Sample Layout to make the screen scrollable for the example-->
<RelativeLayout
android:id="#+id/samp_RL"
android:layout_width="match_parent"
android:layout_height="200dp">
</RelativeLayout>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</LinearLayout>
In this scenario, the RecyclerView is taking it's required space and list is pretty much long so the total length of the scrollable area has gone long so probability of seeing elements below RCV has decreased.
To solve this I want to scroll RecyclerView inside a fixed area so that If the user is not interested in that he can easily look up to the other Elements present below the RecyclerView
When user scrolls within the region of RCV the RCV should scroll.
When the user scrolls outside the RCV the whole Layout should scroll
Image made at draw.io
What I have tried:
Making the height of RecyclerView constant: It is Jammed and is not scrolling at all.
Making Recyclerview Fixed Height and Scrollable : It's also the same. It is jammed and is not scrolling at all.
Scrollable NestedScrollViews inside RecyclerView: Tried this but could not establish a connection to my current situation.
Please tell what I am missing here.
you do not need to do anything. by default it works like this only !
Try the below code -
recyclerView = (RecyclerView) view.findViewById(R.id.my_recycler_view);
recyclerView.setHasFixedSize(false);
layoutManager = new LinearLayoutManager(getActivity());
recyclerView.setLayoutManager(layoutManager);
mAdapter = new MyAdapterClass(getContext(), lst);
recyclerView.setAdapter(mAdapter);
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"
tools:context="com.example.iosdteachingapp.MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="100sp"
android:text="hello"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/my_recycler_view"
android:layout_width="200sp"
android:layout_height="300sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="end"
android:padding="20sp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="end"
android:padding="20sp"/> <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="end"
android:padding="20sp"/> <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="end"
android:padding="20sp"/>
</LinearLayout>
</ScrollView>
Add android:nestedScrollingEnabled="false" to your RecyclerView.
Set Recycler view height dynamically thr java using param.
You can even set the height to show only particular no of elements by setting height = size of each element of recycler view * no of elements in the list.
Try this :
ViewGroup.LayoutParams
params=recyclerview.getLayoutParams();
params.height=100;
recyclerview.setLayoutParams(params);
Below you will find a screenshot. As you can see, between each card in my CardView, there is no spacing (They are bunched up below one another) The CardView
I am trying to get a spacing between each separate card. (Each card contains an image, an item number and a boolean)
I have tried card_view:cardUseCompatPadding="true" and adding padding manually.
activity_login.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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:padding="16dp">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:id="#+id/cv"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
card_view:cardPreventCornerOverlap="true"
card_view:cardUseCompatPadding="true"
card_view:cardCornerRadius="10dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/person_photo"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginRight="16dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/person_name"
android:layout_toRightOf="#+id/person_photo"
android:layout_alignParentTop="true"
android:textSize="30sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/person_age"
android:layout_toRightOf="#+id/person_photo"
android:layout_below="#+id/person_name" />
</RelativeLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
recyclerview_activity.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
android:backgroundTint="#e6e6e6">
<android.support.v7.widget.RecyclerView
android:layout_height="match_parent"
android:layout_width="match_parent"
android:id="#+id/rv">
</android.support.v7.widget.RecyclerView>
</LinearLayout>
In the parent of CardView: LinearLayout define android:layout_margin="XXdp". That might help.
You need to define margin top inside widget.CardView:
android:layout_marginTop="2dp"
And You don't need the linear layout.
I've the following xml file:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:id="#+id/topFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center">
<ImageView
android:id="#+id/imageViewTest"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon_00" />
<TextView
android:id="#+id/textViewTest"
android:layout_below="#+id/imageViewTest"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="This is a Test"/>
</RelativeLayout>
<FrameLayout
android:id="#+id/bottomFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal" />
</LinearLayout>
The first FrameLayout contains a fragment, which contains some buttons.
The RelativeLayout contains for example an image (changig size) and a text.
The last FrameLayout contains also a fragment, which contains either some buttons or some text or an image.
My aim is, that:
- the first FrameLayout is on top (that works)
- the elements in the RelativeLayout are centered in the middle of the screen (doesn't work)
- the last FrameLayout is on the bottom (doesn't work)
It should look like this:
My previous attempts with android:gravity="center" in the RelativeLayout and android:layout_gravity="bottom|center_horizontal" for the second FrameLayout failed.
Change the LineareLayout to Relative and use layout_centerInParent for the middle layout and alignParentBottom for the last one.
The top View will be anchored to the top by default
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"> //removed orientation as it won't be needed anymore
<FrameLayout
android:id="#+id/topFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<RelativeLayout
android:layout_width="wrap_content" // change here
android:layout_height="wrap_content"
android:layout_centernInParent="true"> // here
<ImageView
android:id="#+id/imageViewTest"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon_00" />
<TextView
android:id="#+id/textViewTest"
android:layout_below="#+id/imageViewTest"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="This is a Test"/>
</RelativeLayout>
<FrameLayout
android:id="#+id/bottomFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" /> //here
</RelativeLayout>
Use relative layout and use android:layout_centerHorizontal="true" instead of gravity.
EDIT
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:id="#+id/topFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_below="#+id/topFragment">
<ImageView
android:id="#+id/imageViewTest"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon_00"
android:layout_centerHorizontal="true" />
<TextView
android:id="#+id/textViewTest"
android:layout_below="#+id/imageViewTest"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="This is a Test"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
<FrameLayout
android:id="#+id/bottomFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" />
</RelativeLayout>
So I'm having some trouble with a RecyclerView in a layout file
Here it is:
<android.support.v7.widget.RecyclerView
android:id="#+id/chat_listview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingRight="#dimen/abc_action_bar_default_padding_material"
android:paddingLeft="#dimen/abc_action_bar_default_padding_material"
/>
<LinearLayout
android:layout_below="#id/chat_listview"
android:layout_width="match_parent"
android:layout_height="#dimen/bottom_bar_height"
android:orientation="horizontal"
>
<EditText
android:id="#+id/chat_input_edittext"
android:layout_weight="7"
android:layout_width="0dp"
android:layout_height="match_parent"
android:inputType="textAutoCorrect"
/>
<Button
android:id="#+id/chat_send_button"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:background="#drawable/ic_action_send_now"
/>
</LinearLayout>
The RecyclerView is visible and scrollable but the LinearLayout and the Views inside are not visible... I tried quite a few things but nothing has worked so far.
Can any of you please point me into the right direction?
Many thanks in advance!
When RecyclerView is drawn, it calculates all the remaining size on screen to itself before drawing the next elements and don't recalculate after the other elements are drawn, leaving them outside the screen.
The trick is to draw all other elements first, and leave RecyclerView for last. FrameLayout does not work anymore so use a relative layout and put the RecyclerView last on the XML layout file.
Example to add a bar with buttons below the RecyclerView:
<?xml version="1.0" encoding="utf-8"?>
<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"
android:padding="16dp"
tools:context=".MainActivity"
>
<LinearLayout
android:id="#+id/pagination_btns"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentBottom="true"> //HERE YOU ALIGN THIS ELEMENT TO THE BOTTOM OF THE PARENT
<Button
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="#string/previous_btn_label"/>
<Space
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
<Button
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="#string/next_btn_label"/>
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/items_recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical"
android:layout_above="#id/pagination_btns"/> //HERE YOU ALIGN THE RECYCLERVIEW ABOVE THE PAGINATION BAR
</RelativeLayout>
Change the root view to a FrameLayout. Set the gravity of the LinearLayout to bottom
<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.support.v7.widget.RecyclerView
android:id="#+id/chat_listview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingRight="#dimen/abc_action_bar_default_padding_material"
android:paddingLeft="#dimen/abc_action_bar_default_padding_material"
/>
<LinearLayout
android:layout_below="#id/chat_listview"
android:layout_width="match_parent"
android:layout_height="#dimen/bottom_bar_height"
android:layout_gravity="bottom"
android:orientation="horizontal">
<EditText
android:id="#+id/chat_input_edittext"
android:layout_weight="7"
android:layout_width="0dp"
android:layout_height="match_parent"
android:inputType="textAutoCorrect"/>
<Button
android:id="#+id/chat_send_button"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:background="#drawable/ic_action_send_now"/>
</LinearLayout>
</FrameLayout>
Alternatively, you can wrap the linear layout in a FrameLayout
and set it to align_parentBottom = true if it is a relative layout or a linear layout at your root and you have other things in your view.