简体   繁体   中英

Center align TextView in android layout

This is what I'm trying to achieve and I'm just not getting it.

 This is a long lable: {image1}{image1}
          Short label: {image1}{image1}
   Other label length: {image1}{image1}

Notice that the colons at the ends of the labels are aligned and the images, which are the same dimensions, will also be aligned. The labels of varying lengths will not be left aligned. The labels in reality are all just one word, so space should be be an issue, but the words are not the same widths.

The layout below centers everything but they come out like this.

      This is a long lable: {image1}{image1}
          Short label: {image1}{image1}
       Other label length: {image1}{image1}

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:paddingTop="2dp"
    android:paddingBottom="2dp"
    android:id="@+id/layout_one">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="22sp"
        android:text="@string/image_one"
        android:id="@+id/one"/>
<ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/digit_border"
        android:padding="2dp"
        android:adjustViewBounds="true"
        android:id="@+id/one1"
        android:src="@drawable/five"
        android:scaleType="centerCrop"/>        
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/digit_border"
        android:padding="2dp"
        android:adjustViewBounds="true"
        android:id="@+id/one2"
        android:src="@drawable/five"
        android:scaleType="centerCrop"/>
</LinearLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:id="@+id/layout_days"
    android:layout_below="@+id/layout_two"
    android:gravity="center"
    android:paddingTop="2dp"
    android:paddingBottom="2dp">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="22sp"
        android:text="@string/image_two"
        android:id="@+id/two"/>
<ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/digit_border"
        android:padding="2dp"
        android:adjustViewBounds="true"
        android:id="@+id/two1"
        android:src="@drawable/five"
        android:scaleType="centerCrop"/>
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/digit_border"
        android:padding="2dp"
        android:adjustViewBounds="true"
        android:id="@+id/two2"
        android:src="@drawable/five"
        android:scaleType="centerCrop"/>
</LinearLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:id="@+id/layout_three"
    android:layout_below="@+id/layout_days"
    android:gravity="center"
    android:paddingTop="2dp"
    android:paddingBottom="2dp">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="22sp"
        android:text="@string/image_three"
        android:id="@+id/three"/>
<ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/digit_border"
        android:padding="2dp"
        android:adjustViewBounds="true"
        android:id="@+id/three1"
        android:src="@drawable/five"
        android:scaleType="centerCrop"/>
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/digit_border"
        android:padding="2dp"
        android:adjustViewBounds="true"
        android:id="@+id/hour2"
        android:src="@drawable/three2"
        android:scaleType="centerCrop"/>
</LinearLayout>

You can assign the weight to your textView and set the gravity to right that way they will take same space for all three rows and gravity right will make sure text is right aligned. Below are the layout files you can set the weight as it works in your case.

First XML which has basic layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:paddingBottom="2dp"
    android:paddingTop="2dp" >

    <TextView
        android:id="@+id/one"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="0.2"
        android:gravity="right|center_vertical"
        android:text="text1 : "
        android:textSize="22sp" />

    <ImageView
        android:id="@+id/one1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="0.4"
        android:adjustViewBounds="true"
        android:padding="2dp"
        android:scaleType="centerCrop"
        android:src="@drawable/ic_launcher" />

    <ImageView
        android:id="@+id/one2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="0.4"
        android:adjustViewBounds="true"
        android:padding="2dp"
        android:scaleType="centerCrop"
        android:src="@drawable/ic_launcher" />
</LinearLayout>

Second XML which create full view

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:paddingBottom="2dp"
    android:paddingTop="2dp" >

    <include
        android:id="@+id/layout_one"
        layout="@layout/test_item" />

    <include
        android:id="@+id/layout_two"
        layout="@layout/test_item" />

    <include
        android:id="@+id/layout_three"
        layout="@layout/test_item" />

</LinearLayout>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM