I'm trying to create a LinarLayout
which will contain 5 more LinearLayout
as children, each having a weight of 1. So they will take the same amount of space on the screen. Now inside these children LinearLayout
, I will put CardView
with the weight of 1 and they will have orientation
horizontally. So they will render side by side, equally. Inside these CardView
s I have put another LinearLayout
so that its children don't get overlapped. In this last LinearLayout
I have put 1 ImageView
and 1 TextView
.
But the thing is, the TextView
is not rendering.
What seems to be the issue here? Too many nested weights? Improper weight distributions?
Current view:
My whole XML:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal">
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:elevation="10dp"
android:orientation="horizontal"
app:cardElevation="2dp">
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<androidx.appcompat.widget.AppCompatImageButton
android:id="@ id/btn_calender_test"
style="@style/home_button_style"
android:layout_width="match_parent"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:src="@drawable/home_3test_calender"
android:text="About">
</androidx.appcompat.widget.AppCompatImageButton>
<androidx.appcompat.widget.AppCompatTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="About" />
</androidx.appcompat.widget.LinearLayoutCompat>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:elevation="10dp"
android:orientation="horizontal"
app:cardElevation="2dp">
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<androidx.appcompat.widget.AppCompatImageButton
android:id="@ id/btn_website_test"
style="@style/home_button_style"
android:layout_width="match_parent"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:src="@drawable/home_4test_website"
android:text="About">
</androidx.appcompat.widget.AppCompatImageButton>
<androidx.appcompat.widget.AppCompatTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="About" />
</androidx.appcompat.widget.LinearLayoutCompat>
</androidx.cardview.widget.CardView>
</androidx.appcompat.widget.LinearLayoutCompat>
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal">
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:elevation="10dp"
android:orientation="horizontal"
app:cardElevation="2dp">
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<androidx.appcompat.widget.AppCompatImageButton
android:id="@ id/btn_administration"
style="@style/home_button_style"
android:layout_width="match_parent"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:src="@drawable/home_5administration"
android:text="About">
</androidx.appcompat.widget.AppCompatImageButton>
<androidx.appcompat.widget.AppCompatTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="About" />
</androidx.appcompat.widget.LinearLayoutCompat>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:elevation="10dp"
android:orientation="horizontal"
app:cardElevation="2dp">
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<androidx.appcompat.widget.AppCompatImageButton
android:id="@ id/btn_office_and_section"
style="@style/home_button_style"
android:layout_width="match_parent"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:src="@drawable/home_6office_and_section"
android:text="About">
</androidx.appcompat.widget.AppCompatImageButton>
<androidx.appcompat.widget.AppCompatTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="About" />
</androidx.appcompat.widget.LinearLayoutCompat>
</androidx.cardview.widget.CardView>
</androidx.appcompat.widget.LinearLayoutCompat>
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal">
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:elevation="10dp"
android:orientation="horizontal"
app:cardElevation="2dp">
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<androidx.appcompat.widget.AppCompatImageButton
android:id="@ id/btn_blood_bank"
style="@style/home_button_style"
android:layout_width="match_parent"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:src="@drawable/home_7blood_bank"
android:text="About">
</androidx.appcompat.widget.AppCompatImageButton>
<androidx.appcompat.widget.AppCompatTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="About" />
</androidx.appcompat.widget.LinearLayoutCompat>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:elevation="10dp"
android:orientation="horizontal"
app:cardElevation="2dp">
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<androidx.appcompat.widget.AppCompatImageButton
android:id="@ id/btn_bus_schedule"
style="@style/home_button_style"
android:layout_width="match_parent"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:src="@drawable/home_8bus_schedule"
android:text="About">
</androidx.appcompat.widget.AppCompatImageButton>
<androidx.appcompat.widget.AppCompatTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="About" />
</androidx.appcompat.widget.LinearLayoutCompat>
</androidx.cardview.widget.CardView>
</androidx.appcompat.widget.LinearLayoutCompat>
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal">
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:elevation="10dp"
android:orientation="horizontal"
app:cardElevation="2dp">
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<androidx.appcompat.widget.AppCompatImageButton
android:id="@ id/btn_emergency"
style="@style/home_button_style"
android:layout_width="match_parent"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:src="@drawable/home_9emergency"
android:text="About">
</androidx.appcompat.widget.AppCompatImageButton>
<androidx.appcompat.widget.AppCompatTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="About" />
</androidx.appcompat.widget.LinearLayoutCompat>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:elevation="10dp"
android:orientation="horizontal"
app:cardElevation="2dp">
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<androidx.appcompat.widget.AppCompatImageButton
android:id="@ id/btn_gpa_calculator"
style="@style/home_button_style"
android:layout_width="match_parent"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:src="@drawable/home_10_gpa_calculator"
android:text="About">
</androidx.appcompat.widget.AppCompatImageButton>
<androidx.appcompat.widget.AppCompatTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="About" />
</androidx.appcompat.widget.LinearLayoutCompat>
</androidx.cardview.widget.CardView>
</androidx.appcompat.widget.LinearLayoutCompat>
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal">
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:elevation="10dp"
android:orientation="horizontal"
app:cardElevation="2dp">
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<androidx.appcompat.widget.AppCompatImageButton
android:id="@ id/btn_news_and_event"
style="@style/home_button_style"
android:layout_width="match_parent"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:src="@drawable/home_11news_and_event"
android:text="About">
</androidx.appcompat.widget.AppCompatImageButton>
<androidx.appcompat.widget.AppCompatTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="About" />
</androidx.appcompat.widget.LinearLayoutCompat>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:elevation="10dp"
android:orientation="horizontal"
app:cardElevation="2dp">
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<androidx.appcompat.widget.AppCompatImageButton
android:id="@ id/btn_others"
style="@style/home_button_style"
android:layout_width="match_parent"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:src="@drawable/home_12others"
android:text="About">
</androidx.appcompat.widget.AppCompatImageButton>
<androidx.appcompat.widget.AppCompatTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="About" />
</androidx.appcompat.widget.LinearLayoutCompat>
</androidx.cardview.widget.CardView>
</androidx.appcompat.widget.LinearLayoutCompat>
</androidx.appcompat.widget.LinearLayoutCompat>
CodePudding user response:
You can replace your layout with the below one provided hope it will gives you your desired result!
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal">
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:elevation="10dp"
android:orientation="horizontal"
app:cardElevation="2dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.AppCompatImageButton
android:id="@ id/btn_calender_test"
style="@style/home_button_style"
android:layout_width="wrap_content"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:layout_above="@id/txtAbout"
android:layout_centerHorizontal="true"
android:src="@drawable/home_3test_calender"
android:text="About">
</androidx.appcompat.widget.AppCompatImageButton>
<androidx.appcompat.widget.AppCompatTextView
android:id="@ id/txtAbout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_alignParentBottom="true"
android:text="About" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:elevation="10dp"
android:orientation="horizontal"
app:cardElevation="2dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.AppCompatImageButton
android:id="@ id/btn_website_test"
style="@style/home_button_style"
android:layout_width="wrap_content"
android:layout_centerHorizontal="true"
android:adjustViewBounds="true"
android:layout_above="@id/txtAbout2"
android:src="@drawable/home_4test_website"
android:text="About">
</androidx.appcompat.widget.AppCompatImageButton>
<androidx.appcompat.widget.AppCompatTextView
android:id="@ id/txtAbout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center"
android:text="About" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
</androidx.appcompat.widget.LinearLayoutCompat>
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal">
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:elevation="10dp"
android:orientation="horizontal"
app:cardElevation="2dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.AppCompatImageButton
android:id="@ id/btn_administration"
style="@style/home_button_style"
android:layout_width="wrap_content"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:layout_above="@id/txtAbout3"
android:layout_centerHorizontal="true"
android:src="@drawable/home_5administration"
android:text="About">
</androidx.appcompat.widget.AppCompatImageButton>
<androidx.appcompat.widget.AppCompatTextView
android:id="@ id/txtAbout3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_alignParentBottom="true"
android:text="About" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:elevation="10dp"
android:orientation="horizontal"
app:cardElevation="2dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.AppCompatImageButton
android:id="@ id/btn_office_and_section"
style="@style/home_button_style"
android:layout_width="wrap_content"
android:layout_centerHorizontal="true"
android:adjustViewBounds="true"
android:layout_above="@id/txtAbout4"
android:src="@drawable/home_6office_and_section"
android:text="About">
</androidx.appcompat.widget.AppCompatImageButton>
<androidx.appcompat.widget.AppCompatTextView
android:id="@ id/txtAbout4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center"
android:text="About" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
</androidx.appcompat.widget.LinearLayoutCompat>
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal">
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:elevation="10dp"
android:orientation="horizontal"
app:cardElevation="2dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.AppCompatImageButton
android:id="@ id/btn_blood_bank"
style="@style/home_button_style"
android:layout_width="wrap_content"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:layout_above="@id/txtAbout5"
android:layout_centerHorizontal="true"
android:src="@drawable/home_7blood_bank"
android:text="About">
</androidx.appcompat.widget.AppCompatImageButton>
<androidx.appcompat.widget.AppCompatTextView
android:id="@ id/txtAbout5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_alignParentBottom="true"
android:text="About" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:elevation="10dp"
android:orientation="horizontal"
app:cardElevation="2dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.AppCompatImageButton
android:id="@ id/btn_bus_schedule"
style="@style/home_button_style"
android:layout_width="wrap_content"
android:layout_centerHorizontal="true"
android:adjustViewBounds="true"
android:layout_above="@id/txtAbout6"
android:src="@drawable/home_8bus_schedule"
android:text="About">
</androidx.appcompat.widget.AppCompatImageButton>
<androidx.appcompat.widget.AppCompatTextView
android:id="@ id/txtAbout6"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center"
android:text="About" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
</androidx.appcompat.widget.LinearLayoutCompat>
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal">
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:elevation="10dp"
android:orientation="horizontal"
app:cardElevation="2dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.AppCompatImageButton
android:id="@ id/btn_emergency"
style="@style/home_button_style"
android:layout_width="wrap_content"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:layout_above="@id/txtAbout7"
android:layout_centerHorizontal="true"
android:src="@drawable/home_9emergency"
android:text="About">
</androidx.appcompat.widget.AppCompatImageButton>
<androidx.appcompat.widget.AppCompatTextView
android:id="@ id/txtAbout7"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_alignParentBottom="true"
android:text="About" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:elevation="10dp"
android:orientation="horizontal"
app:cardElevation="2dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.AppCompatImageButton
android:id="@ id/btn_gpa_calculator"
style="@style/home_button_style"
android:layout_width="wrap_content"
android:layout_centerHorizontal="true"
android:adjustViewBounds="true"
android:layout_above="@id/txtAbout8"
android:src="@drawable/home_10_gpa_calculator"
android:text="About">
</androidx.appcompat.widget.AppCompatImageButton>
<androidx.appcompat.widget.AppCompatTextView
android:id="@ id/txtAbout8"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center"
android:text="About" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
</androidx.appcompat.widget.LinearLayoutCompat>
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal">
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:elevation="10dp"
android:orientation="horizontal"
app:cardElevation="2dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.AppCompatImageButton
android:id="@ id/btn_news_and_event"
style="@style/home_button_style"
android:layout_width="wrap_content"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:layout_above="@id/txtAbout9"
android:layout_centerHorizontal="true"
android:src="@drawable/home_11news_and_event"
android:text="About">
</androidx.appcompat.widget.AppCompatImageButton>
<androidx.appcompat.widget.AppCompatTextView
android:id="@ id/txtAbout9"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_alignParentBottom="true"
android:text="About" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:elevation="10dp"
android:orientation="horizontal"
app:cardElevation="2dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.AppCompatImageButton
android:id="@ id/btn_others"
style="@style/home_button_style"
android:layout_width="wrap_content"
android:layout_centerHorizontal="true"
android:adjustViewBounds="true"
android:layout_above="@id/txtAbout10"
android:src="@drawable/home_12others"
android:text="About">
</androidx.appcompat.widget.AppCompatImageButton>
<androidx.appcompat.widget.AppCompatTextView
android:id="@ id/txtAbout10"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center"
android:text="About" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
</androidx.appcompat.widget.LinearLayoutCompat>
</androidx.appcompat.widget.LinearLayoutCompat>
And yes please avoid to use unnecessary nested views hierarchy its bad for performance.
You can use RecyclerView with GridLayoutManager to Achieve the same result!
Happy Coding!!
CodePudding user response:
Generally speaking, this layout hierarchy is too much in terms of the depth and can be heavy to render, traverse and maintain; it's preferred to be replaced by the
ConstraintLayout
Solution:
The android:adjustViewBounds="true"
tends to adjust the bounds of the ImageButton
to preserve the aspect ratio of its drawable; that can occupy the entire area of the parent LinearLayout
and obscure the size of the TextView
.
It expands the bounds towards the right and bottom, whereas the TextView
at the bottom it can be obscured by the ImageButton
. Try to add the TextView
on top of the ImageButton
, you'll notice they will be there; as the expansion is doesn't target the top area.
To fix this you need to hard code the android:layout_weight="1"
to all the AppCompatImageButton
's