Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

How to set layout weight in ConstraintLayout

Tags:

android

android-constraintlayout

I have 4 views & I need to divide them in group of 2 & then make them cover spread in the area.

I have try using Group & chainStyle but nothing could satisfy 100%.

I want, enter image description here

I have managed to make this, enter image description here

Code for the same is given below,

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorBtnPink"
android:paddingTop="@dimen/_10sdp"
android:padding="@dimen/_10sdp">

<ImageView
    android:id="@+id/ivFb"
    android:layout_width="@dimen/_40sdp"
    android:layout_height="@dimen/_40sdp"
    android:background="@color/colorBgBtnFbDark"
    android:clickable="false"
    android:padding="@dimen/_10sdp"
    app:layout_constraintHorizontal_chainStyle="spread"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:srcCompat="@drawable/ic_facebook"
    tools:ignore="ContentDescription" />

<TextView
    android:id="@+id/tvFacebook"
    style="@style/tvSmallPopMedium"
    android:layout_width="0dp"
    android:layout_height="@dimen/_40sdp"
    android:background="@color/colorBgBtnFacebook"
    android:clickable="false"
    android:gravity="center"
    android:paddingBottom="@dimen/padding_regular"
    android:paddingTop="@dimen/padding_regular"
    android:text="@string/action_facebook"
    app:layout_constraintHorizontal_chainStyle="spread"
    app:layout_constraintLeft_toRightOf="@+id/ivFb"
    app:layout_constraintTop_toTopOf="parent" />


<ImageView
    android:id="@+id/ivTwitter"
    android:layout_width="@dimen/_40sdp"
    android:layout_height="@dimen/_40sdp"
    android:background="@color/colorBgBtnTwDark"
    android:clickable="false"
    android:padding="@dimen/_10sdp"
    app:layout_constraintHorizontal_chainStyle="spread"
    app:layout_constraintLeft_toRightOf="@+id/tvFacebook"
    app:layout_constraintTop_toTopOf="parent"
    app:srcCompat="@drawable/ic_twitter"
    tools:ignore="ContentDescription" />

<TextView
    android:id="@+id/tvTwitter"
    style="@style/tvSmallPopMedium"
    android:layout_width="0dp"
    android:layout_height="@dimen/_40sdp"
    android:background="@color/colorBgBtnTwitter"
    android:clickable="false"
    android:gravity="center"
    android:paddingBottom="@dimen/padding_regular"
    android:paddingTop="@dimen/padding_regular"
    android:text="@string/action_twitter"
    app:layout_constraintHorizontal_chainStyle="spread"
    app:layout_constraintLeft_toRightOf="@+id/ivTwitter"
    app:layout_constraintTop_toTopOf="parent" />
 </android.support.constraint.ConstraintLayout>
like image 832
buzzingsilently Avatar asked May 29 '18 06:05

buzzingsilently

People also ask

How do I set the weight of a constraint layout?

If you were to set Weight values in the Constraint Layout via code, you would typically set layout_width or layout_height to 0dp in the chain direction. You would then set the Weight, which would set the position based on the weight ratio.

How to create a weighted linearlayout in XML?

To achieve this in XML we just create a app:layout_constraintTop_toBottomOf constraint from a view to the one preceding it in the flowed layout: To create the equivalent of a weighted LinearLayout we must first create a chain as detailed here: Now that a chain is set up, all we need to do is apply weights to individual views within the chain.

How do I add a view to a constraintlayout?

Video 1. The left side of a view is constrained to the left side of the parent Drag a view from the Palette window into the editor. When you add a view in a ConstraintLayout, it displays a bounding box with square resizing handles on each corner and circular constraint handles on each side. Click the view to select it.

What are the constraintlayout constraints in AutoCAD?

Constraints overview. To define a view's position in ConstraintLayout, you must add at least one horizontal and one vertical constraint for the view. Each constraint represents a connection or alignment to another view, the parent layout, or an invisible guideline.

2 Answers

You can also use guideLines property something like this:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorBtnPink"
android:padding="@dimen/_10sdp"
android:paddingTop="@dimen/_10sdp">

<ImageView
    android:id="@+id/ivFb"
    android:layout_width="@dimen/_40sdp"
    android:layout_height="@dimen/_40sdp"
    android:background="@color/colorBgBtnFbDark"
    android:clickable="false"
    android:padding="@dimen/_10sdp"
    app:layout_constraintHorizontal_chainStyle="spread"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:srcCompat="@drawable/ic_facebook"
    tools:ignore="ContentDescription" />

<TextView
    android:id="@+id/tvFacebook"
    style="@style/tvSmallPopMedium"
    android:layout_width="0dp"
    android:layout_height="@dimen/_40sdp"
    android:background="@color/colorBgBtnFacebook"
    android:clickable="false"
    android:gravity="center"
    android:paddingBottom="@dimen/padding_regular"
    android:paddingTop="@dimen/padding_regular"
    android:text="@string/action_facebook"
    app:layout_constraintHorizontal_chainStyle="spread"
    app:layout_constraintLeft_toRightOf="@+id/ivFb"
    app:layout_constraintRight_toLeftOf="@id/ivTwitter"
    app:layout_constraintTop_toTopOf="parent" />


<android.support.constraint.Guideline
    android:id="@+id/guideline2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.5" />


