I'm having this frustrating issue with my ScrollView, here is my hierarchy :
ScrollView (Vertical)
LinearLayout (Vertical)
ImageView weight= 0.5
Whatever weight= 0.1
Whatever weight= 0.2
Whatever weight= 0.2
If I remove the ScrollView (and let the LinearLayout as main item), this work properly with any Image : The image takes 50% of the screen size, and the other Views take fill the rest.
However, when the ScrollView is here, the "weight" parameter is completely ignored if my Image is too tall : The image will do anything it can to fit the screen width, and then will be obviously too tall and take more than 50% of the screen. EDIT : actually, all the "weight" attributes seem ignored :
Without ScrollView:
With ScrollView:
I want the Linear Layout to fit perfectly without having to Scrolling. Is that possible ? I've tried to change some of the image option (scaleType, adjustViewBounds) but I didn't manage to have what I wanted.
Here's the whole xml :
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="1">
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.5"
android:adjustViewBounds="true"
android:src="#drawable/testing" />
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.2"
android:text="I'M A TEST" />
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.1"
android:text="I'M A TEST" />
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.2"
android:text="I'M A TEST" />
</LinearLayout>
</ScrollView>
Note : I need the ScrollView because I'm using a PullToRefresh ScrollView
Maybe it's too late but your problem could be solved by adding android:fillViewport="true" to your ScrollView :
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true" >
I solved it by adding a parent Linear Layout (and a main relativeLayout) :
ScrollView (Vertical)
LineaLayout
LinearLayout (Vertical)
ImageView weight= 0.5
Whatever weight= 0.1
Whatever weight= 0.2
Whatever weight= 0.2
And setting programmatically the height of the child LinearLayout to the height of the screen with childLinearLayout.getLayoutParams().height
Try on this way .
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:adjustViewBounds="true"
android:padding="50dp"
android:src="#drawable/ic_launcher" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:padding="20dp"
android:text="I'M A TEST" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:padding="20dp"
android:text="I'M A TEST" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:padding="10dp"
android:text="I'M A TEST" />
</LinearLayout>
</ScrollView>
Related
I'm creating a tabbed activity. As long as the first tab is selected, the soft keyboard should be visible. I achieved that by adding this line to my manifest file in the activity tag:
android:windowSoftInputMode="stateVisible|adjustResize"
As the keyboard opens, the space for the layout shrinks. The most space is occupated by an ImageView. I want it to shrink with the layout size to allow the other 2 views (which should remain the same size) to fit on the screen. However, although the soft input mode is set to adjustResize, the ImageView keeps its size after the keyboard opens. Here's a comparison of the current layout and the one I want to achieve (the ImageView is the red rectangle):
comparison
My fragment's layout code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".DataInputFragment"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitStart"
android:src="#drawable/image"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/input_label_text"/>
<namespace.InputEditText
android:id="#+id/input_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
<requestFocus/>
</namespace.InputEditText>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/submit"
</LinearLayout>
</RelativeLayout>
My activity:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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/main_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:orientation="vertical"
tools:context=".MainActivity">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/TabLayout">
<android.support.design.widget.TabItem
android:id="#+id/tabItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tab_text_1" />
<android.support.design.widget.TabItem
android:id="#+id/tabItem2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tab_text_2" />
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</LinearLayout>
How to force the ImageView to resize according to the screen size to make all of the views fit on the screen?
[EDIT]: My attempt to create a ConstraintLayout, which didn't solve the problem (the ImageView still keeps its original size):
<?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:orientation="vertical"
tools:context=".DataInputFragment">
<ImageView
android:id="#+id/img"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitStart"
android:src="#drawable/image"
android:adjustViewBounds="true"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/input_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/input_label_text"
app:layout_constraintTop_toBottomOf="#id/img"/>
<namespace.InputEditText
android:id="#+id/input_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/input_label">
<requestFocus />
</namespace.InputEditText>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/submit"
app:layout_constraintTop_toBottomOf="#id/input_edit_text"/>
</android.support.constraint.ConstraintLayout>
I've created an Android Project from scratch on Android Studio 4.0, using the "Tabbed Activity" template and uploaded it to GitHub.
I've had no issues with the resize taking place when the activity is resized.
What Did I change?
In the manifest.xml I added android:windowSoftInputMode="adjustResize"
I modified the default layout for the fragment in the tab to include an ImageView (called imageToShrink) and an EditText (called editLayout).
I left the existing TextView untouched, except that since it's at the top, I made it the HEAD of the vertical Chain, and gave it a 0.0 BIAS to be aligned at the top, rather at the center.
When you tap on the cyan EditText at the bottom, the keyboard pops (I made it number only so it's even taller) and you can see how the image is re-drawn after its new size is recomputed.
This is how it looks when it opens: (beautiful color palette!)
And this is how it looks when I tap the "edit field" to pop the keyboard:
your ImageView should not have wrap_content attributes, because it will always have constant size and wont be able to resize automatically. I would suggest using ConstraintLayout and use app:layout_constraintDimensionRatio. Other option is use LinearLayout weight (not recommending).
Ant third option is to detect when keyboard is visible, when not with ViewTreeObserver.OnGlobalLayoutListener and do stuff programmaticaly.
Try 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="match_parent"
tools:context=".DataInputFragment">
<ImageView
android:id="#+id/img"
android:layout_width="match_parent"
android:layout_height="0dp"
android:adjustViewBounds="true"
android:scaleType="fitStart"
android:src="#drawable/image"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="3:1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/input_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/input_label_text"
app:layout_constraintTop_toBottomOf="#id/img" />
<EditText
android:id="#+id/input_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/input_label">
<requestFocus />
</EditText>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/submit"
app:layout_constraintTop_toBottomOf="#id/input_edit_text" />
</android.support.constraint.ConstraintLayout>
I want to separate the 4 icon with equal space like pic1.
And the XML code for pic1 is:
However, at the first time, I set the Blank View height as wrap_content, then the result showed like this:
.
The code for pic2 is:
.
The only difference is highlight by red rectangle.
In the case of this layout, you will get more from a ConstraintLayout.
Specifically, setting your icons within a ConstraintLayout would look like this to get the balanced look you're going for:
<?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:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/image_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/check"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#id/image_2"
app:layout_constraintHorizontal_chainStyle="spread_inside"/>
<ImageView
android:id="#+id/image_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/check"
app:layout_constraintStart_toEndOf="#id/image_1"
app:layout_constraintEnd_toStartOf="#id/image_3"
app:layout_constraintHorizontal_chainStyle="spread_inside" />
<ImageView
android:id="#+id/image_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/check"
app:layout_constraintStart_toEndOf="#id/image_2"
app:layout_constraintEnd_toStartOf="#id/image_4"
app:layout_constraintHorizontal_chainStyle="spread_inside" />
<ImageView
android:id="#+id/image_4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/check"
app:layout_constraintStart_toEndOf="#id/image_3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_chainStyle="spread_inside"/>
</androidx.constraintlayout.widget.ConstraintLayout>
The takeaways from this snippet that get your look are:
horizontal Orientation for the ConstraintLayout
Constraints for each ImageView that attach them to the one before and after
First view is constraint to the parent, specially, as is the last view
app:layout_constraintHorizontal_chainStyle="spread_inside", says to spread them out evenly within the available space.
If you don't want them touching the sides, add padding to the left/right of the parent ConstraintLayout.
Use this code in place of that linearlayout containing all the icons:
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content">
<!--keep your first icon code here-->
</LinearLayout>
<LinearLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content">
<!--keep your second icon code here-->
</LinearLayout>
<LinearLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content">
<!--keep your third icon code here-->
</LinearLayout>
<LinearLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content">
<!--keep your fourth icon code here-->
</LinearLayout>
</LinearLayout>
I am trying to use a linear layout as a row for my recyclerView/adapter, basically my row has 3 elements: an image, a textView and a checkButton with some text.
What I want is the image occupying like 50% of the width plus 40 height, so I set the weight of the image to 2.
Next I need to have another 50% layout that has the other 2 elements, and I want at the top right of the image the textView and at bottom the checkbox.
I already implemented this before with relative layouts, but the content didn't adapt to different devices, so I tried the linear layout and the weight property.
So this is what I have at the moment:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/plantPhoto"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:contentDescription="photo " />
<com.example.afcosta.inesctec.pt.android.Helpers.NexusBoldTextView
android:id="#+id/plantName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:textColor="#color/nephritis"
android:textSize="15sp" />
<CheckBox
android:id="#+id/plantCheck"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignStart="#+id/plantName"
android:layout_below="#+id/plantName"
android:layout_marginTop="25dp"
android:button="#drawable/customdrawablecheckbox"
android:textSize="10dp" />
</LinearLayout>
Here is the image of what I have at the moment:image
As I explained, I need the image to occupy the 50% width and the green text to be side on side with the photo at the right.
The checkbox must be below, any help??
Thanks
Try this,
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/plantPhoto"
android:layout_width="fill_parent"
android:layout_height="70dp"
android:layout_weight="0.5"
android:contentDescription="photo "
android:src="#drawable/placeholder" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.5">
<TextView
android:id="#+id/plantName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:textColor="#color/colorBlack"
android:textSize="15sp" />
<CheckBox
android:id="#+id/plantCheck"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/plantName"
android:layout_marginTop="5dp"
android:text="CheckBox"
android:textSize="15dp" />
</RelativeLayout>
</LinearLayout>
To me, it would have to be set with a Relative layout. Then for the elements to "adapt to different devices" you would need to set android:layout_width and height to wrap_content or fill_parent depending on what you want to achieve.
Set image weight to 50% which is .5, anything you add on that layout will be horizontal, so to solve that just add another layout at .5 weight and set it vertical.
You can try something like this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/plantPhoto"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:contentDescription="photo " />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<com.example.afcosta.inesctec.pt.android.Helpers.NexusBoldTextView
android:id="#+id/plantName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/nephritis"
android:textSize="15sp" />
<CheckBox
android:id="#+id/plantCheck"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginTop="25dp"
android:button="#drawable/customdrawablecheckbox"
android:textSize="10dp" />
</LinearLayout>
</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="10"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
android:layout_weight="2">
<TextView
android:id="#+id/centerText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:textColor="#FFFFFF"
android:textSize="28sp"
android:text="HALLO ALLE"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/centerText"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="10"
android:layout_weight="8"
android:orientation="horizontal">
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Btn 1"
android:layout_weight="2"/>
</LinearLayout>
Hi everybody, this is my code and I have a question about this I set a weightSum in the first LinearLayout I set the weightSum of 10, which the RelativeLayout has 2/10 and the other one (LinearLayout) has 8/10, as I saw in the preview of my IDE (Android Studio), the RelativeLayout is the bigger one here's my question:
The layout_weight with less value will be the bigger one?
No, the larger value for layout_weight should be the bigger one.
When using layout_weight you should set either the height or width to 0dp; in a vertical layout you're dealing with height and in a horizontal one it's width.
So in your case your root layout is a vertical LinearLayout. Within that, your relative layout with a weight of '2' should have android:layout_height="0dp" and the same for your LinearLayout with a weight of '8'.
From the documentation:
A larger weight value allows it to expand to fill any remaining space in the parent view
The key part here is "remaining space"
This means that if the RelativeLayout height is bigger them half of its parent height, it will be bigger then the LinearLayout no matter to what value you set its android:layout_weight property
I believe you are looking for something like this: (top takes up 20% bottom takes up 80%)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="5"
android:orientation="vertical">
<!-- Specify height as 0dp-->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#000000"
android:layout_weight="1">
<TextView
android:id="#+id/centerText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:textColor="#FFFFFF"
android:textSize="28sp"
android:text="HALLO ALLE"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/centerText"
android:text="Button top"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
<!-- Specify height as 0dp -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4"
android:orientation="horizontal">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Btn 1"/>
</LinearLayout>
</LinearLayout>
When dealing with layout weights you supply 0dp to the layout width or height of the weighted item when parents orientation is horizontal or vertical.
When ever using weights it is better to use corresponding one to 0dp and then use the layout_weight....like
In Case of android:orientation="horizontal"
Use the following code
android:layout_width="match_parent"
android:layout_height="0dp"
In Case of android:orientation="vertical"
Use the following code
android:layout_width="0dp"
android:layout_height="match_parent"
I would like to have this: a ViewPager overlaid by 2 arrows
And I get what I want by this code. However, I got these warnings of lint :
this layout is useless (for dummy layouts)
nested weights are bad for performance.
I wonder if there is a better way to get this UI as I want.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v4.view.ViewPager
android:id="#+id/dialog_instruction_pager"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</android.support.v4.view.ViewPager>
<!-- this LinearLayout overlays the ViewPager -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical" >
<!-- This is just the container for the left and right arrows , it is allocated with only 20% of screen height-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".2"
android:orientation="horizontal" >
<!-- I want to align this to the left and set width only 5% of the parent -->
<ImageButton
android:id="#+id/instruction_dialog_left_arrow"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".05"
android:background="?android:attr/selectableItemBackground"
android:scaleType="fitCenter"
android:src="#drawable/arrow_left_grey" />
<!-- This is the dummy layout, standing in the middle of 2 arrows so they can be align to the left and right of the parent -->
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".8" >
</LinearLayout>
<!-- I want to align this to the right and set width only 5% of the parent-->
<ImageButton
android:id="#+id/instruction_dialog_right_arrow"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".05"
android:background="?android:attr/selectableItemBackground"
android:scaleType="fitCenter"
android:src="#drawable/arrow_right_grey" />
</LinearLayout>
</LinearLayout>
P.S: Is there any layout that allows align children left, right, bottom (like RelativeLayout) and also allows set width, height as percentage (like "weight" attribute in LinearLayout)?
Thank you !
try this
to avoid this layout is useless (for dummy layouts) u should android:background="#android:color/transparent" and add dummy view in that linear layout because layout should not be empty.
to avoid nested weights are bad for performance add one child linear layout.
and read my comments in code
and added parent layout for imageview to make image vertically center
try this code
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="#+id/dialog_instruction_pager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></android.support.v4.view.ViewPager>
<!-- this LinearLayout overlays the ViewPager -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<!-- This is just the container for the left and right arrows , it is allocated with only 20% of screen height-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".2"
android:orientation="horizontal">
<!--child layout to avoid nested weight with `waighSum` property-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="100">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="5"
android:gravity="center_vertical"
android:orientation="horizontal">
<!-- I want to align this to the left and set width only 5% of the parent -->
<ImageButton
android:id="#+id/instruction_dialog_left_arrow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:attr/selectableItemBackground"
android:scaleType="fitCenter"
android:src="#drawable/icon_clock" />
</LinearLayout>
<!-- This is the dummy layout, standing in the middle of 2 arrows so they can be align to the left and right of the parent -->
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="90"
android:background="#android:color/transparent">// this line also makes layout usefull
<!-- dummy view becouse layout should not be empty -->
<View
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="5"
android:gravity="center_vertical"
android:orientation="horizontal">
<!-- I want to align this to the right and set width only 5% of the parent-->
<ImageButton
android:id="#+id/instruction_dialog_right_arrow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:attr/selectableItemBackground"
android:scaleType="fitCenter"
android:src="#drawable/icon_clock" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</FrameLayout>
hope it works for u
Google introduced new API called android.support.percent
1)PercentRelativeLayout
2)PercentFrameLayout
Add compile dependency like
compile 'com.android.support:percent:23.1.1'
You can specify dimension in percentage so get both benefit of RelativeLayout and percentage
<android.support.percent.PercentRelativeLayout
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"/>
<TextView
app:layout_widthPercent="40%"
app:layout_heightPercent="40%"
app:layout_marginTopPercent="15%"
app:layout_marginLeftPercent="15%"/>
</android.support.percent.PercentRelativeLayout/>
Try the below code and see whether it works,
This code will get the layout what you have attached
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<android.support.v4.view.ViewPager
android:id="#+id/dialog_instruction_pager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/theme_blue" >
</android.support.v4.view.ViewPager>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerInParent="true"
android:background="#drawable/ic_launcher" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerInParent="true"
android:background="#drawable/ic_launcher" />
</RelativeLayout>
Try using RelativeLayout and then set the left image to alignParentLeft and the right image to alignParentRight