I need to put two images one below the other in the center of the screen. They need to be in the center. the images will keep changing depending on the code so how do i get the images to work on all screens without moving or the size increasing or decreasing?
I tried using grid view but it seems too much code for two images. it works but is there anything more efficient?
For this type of design i always create a center point on screen,check below code -
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/image1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
android:layout_centerHorizontal="true"
android:layout_above="#+id/center_point" />
<View
android:id="#+id/center_point"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_centerInParent="true"/>
<ImageView
android:id="#+id/image2"
android:src="#drawable/ic_launcher"
android:layout_below="#+id/center_point"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true" />
it will surely works.
All the best
If u have always only 2 images, you can set it in xml file like that:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/image1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
<ImageView
android:id="#+id/image2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true" />
</RelativeLayout>
First image centers in parent and the second one centers horizontal and also aligns bottom of the screen.
Good luck.
Here this code may help you.You must create one LinearLayout and set him vertical orientation and layout_gravity = center horizontal.After that create two image views which are automatic position in center of the screen one below other.I hope this will help you.Happy coding :)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="center_horizontal">
<ImageView
android:id="#+id/image_view_two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
/>
<ImageView
android:id="#+id/image_view_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
</LinearLayout>
Make a vertical Linear-layout that contains both of your ImageViews and then set an equal layout_weight for both of them. Set the layout_centerInParent true for your Linear_layout
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/lock_layout_keypad"
android:orientation="vertical"
android:layout_centerInParent="true"
android:layout_marginBottom="4dp">
<ImageView
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:src="#drawable/ic_launcher"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<ImageView
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView2"
android:src="#drawable/ic_launcher"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
</LinearLayout>
You can remove android:layout_weight.
Related
I have a TextView and a square ImageView that I would like to show in a horizontal linear layout. Each should take half of the parent view's width and the height should fit the content (i.e. the image). The text should be centered vertically.
Additional constraint is that the image should not grow beyond a given maxWidth (= maxHeight), and excess width should be made available to the TextView. Obviously, this conflicts with the 50/50 rule above. Is there a way to prioritize the constraints, i.e. allow the image to take half of the space unless it exceeds a given size?
These are layouts I tried:
The first one nicely stretches the left side to the available space. But the image takes more than half of the width as its layout_weight is not specified (as in image below).
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="vertical"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Some text."/>
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxWidth="200dp"
android:adjustViewBounds="true"
android:src="#drawable/image" />
</LinearLayout>
When I add layout_weight to the ImageView it always takes half of the width and ignore the maxWidth (see image below).
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:maxWidth="200dp"
android:adjustViewBounds="true"
android:src="#drawable/image" />
Enclosing the ImageView in another LinearLayout enables the maxWidth again, but the enclosing LinearLayout still takes half of the available space (see image below).
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:maxWidth="200dp"
android:adjustViewBounds="true"
android:src="#drawable/image" />
</LinearLayout>
Another option I have found for similar scenarios is to use a RelativeLayout with an invisible view as a center divider, but that locks the division to 50/50 (or wherever the divider is placed).
Okay, gonna go on ahead and post the xml I created, it's pretty much simple, it does most of your conditions.. One thing I'm having trouble with is the part where each view takes half of the parent view's width. Hope this still helps you in some way.
sample_layout.xml
<?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="wrap_content"
android:layout_margin="2dp"
android:background="#android:color/darker_gray">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/img_sample"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginRight="2dp"
android:layout_toLeftOf="#id/img_sample"
android:background="#color/colorPrimary"
android:gravity="center_vertical"
android:text="Some text." />
<ImageView
android:id="#id/img_sample"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginLeft="2dp"
android:adjustViewBounds="true"
android:maxWidth="200dp"
android:src="#drawable/sample_img" />
</RelativeLayout>
Here is a sample screenshot:
If ever you figure out how to the the half of each thing, kindly comment it here, It'd be nice to know about it for possible future use. :)
PS: Have you considered doing the half of each thing programatically? Like checking the LayoutParams then dynamically setting weightSum and the layout_weights.
Sample Image retrieved from this link
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:layout_weight="1"
android:adjustViewBounds="true"
android:background="#color/blue"
android:src="#drawable/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:layout_margin="5dp"
android:layout_toStartOf="#id/imageView"
android:background="#color/colorPrimary"
android:padding="10dp"
android:text="Some text. " />
</RelativeLayout>
It won't be a perfect solution in term of performance. But you can achieve it by playing with FrameLayout and ImageView.
Here is the output:
Layout.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:background="#color/textGray"
android:orientation="vertical">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/skyBlue">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#android:color/white">
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxWidth="200dp"
android:src="#drawable/ic_settings"
android:visibility="invisible" />
<TextView
android:id="#+id/TextView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:text="!" />
</FrameLayout>
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:maxWidth="200dp"
android:src="#drawable/ic_settings" />
</LinearLayout>
</FrameLayout>
</LinearLayout>
In order to achieve desire behaviour, You would have to set same images to both imagesviews in this layout. one of them is invisble, It is just helping to make parent with same width and heights which would lead us to create TextView with same dimensions.
Note: If you want to change textView alignment, you can do it with layout_gravity or gravity.
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 need to design a layout with five ImageViews in horizontal orientation.
I can reach my idea with a basic LinearLayout, but I want a design pattern like the following image:
Note: All ImageViews are in oval design.
Any ideas?
you can overlap items in a LinearLayout using negative margins, but they won't stack in that order.
you could use a RelativeLayout instead. you'd lay out the items from outside to inside to achieve the desired stacking order.
here's an example with a fixed width:
<RelativeLayout android:layout_width="150dp" android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentLeft="true" android:layout_centerVertical="true" />
<ImageView
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentRight="true" android:layout_centerVertical="true" />
<ImageView
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentLeft="true" android:layout_centerVertical="true"
android:layout_marginLeft="25dp" />
<ImageView
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentRight="true" android:layout_centerVertical="true"
android:layout_marginRight="25dp" />
<ImageView
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_centerHorizontal="true" android:layout_centerVertical="true" />
</RelativeLayout>
if you don't have a fixed-width container, you'll have to calculate the margins in code with this approach.
of course, if you don't have a fixed width, you'll need code of some sort anyway as there's nothing built into android that's really meant for this sort of thing.
You can use a RelativeLayout for this task. Here's an example:
<?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">
<ImageView
android:id="#+id/img1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="-18dp" />
<ImageView
android:id="#+id/img2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/img1"
android:layout_marginRight="-18dp" />
<ImageView
android:id="#+id/img5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/img4"
android:layout_marginRight="-18dp"/>
<ImageView
android:id="#+id/img4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/img3"
android:layout_marginRight="-18dp" />
<ImageView
android:id="#+id/img3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/img2"
android:layout_marginRight="-18dp" />
</RelativeLayout>
Note that here, the last ImageView is the one that will be on top of all others.
You are looking for developing a Carousel kind of widgets. You can refer any Carousel implementation in android. Many are available, you can refer one here
https://code.google.com/p/carousel-layout-android/
I'm new to Android and everything went well until now I have to deal with the layout.
What I want is this layout:
Layout how it should be:
The image should be properly scaled and keep its ratio.
That's why I tried this XML code, but it doesn't work the way I want. The image keeps its ratio but the left and right side are out of the screen when vertical and cut at the top and bottom when horizontal:
Layout how it is:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:orientation="vertical"
android:background="#color/background">
<ImageView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center"
android:src="#drawable/logo"
android:gravity="center"
android:scaleType="centerCrop"
android:contentDescription="#string/app_logo"
android:layout_weight="2.5" />
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4"
android:gravity="center">
<Button
android:id="#+id/id1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="20dp"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:text="#string/text1"
android:textSize="40sp"
/>
<Button
android:id="#+id/id2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:text="#string/text2"
/>
<Button
android:id="#+id/id3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:layout_gravity="center"
android:text="#string/text3" />
</LinearLayout>
</LinearLayout>
I googled a lot but just could not find what I was looking for.
Please help!
It looks like android:scaleType="fitCenter" is what you are looking for
you have to design 2 layout for you vertical state and horizontal state and put them in two different folder in your android project:
while you put your regular layout in the layout folder you should put the landscape layout in the layout-land folder.
Try setting android:scaleType="fitXY" to your ImageView.
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>