Android: How can I let Cardviews overlap themselves inside a Recyclerview? - java

I have a RecyclerView and inside it I want to put CardViews. Now I want these CardViews to overlap themselves like inside a Stackview, but i cannot find a solution to let my view look like this.
The result should look like the reminder app from iOS (see the screenshot) or like a deck of cards. The user should be able to scroll through the cardviews and drag them on the position he wants them to have.
Does anyone have an idea how to solve this problem? Or is there any library that could help me to let my view look like this? I have already tried an custom ItemDecoration but only the visible items of the RecyclerView are shifted and so the RecyclerView has a wrong behavior on scrolling.

You can achieve overlapping of items by using negative bottom margins for your item layout. See the documentations for details.
For example:
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="-10dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Test"/>
</android.support.v7.widget.CardView>

Related

Tips horizontal scroll with textbox

I would like to make horizontal swipe scroll with images and text views on it, 3-4 views.
Like tips screen on applications.
But, don't know which component to use, I need something like tabs(3-4 different layouts) but I dont want to show tab menu up. Just full screen, few buttons down, and in middle textbox with tip(which i want to animate later), everything is same in every layout just different image and text.
No code here in question because i stuck on beginning and need few tips what to use or some linked tutorial.
Here is how you can do this.
<ViewFlipper
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/pro_flip"
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
//put your child elements for first page on this layout
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
//put your child elements for second page on this layout
</LinearLayout>>
</ViewFlipper>
Content on the first layout will be visible to the user at first, when he swipes the next layout will be loaded.
ViewFlipper should be sufficient for simple content like you mentioned. If you want something more look into ViewPager.

How can I create a view that could hold either an image or a video?

In my app, users can either take a picture or record a video. The file is then saved and its path is passed through an intent to the next activity, which displays it for editing.
My question is, how can I easily use the same view for either a video or an image?
I tried dynamically adding a view at runtime when I know what the file type is, but it turned out to be too hard to configure, not to mention the issues that VideoViews have with being rotated.
Edit:
I forgot to mention that using the same view would be preferable, since I'm not actually going to do anything to the contents that's specific to each kind of view.
Add both the ImageView and VideoView in your layout. Then set the visibility to GONE or VISIBLE for the one you want.
You can create two child views, one for the image and one for the video. And depending on the type of your view you can hide/show your child views.
You can also use FrameLayout for this
By using frame layout / Relative layout you can place a view on top of another view. After creating the views like i mention and using the visibility Gone & Visible you can manage to handle it..
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/ImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/my_drawable"
android:scaleType="fitCenter"
android:visibility="gone"/>
<VideoView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center"
android:padding="5dp"
android:id="#+id/VideoView"
android:visibility="gone"/>
</FrameLayout>
Then based on your usage you can control it dynamically like below
// register the views
ImageView mImageView= (ImageView)findViewById(R.id.ImageView);
VideoView mVideoView= (VideoView)findViewById(R.id.VideoView);
// check your conditions like show video view r image view here
if(VideoView)
{
mVideoView.setVisibility(View.VISIBLE);
mImageView.setVisibility(View.GONE);
}
else if(ImageView)
{
mImageView.setVisibility(View.VISIBLE);
mVideoView.setVisibility(View.GONE);
}
Hope it will work for you :)

Android Vertical Switch Widget

Using android, I'd like to get a vertical switch widget implementation in place. As far as I can tell, it looks like switches only have a horizontal orientation. I'd like to have something like the following:
After looking through the threads here and searching google, I have yet to find something that can give me this. Everything I search for gives me the horizontal implementation only.
so I can generate your typical horizontal switch
<Switch
android:id="#+id/switch_button"
android:layout_width="130dp"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/label"
android:layout_gravity="center"
android:switchMinWidth="130dp"
android:thumb="#drawable/switch_selector"
android:track="#drawable/track_selector" >
</Switch>
but there doesn't seem to be a good way to set the orientation. I know that the question is a bit high level. Is there some attribute that is immediately available that will allow me to have a vertical switch? Or will I have to create a custom switch and possibly modify the onDraw method so that it is flipped vertically? Any help is appreciated. Thanks.
Try android:rotation="90" like this:
<Switch
android:id="#+id/switch_button"
android:layout_width="130dp"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/label"
android:layout_gravity="center"
android:switchMinWidth="130dp"
android:thumb="#drawable/switch_selector"
android:track="#drawable/track_selector"
android:rotation="90">
</Switch>
There is no quick attribute for vertical orientation.. Sorry :)
First you can look at the code of the switch and see if you can copy and manipulate it.
Second you can just implement your on. Have a layout with a button inside it. use onTouchListener to slide it from side to side. No need to use "onDraw".
Try toggle button witch graphics and use pictures like this You included in Your post. Here is example of such toggle buttons: Toggle button using two image on different state

