I have a LinearLayout
with multiple nested views. The main view is a CardView
that contains both text and a progress bar. To ensure proper spacing inside the card, I set a padding of 50dp
. Without this padding, all the inner views would be centered and overlap each other, and the CardView
would shrink to fit its contents. So, to prevent this, I added the padding.
However, the issue I'm facing now is that with long words, the text wraps to the next line depending on the device's width, which I don't want. I also don't want to compromise the internal spacing of the card.
You can refer to the screenshot below for a better idea:
Additionally, here's the full layout screenshot for reference:
Below is the XML layout that I'm currently using:
<?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:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/black"
tools:context=".FragmentResults">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:layout_marginTop="20sp"
android:orientation="vertical">
<!-- Multiple similar layouts above and below -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1"
android:orientation="horizontal">
<com.google.android.material.card.MaterialCardView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:layout_weight="1"
android:backgroundTint="@color/grey"
android:orientation="vertical"
app:cardCornerRadius="40dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="@color/grey"
android:padding="50dp"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Masculinity"
android:textColor="@color/white"
android:textSize="15sp"
android:textStyle="bold" />
<TextView
android:id="@+id/masculinity_score"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:textColor="@color/white"
android:textSize="50sp"
android:textStyle="bold" />
</LinearLayout>
<ProgressBar
android:id="@+id/masculinity_score_progress_bar"
style="@android:style/Widget.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="10dp"
android:layout_gravity="bottom"
android:layout_marginStart="15dp"
android:layout_marginEnd="15dp"
android:layout_marginBottom="35dp"
android:max="100" />
</com.google.android.material.card.MaterialCardView>
<com.google.android.material.card.MaterialCardView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:layout_weight="1"
android:backgroundTint="@color/grey"
android:orientation="vertical"
app:cardCornerRadius="40dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="@color/grey"
android:orientation="vertical"
android:padding="50dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:text="Jawline"
android:textColor="@color/white"
android:textSize="15sp"
android:textStyle="bold" />
<TextView
android:id="@+id/jawline_score"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:textColor="@color/white"
android:textSize="50sp"
android:textStyle="bold" />
</LinearLayout>
<ProgressBar
android:id="@+id/jawline_score_progress_bar"
style="@android:style/Widget.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="10dp"
android:layout_gravity="bottom"
android:layout_marginStart="15dp"
android:layout_marginEnd="15dp"
android:layout_marginBottom="35dp"
android:max="100" />
</com.google.android.material.card.MaterialCardView>
</LinearLayout>
</LinearLayout>
</ScrollView>
</RelativeLayout>
can anyone help me out with this
Issue is android:padding="50dp"
Why you are giving this much padding? for small devices, you won't see number even...
I suggest to change padding to 5 dp and center align textview that you have for text and number (which you are already doing)...
So your card view will be as below.
<com.google.android.material.card.MaterialCardView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:layout_weight="1"
android:backgroundTint="@color/grey"
android:orientation="vertical"
app:cardCornerRadius="40dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="@color/grey"
android:orientation="vertical"
android:padding="5dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:text="Jawline"
android:textColor="@color/white"
android:textSize="15sp"
android:textStyle="bold" />
<TextView
android:id="@+id/jawline_score"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:textColor="@color/white"
android:textSize="50sp"
android:textStyle="bold" />
</LinearLayout>
<ProgressBar
android:id="@+id/jawline_score_progress_bar"
style="@android:style/Widget.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="10dp"
android:layout_gravity="bottom"
android:layout_marginStart="15dp"
android:layout_marginEnd="15dp"
android:layout_marginBottom="35dp"
android:max="100" />
</com.google.android.material.card.MaterialCardView>
and if your text are gonna be more then add below code in first textview.
android:singleLine="true"
android:maxLines="1"