<ImageView
    android:id="@+id/ivTwitter"
    android:layout_width="@dimen/_40sdp"
    android:layout_height="@dimen/_40sdp"
    android:layout_marginLeft="8dp"
    android:layout_marginStart="8dp"
    android:background="@color/colorBgBtnTwDark"
    android:clickable="false"
    android:padding="@dimen/_10sdp"
    app:layout_constraintHorizontal_chainStyle="spread"
    app:layout_constraintLeft_toRightOf="@+id/tvFacebook"
    app:layout_constraintStart_toStartOf="@+id/guideline2"
    app:layout_constraintTop_toTopOf="parent"
    app:srcCompat="@drawable/ic_twitter"
    tools:ignore="ContentDescription" />

<TextView
    android:id="@+id/tvTwitter"
    style="@style/tvSmallPopMedium"
    android:layout_width="0dp"
    android:layout_height="@dimen/_40sdp"
    android:background="@color/colorBgBtnTwitter"
    android:clickable="false"
    android:gravity="center"
    android:paddingBottom="@dimen/padding_regular"
    android:paddingTop="@dimen/padding_regular"
    android:text="@string/action_twitter"
    app:layout_constraintHorizontal_chainStyle="spread"
    app:layout_constraintLeft_toRightOf="@+id/ivTwitter"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

See if this completes your requirement.

like image 82
Umair Avatar answered Sep 22 '22 23:09

Umair

You should modify your code as below

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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:layout_width="match_parent"
android:layout_height="wrap_content">

<ImageView
   android:id="@+id/ivFb"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_marginStart="32dp"
   android:clickable="false"
   app:layout_constraintBottom_toBottomOf="parent"
   app:layout_constraintEnd_toStartOf="@+id/tvFacebook"
   app:layout_constraintHorizontal_bias="0.0"
   app:layout_constraintHorizontal_chainStyle="spread"
   app:layout_constraintStart_toStartOf="parent"
   app:layout_constraintTop_toTopOf="parent"
   app:srcCompat="@drawable/ic_android_black_24dp"
   tools:ignore="ContentDescription" />

<TextView
   android:id="@+id/tvFacebook"
   android:layout_width="0dp"
   android:layout_height="wrap_content"
   android:layout_marginEnd="16dp"
   android:clickable="false"
   android:gravity="center"
   android:text="Facebook"
   app:layout_constraintBottom_toBottomOf="@+id/ivFb"
   app:layout_constraintEnd_toStartOf="@+id/ivTwitter"
   app:layout_constraintHorizontal_bias="0.5"
   app:layout_constraintHorizontal_chainStyle="spread"
   app:layout_constraintStart_toEndOf="@+id/ivFb"
   app:layout_constraintTop_toTopOf="parent" />


<ImageView
   android:id="@+id/ivTwitter"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_marginStart="16dp"
   android:clickable="false"
   app:layout_constraintBottom_toBottomOf="parent"
   app:layout_constraintEnd_toStartOf="@+id/tvTwitter"
   app:layout_constraintHorizontal_bias="0.5"
   app:layout_constraintHorizontal_chainStyle="spread"
   app:layout_constraintStart_toEndOf="@+id/tvFacebook"
   app:layout_constraintTop_toTopOf="parent"
   app:srcCompat="@drawable/ic_android_black_24dp"
   tools:ignore="ContentDescription" />

 <TextView
   android:id="@+id/tvTwitter"
   android:layout_width="0dp"
   android:layout_height="wrap_content"
   android:layout_marginEnd="32dp"
   android:clickable="false"
   android:gravity="center"
   android:text="Twitter"
   app:layout_constraintBottom_toBottomOf="@+id/ivTwitter"
   app:layout_constraintEnd_toEndOf="parent"
   app:layout_constraintHorizontal_bias="0.5"
   app:layout_constraintHorizontal_chainStyle="spread"
   app:layout_constraintStart_toEndOf="@+id/ivTwitter"
   app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

It will look likethis

I modified your code for arranging elements in constraint layout, Now you can modify the code as per your need :)

like image 44
H. Goyal Avatar answered Sep 26 '22 23:09

H. Goyal
Sign in to Comment

Related questions

using webrtc code on my cordova app
Android Kotlin + Klaxon - Parsing a JSON root array
How to HTTP request by POST method with Kotlin [duplicate]
Avoid ConcurrentModificationException using Iterator.next()
System UI has stopped emulator when requesting permissions
How to use gradle to replace Google Maps API key?
Android Spannable multiple setSpan in one TextView
Read characteristic value using Android BLE
android firebase 12.0.0 - mAuth.getCurrentUser().getProvider() method is removed, how to get provider names?
Oreo: Broadcast receiver Not working
Drawable already belongs to another owner but does not expose a constant state
RecyclerView Horizontal Scrollview example How to create horizontal recyclerview ? Horizontal scrollview example
Can TimePicker be used without header on Android
Getting the path to SD card
How to use wildcards in a SQLite query?
Firebase android works on the emulator but not on the device
RxJava2. Execute a request for every item in a list
Navigation Architecture Component - Unable to navigate to fragment from onResume
Cordova Plugin customize application class
Quick Settings Tile in ACTIVE state on boot when ACTIVE_TILE enabled

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!