Reputation: 25

How to align TextView with background in Layout - Android

I've got a small problem.

I've got:

I want: (but the text few dp from the left)

Is it possible? Here is a whole code of my layout: (@+id/txtname is the textview from the screenshot!)

    <?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/md_brown_100"
    android:orientation="vertical"
    android:gravity="center"
    android:paddingTop="10dp"
    android:paddingBottom="10dp" >


    <LinearLayout android:id="@+id/list_offer_item_container"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:background="@drawable/shape"
        android:gravity="center"
        android:paddingTop="10dp"
        android:paddingBottom="10dp"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:gravity="center"

            android:layout_gravity="center_vertical">

            <TextView android:id="@+id/list_offer_badge_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_above="@+id/list_offer_item_container"
                android:textColor="@color/md_amber_700"
                android:textSize="12sp"
                android:visibility="gone"
                android:text=""/>
        </LinearLayout>

        <LinearLayout
            android:layout_height="150dp"
        android:orientation="vertical"
        android:padding="5dp"
            android:weightSum="1"
            android:layout_width="150dp">

            <ImageView
                android:id="@+id/imgcreditcompany"
                android:scaleType="fitXY"
                android:layout_gravity="center_horizontal"

                android:layout_above="@+id/txtname"
                  android:contentDescription="@string/app_name"
                android:layout_height="48dp"
                android:layout_width="48dp" />


            <TextView
                android:id="@+id/txtname"
                android:gravity="center_vertical"
                android:background="@drawable/ic_dollar_ss"
                android:layout_height="30dp"
                android:layout_marginTop="5dp"
                android:textColor="@color/AliceBlue"
                android:textSize="18sp"
                android:text="Name"
                android:textAllCaps="false"
                android:textStyle="normal|bold"
                android:layout_width="153dp" />

            <TextView
                android:id="@+id/txtdesc"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:layout_marginTop="1dp"
                android:maxLines="3"

                android:textColor="#80869c"
                android:textSize="@dimen/textsizeearncredit_desc"
                android:text="This is a description of the offer and this is just a demo to show off 3 lines stacking correctly on top of each other"
                android:layout_weight="0.55"
                android:layout_width="140dp" />
        </LinearLayout>

        <ImageView
            android:id="@+id/nextArrow"
            android:layout_alignParentRight="true"
            android:tint="@color/md_grey_300"
            android:rotation="180"
            android:layout_width="32dp"
            android:visibility="gone"
            android:layout_marginRight="16dp"
            android:layout_gravity="center"
            android:layout_centerVertical="true"
            android:layout_height="32dp"
            android:contentDescription="@string/app_name"
            android:padding="@dimen/two" />

    </LinearLayout>


</RelativeLayout>

Please help me guys! Thanks a lot of You can give me any idea of it. Cheers!

Upvotes: 0

Answers (5)

Chayan Chowdhury

Reputation: 129

solution:--- Please add following property within name textview . android:gravity="center_horizontal"

your code:

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
android:paddingBottom="10dp"
android:paddingTop="10dp">


<LinearLayout
    android:id="@+id/list_offer_item_container"
    android:layout_width="150dp"
    android:layout_height="150dp"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:gravity="center"
    android:paddingBottom="10dp"
    android:paddingTop="10dp">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:gravity="center"

        android:orientation="vertical">

        <TextView
            android:id="@+id/list_offer_badge_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@+id/list_offer_item_container"
            android:text=""
            android:textSize="12sp"
            android:visibility="gone" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:orientation="vertical"
        android:padding="5dp"
        android:weightSum="1">

        <ImageView
            android:id="@+id/imgcreditcompany"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_above="@+id/txtname"
            android:layout_gravity="center_horizontal"
            android:contentDescription="@string/app_name"
            android:scaleType="fitXY" />


        <TextView
            android:id="@+id/txtname"
            android:layout_width="153dp"
            android:layout_height="30dp"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="5dp"
            android:gravity="center_horizontal"
            android:text="Name"
            android:textAllCaps="false"
            android:textSize="18sp"
            android:textStyle="normal|bold" />

        <TextView
            android:id="@+id/txtdesc"
            android:layout_width="140dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="1dp"
            android:layout_weight="0.55"

            android:gravity="center_horizontal"
            android:maxLines="3"
            android:text="This is a description of the offer and this is just a demo to show off 3 lines stacking correctly on top of each other"
            android:textColor="#80869c" />
    </LinearLayout>

    <ImageView
        android:id="@+id/nextArrow"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_gravity="center"
        android:layout_marginRight="16dp"
        android:contentDescription="@string/app_name"
        android:rotation="180"
        android:visibility="gone" />

</LinearLayout>

Upvotes: 0

Mateus Gondim

Reputation: 5532

The problem is that your LinearLayout has a padding of 5dp, which keeps your "Invite Friends" TextView away from the edge.

Replace

<LinearLayout
        android:layout_height="150dp"
        android:orientation="vertical"
        android:padding="5dp"
        android:weightSum="1"
        android:layout_width="150dp">

with

<LinearLayout
        android:layout_height="150dp"
        android:orientation="vertical"
        android:paddingTop="5dp"
        android:paddingBottom="5dp"
        android:paddingEnd="5dp"
        android:weightSum="1"
        android:layout_width="150dp">

This way you will have no padding on the left. To compensate it on the description text, add android:paddingStart="5dp" to your TextView txtdesc

Upvotes: 1

RamanSB

Reputation: 1172

The padding attribute for the linear layout encompassing the text and image view should be set to 0.

android:padding="5dp"

This includes paddings left & right, hence the purple colour has a slight gap, remove the padding and the purple shape will reach the sides of the container shape.

I noticed you only want the purple shape to touch the RHS, hence we only want to remove the paddingLeft.

  android:paddingRight="5dp"
  android:paddingLeft="0dp"
  android:paddingBottom="5dp"
  android:paddingTop="5dp"

The TextView's gravity attribute must then be set to 'left'

  android:gravity="left"

Upvotes: 0

Ivan Leong

Reputation: 118

set layout gravity of that view to android:layout_gravity="left"

Upvotes: 0

jagnelo

Reputation: 47

Although im fairly new to Android Studio, i'd recommend you to try changing the layout gravity property on that specific TextView to adjust itself to the left corner and/or try forcing a padding to the left aswell.

Though this is just a guess of what could solve it, i hope it helps

Upvotes: 0

How to align TextView with background in Layout - Android

Answers (5)

Related Questions