Im trying to get two ImageViews side by side with a gap around the image. Ive been using Padding, Margin etc and all have had the same effect (See Image Below)
as you can see the image on the right is shifted upwards, how do i stop this?
Here's the layout file im using:
<?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" >
<!-- Top Row -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/tab_headlines"
android:src="#drawable/headlines"
android:layout_margin="5sp"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/tab_headlines"
android:src="#drawable/headlines"
/>
</LinearLayout>
I am going to be using more rows of images hence the extra LinearLayout
Use layout_weight to divide your layout equally. Try the following code:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<!-- Top Row -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="6dp"
android:layout_marginRight="3dp"
android:layout_weight="1"
android:contentDescription="#string/tab_headlines"
android:src="#drawable/headlines" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="3dp"
android:layout_marginRight="6dp"
android:layout_weight="1"
android:contentDescription="#string/tab_headlines"
android:src="#drawable/headlines" />
</LinearLayout>
</LinearLayout>
Also, never use sp for specifying layout dimensions. Use dp instead.
You have given layout_margin for left side image and didn't give for the right side image.That's where the issue lies. If you want only two images in a row and if the image size is same for the both then you can make use of layout_weight attribute and give padding for space in between them.
so,try this. It will work.
<!-- Top Row -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:contentDescription="#string/tab_headlines"
android:src="#drawable/headlines"
android:padding="3dp"
/>
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:contentDescription="#string/tab_headlines"
android:src="#drawable/headlines"
android:padding="3dp"
/>
</LinearLayout>
To fix Vertical alignment :
Use android:layout_height="match_parent" in your ImageView
by using android:layout_height="match_parent" inside ImageView it will be matched to its parent your LinearLayout which is android:layout_height="wrap_content"
Now Question arises why the height will be same for both ImageViews ?
Reason your parent LinearLayout's Height will be automatically chosen from ImageView Whose height is greater because of android:layout_height="wrap_content" in your LinearLayout !
and by using android:layout_height="match_parent" you will be using same height for ImageView whose height is smaller !
To Fix Horizontal alignment :
use android:layout_weight="equal weight value for btoh"
change your code to
<ImageView
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:contentDescription="#string/tab_headlines"
android:src="#drawable/headlines"
android:layout_margin="5sp"
/>
<ImageView
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:contentDescription="#string/tab_headlines"
android:src="#drawable/headlines"
/>
Related
I am using the following layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="2dp"
android:layout_marginTop="10dp"
android:background="#drawable/cardview_shadow"
android:elevation="2dp"
android:gravity="center_vertical"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="2dp"
android:gravity="fill_horizontal"
android:orientation="horizontal">
<ImageView
android:id="#+id/ic_find_previous_holo_dark"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="left"
android:src="#drawable/ic_find_previous_holo_dark" />
<ViewFlipper xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/view_flipper"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/emoji_u1f33c" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/emoji_u1f33c" />
</ViewFlipper>
<ImageView
android:id="#+id/ic_find_next_holo_dark"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="right"
android:src="#drawable/ic_find_next_holo_dark" />
</LinearLayout>
</LinearLayout>
I want left arrow to the left & right arrow to the right & center layout to fill the center gap without giving exact width in dp, px etc but i m not able to achieve this layout. i need this type of layout most of the time
In your case you need to give android:layout_weight=1 to your ViewFlipper So that it can take rest of the space left by your other 2 image views (Will push both views to the sides since ViewFlipper is the middle view). A better explanation is given here https://developer.android.com/guide/topics/ui/layout/linear.html check the Layout Weight section.
I need to put some ImageButton with equal space in layout(something like the picture I attached).
I checked a lot of similar posts like:
Android: How to make all elements inside LinearLayout same size?
give equal space between ImageViews
What is android:weightSum in android, and how does it work?
However they didn't help me.
Using margin and padding didn't solve my problem, because I want to have equal space around ImageButton. It is important for me to keep the space equal in any device. Also I want to set size to my ImageButton. It's a rounded image so the height and width of image should be equal . When I use weightsum, I can't set arbitrary width as layout_width for ImageButton.
Thanks for helping me.
P.S. This is not duplicate post. In the first link which i brought, it is not possible to set equal space. It just put objects next to each other.
This is a layout with 2 ImageButton with arbitrary size:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:context="info.androidhive.materialdesign.activity.HomeFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#drawable/background_home">
<ImageButton
android:layout_width="#dimen/log_guid_image_height"
android:layout_height="#dimen/log_guid_image_height"
android:onClick="onLastClick"
android:id="#+id/btn_menu_last"
android:background="#drawable/menu_last" />
<ImageButton
android:layout_width="#dimen/log_guid_image_height"
android:layout_height="#dimen/log_guid_image_height"
android:onClick="onAddClick"
android:id="#+id/btn_menu_add_records"
android:background="#drawable/menu_add_records" />
</LinearLayout>
I added android:layout_weight="1" to each ImageButton, and set android:layout_width="0px" and it gave me this:
The problem is that how I can add equal space around ImageButton and gave arbitrary size to them!!!
You can use TableLayoutas below:
<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="left|top"
android:stretchColumns="*">
<TableRow
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/imageButton" />
<ImageButton
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageButton2" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageButton
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageButton3" />
<ImageButton
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageButton4" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageButton
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageButton5" />
<ImageButton
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageButton6" />
</TableRow>
</TableLayout>
You can you use a inner LinearLayout at the place of ImageButton to customize your ImageButton position.
Try this:-
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/background_home"
android:weightSum="1" >
<ImageView
android:id="#+id/btn_menu_last"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:onClick="onLastClick"
android:src="#drawable/menu_last" />
<ImageView
android:id="#+id/btn_menu_add_records"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:onClick="onAddClick"
android:src="#drawable/menu_add_records" />
</LinearLayout>
Just nest LinearLayouts like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:gravity="center"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:gravity="center"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
Put ImageButtons inside each LinearLayouts.
Using LinearLayout and getting equal space is essentially the same idea as the past Q&A you read.
And inside these equal spaced cells, you can put ImageButtons with layout_gravity="center" (or gravity="center" with LinearLayout as shown abobe).
I think for this problem you need use a GridView and specify columnWidth option.
I don't know how to align 3 elements side by side. I would like to have :
One view with a thin width on the left
One linearLayout with text content on the middle
One imageView always on the right
Like this :
And today, i got this :
Here is my code :
<?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:background="#color/gris_clair"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#color/blanc" >
<View
android:id="#+id/view1"
android:layout_width="7dp"
android:layout_height="90dp"
android:background="#color/green_normal" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
<ImageView
android:id="#+id/imageView1"
android:layout_width="80dp"
android:layout_height="90dp"
android:layout_gravity="right"
android:scaleType="centerCrop"
android:src="#drawable/test2" />
</LinearLayout>
</LinearLayout>
You can simplify your layout by setting the root LinearLayout to a horizontal orientation:
<?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:background="#color/gris_clair"
android:layout_margin="5dp"
android:orientation="horizontal" >
<View
android:id="#+id/view1"
android:layout_width="7dp"
android:layout_height="match_parent"
android:background="#color/green_normal" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="TextView" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="80dp"
android:layout_height="90dp"
android:layout_gravity="right"
android:scaleType="centerCrop"
android:src="#drawable/test2" />
</LinearLayout>
You may want to tweak the colors or sizes to fit your desired end result.
I set the parent View's height to wrap the content, first two Views to match the parent view's height and the image to your size. This means that your image will decide the parent View's height.
If you want to evenly space/scale the views horizontally on your screen and use up all the space they have available you should look at the android:layout_weight attribute. You would set android:layout_width="0dp" for each View you want to scale with screen size and add android:layout_weight="x" where x is a number.
The number you choose will depend on how you want to divide up the available space each View will use. As an example if you wanted one View to use 1/3rd of the available space with a second using 2/3rds then set the first to 1 and the second to 2. 1+2=3 so 1 of a total 3 units and 2 of a total 3 units.
For your textview use weight to fill up space:
<TextView
android:id="#+id/textView1"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="TextView" />
You can use relative layout for that. and for the image view add alignparentright rule.
<RelativeLayout >
<View />
<LinearLayout/>
</LinearLayout>
<ImageView
android:alignParentRight="true" />
</RelativeLayout>
or use the weight for linearlayout, put 1 for textview and rest 0.
You can easy solve this problem using weight in LinearLayout, or make your parent RelativeLayout and place middle layout toLeftOf your left view and toRightOf your right view.
You can use relative Layout instead of linear layout to design custom design of your page.
It might help you.
<?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:background="#color/gris_clair"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#color/blanc" >
<View
android:id="#+id/view1"
android:layout_width="7dp"
android:layout_height="90dp"
android:background="#color/green_normal" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView1"
android:layout_width="80dp"
android:layout_height="90dp"
android:scaleType="centerCrop"
android:src="#drawable/test2"
android:layout_alignParentRight="true"
/>
</RelativeLayout>
</LinearLayout>
check this it might help you
I have three linear layouts in a sidebar. I want the first to fill whatever space remains and the other two will specify their height. The problem I'm having is that the first view is not stretching to fill the height at all. See my code below.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#FF44807f"
android:id="#+id/musicSideBar">
<!-- I want this layout to fill whatever vertical space remains -->
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="0dp"
android:background="#FF003938"
android:layout_weight="1">
</LinearLayout>
<!-- this has a list of ImageView, so I set it to wrap_content -->
<LinearLayout
android:layout_below="#id/sidebarHeader"
android:id="#+id/mediaControls"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="8dp"
android:paddingTop="8dp"
android:paddingRight="8dp"
android:paddingBottom="8dp"
android:background="#FF095150"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/play_pause_btn"
android:src="#drawable/play_icon"
style="#style/media_button"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/stop_btn"
android:src="#drawable/stop_icon"
style="#style/media_button"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/prev_btn"
android:src="#drawable/prev_icon"
style="#style/media_button"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/next_btn"
android:src="#drawable/next_icon"
style="#style/media_button"
/>
</LinearLayout>
<!-- A custom view that I specify it's height in onMeasure using setMeasuredDimensions -->
<jaywhy13.gycweb.components.NowPlayingView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FF44807f"
android:paddingTop="10dp"
/>
</LinearLayout>
It works like I think it should in Android Studio Preview
But it doesn't work when I run it through the emulator.
You can see that for the simulator, the linear layout doesn't stretch at all.
layout_weight wont work like this for this to work properly you need to set layout weight to all the layouts inside LinearLayout that will fix the height of all 3 layouts which you don't want.
You should just set height of first layout to match_parent and next layouts to wrap_content and set the gravity of the parent layout to bottom.
This will put bottom most layout first with height wrap_content then it will put 2nd layout with height wrap_content and last the top most layout with whatever height is left
example:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#FF44807f"
android:gravity="bottom" <!--here-->
android:id="#+id/musicSideBar">
<!-- I want this layout to fill whatever vertical space remains -->
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent"
android:background="#FF003938"
>
</LinearLayout>
<!-- this has a list of ImageView, so I set it to wrap_content -->
<LinearLayout
android:layout_below="#id/sidebarHeader"
android:id="#+id/mediaControls"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="8dp"
android:paddingTop="8dp"
android:paddingRight="8dp"
android:paddingBottom="8dp"
android:background="#FF095150"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/play_pause_btn"
android:src="#drawable/play_icon"
style="#style/media_button"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/stop_btn"
android:src="#drawable/stop_icon"
style="#style/media_button"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/prev_btn"
android:src="#drawable/prev_icon"
style="#style/media_button"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/next_btn"
android:src="#drawable/next_icon"
style="#style/media_button"
/>
</LinearLayout>
<!-- A custom view that I specify it's height in onMeasure using setMeasuredDimensions -->
<jaywhy13.gycweb.components.NowPlayingView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FF44807f"
android:paddingTop="10dp"
/>
</LinearLayout>
Try to replace outer LinearLayout with RelativeLayout. Works for me with android:layout_height="0dp" and android:layout_weight="1" in inner view.
I have a vertical LinearLayout containing an ImageView and a few other layouts and views.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:contentDescription="#string/banner_alt"
android:src="#drawable/banner_portrait" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/main_search"
android:gravity="center"
android:textStyle="bold" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Spinner
android:id="#+id/search_city_spinner"
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="1"
android:prompt="#string/search_city_prompt"
android:entries="#array/search_city_array" />
<Spinner
android:id="#+id/search_area_spinner"
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="1"
android:prompt="#string/search_area_prompt"
android:entries="#array/search_area_array" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Spinner
android:id="#+id/search_rooms_spinner"
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="1"
android:prompt="#string/search_rooms_prompt"
android:entries="#array/search_rooms_array" />
<Spinner
android:id="#+id/search_min_spinner"
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="1"
android:prompt="#string/search_min_prompt"
android:entries="#array/search_min_array" />
<Spinner
android:id="#+id/search_max_spinner"
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="1"
android:prompt="#string/search_max_prompt"
android:entries="#array/search_max_array" />
</LinearLayout>
<Button
android:id="#+id/saearch_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/search_button"
android:onClick="searchButton" />
</LinearLayout>
My problem is that when the activity is displayed, the ImageView has a padding at the top & bottom. I've confirmed it is the ImageView (by setting a background colour on the ImageView).
The image is 450x450px. Setting the height manually to 450px produces the desired effect (no padding), and setting it to 450dp produces the same effect as using wrap_content.
It seems that android is taking the height of the image (450px) and setting the height of the ImageView to the same value, but in dp.
Any ideas as to what I can do to fix this? I don't want to use absolute values as I'll be providing different images for different screen densities.
I had a simular issue and resolved it using android:adjustViewBounds="true" on the ImageView.
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:contentDescription="#string/banner_alt"
android:src="#drawable/banner_portrait" />