Hi I’m trying to design a footer which consists of 4 buttons of different size 25%,30%,20%,25% for big screens like 22 and 27 inches.Pasting by code below,
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusable="true"
android:focusableInTouchMode="true"
android:foreground="@drawable/scanner"
android:importantForAccessibility="yes"
app:cardElevation="@dimen/_0dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="@dimen/_24dp"
android:layout_marginTop="@dimen/_16dp"
android:layout_marginEnd="@dimen/_24dp"
android:layout_marginBottom="@dimen/_16dp">
<!-- CardView 1 -->
<androidx.cardview.widget.CardView
android:id="@+id/card_view_1"
android:layout_width="@dimen/_0dp"
android:layout_height="@dimen/_80dp"
android:layout_margin="@dimen/margin_5dp"
android:focusable="true"
android:focusableInTouchMode="true"
android:foreground="@drawable/footer"
android:importantForAccessibility="yes"
app:cardElevation="@dimen/_0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/card_view_2"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:id="@+id/tab1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="horizontal">
<ImageView
android:layout_width="@dimen/_38dp"
android:layout_height="@dimen/_44dp"
android:layout_marginEnd="@dimen/_8dp"
android:contentDescription="@string/image"
android:focusable="true"
android:focusableInTouchMode="true"
android:src="@drawable/tab1" />
<TextView
android:id="@+id/tab1_text"
style="@style/footerButtons"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="@string/tab1_txt"
android:focusable="true"
android:focusableInTouchMode="true"
android:text="@string/tab1_txt" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<!-- CardView 2 -->
<androidx.cardview.widget.CardView
android:id="@+id/card_view_2"
android:layout_width="@dimen/_0dp"
android:layout_height="@dimen/_80dp"
android:layout_marginStart="@dimen/_5dp"
android:layout_marginTop="@dimen/_5dp"
android:layout_marginBottom="@dimen/_5dp"
android:focusable="true"
android:focusableInTouchMode="true"
android:foreground="@drawable/footer"
android:importantForAccessibility="yes"
app:cardElevation="@dimen/_0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="@+id/card_view_1"
app:layout_constraintRight_toLeftOf="@+id/card_view_3"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed">
<LinearLayout
android:id="@+id/tab2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="horizontal">
<ImageView
android:layout_width="@dimen/_38dp"
android:layout_height="@dimen/_44dp"
android:layout_marginEnd="8dp"
android:contentDescription="@string/tab2"
android:focusable="true"
android:focusableInTouchMode="true"
android:src="@drawable/tab2" />
<TextView
android:id="@+id/tab2_Text"
style="@style/footerButtons"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="@string/tab2_txt"
android:ellipsize="end"
android:focusable="true"
android:focusableInTouchMode="true"
android:text="@string/tab2_txt" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<!-- CardView 3 -->
<androidx.cardview.widget.CardView
android:id="@+id/card_view_3"
android:layout_width="@dimen/_0dp"
android:layout_height="@dimen/_80dp"
android:layout_margin="@dimen/_5dp"
android:focusable="true"
android:focusableInTouchMode="true"
android:foreground="@drawable/footer"
android:importantForAccessibility="yes"
app:cardElevation="@dimen/_0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="@+id/card_view_2"
app:layout_constraintRight_toLeftOf="@+id/card_view_4"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed">
<LinearLayout
android:id="@+id/tab3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="horizontal">
<ImageView
android:layout_width="@dimen/_45dp"
android:layout_height="@dimen/_45dp"
android:layout_marginEnd="@dimen/_8dp"
android:contentDescription="@string/tab3"
android:focusable="true"
android:focusableInTouchMode="true"
android:src="@drawable/tab3" />
<TextView
android:id="@+id/tab3_text"
style="@style/footerButtons"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="@string/tab3_txt"
android:focusable="true"
android:focusableInTouchMode="true"
android:text="@string/tab3_txt" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<!-- CardView 4 -->
<androidx.cardview.widget.CardView
android:id="@+id/card_view_4"
android:layout_width="@dimen/_0dp"
android:layout_height="@dimen/_80dp"
android:layout_margin="@dimen/_5dp"
android:focusable="true"
android:focusableInTouchMode="true"
android:foreground="@drawable/footer"
android:importantForAccessibility="yes"
app:cardElevation="@dimen/_0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="@+id/card_view_3"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed">
<LinearLayout
android:id="@+id/tab4"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="horizontal">
<ImageView
android:layout_width="@dimen/_38dp"
android:layout_height="@dimen/_44dp"
android:layout_marginEnd="@dimen/_8dp"
android:contentDescription="@string/tab4"
android:focusable="true"
android:focusableInTouchMode="true"
android:src="@drawable/tab4" />
<TextView
android:id="@+id/tab4_text"
style="@style/footerButtons"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="@string/tab4_txt"
android:focusable="true"
android:focusableInTouchMode="true"
android:text="@string/tab4_txt" />
</LinearLayout>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
I’m stuck how to adjust for big screens.and all resolutions. I don’t want to give any fixed height and width can you help me with this.with the help of constraints I need it
New contributor
Ritu Rao is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.