Looking to swap a card view onClick - best way of doing it? - android

I'm pretty new to Android so sorry if this is obvious.
I currently have a few cards that I would like to display extra information when clicked. At the moment they have 6 lines of text and a couple of pictures. I want to display one line of text when the card is pressed and go back when it is pressed again.
The plan I have at the moment is to have 2 identical in size cards and set the visibility of one to gone and when the other is clicked set it to gone and make the other one visible. Is this the best way of doing this? For example, I could use one card and just swap the content.
Thanks for any advice in advance
edit - I'd also like to add some kind of transition - maybe a fade between them so ideally this would be possible too
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto">
<LinearLayout>
<ImageView/>
<TextView/>
<TextView/>
<TextView/>
<ImageView/>
<TextView/>
</LinearLayout>
</android.support.v7.widget.CardView>
Replace with
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto">
<TextView/>
</android.support.v7.widget.CardView>
where the text view is different. I'm basically asking if I should make an entirely new card of just hide all the other text/imageviews and show the new one. I hope I've explained a bit better

Related

Scrollable list trailed by fixed views

This might be a very beginner question, but I'm yet unable to find myself around the android jungle.
I've already got a RecyclerView working to show a list of items (with data binding and Room database and DiffUtil.ItemCallback and all).
I'd like to put 2 links after the list: "missing something?" and "add new entry" that will lead to other fragments.
What I have:
When I put 2 buttons (I don't know yet how to put links, but this is not the point of this question) after the RecyclerView, all in a LinearLayout, they stay fixed near the screen bottom. I mean, the RecyclerView is scrollable by itself, scrolling "beneath" the two buttons, the entire LinearLayout expanding to fill the screen (match_parent).
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.recyclerview.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="top"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Missing something?"
android:onClick="#{...}" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Add new item"
android:onClick="#{...}" />
</LinearLayout>
What I want
I'd like the 2 buttons to scroll along with the list, so that they are always positioned after the last item (think as if they were items themselves, albeit an heterogeneous list with different types/RecyclerView.ViewHolder).
For a big enough list the buttons will be initially off screen; to be scrolled in if the user happen to scroll to the bottom of the list.
What I tried
I tried with ScrollView around the LinearLayout, and it works, but everywhere everybody say that one should never put a RecyclerView inside a ScrollView (maybe because it is scrollable itself).
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/routines_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="top"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />
<!-- buttons -->
</LinearLayout>
</ScrollView>
Being really a beginner in android programming, I'd like to know how usually this kind of layout should be done. Only main directions will be enough for me.
NB. I don't know if I really need a RecyclerView because I don't expect this list to be lengthy. Maybe usually something around 4 to 8 items, possibly 10. But I really don't expect it to be much bigger than that. For many users the two links will even be visible all the time (i.e. no scroll at all).
RecyclerView is always the most efficient to show a list especially if you are getting the data from a database or an API. Don't put your recyclerview in a scrollview. You can add two items to the bottom of the list as your links and program your recyclerview to exhibit different properties for last two items. That is the best way I can think of. Good Luck!
Also, Recyclerview is very difficult to work with when you are working with complex data. With small lists such as in your case, it can seem inconvenient to create a whole adapter class and do everything you are supposed to do. When you have grasped the concepts on xml android and have plenty experience with that. You can move to jetpack compose and lazy column will make your life easy.

CardView with RecyclerView/ListView in ScrollView

tl;dr: How to achieve the layout shown in the screenshot below? Placing ListView to a ScrollView is apparently not recommended, but is there actually any other way to achieve it?
The whole question: I want to have multiple CardViews in my app, and one (or more) of them will have either RecyclerView or ListView in it (it doesn't really matter to me which one of those). The whole view is supposed to be scrollable - not only the ListViews in their parent CardViews. I basically need to achieve similar layout as the Play Store app has.
The first option I tried was this (the code is obviously simplified):
<LinearLayout android:orientation="vertical">
<CardView>
<!-- Some content of the first card. -->
</CardView>
<CardView>
<ListView/>
</CardView>
</LinearLayout>
The result was not what I wanted, the ListView was only scrollable in its parent CardView but the whole view wasn't scrollable like it is in the Play Store app. So now I wrapped it all in a ScrollView:
<ScrollView
android:fillViewport="true"
android:isScrollContainer="true">
<LinearLayout orientation="vertical">
<CardView>
<!-- Some content of the first card. -->
</CardView>
<CardView>
<ListView/>
</CardView>
</LinearLayout>
</ScrollView>
And I programmatically set the height of the bottom card to fit the ListView's height (number of elements in the ListView * height of one list item element). Now the whole view is scrollable, and the bottom card's height is the same as the height of the ListView, so the ListView isn't scrollable inside the CardView which is exactly what I wanted.
Now the actual problem: I got it working as described above, but I know this particular issue (ListView in a ScrollView) has been asked about many times before and the answer has always been the same - don't put neither RecyclerView nor ListView in a ScrollView because it causes performance problems. Well, so what's the correct approach then? How did Google do it in the Play Store app? I tried decompiling the Play Store app with APKTool but there weren't any layout files (maybe I did something wrong). Is my approach correct? My ListView will only display a few items (I guess it will be at most 20 items) - will it cause some performance issues in this case?
I wouldn't ask about this if all the answers wouldn't always mention that we shouldn't put ListView in a ScrollView. Is there any other way how to achieve the layout described by the screenshot above?
The first thing to address is why you're "not supposed to" use wrap_content on a ListView or a RecyclerView and put it in a scrollable container: it defeats the entire view-recycling purpose of these components.
What makes a ListView or RecyclerView better than a LinearLayout inside a ScrollView is that the system only needs to create enough views to display everying that fits inside the visible area. When you "scroll" the visible area, the views that disappear off one end can be re-used for the views that scroll into view from the other end. When you make your list/recycler wrap_content, this recycling is impossible, so you might as well just manually add your views to a LinearLayout instead.
That being said, RecyclerView does support using wrap_content... it just means you won't get view recycling. If this performance hit doesn't cause you problems, there's no objectively evil code here.
The only way to know for sure if the performance penalty is problematic or not is to just try it, test it, measure it, and decide for yourself. With 20 items, I suspect you have nothing to worry about.
The next thing to think about is the fact that Google has tons of resources and manpower and can afford to be extremely clever. Perhaps the Play Store app is as you say, with some sort of scrollable parent container that holds cards, each of which have some sort of adapter view within. But it's equally possible that they're doing something completely different, like using a single RecyclerView and "faking" the appearance of cards by using an ItemDecoration. Or perhaps they are using some sort of custom view subclass that the public doesn't have access to.
As for how you could recreate something similar, I suspect a hierarchy like this will work just fine:
<NestedScrollView>
<LinearLayout>
<CardView>
<RecyclerView/>
</CardView>
<CardView>
<RecyclerView/>
</CardView>
<CardView>
<RecyclerView/>
</CardView>
</LinearLayout>
</NestedScrollView>
I would recommend you to use Sectioned RecyclerView for this purpose. Every single item layout would have a cardView in it instead of creating a cardView as a parent.
Refer to this library: https://github.com/luizgrp/SectionedRecyclerViewAdapter

Add all the TextViews and ImageViews in the same list

I'm trying to create an app. I have 4 TextViews, and 4 ImageViews. If I want to put something else at the top of the layout, I have to move all 4 TextViews and all 4 ImageViews down, but I don't want to move them each separately (it takes more time). I`m thinking if there is any possibility to put all of them in a List or something like this, and move all of them only by one xml code.
For example
<TextView/>
<ImageView/>
<TextView/>
<ImageView/>
<TextView/>
<ImageView/>
and move down all of them by one code to make free space for another TextView and ImageView.
Are they all stacked up like that? Try putting them in a LinearLayout, then set attribute layout_marginTop to how much you want them to go down.

Correct way to add margin around a list view row layout?

If I create a custom layout for a list view row and in the root view of that layout I specify a margin for example:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="15dp">
<!— some cool row stuff (other view components that makeup your row) —>
</RelativeLayout>
Then the 15dp margin will be ignored. I could fix this by simply doing this:
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="15dp">
<!— some cool row stuff (other view components that makeup your row) —>
</RelativeLayout>
</FrameLayout>
But that adds another layout... which I have been discouraged from doing. People say its a bad practice to just add layouts when one layout can do the job. Is this the correct/ok way to do this or does any one else know another way to solve this?
Thanks
Note:
Also there is a similar question here that asks why the margin does not work. There is no answer on that question for what is the correct solution but a good explanation for why. The question was not how to fix but why so I thought a new question was appropriate.
similar question: Why LinearLayout's margin is being ignored if used as ListView row view

ScrollView with 2 Buttons which are fixed at the bottom

I just know how to fix two buttons at the bottom of RelativeLayout. But the problem is that small displays can not see everything, so I want to have a scrollLayout but also a Relative Layout so the two buttons are at the bottom of the display every time. Does anyone have an idea how to implement it?
Thanks very much :)
Try it like this:
<LinearLayout>
<ScrollLayout>
<RelativeLayout>
Your content here
</RelativeLayout>
</ScrollLayout>
<RelativeLayout>
Your two buttons here
</RelativeLayout>
</LinearLayout>

Categories

Resources