How to manage the position of TextViews dynamically when screen size changes

Question

I have two textviews in one horizontal layout, the first is normal text and the second is clickable with a different color.

XML

   <!--inside rootlayout..-->

<LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_margin="10dp"
        android:orientation="horizontal">

        <TextView
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_gravity="center_horizontal"
          android:gravity="center_horizontal"
          android:maxLines="2"
          android:text="By clicking sign up, you agree to our "
          android:textColor="@color/black"
          android:textSize="12sp"/>

        <TextView
          android:textStyle="bold"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:gravity="center_horizontal"
          android:text="terms and conditions"
          android:textColor="@color/colorPrimary"
          android:textSize="12sp"
          android:clickable="true"/>

      </LinearLayout>

And It gives me a great look on large screens (4.7 inch and above), but when the screen size is lower, the second textview gets weird.! I want it to automatically position itself below the first textview or to make their parent layout orientation vertical..!!

here's how it looks.!

Update #1

why the ForegroundColorSpan won't change!? it always shows blue or black no matter what color resources I set.!??

private void handleTermsConditions() { 
    SpannableStringBuilder stringBuilder = new SpannableStringBuilder(termsTxt.getText());
    stringBuilder.setSpan(new StyleSpan(Typeface.BOLD), 38, 58, 0);
    int color = ContextCompat.getColor(RegistrationActivity.this, R.color.colorPrimary);
    ForegroundColorSpan fcs = new ForegroundColorSpan(color);
    stringBuilder.setSpan(fcs, termsTxt.getText().length() - 20, termsTxt.getText().length(),
        Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
    ClickableSpan clickableSpan = new ClickableSpan() {

      @Override
      public void onClick(View widget) {
        Toast.makeText(RegistrationActivity.this, "Click", Toast.LENGTH_SHORT)
            .show();
      }
    };

    stringBuilder.setSpan(clickableSpan, 38, 58, Spanned.SPAN_POINT_MARK); 
    termsTxt.setMovementMethod(LinkMovementMethod.getInstance());
    termsTxt.setText(stringBuilder);
  }

I think that it happens automatically... It depends on space, if it has enough space so it will be like in first screen — Asilbek Djamaldinov, Nov 25 '17 at 07:26

score 2 · Answer 1 · answered Nov 25 '17 at 08:18

2

The same question here or from the original document

answered Nov 25 '17 at 08:18

John Le

1,116
9
12

score 2 · Answer 2 · answered Nov 25 '17 at 08:33

DisplayMetrics displayMetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
int height = displayMetrics.heightPixels;
int width = displayMetrics.widthPixels;

getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);

Get the height and width of your device and use the values to decide whether to set screen to portrait or not:

if ((height == <value>) && (width == <value>)) {
setRequestedOrientation (ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
}

*Feel free to modify as required in your activity

vikas kumar · Accepted Answer · 2017-11-25T07:57:35.753

1

for your requirement you don't have to use 2 text views for this you can place a spannable string builder on just 1 text and put clickable as well as color property and you are done.

Code:

 TextView textView = findViewById(R.id.tvSample);
    SpannableStringBuilder stringBuilder  =new SpannableStringBuilder(textView.getText());
    stringBuilder.setSpan(new ForegroundColorSpan(Color.BLUE),textView.getText().length()-20,textView.getText().length(),Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
    stringBuilder.setSpan(new ClickableSpan() {
        @Override
        public void onClick(final View view) {
            Toast.makeText(MainActivity.this,"Click",Toast.LENGTH_LONG).show();
        }
    },textView.getText().length()-20,textView.getText().length(),Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
  textView.setText(stringBuilder);

Here is example of putting different spans on text view

This is how to set two spans on single text view

edited Nov 25 '17 at 07:57

answered Nov 25 '17 at 07:47

vikas kumar

10,447
2
46
52

why the `ForegroundColorSpan` won't change? I used a color from my res file but it always shows blue? here's the code `int color = getResources().getColor(R.color.colorPrimary);ForegroundColorSpan fcs =new ForegroundColorSpan(color);stringBuilder.setSpan(fcs,termsTxt.getText().length()-20,termsTxt.getText().length(),Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);` – Alaa AbuZarifa Nov 25 '17 at 10:11
int color = ContextCompat.getColor(context, R.color.your_color); – vikas kumar Nov 25 '17 at 10:38
still the same..! I posted the full code in Update #1. please have a look. – Alaa AbuZarifa Nov 25 '17 at 12:03

score 1 · Answer 4 · answered Nov 25 '17 at 07:56

1

You can set TextView Font size or width according to screen size using value folder. Try like this.

answered Nov 25 '17 at 07:56

Pamitha

46
3

score 1 · Answer 5 · answered Nov 25 '17 at 09:45

You can use most easy way Android Spannable property for doing this. and by that way you can do this work by single textview and can manage your click events.

Here is code for doing this.

public void setHighLightedText(TextView textView, String textToHighlight) {
    String tvt = textView.getText().toString();
    int ofe = tvt.indexOf(textToHighlight, 0);

    ClickableSpan clickableSpan = new ClickableSpan() {
        @Override
        public void onClick(View textView) {
 //            here you do all stuff
        }

        @Override
        public void updateDrawState(TextPaint ds) {
            super.updateDrawState(ds);
            ds.setColor(0xff0000ff);
            ds.setUnderlineText(true);
 // Here you can put your style on textview.
        }
    };

    SpannableString wordtoSpan = new SpannableString(textView.getText());

    for (int ofs = 0; ofs < tvt.length() && ofe != -1; ofs = ofe + 1) {
        ofe = tvt.indexOf(textToHighlight, ofs);
        if (ofe == -1)
            break;
        else {
            wordtoSpan.setSpan(clickableSpan, ofe, ofe + textToHighlight.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
            textView.setText(wordtoSpan, TextView.BufferType.SPANNABLE);
            textView.setMovementMethod(LinkMovementMethod.getInstance());
        }
    }
}

You can see onClick method in it. there you can set click or use callback if you put this code in Utility class.

Bonus

Also this is the right way to do this.

meditat · Answer 6 · 2017-11-25T07:41:20.860

0

Either use Fragments

OR

Try autoSizeText

<TextView
.......
android:autoSizeTextType="uniform"
................................../>

Here is something about it on android developer site

edited Nov 25 '17 at 07:41

answered Nov 25 '17 at 07:33

meditat

1,197
14
33

How to manage the position of TextViews dynamically when screen size changes

6 Answers6