I want to add text below the clickable ImageView. It's like i want to name the ImageView but i couldn't place the text like i want. The clickable ImageView inside ScrollView. When i tried to add TextView right below the Image, it messed up my ScrollView
This is the example image like what i want to make
and this is my xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="wrap_content"
tools:context=".Huruf">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:weightSum="10"
android:background="#00bedc"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_gravity="center"
android:background="#fe8f2f"
android:padding="20dp"
android:layout_height="match_parent">
<ImageView
android:id="#+id/huruf_close"
android:layout_width="30dp"
android:layout_height="30dp"
android:src="#drawable/back_white"
android:layout_gravity="left" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="30dp"
android:text="#string/huruf"
android:textColor="#FFFFFF" />
</LinearLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_marginBottom="15dp"
android:layout_height="wrap_content">
<GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="4sp"
android:layout_weight="8"
android:alignmentMode="alignBounds"
android:columnCount="3"
android:columnOrderPreserved="false"
android:useDefaultMargins="true"
>
<ImageView
android:id="#+id/a"
android:layout_height="100dp"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_gravity="fill_horizontal"
android:src="#drawable/aa"
android:layout_marginBottom="15dp"
/>
<ImageView
android:id="#+id/b"
android:layout_height="100dp"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_gravity="fill_horizontal"
android:src="#drawable/bb"
android:layout_marginBottom="15dp"
/>
<ImageView
android:id="#+id/c"
android:layout_height="100dp"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_gravity="fill_horizontal"
android:src="#drawable/cc"
android:layout_marginBottom="15dp"
/>
<ImageView
android:id="#+id/d"
android:layout_height="100dp"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_gravity="fill_horizontal"
android:src="#drawable/dd"
android:layout_marginBottom="15dp"
/>
<ImageView
android:id="#+id/e"
android:layout_height="100dp"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_gravity="fill_horizontal"
android:src="#drawable/ee"
android:layout_marginBottom="15dp"
/>
<ImageView
android:id="#+id/f"
android:layout_height="100dp"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_gravity="fill_horizontal"
android:src="#drawable/ff"
android:layout_marginBottom="15dp"
/>
<ImageView
android:id="#+id/g"
android:layout_height="100dp"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_gravity="fill_horizontal"
android:src="#drawable/gg"
android:layout_marginBottom="15dp"
/>
<ImageView
android:id="#+id/h"
android:layout_height="100dp"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_gravity="fill_horizontal"
android:src="#drawable/hh"
android:layout_marginBottom="15dp"
/>
<ImageView
android:id="#+id/i"
android:layout_height="100dp"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_gravity="fill_horizontal"
android:src="#drawable/ii"
android:layout_marginBottom="15dp"
/>
<ImageView
android:id="#+id/j"
android:layout_height="100dp"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_gravity="fill_horizontal"
android:src="#drawable/jj"
android:layout_marginBottom="15dp"
/>
<ImageView
android:id="#+id/k"
android:layout_height="100dp"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_gravity="fill_horizontal"
android:src="#drawable/kk"
android:layout_marginBottom="15dp"
/>
<ImageView
android:id="#+id/l"
android:layout_height="100dp"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_gravity="fill_horizontal"
android:src="#drawable/ll"
android:layout_marginBottom="15dp"
/>
<ImageView
android:id="#+id/m"
android:layout_height="100dp"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_gravity="fill_horizontal"
android:src="#drawable/mm"
android:layout_marginBottom="15dp"
/>
<ImageView
android:id="#+id/n"
android:layout_height="100dp"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_gravity="fill_horizontal"
android:src="#drawable/nn"
android:layout_marginBottom="15dp"
/>
<ImageView
android:id="#+id/o"
android:layout_height="100dp"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_gravity="fill_horizontal"
android:src="#drawable/oo"
android:layout_marginBottom="15dp"
/>
<ImageView
android:id="#+id/p"
android:layout_height="100dp"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_gravity="fill_horizontal"
android:src="#drawable/pp"
android:layout_marginBottom="15dp"
/>
<ImageView
android:id="#+id/q"
android:layout_height="100dp"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_gravity="fill_horizontal"
android:src="#drawable/qq"
android:layout_marginBottom="15dp"
/>
<ImageView
android:id="#+id/r"
android:layout_height="100dp"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_gravity="fill_horizontal"
android:src="#drawable/rr"
android:layout_marginBottom="15dp"
/>
<ImageView
android:id="#+id/s"
android:layout_height="100dp"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_gravity="fill_horizontal"
android:src="#drawable/ss"
android:layout_marginBottom="15dp"
/>
<ImageView
android:id="#+id/t"
android:layout_height="100dp"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_gravity="fill_horizontal"
android:src="#drawable/tt"
android:layout_marginBottom="15dp"
/>
<ImageView
android:id="#+id/u"
android:layout_height="100dp"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_gravity="fill_horizontal"
android:src="#drawable/uu"
android:layout_marginBottom="15dp"
/>
<ImageView
android:id="#+id/v"
android:layout_height="100dp"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_gravity="fill_horizontal"
android:src="#drawable/vv"
android:layout_marginBottom="15dp"
/>
<ImageView
android:id="#+id/w"
android:layout_height="100dp"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_gravity="fill_horizontal"
android:src="#drawable/ww"
android:layout_marginBottom="15dp"
/>
<ImageView
android:id="#+id/x"
android:layout_height="100dp"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_gravity="fill_horizontal"
android:src="#drawable/xx"
android:layout_marginBottom="15dp"
/>
<ImageView
android:id="#+id/y"
android:layout_height="100dp"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_gravity="fill_horizontal"
android:src="#drawable/yy"
android:layout_marginBottom="15dp"
/>
<ImageView
android:id="#+id/z"
android:layout_height="100dp"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_gravity="fill_horizontal"
android:src="#drawable/zz"
android:layout_marginBottom="15dp"
/>
</GridLayout>
</ScrollView>
</LinearLayout>
</RelativeLayout>
P.S.
I'm really sorry if the explanation is not very clear, it's little bit hard write down my problem
I think you should make your own layout.
To make it like here :
How it's look like
Just create your own layout containing textView and imageView:
public class ImageWithText extends LinearLayout {
String description;
Drawable image;
public ImageWithText(Context context, #Nullable AttributeSet attrs) {
super(context, attrs);
LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
inflater.inflate(R.layout.image_with_text, this);
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.ImageWithText, 0, 0);
ImageView imageImageView = findViewById(R.id.image);
image = a.getDrawable(R.styleable.ImageWithText_image);
imageImageView.setImageDrawable(image);
TextView descriptionTextView = findViewById(R.id.description);
description = a.getString(R.styleable.ImageWithText_description);
descriptionTextView.setText(description);
}
Next you need to add attributes in values/attrs.xml:
<resources>
<declare-styleable name="ImageWithText">
<attr name="image" format="reference"/>
<attr name="description" format="string" />
</declare-styleable>
Create your new layout of the item:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/image_with_text"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_margin="10dp"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:srcCompat="#mipmap/ic_launcher" />
<TextView
android:id="#+id/description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TextView"
android:textAlignment="center" />
And use it like this:
<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:columnCount="3">
<com.example.empty.myapplication.Layout.ImageWithText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnSpan="1"
android:layout_columnWeight="1"
android:gravity="center"
app:description="google"
app:image="#drawable/common_google_signin_btn_icon_dark" />
<com.example.empty.myapplication.Layout.ImageWithText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnSpan="1"
android:layout_columnWeight="1"
android:gravity="center"
app:description="google"
app:image="#drawable/common_google_signin_btn_icon_dark" />
<com.example.empty.myapplication.Layout.ImageWithText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnSpan="1"
android:layout_columnWeight="1"
android:gravity="center"
app:description="google"
app:image="#drawable/common_google_signin_btn_icon_dark" />
</GridLayout>
Use the below code to get your actual layout.
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="8"
android:alignmentMode="alignBounds"
android:columnCount="3"
android:columnOrderPreserved="false"
android:padding="4sp"
android:useDefaultMargins="true">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:orientation="vertical">
<ImageView
android:id="#+id/a"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_gravity="fill_horizontal"
android:layout_marginBottom="15dp"
app:srcCompat="#drawable/ic_size_plus" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="18dp"
android:textStyle="bold"
android:gravity="center"
android:text="AA" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:orientation="vertical">
<ImageView
android:id="#+id/b"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_gravity="fill_horizontal"
android:layout_marginBottom="15dp"
app:srcCompat="#drawable/ic_size_plus" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="18dp"
android:textStyle="bold"
android:gravity="center"
android:text="BB" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:orientation="vertical">
<ImageView
android:id="#+id/c"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_gravity="fill_horizontal"
android:layout_marginBottom="15dp"
app:srcCompat="#drawable/ic_size_plus" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="18dp"
android:textStyle="bold"
android:gravity="center"
android:text="CC" />
</LinearLayout>
</GridLayout>
You should use grid view, check out this tutorial : https://www.viralandroid.com/2016/04/android-gridview-with-image-and-text.html
Related
I am working on grid-layout and designed layout with 3 column and 5 rows. Its working fine on most androids but some my application users reported that on their android it shows very ugly layout. I can't figureout whats the issue with interface. It shows me proper 3 columns but on some my users android, grid-layout cells goes outside the screen and not showing another 2 cells.
I have deleted 5th rows code due to character's limitation 30,000
<GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:alignmentMode="alignMargins"
android:columnCount="3"
android:columnOrderPreserved="false"
android:rowCount="6">
<androidx.cardview.widget.CardView
android:id="#+id/numsection"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_margin="1dp"
android:onClick="verify"
app:cardElevation="5dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?selectableItemBackground"
android:gravity="center"
android:orientation="vertical"
android:paddingTop="15dp"
android:paddingBottom="5dp">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#mipmap/newsim" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/jameel"
android:text="نمبرملکیت"
android:textSize="20sp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_margin="1dp"
android:onClick="cnic"
app:cardElevation="5dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?selectableItemBackground"
android:gravity="center"
android:orientation="vertical"
android:paddingTop="15dp"
android:paddingBottom="5dp">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#mipmap/newothersims" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/jameel"
android:text="ملحقہ نمبرز"
android:textSize="20sp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/emergencysection"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_margin="1dp"
android:onClick="random"
app:cardElevation="5dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?selectableItemBackground"
android:gravity="center"
android:orientation="vertical"
android:paddingTop="15dp"
android:paddingBottom="5dp">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#mipmap/newemergency" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/jameel"
android:text="ایمرجینسی"
android:textSize="20sp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_margin="1dp"
android:onClick="drivingmenu"
app:cardElevation="5dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?selectableItemBackground"
android:gravity="center"
android:orientation="vertical"
android:paddingTop="15dp"
android:paddingBottom="5dp">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#mipmap/newdriving" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/jameel"
android:text="ڈرائیونگ لائسنس"
android:textSize="20sp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_margin="1dp"
android:onClick="vehiclemenu"
app:cardElevation="5dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?selectableItemBackground"
android:gravity="center"
android:orientation="vertical"
android:paddingTop="15dp"
android:paddingBottom="5dp">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#mipmap/newvehicle" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/jameel"
android:text="ملکیت وہیکل"
android:textSize="20sp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_margin="1dp"
android:onClick="idcardaddress"
app:cardElevation="5dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?selectableItemBackground"
android:gravity="center"
android:orientation="vertical"
android:paddingTop="15dp"
android:paddingBottom="5dp">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#mipmap/id" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/jameel"
android:text="آئیڈی انفارمیشن"
android:textSize="20sp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_margin="1dp"
android:onClick="punjabland"
app:cardElevation="5dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?selectableItemBackground"
android:gravity="center"
android:orientation="vertical"
android:paddingTop="15dp"
android:paddingBottom="5dp">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#mipmap/newpunjabland" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/jameel"
android:text="پنجاب لینڈ"
android:textSize="20sp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/freshsection"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_margin="1dp"
android:onClick="newdata"
app:cardElevation="5dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?selectableItemBackground"
android:gravity="center"
android:orientation="vertical"
android:paddingTop="15dp"
android:paddingBottom="5dp">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#mipmap/newoffice" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/jameel"
android:text="فریش ڈیٹا"
android:textSize="20sp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/nadraclick"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_margin="1dp"
android:onClick="newdata"
app:cardElevation="5dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?selectableItemBackground"
android:gravity="center"
android:orientation="vertical"
android:paddingTop="15dp"
android:paddingBottom="5dp">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#mipmap/nadra" />
<TextView
android:id="#+id/activate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/jameel"
android:text="نادرا رجسٹریشن"
android:textSize="20sp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_margin="1dp"
android:onClick="ip"
app:cardElevation="5dp">
<com.flyco.labelview.LabelView xmlns:lv="http://schemas.android.com/apk/res-auto"
android:id="#+id/iptag"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:paddingLeft="1dp"
android:paddingRight="1dp"
lv:lv_background_color="#FF5722"
lv:lv_fill_triangle="true"
lv:lv_gravity="TOP_LEFT"
lv:lv_text="Global"
lv:lv_text_all_caps="false"
lv:lv_text_size="10sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?selectableItemBackground"
android:gravity="center"
android:orientation="vertical"
android:paddingTop="15dp"
android:paddingBottom="5dp">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#mipmap/newip" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/jameel"
android:text="آئی پی انفارمیشن"
android:textSize="20sp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_margin="1dp"
android:onClick="telenorblock"
app:cardElevation="5dp">
<com.flyco.labelview.LabelView xmlns:lv="http://schemas.android.com/apk/res-auto"
android:id="#+id/telenortag"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:paddingLeft="1dp"
android:paddingRight="1dp"
lv:lv_background_color="#FF5722"
lv:lv_fill_triangle="true"
lv:lv_gravity="TOP_LEFT"
lv:lv_text="Global"
lv:lv_text_all_caps="false"
lv:lv_text_size="10sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?selectableItemBackground"
android:gravity="center"
android:orientation="vertical"
android:paddingTop="15dp"
android:paddingBottom="5dp">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#mipmap/telenor" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/jameel"
android:text="ٹیلینارنمبربلاک"
android:textSize="20sp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/fbhacksection"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_margin="1dp"
android:onClick="FacebookHack"
app:cardElevation="5dp">
<com.flyco.labelview.LabelView xmlns:lv="http://schemas.android.com/apk/res-auto"
android:id="#+id/fbhacktag"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:paddingLeft="1dp"
android:paddingRight="1dp"
lv:lv_background_color="#FF5722"
lv:lv_fill_triangle="true"
lv:lv_gravity="TOP_LEFT"
lv:lv_text="Global"
lv:lv_text_all_caps="false"
lv:lv_text_size="10sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?selectableItemBackground"
android:gravity="center"
android:orientation="vertical"
android:paddingTop="15dp"
android:paddingBottom="5dp">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#mipmap/newhacking" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/jameel"
android:text="فیسبک ہیک"
android:textSize="20sp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
</GridLayout>
Some Screenshots
Actual Layout
On some android shows ugly interface
Try This Solution:
will create recyclerview
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rc_txt_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layoutManager="androidx.recyclerview.widget.GridLayoutManager"
app:spanCount="3" />
We will create rowView
<androidx.cardview.widget.CardView
android:id="#+id/emergencysection"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="1dp"
android:onClick="random"
app:cardElevation="5dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?selectableItemBackground"
android:gravity="center"
android:orientation="vertical"
android:paddingTop="15dp"
android:paddingBottom="5dp">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#mipmap/newemergency" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/jameel"
android:text="ایمرجینسی"
android:textSize="20sp"
android:textStyle="bold" />
</LinearLayout>
I am having a problem in my application, card view items are only visible from the top of the screen when I start scrolling the page.
here is the screenshot
here's the COMPLETE dashboard XML grid layout code for some items
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
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="400dp"
android:layout_height="200dp"
android:background="#drawable/green"
tools:context=".Dashboard">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="20dp"
android:layout_marginRight="32dp"
android:layout_marginLeft="32dp"
android:paddingLeft="20dp">
<TextView
android:textSize="24sp"
android:textColor="#FFFFFF"
android:textStyle="bold"
android:text="Dashboard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:layout_marginTop="30dp"
android:id="#+id/txtdashboard"
android:textColor="#52BAFF"
android:text="Items"
android:textStyle="bold"
android:textSize="24sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<ImageView
android:layout_width="62dp"
android:layout_height="62dp"
android:layout_alignParentRight="true"
android:src="#drawable/menu" />
</RelativeLayout>
<GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:alignmentMode="alignMargins"
android:columnCount="2"
android:columnOrderPreserved="false"
android:numColumns="2"
android:rowCount="5">
USER XML
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_row="1"
app:cardElevation="6dp"
app:cardCornerRadius="12dp"
android:layout_margin="12dp"
>
<LinearLayout
android:orientation="vertical"
android:padding="16dp"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:src="#drawable/users"
android:layout_gravity="center"
android:layout_width="80dp"
android:layout_height="80dp"
/>
<TextView
android:textColor="#6f6f6f"
android:layout_marginTop="12dp"
android:textSize="24sp"
android:textStyle="bold"
android:text="User"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
</androidx.cardview.widget.CardView>
LOGOUT XML CODE
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_row="1"
app:cardElevation="6dp"
app:cardCornerRadius="12dp"
android:layout_margin="12dp"
>
<LinearLayout
android:orientation="vertical"
android:padding="16dp"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:src="#drawable/logoutt"
android:layout_gravity="center"
android:layout_width="80dp"
android:layout_height="80dp"
/>
<TextView
android:textColor="#6f6f6f"
android:layout_marginTop="12dp"
android:textSize="24sp"
android:textStyle="bold"
android:text="LogOut"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
</androidx.cardview.widget.CardView>
CALENDER XML CODES
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_row="1"
app:cardElevation="6dp"
app:cardCornerRadius="12dp"
android:layout_margin="12dp"
>
<LinearLayout
android:orientation="vertical"
android:padding="16dp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:src="#drawable/calender"
android:layout_gravity="center"
android:layout_width="80dp"
android:layout_height="80dp"
/>
<TextView
android:textColor="#6f6f6f"
android:layout_marginTop="12dp"
android:textSize="24sp"
android:textStyle="bold"
android:text="Calendar"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
</androidx.cardview.widget.CardView>
COWS XML CODE
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_row="1"
app:cardElevation="6dp"
app:cardCornerRadius="12dp"
android:layout_margin="12dp"
>
<LinearLayout
android:orientation="vertical"
android:padding="16dp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:src="#drawable/logo"
android:layout_gravity="center"
android:layout_width="80dp"
android:layout_height="80dp"
/>
<TextView
android:textColor="#6f6f6f"
android:layout_marginTop="12dp"
android:textSize="24sp"
android:textStyle="bold"
android:text="Cows"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
</androidx.cardview.widget.CardView>
MILK
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_row="1"
app:cardElevation="6dp"
app:cardCornerRadius="12dp"
android:layout_margin="12dp"
>
<LinearLayout
android:orientation="vertical"
android:padding="16dp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:src="#drawable/milk"
android:layout_gravity="center"
android:layout_width="80dp"
android:layout_height="80dp"
/>
<TextView
android:textColor="#6f6f6f"
android:layout_marginTop="12dp"
android:textSize="24sp"
android:textStyle="bold"
android:text="Milk"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
</androidx.cardview.widget.CardView>
FEEDS
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_row="1"
app:cardElevation="6dp"
app:cardCornerRadius="12dp"
android:layout_margin="12dp"
>
<LinearLayout
android:orientation="vertical"
android:padding="16dp"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:src="#drawable/feed"
android:layout_gravity="center"
android:layout_width="80dp"
android:layout_height="80dp"
/>
<TextView
android:textColor="#6f6f6f"
android:layout_marginTop="12dp"
android:textSize="24sp"
android:textStyle="bold"
android:text="Feeds"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
</androidx.cardview.widget.CardView>
M-REPORTS
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_row="1"
app:cardElevation="6dp"
app:cardCornerRadius="12dp"
android:layout_margin="12dp"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:orientation="vertical"
android:padding="16dp">
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:src="#drawable/report" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="M-Reports"
android:textColor="#6f6f6f"
android:textSize="24sp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
REPORTS
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_row="1"
app:cardElevation="6dp"
app:cardCornerRadius="12dp"
android:layout_margin="12dp"
>
<LinearLayout
android:orientation="vertical"
android:padding="16dp"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_gravity="center"
android:src="#drawable/report"
android:layout_width="80dp"
android:layout_height="80dp"
/>
<TextView
android:layout_gravity="center"
android:textColor="#6f6f6f"
android:layout_marginTop="12dp"
android:textSize="24sp"
android:textStyle="bold"
android:text="F-Reports"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
</androidx.cardview.widget.CardView>
RETURNS CARD
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_row="1"
app:cardElevation="6dp"
app:cardCornerRadius="12dp"
android:layout_margin="12dp"
>
<LinearLayout
android:orientation="vertical"
android:padding="16dp"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_gravity="center"
android:src="#drawable/profit"
android:layout_width="80dp"
android:layout_height="80dp"
/>
<TextView
android:textColor="#6f6f6f"
android:layout_gravity="center"
android:layout_marginTop="12dp"
android:textSize="24sp"
android:textStyle="bold"
android:text="Returns"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
</androidx.cardview.widget.CardView>
ABOUT CARD VIEW
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_row="1"
app:cardElevation="6dp"
app:cardCornerRadius="12dp"
android:layout_margin="12dp"
>
<LinearLayout
android:orientation="vertical"
android:padding="16dp"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:src="#drawable/about"
android:layout_gravity="center"
android:layout_width="80dp"
android:layout_height="80dp"
/>
<TextView
android:textColor="#6f6f6f"
android:layout_gravity="center"
android:layout_marginTop="12dp"
android:textSize="24sp"
android:textStyle="bold"
android:text="About"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
</androidx.cardview.widget.CardView>
</GridLayout>
</LinearLayout>
It should be able to view grid items from the bottom up the screen as I scroll up but I don't know what's wrong. Please help
Here is the updated layout.
It's working fine.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:alignmentMode="alignMargins"
android:columnCount="2"
android:columnOrderPreserved="false"
android:numColumns="2"
android:rowCount="3">
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="1"
android:layout_columnWeight="1"
android:layout_margin="12dp"
app:cardCornerRadius="12dp"
app:cardElevation="6dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:orientation="vertical"
android:padding="16dp">
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_gravity="center"
android:src="#drawable/logo" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="12dp"
android:text="User"
android:textColor="#6f6f6f"
android:textSize="24sp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="1"
android:layout_columnWeight="1"
android:layout_margin="12dp"
app:cardCornerRadius="12dp"
app:cardElevation="6dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:orientation="vertical"
android:padding="16dp">
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_gravity="center"
app:srcCompat="#drawable/ic_logout" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="12dp"
android:text="LogOut"
android:textColor="#6f6f6f"
android:textSize="24sp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="1"
android:layout_columnWeight="1"
android:layout_margin="12dp"
app:cardCornerRadius="12dp"
app:cardElevation="6dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="16dp">
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_gravity="center"
app:srcCompat="#drawable/ic_camera" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="12dp"
android:text="Calendar"
android:textColor="#6f6f6f"
android:textSize="24sp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="1"
android:layout_columnWeight="1"
android:layout_margin="12dp"
app:cardCornerRadius="12dp"
app:cardElevation="6dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="16dp">
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_gravity="center"
android:src="#drawable/logo" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="12dp"
android:text="Cows"
android:textColor="#6f6f6f"
android:textSize="24sp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="1"
android:layout_columnWeight="1"
android:layout_margin="12dp"
app:cardCornerRadius="12dp"
app:cardElevation="6dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="16dp">
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_gravity="center"
android:src="#drawable/logo" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="12dp"
android:text="Milk"
android:textColor="#6f6f6f"
android:textSize="24sp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="1"
android:layout_columnWeight="1"
android:layout_margin="12dp"
app:cardCornerRadius="12dp"
app:cardElevation="6dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:orientation="vertical"
android:padding="16dp">
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_gravity="center"
android:src="#drawable/logo" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="12dp"
android:text="Feeds"
android:textColor="#6f6f6f"
android:textSize="24sp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="1"
android:layout_columnWeight="1"
android:layout_margin="12dp"
app:cardCornerRadius="12dp"
app:cardElevation="6dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:orientation="vertical"
android:padding="16dp">
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:src="#drawable/logo" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="M-Reports"
android:textColor="#6f6f6f"
android:textSize="24sp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="1"
android:layout_columnWeight="1"
android:layout_margin="12dp"
app:cardCornerRadius="12dp"
app:cardElevation="6dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:orientation="vertical"
android:padding="16dp">
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_gravity="center"
android:src="#drawable/logo" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="12dp"
android:text="F-Reports"
android:textColor="#6f6f6f"
android:textSize="24sp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
</GridLayout>
</ScrollView>
My app is running very slow when I Scroll Down. Please help me fix this issue.
I am concerned of this because of such articles that seem to say Google Play may penalize your app in the Play Store rankings if you fall in the bottom 25%.
All the project assets are present on this URL http://garudapixel.com/en/modern-dashboard-ui-design-android-studio-tutorial/
I want to make this type of layout in scrolling way...
XML Code
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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:background="#drawable/bgapps"
tools:context=".MainActivity">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_marginTop="32dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/txtdashboard"
android:text="My Dashboard"
android:textColor="#FFFFFF"
android:textSize="22sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:text="12 Items"
android:layout_marginTop="6dp"
android:layout_below="#+id/txtdashboard"
android:textColor="#52BAFF"
android:textSize="14sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageView
android:layout_alignParentEnd="true"
android:src="#drawable/person"
android:layout_width="62dp"
android:layout_height="62dp" />
</RelativeLayout>
<GridLayout
android:columnCount="2"
android:rowCount="5"
android:alignmentMode="alignMargins"
android:columnOrderPreserved="false"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
app:cardElevation="6dp"
app:cardCornerRadius="12dp"
android:layout_margin="12dp">
<LinearLayout
android:orientation="vertical"
android:padding="16dp"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:src="#drawable/bookmark"
android:layout_width="80dp"
android:layout_height="80dp" />
<TextView
android:layout_marginTop="12dp"
android:textColor="#6f6f6f"
android:textSize="18sp"
android:text="Calendar"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
app:cardElevation="6dp"
app:cardCornerRadius="12dp"
android:layout_margin="12dp">
<LinearLayout
android:orientation="vertical"
android:padding="16dp"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:src="#drawable/bookmark"
android:layout_width="80dp"
android:layout_height="80dp" />
<TextView
android:layout_marginTop="12dp"
android:textColor="#6f6f6f"
android:textSize="18sp"
android:text="Calendar"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
app:cardElevation="6dp"
app:cardCornerRadius="12dp"
android:layout_margin="12dp">
<LinearLayout
android:orientation="vertical"
android:padding="16dp"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:src="#drawable/bookmark"
android:layout_width="80dp"
android:layout_height="80dp" />
<TextView
android:layout_marginTop="12dp"
android:textColor="#6f6f6f"
android:textSize="18sp"
android:text="Calendar"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
app:cardElevation="6dp"
app:cardCornerRadius="12dp"
android:layout_margin="12dp">
<LinearLayout
android:orientation="vertical"
android:padding="16dp"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:src="#drawable/bookmark"
android:layout_width="80dp"
android:layout_height="80dp" />
<TextView
android:layout_marginTop="12dp"
android:textColor="#6f6f6f"
android:textSize="18sp"
android:text="Calendar"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
app:cardElevation="6dp"
app:cardCornerRadius="12dp"
android:layout_margin="12dp">
<LinearLayout
android:orientation="vertical"
android:padding="16dp"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:src="#drawable/bookmark"
android:layout_width="80dp"
android:layout_height="80dp" />
<TextView
android:layout_marginTop="12dp"
android:textColor="#6f6f6f"
android:textSize="18sp"
android:text="Calendar"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
app:cardElevation="6dp"
app:cardCornerRadius="12dp"
android:layout_margin="12dp">
<LinearLayout
android:orientation="vertical"
android:padding="16dp"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:src="#drawable/bookmark"
android:layout_width="80dp"
android:layout_height="80dp" />
<TextView
android:layout_marginTop="12dp"
android:textColor="#6f6f6f"
android:textSize="18sp"
android:text="Calendar"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
app:cardElevation="6dp"
app:cardCornerRadius="12dp"
android:layout_margin="12dp">
<LinearLayout
android:orientation="vertical"
android:padding="16dp"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:src="#drawable/bookmark"
android:layout_width="80dp"
android:layout_height="80dp" />
<TextView
android:layout_marginTop="12dp"
android:textColor="#6f6f6f"
android:textSize="18sp"
android:text="Calendar"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
app:cardElevation="6dp"
app:cardCornerRadius="12dp"
android:layout_margin="12dp">
<LinearLayout
android:orientation="vertical"
android:padding="16dp"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:src="#drawable/bookmark"
android:layout_width="80dp"
android:layout_height="80dp" />
<TextView
android:layout_marginTop="12dp"
android:textColor="#6f6f6f"
android:textSize="18sp"
android:text="Calendar"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
app:cardElevation="6dp"
app:cardCornerRadius="12dp"
android:layout_margin="12dp">
<LinearLayout
android:orientation="vertical"
android:padding="16dp"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:src="#drawable/bookmark"
android:layout_width="80dp"
android:layout_height="80dp" />
<TextView
android:layout_marginTop="12dp"
android:textColor="#6f6f6f"
android:textSize="18sp"
android:text="Calendar"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
app:cardElevation="6dp"
app:cardCornerRadius="12dp"
android:layout_margin="12dp">
<LinearLayout
android:orientation="vertical"
android:padding="16dp"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:src="#drawable/bookmark"
android:layout_width="80dp"
android:layout_height="80dp" />
<TextView
android:layout_marginTop="12dp"
android:textColor="#6f6f6f"
android:textSize="18sp"
android:text="Calendar"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v7.widget.CardView>
</GridLayout>
</LinearLayout>
</ScrollView>
Main Activity
package voidgoel.currentaffairs;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}
In my case I got the same problem. It was, images are very large. But your case you can also use recycle view with YourRecycleView.setLayoutManager(new GridLayoutManager(this,2)); within list. Images sizes are small is very important for that mode also. You can get some guide using below link.
https://www.journaldev.com/13792/android-gridlayoutmanager-example
I tried to configure a grid layout with 2 rows and 2 columns. But each element here occupies the entire width of the screen, while the second column is outside the screen. Please suggest what am I doing wrong here.
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorTheme"
android:orientation="vertical">
<GridLayout
android:id="#+id/moodsGridLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/textView2"
android:columnCount="2"
android:orientation="vertical"
android:rowCount="2">
<ImageButton
android:id="#+id/imageButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="0"
app:srcCompat="#mipmap/brewtv_logos" />
<ImageButton
android:id="#+id/imageButton2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="0"
app:srcCompat="#mipmap/brewtv_logos" />
<ImageButton
android:id="#+id/imageButton3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="1"
app:srcCompat="#mipmap/brewtv_logos" />
<ImageButton
android:id="#+id/imageButton4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="1"
app:srcCompat="#mipmap/brewtv_logos" />
</GridLayout>
</LinearLayout>
Try this:
for Uniform width column and row in Gridlayout use:
android:layout_columnWeight="1"
android:layout_rowWeight="1"
use this layout:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/color_white"
android:orientation="vertical">
<GridLayout
android:id="#+id/moodsGridLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/textView2"
android:columnCount="2"
android:orientation="vertical"
android:rowCount="2">
<ImageButton
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_row="0"
android:layout_rowWeight="1"
android:src="#mipmap/ic_launcher" />
<ImageButton
android:id="#+id/imageButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_row="0"
android:layout_rowWeight="1"
android:src="#mipmap/ic_launcher" />
<ImageButton
android:id="#+id/imageButton3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_row="1"
android:layout_rowWeight="1"
android:src="#mipmap/ic_launcher" />
<ImageButton
android:id="#+id/imageButton4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_row="1"
android:layout_rowWeight="1"
android:src="#mipmap/ic_launcher" />
</GridLayout>
</LinearLayout>
Output:
Im making using a Grid Layout on an app. The Columns work fine but the rows are giving me a problem.
I want 4 rows spread evenly on the image I am using. But for some reason the rows are all bunched up with only the last row ahead of the others. Its my first time using a GridLayout and i cant see what im doing wrong.
<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" android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin" tools:context=".MainActivity">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageView"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:src="#drawable/pitch"/>
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:rowCount="4"
android:numColumns="5"
android:id="#+id/formation"
android:layout_alignBottom="#+id/imageView">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Gk"
android:layout_row="0"
android:layout_column="1"
android:layout_gravity="center"
android:id="#+id/gk"
android:layout_columnSpan="3" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="DL"
android:layout_row="1"
android:layout_column="0"
android:layout_gravity="center"
android:id="#+id/dl" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="DC"
android:layout_row="1"
android:layout_column="1"
android:layout_gravity="center"
android:id="#+id/dcl" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="DC"
android:layout_row="1"
android:layout_column="3"
android:layout_gravity="center"
android:id="#+id/dcr" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="DR"
android:layout_row="1"
android:layout_column="4"
android:layout_gravity="center"
android:id="#+id/dr" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ML"
android:layout_row="2"
android:layout_column="0"
android:layout_gravity="center"
android:id="#+id/ml" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="MC"
android:layout_row="2"
android:layout_column="1"
android:layout_gravity="center"
android:id="#+id/mcl" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="MC"
android:layout_row="2"
android:layout_column="3"
android:layout_gravity="center"
android:id="#+id/mcr" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="MR"
android:layout_row="2"
android:layout_column="4"
android:layout_gravity="center"
android:id="#+id/mr" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="FC"
android:layout_row="3"
android:layout_column="1"
android:layout_gravity="center"
android:id="#+id/fcl" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="FC"
android:layout_row="3"
android:layout_column="3"
android:layout_gravity="center"
android:id="#+id/fcr" />
</GridLayout>
Suggest you to use linearlayout instead of gridlayout, to set image in background you need to use FrameLayout as in below 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">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/next"
android:scaleType="centerCrop" />
</FrameLayout>
<LinearLayout
android:id="#+id/formation"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="4">
<LinearLayout
android:id="#+id/formation1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center">
<Button
android:id="#+id/gk"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="Gk" />
</LinearLayout>
<LinearLayout
android:id="#+id/formation2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center">
<Button
android:id="#+id/dl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="DL" />
<Button
android:id="#+id/dcl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="DC" />
<Button
android:id="#+id/dcr"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="DC" />
<Button
android:id="#+id/dr"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="DR" />
</LinearLayout>
<LinearLayout
android:id="#+id/formation3"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center">
<Button
android:id="#+id/ml"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="ML" />
<Button
android:id="#+id/mcl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="MC" />
<Button
android:id="#+id/mcr"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="MC" />
<Button
android:id="#+id/mr"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="MR" />
</LinearLayout>
<LinearLayout
android:id="#+id/formation4"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center">
<Button
android:id="#+id/fcl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="FC" />
<Button
android:id="#+id/fcr"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="FC" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
hope this is usefull.
Consider instead using a vertical LinearLayout containing horizontal LinearLayouts (or more GridLayouts) for each row. Then each row view can have a layout_weight set to the same value so they are all allocated the same amount of space. In that case also set their layout_height to 0.
You can add:
android:layout_columnWeight="1"
android:layout_rowWeight="1"
in each Button. Like this:
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:rowCount="4"
android:numColumns="5"
android:id="#+id/formation"
android:layout_alignBottom="#+id/imageView">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Gk"
android:layout_row="0"
android:layout_column="1"
android:layout_gravity="center"
android:id="#+id/gk"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_columnSpan="3" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="DL"
android:layout_row="1"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_gravity="center"
android:id="#+id/dl" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="DC"
android:layout_row="1"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_gravity="center"
android:id="#+id/dcl" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="DC"
android:layout_row="1"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_column="3"
android:layout_gravity="centerl"
android:id="#+id/dcr" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="DR"
android:layout_row="1"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_column="4"
android:layout_gravity="center"
android:id="#+id/dr" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ML"
android:layout_row="2"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_column="0"
android:layout_gravity="center"
android:id="#+id/ml" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="MC"
android:layout_row="2"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_column="1"
android:layout_gravity="center"
android:id="#+id/mcl" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="MC"
android:layout_row="2"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_column="3"
android:layout_gravity="center"
android:id="#+id/mcr" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="MR"
android:layout_row="2"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_column="4"
android:layout_gravity="center"
android:id="#+id/mr" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="FC"
android:layout_row="3"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_column="1"
android:layout_gravity="center"
android:id="#+id/fcl" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="FC"
android:layout_row="3"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_column="3"
android:layout_gravity="center"
android:id="#+id/fcr" />
</GridLayout>