CODEWITHSUNDEEP
androidxmlbutton
Florin Oiță
Florin Oiță

Reputation: 113

Center Text inside Button and reduce button padding

pic

My button is "ADD" and as you can see the text doesn't fit inside and it is cut on the buttom part , I think that the white space around the text inside the button is too big and that's why i can't fit it. I don't want to lower its size ..

My button in xml:

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_marginTop="10dp"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    >

    <TextView
        android:id="@+id/exp_routine"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_marginStart="20dp"
        android:layout_marginEnd="20dp"
        android:alpha="1"
        android:gravity="center"
        android:text="Routine"
        android:textAllCaps="true"
        android:textColor="#686868"
        android:textSize="16sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />




    <Button
        android:id="@+id/btn_add"
        style="@style/Widget.MaterialComponents.Button.TextButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_centerVertical="true"
        android:gravity="center"
        android:minWidth="0dp"
        android:minHeight="0dp"
        android:stateListAnimator="@null"
        android:text="add"
        android:textSize="20sp"
        android:includeFontPadding="false"
        android:textAlignment="gravity"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toEndOf="@+id/exp_routine"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Upvotes: 1

Views: 477

Answers (3)

urvi joshi
urvi joshi

Reputation: 166

I try to modify your layout and this one works for me. I have added padding manually and removed this style="@style/Widget.MaterialComponents.Button.TextButton". Please post this style code if this answer won't work. 

<androidx.constraintlayout.widget.ConstraintLayout android:layout_marginTop="10dp"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">

    <TextView
        android:id="@+id/exp_routine"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_marginStart="20dp"
        android:layout_marginEnd="20dp"
        android:alpha="1"
        android:text="Routine"
        android:textAllCaps="true"
        android:textColor="#686868"
        android:textSize="16sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />




    <Button
        android:id="@+id/btn_add"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:minWidth="0dp"
        android:background="@android:color/background_dark"
        android:minHeight="0dp"
        android:textColor="@color/colorAccent"
        android:text="add"
        android:textSize="20sp"
        android:padding="10dp"
        app:layout_constraintBottom_toBottomOf="@+id/exp_routine"
        app:layout_constraintStart_toEndOf="@+id/exp_routine"
        app:layout_constraintTop_toTopOf="@+id/exp_routine" />
</androidx.constraintlayout.widget.ConstraintLayout>

Upvotes: 1

ljk
ljk

Reputation: 1616

In the code your ConstraintLayout height is predefined android:layout_height="40dp" this is what causes the clipping as the height of the button is more.

Change to android:layout_height="wrap_content" if suitable or even android:layout_height="match_parent" will work in the case its a root layout

Upvotes: 1

Pavneet_Singh
Pavneet_Singh

Reputation: 37414

Apart from 

android:minWidth="0dp"
android:minHeight="0dp"

you need to set includeFontPadding to false and padding to 0dp so you can create new style and use it as

 <style name="NoPaddingTextButton" parent="Widget.MaterialComponents.Button.TextButton">
        <item name="android:padding">0dp</item>
        <item name="android:includeFontPadding">false</item>
 </style>

and use it 

 <Button
        android:id="@+id/btn_add"
        style="@style/NoPaddingTextButton"
        ...
 />

Note: You might still see extra padding at top and bottom but that is for characters like p or ' etc, you can verify it with

    android:text="ADD p '`"

Upvotes: 3

Related Questions