CODEWITHSUNDEEP
androidandroid-layoutandroid-constraintlayout
Laranjeiro
Laranjeiro

Reputation: 2622

Android Uneven Design

I have an element that should remain centered in the layout and a button on the right size. The button width is variable.

The following design exemplify two scenarios.

Scenario 1: Long text button scenario 1 Scenario 2: Small text button scenario_2

The current solution is have an invisible duplicated button on the left. This is not ideal because the button look and feel may also vary for different locales. I have tried guidelines but that would require to define a percentage and I would prefer if it was dynamic. Barriers don't seem to work either because I would need them to be mirrored.

Any tips how to achieve this?

Upvotes: 2

Views: 181

Answers (4)

Laranjeiro
Laranjeiro

Reputation: 2622

I ended up using a different solution. I used two guidelines, one at 20% and another at 80%, to define the areas where the button could expand to.

enter image description here

When no button is available, I used the property app:layout_constrainedWidth="false" that ignores the constrainst and allow the title to expand to the available space.

enter image description here

I used this solution because I may need multiple buttons with different call to actions according to the selected language. It would be difficult to manage multiple hidden anchor buttons.

Upvotes: 1

Jackey
Jackey

Reputation: 3234

If I understand your pictures correctly, you want to have two elements on your screen:

  1. A View that's centered on the screen, it can be any width size.

  2. A Button that's positioned to the right of the View that can also be any width size. You want this button to be centered in the empty space between the View and the edge of the right screen.

You can try this: 

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <TextView
        android:id="@+id/view"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:gravity="center"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:text="1"
        android:textColor="#FFFFFF"
        android:background="#000000"
        />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toEndOf="@+id/view"
        app:layout_constraintEnd_toEndOf="parent"
        android:text="2"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

Upvotes: 0

vitorefo
vitorefo

Reputation: 21

Perhaps you can take advantage of the ConstraintLayoutStates: https://riggaroo.co.za/constraintlayout-constraintlayoutstates/

And have two layouts one for each scenario.

Upvotes: 1

Waged
Waged

Reputation: 420

Try doing width with 0dp and give them weight and change this in runtime may be they are in linear layout which is horizontal.

  LinearLayout.LayoutParams params = (LinearLayout.LayoutParams)   
  button.getLayoutParams();
  params.weight = 1.0f; // afterwards you can do the same with changing the weight
  button.setLayoutParams(params);

Upvotes: 1

Related Questions