Android(kotlin, java) - LayoutParams, Viewgroup to change margin, width, and height in code

 

 

This article is an example of LayoutParams. 

 

Sometimes, you want to change propertis of view like margin or width in code. It is for that.

 

 

what we need to know to use LayoutParams is ViewGroup. There are FrameLayout, Linearlayout, ConstraintLayout and RelativeLayout as ViewGroup. we can include child view like TextView, Button, and EditText. To use LayoutParams, we have to access ViewGroup. If ViewGropu(ParentView) is LinearLayout and ChildView TextView, we should get layoutParams of LinearLayout to change width of TextView. 

 

I will keep the explanation short and show an example right away.

 

 

 

Video preview

 

 

 

 

 

 

 

1. activity_layout_params.xml

In this xml, There are 3 TextView and 1 Button. ViewGroup of tvFirst is ConstraintLayout. ViewGroup of tvSecond is LinearLayout. ViewGroup of tvThirdis FrameLayout.

I will change size and position of each TextView.

 

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/constraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".viewControl.layoutParams.LayoutParamsActivityKotlin">


    <TextView
        android:id="@+id/tvFirst"
        android:layout_width="150dp"
        android:layout_height="60dp"
        android:layout_marginTop="30dp"
        android:background="#9C27B0"
        android:gravity="center"
        android:text="First"
        android:textColor="#fff"
        android:textSize="20dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <LinearLayout
        android:id="@+id/llSecondWrap"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:layout_marginTop="20dp"
        android:background="#009688"
        android:orientation="vertical"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tvFirst">

        <TextView
            android:id="@+id/tvSecond"
            android:layout_width="150dp"
            android:layout_height="50dp"
            android:background="#8BC34A"
            android:gravity="center"
            android:text="Second"
            android:textColor="#fff"
            android:textSize="20dp" />
    </LinearLayout>


    <FrameLayout
        android:id="@+id/frameLayout"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:layout_marginTop="50dp"
        android:background="#00BCD4"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/llSecondWrap">

        <TextView
            android:id="@+id/tvThird"
            android:layout_width="150dp"
            android:layout_height="80dp"
            android:layout_gravity="center"
            android:background="#FF5722"
            android:gravity="center"
            android:text="Third"
            android:textColor="#fff"
            android:textSize="20dp" />

    </FrameLayout>

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:layout_marginHorizontal="20dp"
        android:layout_marginBottom="30dp"
        android:text="변경"
        android:textSize="20dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

 

 

 

2. LayoutParamsActivityKotlin

There are 3 ways. I leave a short comment. If you see code, you can understand this mechanism.

class LayoutParamsActivityKotlin : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_layout_params)

        button.setOnClickListener {
            changeTextViewSize()
        }
    }

    private fun changeTextViewSize() {

        //It get layoutParams of view. you can not change margin of view.
        // If you want to change width or height of view, It is good
        var params = tvFirst.layoutParams
        params.width = getDP(this, 250).toInt()
        tvFirst.layoutParams = params


        val marginParams: LinearLayout.LayoutParams =
            LinearLayout.LayoutParams(tvSecond.layoutParams)
        marginParams.setMargins(30, 300, 0, 0)
        tvSecond.layoutParams = marginParams


        //If you don't set margin value and set only width and height,
        //view is sticky on top and left
        val thirdParams = FrameLayout.LayoutParams(
            getDP(this, 250).toInt(),
            getDP(this, 100).toInt()
        )
        thirdParams.setMargins(50, 50, 0, 0)

        tvThird.layoutParams = thirdParams

    }

    fun getDP(context: Context, value: Int): Float {
        return TypedValue.applyDimension(
            TypedValue.COMPLEX_UNIT_DIP,
            value.toFloat(),
            context.resources.displayMetrics
        )
    }
}

 

 

 

 

3. LayoutParamsActivityJava

It is java code. The content is the same.

 

public class LayoutParamsActivityJava extends AppCompatActivity {

    private ActivityLayoutParamsBinding binding;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        binding = ActivityLayoutParamsBinding.inflate(getLayoutInflater());
        setContentView(binding.getRoot());

        binding.button.setOnClickListener(v -> {
            changeTextViewSize();
        });

    }


    private void changeTextViewSize() {

        ViewGroup.LayoutParams params = binding.tvFirst.getLayoutParams();
        params.width = getDP(this, 250);
        binding.tvFirst.setLayoutParams(params);


        LinearLayout.LayoutParams marginParams = (LinearLayout.LayoutParams) binding.tvSecond.getLayoutParams();
        marginParams.setMargins(30, 300, 0, 0);
        binding.tvSecond.setLayoutParams(marginParams);


        FrameLayout.LayoutParams thirdParams = new FrameLayout.LayoutParams(
                getDP(this, 250),
                getDP(this, 100)
        );
        thirdParams.setMargins(50, 50, 0, 0);
        binding.tvThird.setLayoutParams(thirdParams);

    }


    public int getDP(Context context, int value) {
        return (int) TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_DIP,
                value,
                context.getResources().getDisplayMetrics());
    }
}

 

 

 

 

Befor image

 

 

 

After image