如何正确放置视图以使所有视图在“线性布局”中可见？

Question

I have a horizontal linear layout with 3 elements, an icon and two text views:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <ImageView
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_margin="8dp"
        android:background="@drawable/icon_place" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:maxLines="1"
        android:text="Information 1"
        android:textColor="@android:color/black"
        android:textSize="14sp"
        android:textStyle="bold" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Information 2"
        android:gravity="right"
        android:textSize="13sp"
        android:maxLines="1"
        android:textColor="@android:color/darker_gray"
        android:layout_margin="8dp"/>

</LinearLayout>

Giving me this :

I want the second text view "Information 2" to always stay visible, the first text view being cropped if needed. But here is what happens with a long text in the first text view:

So what should I do instead? Thanks for your help!

Answer 1

Firstthing you set android:maxLines = 1 to enforce your textviews to visiable at one line. If you want your textview cropped itself based on content. Remove below code from xml.

android:maxLines="1"

Second thing your first textview take remaining space of linear layout other than second textview and imageview you must use android:weight property of linearlayout. you can see the simple layout weight property as per your need here. https://developer.android.com/guide/topics/ui/layout/linear.html

Weightsum equalweights distributed weights all you need for complex linear layouts. See this tutorial for help http://abhiandroid.com/ui/linear-layout

Here is the Code

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/recycler_view_empty"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="visible">


<ImageView
    android:layout_width="20dp"
    android:layout_height="20dp"
    android:layout_margin="8dp"
    android:background="@drawable/ic_menu_send" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    android:layout_weight="1"
    android:text="Information 1 IInformation Information InformationInformationvvvInformation Information"
    android:textColor="@android:color/black"
    android:textSize="14sp"
    android:textStyle="bold" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Information 2"
    android:textSize="13sp"
    android:maxLines="1"
    android:textColor="@android:color/darker_gray"
    android:layout_margin="8dp"/>

</LinearLayout>

Output:

In Editor View

Answer 2

You can wrap your two TextViews in a horizontal LinearLayout splitting it into two equal size parts by using the weightsum attribute. You can also ellipsize the text if it is too long.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <ImageView
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_margin="8dp"
        android:background="@drawable/icon_place" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="2">

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:maxLines="1"
            android:gravity="center_horizontal"
            android:layout_weight="1"
            android:text="Information 1 with a very very long test"
            android:ellipsize="end"
            android:textColor="@android:color/black"
            android:textSize="14sp"
            android:textStyle="bold" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="Information 2"
            android:gravity="center_horizontal"
            android:textSize="13sp"
            android:layout_weight="1"
            android:ellipsize="end"
            android:maxLines="1"
            android:textColor="@android:color/darker_gray"
            android:layout_margin="8dp"/>

    </LinearLayout>

</LinearLayout>

This is the result:

Answer 3

There is a concept of "android: weigth = 1" if you add it to all 3 components. then their width will always be 33.3%, and the width should not change when displaying long texts, if you want a width of about 10% 40% 40% then you will have to conjure with this tag, ksatai value is not accepted in the format 0.5 they need to write here in this format .5

Answer 4

You should set android:layout_weight="1" to the TextView in the middle and change match_parent by wrap_content for the 3rd TextView .

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

    <ImageView
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_margin="8dp"
        android:background="@drawable/ic_launcher_background" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:layout_weight="1"
        android:maxLines="1"
        android:text="Information 1"
        android:textColor="@android:color/black"
        android:textSize="14sp"
        android:textStyle="bold" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:gravity="right"
        android:maxLines="1"
        android:text="Information 2"
        android:textColor="@android:color/darker_gray"
        android:textSize="13sp" />

</LinearLayout>

here is the result screen

Answer 5

Use this one -

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout android:layout_width="match_parent"
        android:layout_height="wrap_content"
        xmlns:android="http://schemas.android.com/apk/res/android">

        <ImageView
            android:id="@+id/icon"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_margin="8dp"
            android:background="@android:drawable/ic_lock_idle_alarm" />

        <TextView
            android:layout_toRightOf="@+id/icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:maxLines="1"
            android:text="Information 1"
            android:textColor="@android:color/black"
            android:textSize="14sp"
            android:textStyle="bold" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:text="Information 2"
            android:layout_marginLeft="28dp"
            android:background="@android:color/white"
            android:gravity="right"
            android:textSize="13sp"
            android:maxLines="1"
            android:textColor="@android:color/darker_gray"
            android:layout_marginTop="8dp"
            android:layout_marginRight="8dp"/>

    </RelativeLayout>