How to specify in XML a percentage of width and height for a view?

Question

It is possible to add a ImageView inside a XML LinearLayout with the 15% of the width of the screen of width and also exactly the same height?

I tried it with this dialog code which is being displayed when a user clicks on a marker on the map:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/custom_info_bubble"
    android:orientation="vertical">
.
. [some more content here]
.
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="100">
        <ImageView
            android:id="@+id/favorite"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginRight="5dp"
            android:adjustViewBounds="true"
            android:layout_gravity="center_horizontal"
            android:layout_weight="15"
            android:layout_marginEnd="5dp" />
    </LinearLayout>
</LinearLayout>

But is has two problems:

Problem 1: android:layout_weight="15" makes 15% of the width of the dialog, not of the screen, and that's a huge problem, because the dialog has some times more or less width depending of its content.

Problem 2: the width is 15% ok but the height is the real height of the image. I don't know how to make it to have exactly the same height than it's width. Its a square image, so I tried make it respecting its proportions putting wrap_content on height and adjustViewBounds=true but it didn't work.

Problem 3: the ImageView is not being centered, is aligned to the left. I need it centered.

How can this be achieved with XML instead of Java code?

https://developer.android.com/reference/android/support/percent/PercentRelativeLayout.html — Vidhi Dave, Feb 27 '18 at 08:44
**FYI** @VishvaDave `PercentRelativeLayout` is deprecated in API level 26.1.0. — AskNilesh, Feb 27 '18 at 08:44
@NileshRathod Do you have any other option for this? post an answer — Vidhi Dave, Feb 27 '18 at 08:45
@VishvaDave go with **[ConstraintLayout](https://developer.android.com/reference/android/support/constraint/ConstraintLayout.html)** — AskNilesh, Feb 27 '18 at 08:46
@NileshRathod please can you post an example of how to achieve this with COnstraintLayout? i readed the documentation and didn't find the way to achieve it — NullPointerException, Feb 27 '18 at 08:47
@NullPointerException this may help you https://stackoverflow.com/questions/37318228/how-to-make-constraintlayout-work-with-percentage-values and this also https://stackoverflow.com/questions/42958168/constraint-layout-with-percentage-not-working-as-expected — AskNilesh, Feb 27 '18 at 08:49
Look at https://stackoverflow.com/questions/37318228/how-to-make-constraintlayout-work-with-percentage-values — Manohar, Feb 27 '18 at 09:06
@Redman it's impossible for me to understand how to achieve it please can you pust a sample code? — NullPointerException, Feb 27 '18 at 09:44
this https://stackoverflow.com/a/19449488/6478047 and this https://stackoverflow.com/a/46295558/6478047 together should do the trick for you — Manohar, Feb 27 '18 at 10:26

score 1 · Answer 1 · answered Feb 28 '18 at 21:51

This is how I do in XML, by this way my image height is equal to 15% of the screen width :

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/favorite"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:adjustViewBounds="true"
        android:src="@drawable/ic_launcher_background"
        app:layout_constraintDimensionRatio="H, 100:15"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</android.support.constraint.ConstraintLayout>

Look at the result :

Be aware of that works only for square images. ImageView itself take all the screen width. — Thomas Mary, Mar 01 '18 at 11:04

score 0 · Answer 2 · answered Feb 27 '18 at 08:49

0

No, AFAIK it's not possible via XML. But you can easy achieve it programmatically: if you want you can just create a custom view with the required parameters and just put it into XML. Look into https://stackoverflow.com/a/20427215/1159507 for reference.

answered Feb 27 '18 at 08:49

anber

3,463
6
39
68

Of course, it is possible via XML ! just watch here : https://stackoverflow.com/a/37369672/5154891 – Thomas Mary Feb 27 '18 at 08:52
1

@ThomasMary if I set percent value in `ConstraintLayout` it will be percent from parent layout, not percent of screen, is not it? – anber Feb 27 '18 at 08:55
@ThomasMary I'm checking that post but can't find how to set width and height please can you post an asnwer with your proposed solution? – NullPointerException Feb 27 '18 at 08:58

Mark Frick · Answer 3 · 2018-02-27T08:58:11.943

0

How to make it take up 15% of the screen width:

//Get 15% of screen width:
myWidth = getWindow().getDecorView().getWidth() * .15;

myImageView = findViewById(R.id.favorite);

myView.setWidth(myWidth);

//Height should be the same as the width
myView.setHeight(myWidth);

edited Feb 27 '18 at 08:58

answered Feb 27 '18 at 08:50

Mark Frick

61
1
5

i was asking by XML not by java – NullPointerException Feb 27 '18 at 08:57
i will consider your answer if no one solves this with xml – NullPointerException Feb 27 '18 at 09:18

score 0 · Answer 4 · answered Feb 27 '18 at 10:18

The following two lines say that the width of the image view will be determined in percents and it'll be relative to the parent.

app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent="0.15"

The following line means that the width and height of the imageview will be the same. The ratio is width:height.

app:layout_constraintDimensionRatio="1:1"

With Guidelines you get the ability to set % widths/heights in views under constraint layout. The following says that the guideline is 20% of its parent. You can then place views with constraint set to this Guidelines.

app:layout_constraintGuide_percent="0.2"

Below is a full example xml you can try out.

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.constraint.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.2" />

    <ImageView
        android:id="@+id/imageView5"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#423dfe"

        app:layout_constraintWidth_default="percent"
        app:layout_constraintWidth_percent="0.15"
        app:layout_constraintDimensionRatio="1:1"

        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"

        app:layout_constraintBottom_toTopOf="@+id/guideline" />

</android.support.constraint.ConstraintLayout>

You can only do this with the beta version of ConstraintLayout:

compile 'com.android.support.constraint:constraint-layout:1.1.0-beta1'

How to specify in XML a percentage of width and height for a view?

4 Answers4