Scrolling in a view containing a ListView (Android)

In one of my activities I am showing certain information and at the end I have a ListView.
So my layout looks a bit like:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="30dip"
>
...
<ListView android:id="#android:id/android:list" android:layout_width="wrap_content"
android:layout_height="fill_parent" />
</LinearLayout>
When I run the application in the emulator I see that the information before the list view is always shown in the screen and there is a vertical scroll for the ListView only.
Is there a way to change this scrolling behaviour ?. What I would like to have is a vertical scroll for all the information in the screen, not only at the level of the ListView.
I tried wrapping the LinearLayout with a ScrollView, with different combinations of the android:layout_height attribute for all the views involved but I did not get the effect that I was looking for. Besides, some people say that it is a pretty bad idea to wrap a ListView with a ScrollView :
Android ScrollView layout problem
Scrolling with Multiple ListViews for Android
Thanks for any other ideas.
I've not tried this, but you might want to look at you tube video:
Google I/O 2010 - The world of ListView
http://www.youtube.com/watch?v=wDBM6wVEO70
Starting at time 27:11, it talks about how to make info above and/or below a ListView scroll with the ListView. It refers to scrolling headers and footers, but it does say you can put anything you want in them.

GridView: How can I get rid of extra space from my GirdView object?

I'm writing an application for Android phones for Human vs. Human chess play over the internet. I was looking at some tutorials, to learn how to develop Android applications and found a very nice example of making galleries (it was a GridView usage example for making a gallery about dogs) and the idea came to draw the chess table using a GridView, because the example project also handled the point & click event and I intended to use the same event in the same way, but for a different purpose. The game works well (currently it's a hotseat version), however, I'm really frustrated by the fact that whenever I rotate the screen of the phone, my GridView gets hysterical and puts some empty space in my chess table between the columns. I realized that the cause of this is that the GridView's width is the same as its parent's and the GridView tries to fill its parent in with, but there should (and probably is) be a simple solution to get rid of this problem. However, after a full day of researching, I haven't found any clue to help me to make a perfect drawing about my chess table without a negative side effect in functionality.
The chess table looks fine if the phone is in Portrait mode, but in Landscape mode it's far from nice.
This is how I can decide whether we are in Portrait or Landscape mode:
((((MainActivity)mContext).getWindow().getWindowManager().getDefaultDisplay().getWidth()) < ((MainActivity)mContext).getWindow().getWindowManager().getDefaultDisplay().getHeight())
In the main.xml file the GridView is defined in the following way:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gridview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:numColumns="8"
android:verticalSpacing="0dp"
android:horizontalSpacing="0dp"
android:stretchMode="columnWidth"
android:gravity="center"
>
</GridView>
...
</LinearLayout>
I appreciate any help with the problem and thank you for reading this.
Portrait: http://www.freeimagehosting.net/image.php?f388b3ec64.png
Landscape: http://www.freeimagehosting.net/image.php?ee790603a2.png
A GridView probably isn't what you want here. GridView, like ListView, is for efficiently presenting scrolling, unbounded data sets. A chess board is neither. Populating a TableLayout programmatically is probably what you want instead.
The reason your GridLayout doesn't seem to be honoring android:layout_width="wrap_content" is that since GridView is meant for displaying unbounded data where each item can have a different size, it doesn't trust that items have a uniform width that can be reasonably measured. (If an adapter has 10,000 items, should GridView measure all of them to determine the correct column width?)
If you're going to try to keep using GridView for this anyway (which you shouldn't), try setting an explicit value for android:layout_width rather than wrap_content. This will stop the GridView from expanding to fill the available space. You can also use alternate layouts for different screen orientations using the resource system as described here. Alternatively you can disable landscape mode using android:screenOrientation="portrait" on the activity tag in your manifest. ;)
The problem is simply solvable using the setPadding method of your GridView object.

Categories

Resources