How to design this Grid view xml page? - java

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>

Related

how can i set images in recyclerview

I have a recyclerview. I want to adjust it according to different screenshots. I have an xml that I inflate into adapter. How can ı do ?
i am using guideline for regular pages but ı didnt this
This is the order I want
But this is what comes out in different screenshots
Example 1
Other one
Example 2
My xml codes
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/cardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
android:backgroundTint="#E1E1E1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<androidx.cardview.widget.CardView
android:id="#+id/resimAlici"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/img"
android:layout_width="match_parent"
android:layout_height="93sp"
android:scaleType="fitCenter"
android:src="#drawable/imageshape" />
</androidx.cardview.widget.CardView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="3dp"
android:layout_marginTop="0dp"
android:layout_marginBottom="1dp"
android:layout_marginRight="1dp"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Nereden Nereye"
android:textStyle="bold"
android:gravity="center"
android:textColor="#353434"
android:textSize="10sp"
android:id="#+id/t1"/>
</LinearLayout>
</LinearLayout>
</androidx.cardview.widget.CardView>

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.

Rectangle at the bottom of the activity

Trying to study Android Studio. How can I create bottom rectangle with "Log in" text? And silly question about tabs. Is that correct, that I move them with marginTop property?
Use that Layout:
<?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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.90">
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.10"
android:background="#ffFF9800"
android:layout_gravity="center_vertical">
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="right"
android:layout_marginRight="20dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="LOG IN >"
android:id="#+id/textView76"
android:textSize="20sp"
android:textColor="#fff"
android:layout_gravity="center_vertical"/>
</LinearLayout>
</LinearLayout>
</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>

Android layout by layout

How could i achive next one after another layouts position (with height)?
Current code:
<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"
tools:context=".MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"></ListView>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAlignment="center"
android:text="Новая заметка"/>
</RelativeLayout>
</RelativeLayout>
You can achieve the same layout when you will add "layout_above" property use this code.
<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"
tools:context=".MainActivity">
<RelativeLayout
android:layout_above="#+id/relativeBottom"
android:layout_width="match_parent"
android:layout_alignParentTop="true"
android:layout_height="match_parent">
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"></ListView>
</RelativeLayout>
<RelativeLayout
android:id="#+id/relativeBottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAlignment="center"
android:text="Новая заметка"/>
</RelativeLayout>
</RelativeLayout>
I would suggest this
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/myButton">
</ListView>
<Button
android:id="#+id/myButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="22dp"
android:text="New Note"
android:layout_marginBottom="5dp"
android:layout_alignParentBottom="true" />
</RelativeLayout>
Because I don't see the reason to put relative layout insid another relative layout.
In my understanding of what is needed, there's little need for relative layout at all. It can be achieved with just LinearLayout, which is less expensive.
<?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:orientation="vertical" >
<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<Button
android:id="#+id/myButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="22dp"
android:text="New Note"
android:layout_marginBottom="5dp"
/>
</LinearLayout>

Categories