Not able to properly nest GridView inside Cardview - java

I use a RecyclerView , which renders CardView . This CardView has 2 TextViews and one GridView , The GridView renders CardView (lets call it inside_card )as its child. Now i am unable to change height of this inside_card . Given below is what i want to achieve(Image A) and what i am getting (Image B).
Given Below are my Layouts.
activity_main.xml contains RecylerView
<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat 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:orientation="vertical"
tools:context=".Activities.MainActivity">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent">
</androidx.recyclerview.widget.RecyclerView>
</androidx.appcompat.widget.LinearLayoutCompat>
activity_card.xml Contains Layout to be rendered inside RecyclerView
<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.cardview.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:cardBackgroundColor="#AAA"
android:id="#+id/card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardCornerRadius="4dp"
android:layout_margin="8dp"
android:requiresFadingEdge="vertical">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="wrap_content"
>
<TextView
android:id="#+id/proffName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="ProfessorName"
android:textAlignment="center"
android:gravity="center_horizontal">
</TextView>
<TextView
android:id="#+id/subjectCode"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="SemesterName"
android:textAlignment="center"
android:gravity="center_horizontal">
</TextView>
<GridView
android:layout_gravity="center"
android:id="#+id/unitsGrid"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_weight="1"
android:layout_margin="6dp"
android:horizontalSpacing="2dp"
android:numColumns="2"></GridView>
</LinearLayout>
</androidx.cardview.widget.CardView>
</androidx.appcompat.widget.LinearLayoutCompat>
inside_card.xml contains layout to be rendered inside GridView
<androidx.cardview.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/inside_card"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="45dp"
android:layout_margin="8dp"
app:cardCornerRadius="6dp"
app:cardElevation="6dp"
app:cardBackgroundColor="#eeeeee"
>
<TextView
android:textAlignment="center"
android:layout_gravity="center"
android:id="#+id/unitName"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="1dp"
android:textColor="#color/cardview_dark_background"
android:textSize="18dp" />
</androidx.cardview.widget.CardView> ```

Change in inside_card.xml
-> Increase the height of card view from 45dp to 120dp, tweak as per requirement
-> Set card elevation 0dp, as in the design A, there is no card elevation.
-> Even I will suggest, don't take card view for this, Just take simple LienarLayout and set a drawable shape with stroke for this. Because Setting border on card view is a little tedious task.
<androidx.cardview.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/inside_card"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="120dp"
android:layout_margin="8dp"
app:cardCornerRadius="6dp"
app:cardElevation="0dp"
app:cardBackgroundColor="#eeeeee"
>
<TextView
android:textAlignment="center"
android:layout_gravity="center"
android:id="#+id/unitName"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="1dp"
android:textColor="#color/cardview_dark_background"
android:textSize="18dp" />
</androidx.cardview.widget.CardView> `
In your GridView, set vertical spacing too
<GridView
android:layout_gravity="center"
android:id="#+id/unitsGrid"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_weight="1"
android:layout_margin="6dp"
android:horizontalSpacing="15dp"
android:verticalSpacing="15dp"
android:numColumns="2"></GridView>

Related

Android App intellij Layout_marginBottom is adding to top

So I have this code in an XML file:
<androidx.constraintlayout.widget.ConstraintLayout
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">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="500dp"
android:id="#+id/constraintLayout" app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/text_dashboard">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/scrollView2">
<RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/textView" android:text="#string/Tester" android:layout_alignParentEnd="true"
android:layout_marginEnd="18dp" android:layout_marginStart="10dp"
android:layout_alignParentBottom="true"
android:layout_marginBottom="50dp" android:layout_margin="0dp"/>
</RelativeLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
The bottom margin within text view is adding to the top not the bottom, and the text at the bottom of the scroll view gets cut off. Also, when I try to just move the layout instead, if I drag it downward, it moves upward after release, and vice versa for dragging upward. Does anyone know what is happening here???
<androidx.constraintlayout.widget.ConstraintLayout
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">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
tools:ignore="MissingConstraints"
android:orientation="vertical"
>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/textView"
android:text="Tester"
android:layout_marginEnd="18dp" android:layout_marginStart="10dp"
android:layout_marginBottom="50dp" android:layout_margin="0dp"/>
</LinearLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/scrollView2">
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>

