Cardview is all goes into one card - java

I have made and app with CardView, but my cardview is going into one card.
My Code:
recyclerview_activity.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:padding="16dp"
>
<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>
I get something like this

I think the only issue is with the gap between your CardViews. You must not be having CompatPadding true in CardView thats why it looks like the data is clubbed into one CardView try making it true.
Use following code it should work :
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/cv"
card_view:cardCornerRadius="5dp"
card_view:cardUseCompatPadding="true"
android:foreground="?android:attr/selectableItemBackground"
>
<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>

Related

CardView Spacing between each separate card is non-existent

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.

How to design this Grid view xml page?

I want to design xml page this type. I tried many of the code. Every time new problems are come. I need bottom navigation bar is fixed. In grid view ,i want android:numColums=3, android:verticalSpacing and android:horizontalSpacing Same(Look like instagram profile view grid images ).
XMl Code:
<?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"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".MainSettingClass">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="175dp"
android:background="#dadada"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="#+id/profile_image"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/com_facebook_button_background"/>
<TextView
android:id="#+id/amsc_txt_fbusername"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="TextView"
android:layout_marginTop="2dp" />
</LinearLayout>
<GridView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/grid_test"
android:verticalSpacing="2dp"
android:horizontalSpacing="2dp"
android:background="#FFFFFF"
android:stretchMode="columnWidth"
android:columnWidth="85dp"
android:numColumns="3"/>
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_gallery"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#ffffff"
app:menu="#menu/bottom_navigation_gallery"/>
</FrameLayout>
As per your design you need scrollview for 2 above components and your BottomNavigationView is fix (not movable).
In your code you are not using scrollview first and second i'm not sure why you're using framelayout!
Here's my code which is exactly as per your given design try this if any concern you can ask! :)
Here's my code:
<?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="match_parent"
android:orientation="vertical">
<ScrollView
android:id="#+id/scroll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/bottom_gallery">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/rel_titleHolder"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#dadada"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="#+id/profile_image"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#mipmap/ic_launcher" />
<TextView
android:id="#+id/amsc_txt_fbusername"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:gravity="center"
android:text="TextView" />
</LinearLayout>
<GridView
android:id="#+id/grid_test"
android:layout_width="match_parent"
android:layout_height="400dp"
android:columnWidth="85dp"
android:horizontalSpacing="2dp"
android:numColumns="3"/>
</LinearLayout>
</ScrollView>
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_gallery"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff"
android:layout_alignParentBottom="true" />
</RelativeLayout>

XML layout 2 views in centre, one at top

I created linearlayout with two buttons in center (buttons 1 and 2), but I can't manage it to create the view 3 on top, which I need to make it fill whole width and adjust it's height by it (keep proportions). How do I create third view?
Image:
Code:
<?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:background="#drawable/bg"
android:layout_gravity="center_horizontal"
android:orientation="horizontal">
<LinearLayout
android:orientation="vertical"
android:layout_gravity="center_vertical"
android:layout_width="fill_parent" android:layout_height="wrap_content" >
<ImageButton
android:background="#drawable/btn_one"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_weight="1.0" />
<ImageButton
android:background="#drawable/btn_second"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_weight="1.0" />
</LinearLayout>
I would recommend you use relative layouts, they are the closest thing in android to an "absolute layout" replace the button tags with Image button tags
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true">
</RelativeLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button2"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="215dp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button3"
android:layout_below="#+id/button2"
android:layout_alignStart="#+id/button2" />
</RelativeLayout>
try this code set height and width what size of image button you need and simple look what you need.
<?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="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<ImageButton
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.2"
android:orientation="vertical"
android:gravity="center">
<ImageButton
android:layout_width="200dp"
android:layout_height="50dp"/>
<ImageButton
android:layout_width="200dp"
android:layout_height="50dp" />
</LinearLayout>

GridView title and date orientation

I want my title and date text views to appear at the bottom of the image instead of the top where they currently are. I want them to overlap the image like they are at the moment but then have the title then date underneath with the same background so they appear to be in the same "box"
<?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="#55000000"
android:orientation="vertical"
>
<uk.ac.kent.sc580.edanews.GridViewItem
android:id="#+id/listImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop" />
<TextView
android:id="#+id/listTitle"
android:layout_width="match_parent"
android:layout_height="50dp"
android:textColor="#android:color/white"
android:background="#3183b9"
android:ellipsize="end"
android:maxLines="2" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:id="#+id/listDate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#android:color/white" />
</LinearLayout>
</FrameLayout>
Use the RelativeLayout instead
<?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="match_parent"
android:background="#55000000">
<uk.ac.kent.sc580.edanews.GridViewItem
android:id="#+id/listImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical
android:layout_alignParentBottom="true">
<TextView
android:id="#+id/listTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#android:color/white" />
<TextView
android:id="#+id/listDate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#android:color/white" />
</LinearLayout>
</RelativeLayout>

GridView row spacing fills screen

Im having a grid view that has blank space between two rows. I'm trying to remove the white space but without success. So can anyone tell me how can I remove the white spacing?
Here is my 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:background="#android:color/white"
android:orientation="vertical" >
<GridView
android:id="#+id/bg_chooser_grid"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:numColumns="auto_fit"/>
</LinearLayout>
here is gridItem xml:
<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/grid_item_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/app_name"
android:scaleType="centerInside"
android:src="#drawable/ic_launcher" />
The "important part of the adapter":
gridImg = (ImageView) vi.findViewById(R.id.grid_item_img);
gridImg.setImageResource(data.get(position));
And here is how it looks:
Try This Code :-
<GridView
android:id="#+id/gridView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:columnWidth="90dp"
android:gravity="center"
android:numColumns="auto_fit"
android:stretchMode="columnWidth" >
</GridView>
and customGridAdapter xml view:-
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:background="#drawable/grid_border"
android:orientation="vertical"
android:padding="5dp" >
<ImageView
android:id="#+id/item_image"
android:layout_width="75dp"
android:layout_height="75dp"
android:layout_gravity="center"
android:layout_margin="10dp"
android:scaleType="fitXY"
android:src="#drawable/home" >
</ImageView>
</LinearLayout>
This image use in LinearLayout android:background="#drawable/grid_border"

Categories