I have an app that have an activity with 3 imagebutton and a banner ad below. Something like this...
The ImageButton layout sizes are wrap-content, and each source is a png that i've made.
Now, when i've tested in a small screen the bottom one is behind the banner ad.
I want to scale the ImageButtons dending on the size (mainly the height) of the screen.
Can anyone tell me a correct way to do it?
I have to make small png sources that fits on a small screen and then make more drawables with minimal screen width qualifiers? 320dpi and 480dpi its a really big margin, i will have to make some more folders in between.
Thank you all in advance!!!
if you dont domain Constraint Layout, maybe you can try to use a LinearLayout inside your main layout with weight to divide the screen... something like below, it may work:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="4"
android:padding="10dp">
<ImageButton
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/..."/>
<ImageButton
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/..."/>
<ImageButton
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/..."/>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/..."/>
</LinearLayout>
</RelativeLayout>
Just adjust it as you want... Hope this work :)
You don't need to create separate images, you can use ConstraintLayout and it will manage the sizes for you automatically. I have tested the code below and it seems to work fine. Have a go at it:
your_activity.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/imageButton2"
android:background="#color/white"
android:src="#drawable/image_1"/>
<ImageButton
android:id="#+id/imageButton2"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/imageButton1"
app:layout_constraintBottom_toTopOf="#id/imageButton3"
android:background="#color/white"
android:src="#drawable/image_2"/>
<ImageButton
android:id="#+id/imageButton3"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/imageButton2"
app:layout_constraintBottom_toTopOf="#id/bannerContainer"
android:background="#color/white"
android:src="#drawable/image_3"/>
<!-- Whatever container your banner is in -->
<RelativeLayout
android:id="#+id/bannerContainer"
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="#000"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Note:
I have added the background colors just to test out. The main point to focus on for you is that the height of the ImageButton is 0dp for all, and the constraints manage the height automatically.
The good part of ConstraintLayout is that you don't need to specify different weights like you would in a LinearLayout, so you can have images of different heights and it will work just fine.
If you are using css you can use the property unit vh (viewport height). The measurement is a percentage of the viewport/screen height. For example height: 10vh; width: auto; will render the element height as 10% of the screen height, without distorting your png. If you use this measurement for the four elements shown, they will all appear on the screen at the same time if their values add up to 100.
https://www.sitepoint.com/css-viewport-units-quick-start/
Related
I've got 8 security cams that I'd like to place side by side in 2x4 form in a fragment in android. I decided first to place the first VLCVideoLayout element and adjust it's size to take 50% of the width and 25% of the height:
<?xml version="1.0" encoding="utf-8"?>
<layout 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">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".FragmentCams">
<org.videolan.libvlc.util.VLCVideoLayout
android:id="#+id/lineChart"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintHeight_percent="0.25"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="0.5" />
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
and thought, I'd try to copy/paste it 7 times and arrange them as I like. But even before I started copy-pasting and re-arranging it, I noticed that I unable to set the size of the vlcvideolayout element to 50%/25% of the size of the screen (it just fills up the entire screen).
I also tried to put them under <view></view>. This help setting the size, but the application keeps crashing once I navigate to the fragment.
Anyone succeeded placing multiple vlc's on a single fragment?
The reason that VLCVideoLayout's appear to ignore the height and width constraints you set for them turns out to be because they actually do ignore the values you set - see the code extract below from the VLCVideoLayout class:
#Override
protected void onAttachedToWindow() {
super.onAttachedToWindow();
setBackgroundColor(getResources().getColor(android.R.color.black));
final ViewGroup.LayoutParams lp = getLayoutParams();
lp.height = ViewGroup.LayoutParams.MATCH_PARENT;
lp.width = ViewGroup.LayoutParams.MATCH_PARENT;
setLayoutParams(lp);
}
(Source: https://github.com/SteinerOk/libvlc-sdk-android/blob/master/libvlc-android/src/main/java/org/videolan/libvlc/util/VLCVideoLayout.java)
It can be seen from this that the VLCVideoLayout will always simply match its parents height and width.
Knowing this, you can put the layout inside a layout element that has the dominions you want - see below an example layout that is tested and successfully plays 3 RTSP streams in 3 separate VLCVideoLayout's sized as shown:
<?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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linear1"
android:layout_width="300dp"
android:layout_height="200dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/linear2"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:orientation="vertical" >
<org.videolan.libvlc.util.VLCVideoLayout
android:id="#+id/videoLayout3"
android:layout_width="300dp"
android:layout_height="200dp"
android:background="#color/design_default_color_error"
android:visibility="visible" />
</LinearLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linear2"
android:layout_width="300dp"
android:layout_height="200dp"
app:layout_constraintTop_toBottomOf="#id/linear1"
app:layout_constraintBottom_toTopOf="#id/linear3"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:orientation="vertical" >
<org.videolan.libvlc.util.VLCVideoLayout
android:id="#+id/videoLayout4"
android:layout_width="300dp"
android:layout_height="200dp"
android:background="#color/design_default_color_error"
android:visibility="visible" />
</LinearLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linear3"
android:layout_width="300dp"
android:layout_height="200dp"
app:layout_constraintTop_toBottomOf="#id/linear2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:orientation="vertical" >
<org.videolan.libvlc.util.VLCVideoLayout
android:id="#+id/videoLayout5"
android:layout_width="300dp"
android:layout_height="200dp"
android:background="#color/design_default_color_error"
android:visibility="visible" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Note, that while this definitely works and plays back video successfully I can't comment on the efficiency of putting linear layouts inside constrained layouts, given that the current advice it to use Contrained layouts over Linear for efficiency. You could experiment with nesting constrained layouts instead, although again nesting layouts may not be efficient. It does work, however...
Note also that using an overall linear layout, rather than the constrained layout, works also - again I can't comment on which is more efficient from performance and memory etc point of view as I have not explored further and compared.
I'm facing troubles with a TableLayout here. My goal would be to make two columns with equal width, each one with one image that should adjust it's width so it fits inside the cell's available space, but it seems the images keep overflowing outside the available space in the cell/row. I have tested some properties without luck so far, so I could use some help here.
This is the current outcome in the design view:
I'd have expected the teddy bear to occupy only 50% of the row width at the left, and then the other image (which is an umbrella) to fit into the remaining 50% at the right of the bear. But you see that's not what's happening.
This is the layout code:
<?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/rootLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".view.DebugFragment">
<TableLayout
android:id="#+id/tableImages"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:stretchColumns="*"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TableRow
android:layout_width="0dp"
android:layout_height="wrap_content">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
app:srcCompat="#drawable/teddy_bear" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
tools:srcCompat="#drawable/umbrella" />
</TableRow>
</TableLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
UPDATE: Following Jakob F advice of replacing stretchColumns with shrinkColumns solves the issue with the image overflowing the layout boundaries, but breaks the requirement of both columns being of same width. See image:
UPDATE: Keeping the stretchColumns="*" and setting the layout_width of each image to 0dp does the trick of keeping them inside the layout boundaries AND make both columns the same with. Now I just have to figure out how to keep them at the same height, but that's a different issue I think.
UPDATE: Adding android:scaleType="fitStart" to both images aligns both of them to the top as desired, but it keeps adding space under the images for no reason (I have changed the background color so the limits of the images are more obvious).
You need to use android:shrinkColumns="*" instead of android:strechColumns="*" to make all columns shrinkable, so that the width is automatically determined to fit the images on screen. Stretching them would only enable them to become larger.
OK, I managed to solve all the issues by myself. Can't help but complain on how difficult such an obvious task can become sometimes in Android. I had to go over a lot of trial and error with a number of different attributes which functionality seem anything but obvious in most cases. Anyway, this is the solution:
<?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/rootLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#99ffff"
tools:context=".view.DebugFragment">
<TableLayout
android:id="#+id/tableImages"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:stretchColumns="*"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="top">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:adjustViewBounds="true"
android:padding="16dp"
app:srcCompat="#drawable/teddy_bear" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:adjustViewBounds="true"
android:padding="16dp"
app:srcCompat="#drawable/umbrella" />
</TableRow>
</TableLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
The result:
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?
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 :
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.
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);
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'
Related SO posts: 1 2 3
Further reading: Constraint Layout
I have a screen that contains some TextViews and an ImageView inside a LinearLayout with vertical orientation. I would like the whole thing to fit exactly in the screen (no matter what its size is) where the ImageView is the one that adjusts itself to accommodate this.
I've seen here a few variations of this question (including this) but didn't find anything that really answers my requirement.
So far i've used a solution which is not very "pretty", which is putting the entire LinearLayout inside a ScrollView, and use a custom ImageView that on its onMeasure method calculates the delta between the height of the ScrollView to the height of the screen. If the former is larger than the latter then the delta is subtracted from the ImageView's measured height.
This solution is not perfect and i would really like to know if there is a better one. Im sure there is.
Appreciate your help.
EDIT: here is the layout xml
<com.xxx.widgets.LockableScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:custom="http://schemas.android.com/apk/res/com.venews"
android:layout_width="match_parent"
android:layout_height="match_parent"
custom:scrollable="false"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="#dimen/login_horizontal_margin"
android:paddingRight="#dimen/login_horizontal_margin"
android:orientation="vertical">
<com.xxx.widgets.ResizableToFitScreenImageView android:id="#+id/login_logo_image"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="#dimen/login_logo_margin"
android:layout_marginBottom="#dimen/login_logo_margin"
android:src="#drawable/ic_logo_and_name"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView android:id="#+id/login_username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"/>
<TextView android:id="#+id/login_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/login_username"/>
(...Other stuff...)
</RelativeLayout>
</LinearLayout>
</com.xxx.widgets.LockableScrollView>
EDIT2: and here's a sketch that i hope will make things clearer.
The sketch is showing 2 different screen sizes cause this solution would need to support also different devices with different screen sizes.
On the ImageView, set android:layout_height="0dp" and android:layout_weight="1". This will cause it to fill the remaining space (more about layout_weight here).
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
Is there a method to have the height depending from the width in my xml?
I have some Buttons in a linear layout. The button's widths depending from the device because they fill the screen horizontally. I want to have square buttons and this is my problem.
Is there one can help me?
<Button
android:id="#+id/b_0xa"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:clickable="false"
android:text="#string/b_0xa" />
To make the height of view equals to width of view, can use ConstraintLayout
app:layout_constraintDimensionRatio="1:1"
1 before : is for width
1 after : is for height
Please try below code:
<?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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<Button
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:text="Button"/>
</androidx.constraintlayout.widget.ConstraintLayout>
The output of above code is:
You can do it easily programatically in your Java code.
Get the width of the button dynamically [using int x = mButton.getWidth()], and then use the value returned to set the height [mButton.setHeight(x)].
P.S. : It is advisable to use LayoutParams to set the height and width of any View. So, instead of using setHeight(), you should use setLayoutParams().
mButton.setLayoutParams(new LinearLayout.LayoutParams(x, x));
You should change the values given to the android:layout_width and android:layout_height, by assigning fixed values to them
<Button
android:id="#+id/b_0xa"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_weight="1"
android:clickable="false"
android:text="#string/b_0xa" />
Assigning fixed values to them makes sure that no matter the screen size, your button stays the same, since the unit used is the dp. Make sure the values you assign are the same since you want a square.
In this scenario, I would recommend using layout_weight for your height attribute, it will then assign a proportional weight to the button that will scale on different screen sizes:
<Button
android:id="#+id/b_0xa"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".4"
android:clickable="false"
android:text="#string/b_0xa" />
In order for this approach to work, you must apply a weight to the height of other views in the layout. The total weight must equal 1, therefore you will have to play around with the layouts and weights to achieve the optimal design.
As I explained here if you want to do it 100% from XML you can use a PercentRelativeLayout and do the following:
<android.support.percent.PercentRelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
app:layout_aspectRatio="100%"
app:layout_widthPercent="100%" />
</android.support.percent.PercentRelativeLayout>
Make sure you include the library in your app gradle file:
compile 'com.android.support:percent:XX.X.X'
You can achieve this using Constraint Layout. I am using aspect ratio attribute and an absolute value for width for the button. When my Button hits the constraints as per it's width, it'll accordingly set my height.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<Button
android:id="#+id/b_0xa"
android:clickable="false"
android:text="#string/app_name"
android:layout_width="300dp"
android:layout_height="0dp"
android:src="#android:drawable/dark_header"
app:layout_constraintDimensionRatio="h,16:9"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<Button
android:id="#+id/random"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_weight="1"
android:text="text view"
/>
Make sure You give this code or change the height and width manually