I am trying to place two ImageButton in the corners of a LinearLayout as shown in figure below:
I have tried using the android:layout_gravity attribute with the value set to left and right for the two buttons. However, they show just next to each other as shown in image below:
How can I place the two image buttons in the corners of the LinearLayout? I have looked up a lot of previous answers and tried them but nothing seems to work. How can this placement of image buttons be done?
The XML of the layout is in the snippet below:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom|fill_horizontal"
android:orientation="horizontal">
<ImageButton
android:id="#+id/prev_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:contentDescription="#string/prev_button"
android:src="#drawable/arrow_left"/>
<ImageButton
android:id="#+id/next_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:contentDescription="#string/next_button"
android:src="#drawable/arrow_right"/>
</LinearLayout>
Use a RelativeLayout:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageButton
android:id="#+id/prev_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:contentDescription="#string/prev_button"
android:src="#drawable/arrow_left"/>
<ImageButton
android:id="#+id/next_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:contentDescription="#string/next_button"
android:src="#drawable/arrow_right"/>
</RelativeLayout>
A relativelayout is better for positioning views at the edges of the screen
there is another way to do this instead of using RelativeLayout by using a third View , layout xml code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<View
android:layout_width="0dp"
android:layout_weigth="1"
android:layout_height="0.5dp"
/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
this way is better than using RelativeLayout and makes your layout smoother
Related
I want to create a layout in Android that looks like this:
This is what i want the result to look like
So far, my code looks something like this:
<?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">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="13dp"
android:text="TextView"
android:textSize="24sp"
android:textStyle="bold" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="216dp"
android:layout_height="217dp"
android:layout_below="#+id/textView"
android:scaleType="fitStart"
android:adjustViewBounds="true"
android:layout_centerHorizontal="true"
android:background="#drawable/ic_launcher_background" />
</RelativeLayout>
if someone could help me with this it would be much appreciated
I suggest in this case using LinearLayout cause the layout is very simple.
Try it. Here the width of the images is halved exactly with the attribute android:layout_weight="1" in the ImageView1 and ImageView2 android:layout_weight="1", result weight is 2 (set in LinearLayout android:weightSum="2", try change it and you will see how it works).
Also, in more complex layouts, I suggest using ConstraintLayout instead RelativeLayout.
Good luck!
<?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:orientation="vertical">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="13dp"
android:paddingHorizontal="20dp"
android:paddingTop="20dp"
android:paddingBottom="40dp"
android:text="TextView"
android:textColor="#android:color/white"
android:layout_gravity="center_horizontal"
android:textSize="24sp"
android:textStyle="bold"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="2">
<ImageView
android:id="#+id/imageView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:layout_weight="1"
android:layout_marginRight="5dp"
android:background="#drawable/ic_launcher_background"/>
<ImageView
android:id="#+id/imageView2"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:scaleType="fitStart"
android:adjustViewBounds="true"
android:layout_marginleft="5dp"
android:layout_centerHorizontal="true"
android:background="#drawable/ic_launcher_background"/>
</LinearLayout>
</LinearLayout>
Use Constraint layout, you won't have to nest layouts. Just define the start, end, top, and bottom constraints of each view and then you have the layout you want. For example the two image views should have their top constrained to the bottom of the TextView, then the start of the left ImageView should be constrained to the start of parent container while the end of the right ImageView should be constrained to the end of the parent container. then constrain them against each other. i.e start of right ImageView against end of left ImageView and vice versa.
I'm trying to create a layout (which I could include in other layouts), which contains 3 Image buttons (back, menu, forward).
Those 3 Image buttons should be on the same line (because later I would include this layout to other layouts in the bottom of each layout)
I don't understand what I'm doing wrong, I can't see the all 3 Buttons, and they are not in the same row (same horizontal line)
<?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:orientation="horizontal">
<ImageButton
android:id="#+id/buttomMenuBack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Back"
android:background="#drawable/back_button"
android:onClick="onClickButtomMenu"/>
<ImageButton
android:id="#+id/buttomMenuMenu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Menu"
android:background="#drawable/HomButton"
android:onClick="onClickButtomMenu"/>
<ImageButton
android:id="#+id/buttomMenuForward"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Forward"
android:background="#drawable/forward_button"
android:onClick="onClickButtomMenu"/>
</LinearLayout>
it won't fit because it looks like some of your images are way too big, but we can proportionally weight it so it'll fit.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="3">
<ImageButton
android:id="#+id/buttomMenuBack"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Back"
android:background="#drawable/back_button"
android:onClick="onClickButtomMenu"/>
<ImageButton
android:id="#+id/buttomMenuMenu"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Menu"
android:background="#drawable/HomButton"
android:onClick="onClickButtomMenu"/>
<ImageButton
android:id="#+id/buttomMenuForward"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Forward"
android:background="#drawable/forward_button"
android:onClick="onClickButtomMenu"/>
</LinearLayout>
using weightSum and layout_weight, 3 and 1, we ensure they all each take 1/3 of the space in your linearlayout (oh, and layout_width is 0 because layout_weight overrides it)
You can use LinearLayout with orientation as "horizontal". This will make all the views appear in a row. This LinearLayout can reside as a nested layout inside a another layout, like for example RelativeLayout. You can use this layout design by importing it in other XMLlayouts too.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageButton
android:id="#+id/buttomMenuBack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Back"
android:background="#drawable/back_button"
android:onClick="onClickButtomMenu"/>
<ImageButton
android:id="#+id/buttomMenuMenu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Menu"
android:background="#drawable/HomButton"
android:onClick="onClickButtomMenu"/>
<ImageButton
android:id="#+id/buttomMenuForward"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Forward"
android:background="#drawable/forward_button"
android:onClick="onClickButtomMenu"/>
</LinearLayout>
Looks like different sized images.
Assuming you have these in a horizontal linear layout; Try changing the height to a fixed dp and put the weight to 1 for all three imagebuttons
Example:
<ImageButton
android:id="#+id/buttomMenuBack"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="35dp"
android:text="Back"
android:background="#drawable/back_button"
android:onClick="onClickButtomMenu"/>
If you do this for all three imagebuttons, they will fill the screen and all be the same height, right beside each other.
I have stuck in some xml code and i hope you can help me out.
So here is what I need/what I have done by now.
I have 3 images of 650px width and I need them one below another while keeping aspect ratio.
I did that with the following code and it looks as it should. No problem here.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/ll"
android:orientation="vertical"
android:background="#3afa3f"
android:weightSum="3">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/krk_history"
android:layout_weight="1"
android:background="#drawable/povjestkrka_vintage_yellow600" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/krk_frankopan"
android:background="#drawable/frankopan2_vintage_sundown600" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/krk_turizam"
android:background="#drawable/krk_turizam_vintage"/>
The problem is. I need to put three textviews in a left bottom corner of each image. Imagine it like image menu with text description on each image.
So, I can not use relative or frame layout because images won't play nicely with each other :) There is always a gap between or not aspect ration etc. I need weightsum.
Second, I can't hardcode the text on each image in photoshop because the app will be translated and text needs to change for each language.
I can have different images for each language but I am trying to avoid that.
Ah yea, one more last thing.
I tried to put entire linearlayout in relative layout and put the text between but the text appears beneath the image and I can't bring it upfront.
Any suggestions?
Thanks a lot,
Xsonz
just copy 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="match_parent"
android:orientation="vertical">
<FrameLayout android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left|bottom"
android:padding="5dp"
android:text="Text 1" />
</FrameLayout>
<FrameLayout android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left|bottom"
android:padding="5dp"
android:text="Text 2" />
</FrameLayout>
<FrameLayout android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageView
android:id="#+id/imageView3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left|bottom"
android:padding="5dp"
android:text="Text 3" />
</FrameLayout>
Take three FrameLayout inside your LinearLayout and inside FrameLayout keep the ImageView and TextView.
Or Else You can use RelativeLayout and give dependency to Views
You can use frame layout inside linear layout. create imageview inside the linear layout and create textview in another frame layout below it.
<FrameLayout
android:id="#+id/frameLayout_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/krk_history"
android:layout_weight="1"
android:background="#drawable/povjestkrka_vintage_yellow600" />
</FrameLayout>
<FrameLayout
android:id="#+id/frameLayout_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="-5dp" >
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="string" />
</FrameLayout>
Something like this might work for you.
//your layout -> LinearLayout>
....
<RelativeLayout android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/image1"
android:layout_weight="1"
android:background="#drawable/A1" />
<TextView android:id="#+id/textview1"
android:layout_margin="0dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="My Text"
android:layout_below="#id/image1"
android:layout_alignLeft="#id/image1" />
</RelativeLayout>
// end your LinearLayout
You can play with these parameters using Relative Layout Parameters android.com. The relative layout allows you to control the "relative" positioning between your elements.
You can lay your images out side by side, or in whatever fashion you wish.
Then you can adjust the text dynamically.
i am desinging a xml
<?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:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.05"
android:background="#000000"
android:orientation="horizontal" >
<Button
android:id="#+id/btncancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left|center"
android:background="#CCCCCC"
android:text="Cancel" />
<Button
android:id="#+id/btnadd"
android:layout_width="82dp"
android:layout_height="wrap_content"
android:gravity="right"
android:background="#3399FF"
android:text="Add" />
</LinearLayout>
</LinearLayout>
for button "Add" android:gravity=right is not working.i have give a layout:margin,then only its moving right.can anyone help me out.
It's a little unclear what you want, but do notice the following:
gravity affects the contents of the widget i.e. your button text.
layout_gravity affects positioning of the widget in the parent layout
So if you want the button to be on right, change gravity to layout_gravity.
Use RelativeLayout instead of LinearLayout.
and use android:layout_alignParentRight="true" for btnadd.
EDIT :
Code :
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.05"
android:background="#000000"
android:orientation="horizontal" >
<Button
android:id="#+id/btncancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left|center"
android:background="#CCCCCC"
android:text="Cancel" />
<Button
android:id="#+id/btnadd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_gravity="right"
android:background="#3399FF"
android:text="Add" />
</RelativeLayout>
Change the LinearLayout to be as RelativeLayout
and instead of android:gravity="right" use android:layout_alignParentRight="true"
It is because you use LinearLayout (orientation horizontal)
Try to use relative layout
you are using linear layout in linear layout your layout depends on orientation like you are using vertical:
use relative layout instead to solve your problem,and give margins you want
also to align your button right use:
android:layout_alignParentRight="true"
your problem would definetly be solved with this.
it was because of you are using android:orientation="horizontal"in Linear Layout
use this android:orientation="vertical"
or use this i modified your code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/RelativeLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.05"
android:background="#000000"
android:orientation="horizontal" >
<Button
android:id="#+id/btncancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="#CCCCCC"
android:text="Cancel" />
<Button
android:id="#+id/btnadd"
android:layout_width="82dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#3399FF"
android:text="Add" />
</RelativeLayout>
If you want to achieve something like this:
You can do that either with RelativeLayout or LinearLayout.
For LinearLayout you explicitely add space between the buttons. This is because the android:layout_gravitypositions the view only within the space, that LinearLayout has given. And this space is not the LinearLayout itself, but the sum of all views, that were layed out linearly (as the name says).
Here's my way of putting the two buttons:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<Button
android:id="#+id/btnadd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Add" />
<ImageView
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#android:color/transparent" />
<Button
android:id="#+id/btncancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cancel" />
</LinearLayout>
I always prefer LinearLayout over RelativeLayout as I experienced LinearLayout as more robust, especially on Android's 2.x versions.
BTW: The difference between android:layout_gravity and android:gravity:
The layout_gravity tells the parent layout of a view to position the whole view within the bounds that the layout defines. In case of LinearLayout this is the space that was allocated by linearly putting the views one after the other.
The gravity tells the view to position its foreground within the available space. You might have seen, that your Add-Button has shown the text on the right side.
Searched all day and came up with a poor solution i think.
i want three ImageButton placed on the right sida of the screen.
Not centered but just above center position..
With the code below i get the result i want but,
If the user have a bigger screen they will not have this position right?
I have tried the android:gravityall day and all i can do with it is
to center the three buttons very nicely.
What should i use to make the three buttons always stay at the positions that
they are on the image belove.
i have the button image in 3 different sizes in hdpi,mdpi,xhdpi folder.
<RelativeLayout
android:id="#+id/rightRelativeLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<ImageButton
android:id="#+id/btn_A"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="100dp"
android:text="A"
android:src="#drawable/drawer_1"
android:background="#android:color/transparent"
android:layout_alignParentRight="true"
/>
<ImageButton
android:id="#+id/btn_B"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="B"
android:src="#drawable/drawer_1"
android:background="#android:color/transparent"
android:layout_alignParentRight="true"
android:layout_below="#+id/btn_A"
/>
<ImageButton
android:id="#+id/btn_C"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="C"
android:src="#drawable/drawer_1"
android:background="#android:color/transparent"
android:layout_alignParentRight="true"
android:layout_below="#+id/btn_B"
/>
</RelativeLayout>
Picture of the three buttons placed on the right side, and my daughter of course.
One option would be to put all three buttons within a LinearLayout (for simplicity's sake) and then set the layout of this container programmatically.
You can see the size of the screen using getResources().getDisplayMetrics().heightPizels and then set the top margin accordingly.
You could add a LinearLayout inside the RelativeLayout, and then use the following properties on the LinearLayout:
android:layout_alignParentRight="true"
android:layout_gravity="center_vertical"
EDIT: Ok, I've done some testing and found a way of doing what you want without the use of styling it programatically, here's the xml:
<RelativeLayout
android:id="#+id/rightRelativeLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginBottom="80dip"
>
<LinearLayout
android:orientation="vertical"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true">
<ImageButton
android:id="#+id/btn_A"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A"
android:src="#drawable/icon"
android:background="#android:color/transparent"
/>
<ImageButton
android:id="#+id/btn_B"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B"
android:src="#drawable/icon"
android:background="#android:color/transparent"
/>
<ImageButton
android:id="#+id/btn_C"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="C"
android:src="#drawable/icon"
android:background="#android:color/transparent"
/>
</LinearLayout>
</RelativeLayout>