Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android- Setting width of a TextView to left of either button-1 or button-2

Background:
I've a TextView and two (custom) buttons to the right of the TextView. The 2 buttons and the TextView are included in a Single RelativeLayout. Now, at any point of time, either button-1 or button-2 will be visible. Since I won't be knowing which button will be visible, in my code for both buttons, I've added

android:layout_toRightOf="@+id/MyTextView" 

property in the XML file. Which works fine. This places the button based on the position (and width) of the TextView.

The issue:
After language change, I have to change the width of the TextView based on the width of the Button to its right. I tried minWidth/maxWidth for both the buttons and the TextView as well, but they still don't allow dynamic resizing of the TextView based on the button's width.

Is there anyway where I can specify:

android:layout_toLeftOf="@+id/button1 | @+id/button2"

i.e, TextView to left of either button-1 or button-2. So that the text view will be aligned based on the button to the right?

Note:
I prefer a solution that needs changing the XML Layout file (static) rather than adding code in java (activity) file.

like image 421
TheLostMind Avatar asked Aug 04 '14 06:08

TheLostMind


3 Answers

You can keep the two buttons in a RelativeLayout and place that RelativeLayout in another RelativeLayout, then put the TextView as alignLeft of RelativeLayout:

Sample code from my app: You will need to modify as per your own

<RelativeLayout
    android:id="@+id/header_container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">        

    <RelativeLayout
        android:id="@+id/image_container"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true" >

        <ImageView
            android:id="@+id/settings_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginRight="2dip"
            android:contentDescription="@string/setting_desc"
            android:src="@drawable/top_settings"
            android:visibility="gone" />
        <ImageView
            android:id="@+id/logout_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@id/settings_img"
            android:contentDescription="@string/logout_desc"
            android:src="@drawable/top_quit"
            android:visibility="gone" />
    </RelativeLayout>

    <ImageView
        android:id="@+id/logo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@+id/image_container"
        android:layout_centerVertical="true"
        android:contentDescription="@string/logo_desc"
        android:src="@drawable/top_logo" />
</RelativeLayout>

So your views will adjust fine while any of the ImageView is visible.

like image 55
MysticMagicϡ Avatar answered Sep 27 '22 18:09

MysticMagicϡ


The issue : After language change, I have to change the width of the TextView based on the width of the Button to its right. I tried minWidth/maxWidth for both the buttons and the TextView as well, but they still don't allow dynamic resizing of the TextView based on the button's width.

Okay.

Here we go:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >


    <TextView
        android:id="@+id/tv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="ABCDEFGHIJKLMNOPQRSTUVWXYZ"
        android:maxLines="1"
        android:ellipsize="end"
        android:layout_toLeftOf="@+id/fl" />

    <FrameLayout
        android:id="@id/fl"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true" >

        <Button
            android:id="@+id/bb1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="HELLO 1" />

        <Button
            android:id="@+id/bb2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="HELLO 2" />

    </FrameLayout>

</RelativeLayout>

What's happening?

We have grouped the Buttons in a FrameLayout. So, your concern Is there anyway where I can specify : android:layout_toLeftOf="@+id/button1 | @+id/button2" has been addressed - now, we only need to tell the TextView to be on left of the FrameLayout.

Next, we have set the TextView's width to match_parent. This is necessary. If the TextView's width was set to be wrap_content, the TextView would appear to be right-aligned.

Plus, we need the Buttons to stick to the right edge (from what I could gather from your question). So, we set the layout_alignParentRight="true" attribute on the FrameLayout.

The maxLines and ellipsize attributes ensure that the text stays presentable.

If I somehow misunderstood the question, please explain in comment(s) below.

And that's pretty much it.

like image 25
Vikram Avatar answered Sep 27 '22 18:09

Vikram


I would recommend using a LinearLayout with a layout_weight property on the TextView. I have made a basic example of how you would implement this.

MainActivity.java

package com.example.test;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;

public class MainActivity extends Activity {

    public static final String TAG = MainActivity.class.getSimpleName();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        final Button btnOne = (Button) findViewById(R.id.btnOne);
        final Button btnTwo = (Button) findViewById(R.id.btnTwo);

        final Button btnHideOne = (Button) findViewById(R.id.btnHideOne);
        final Button btnHideTwo = (Button) findViewById(R.id.btnHideTwo);
        final Button btnShowAll = (Button) findViewById(R.id.btnShowAll);

        btnHideOne.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                btnOne.setVisibility(View.GONE);
            }
        });

        btnHideTwo.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                btnTwo.setVisibility(View.GONE);
            }
        });

        btnShowAll.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                btnOne.setVisibility(View.VISIBLE);
                btnTwo.setVisibility(View.VISIBLE);
            }
        });
    }
}

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp"
    tools:context="${packageName}.${activityClass}" >

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

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#979797"
            android:text="Text Text Text" />

        <Button
            android:id="@+id/btnOne"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Normal" />

        <Button
            android:id="@+id/btnTwo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Long Text" />
    </LinearLayout>

    <Button
        android:id="@+id/btnHideOne"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="Hide Button 1" />

    <Button
        android:id="@+id/btnHideTwo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hide Button 2" />

    <Button
        android:id="@+id/btnShowAll"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Show All" />

</LinearLayout>
like image 29
Willie Nel Avatar answered Sep 27 '22 18:09

Willie Nel