adView is not visible with wrap content

In the XML layout, everything seems perfect. When I used the emulator or real device, the adView is not visible. I tried to give height to adView like 200 dp. Then the adView is visible. But, when I gave the value of wrap_content for the height of the adView, there is a problem. I used LinearLayout and RelativeLayout but the problem is the same. What should I do for this?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical"
android:padding="30dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity="center"
android:text="#string/nav_contact_us_content_explanation" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:autoLink="email"
android:gravity="center"
android:selectAllOnFocus="false"
android:text="#string/nav_contact_us_content_mail" />
</LinearLayout>
<com.google.android.gms.ads.AdView
android:id="#+id/adview_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
ads:adSize="SMART_BANNER"
ads:adUnitId="ca-app-pub-3940256099942544/6300978111"></com.google.android.gms.ads.AdView>
</LinearLayout>
Try to put AdView in FrameLayout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical"
android:padding="30dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity="center"
android:text="#string/nav_contact_us_content_explanation" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:autoLink="email"
android:gravity="center"
android:selectAllOnFocus="false"
android:text="#string/nav_contact_us_content_mail" />
</LinearLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.gms.ads.AdView
android:id="#+id/adview_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
ads:adSize="SMART_BANNER"
ads:adUnitId="ca-app-pub-3940256099942544/6300978111"/>
</FrameLayout>
</LinearLayout>
In the case of LinearLayout, as the weight was set to 1, it took the whole screen when the ad was not yet loaded. However, you should see a warning like the following in your logcat here.
W/Ads: Not enough space to show ad. Needs 320x50 dp, but only has 288x495 dp.
In order to fix the problem, you might consider using a RelativeLayout instead of a LinearLayout like the following.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/adview"
android:orientation="vertical"
android:padding="30dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity="center"
android:text="Contact us" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:autoLink="email"
android:gravity="center"
android:selectAllOnFocus="false"
android:text="Email" />
</LinearLayout>
<LinearLayout
android:id="#+id/adview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<com.google.android.gms.ads.AdView
android:id="#+id/adview_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
ads:adSize="SMART_BANNER"
ads:adUnitId="ca-app-pub-3940256099942544/6300978111" />
</LinearLayout>
</RelativeLayout>
On the other hand, you might also consider setting up a fixed size for the AdView so that it does not hide when the content is not yet loaded. You can get the sizes of different types of ads for different screen sizes here.

Bottom Navigation Bar not shown in activity

I have an activity with a title, a fragment with a recyclerview full of cards and a bottom navigaton bar.
I cannot manage to show all 3 together without problems, the closest I have been is showing all 3, but with the bar taking space from the cards space.
Right now this is the XML which I thought should be working:
<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"
android:orientation="vertical"
tools:context=".habits.HabitsActivity">
<ImageView
android:id="#+id/imageView"
android:layout_width="313dp"
android:layout_height="166dp"
android:layout_gravity="center_horizontal"
app:srcCompat="#drawable/goodreasons" />
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/contentFrame"
android:layout_width="match_parent"
android:layout_height="match_parent"></FrameLayout>
</android.support.design.widget.CoordinatorLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom">
<com.aurelhubert.ahbottomnavigation.AHBottomNavigation
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom" />
</FrameLayout>
</LinearLayout>
But this gives this output:
This is the xml of the fragment, in case you think it is relevant too.
<?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"
android:layout_gravity="center"
android:orientation="vertical"
android:padding="5dp"
>
<android.support.v7.widget.RecyclerView
android:id="#+id/rv_list"
android:layout_width="wrap_content"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
android:layout_gravity="center"
/>
</LinearLayout>
Here's your layout, stripped down:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="313dp"
android:layout_height="166dp"/>
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
Your problem is that the CoordinatorLayout has a match_parent height, so it will take up all of the space that the ImageView doesn't. That leaves no space at all for the FrameLayout, so you won't be able to see anything inside of it.
Probably the best thing to do would be to use layout_weight on the CoordinatorLayout to make it take up as much space as it can while still leaving room for other views. That would look something like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="313dp"
android:layout_height="166dp"/>
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
The only changes I made were to set the CoordinatorLayout's height to 0dp and the FrameLayout's height to wrap_content, and to add the weight attribute to the CoordinatorLayout.

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>

Categories