I have two images--a play button on the left, and a boombox on the right. I am trying to scale the height and widths of these images to look like this
Though my code is producing this:
Essentially, the files are pretty big and not sized correctly, but I don't know why the boombox image is getting cut off. I want the whole boombox to fit, and then the play button to adjust its height according to the height of the boombox.
This is my layout code, though I think I need to make big changes:
<GridLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:stretchMode="columnWidth"
android:numColumns="2"
android:scaleType="fitXY"
>
<ImageView
android:id="#+id/play_stop_button"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_column="0"
android:src="#drawable/play_button_final"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:layout_column="1"
android:scaleType="fitXY"
android:src="#drawable/boombox"
android:id="#+id/boombox"
/>
</GridLayout>
Try this,
<GridLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:stretchMode="columnWidth"
android:numColumns="2"
android:scaleType="fitXY"
>
<ImageView
android:id="#+id/play_stop_button"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_column="0"
android:src="#drawable/play_button_final"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:layout_column="1"
android:scaleType="fitXY"
android:src="#drawable/boombox"
android:id="#+id/boombox"
/>
</GridLayout>
Related
We have built an online shopping app.
We have two layouts for gridview.
The first one:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="0dp"
android:paddingRight="0dp"
android:paddingTop="0dp"
android:paddingBottom="0dp"
tools:context=".HomeActivity">
<GridView
android:id="#+id/gridView"
android:numColumns="3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
</RelativeLayout>
And the second one for each gridview cell:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/singleCell"
android:layout_width="345px"
android:layout_height="400px"
android:background="#E6E6E6">
<ImageView
android:contentDescription="#string/hello_world"
android:id="#+id/profileImg"
android:layout_width="fill_parent"
android:layout_height="330px"
android:scaleType="fitXY"
android:layout_marginLeft="1px"
android:layout_marginTop="2px"/>
<TextView
android:id="#+id/friend_name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Name"
android:textColor="#000000"
android:textStyle="bold"
android:layout_marginTop="340px"
android:layout_marginLeft="20px"
android:textSize="13sp">
</TextView>
</FrameLayout>
The problem is that in some devices the gridview is displayed correctly like this and the ratio is ok.
gridview is displayed correctly on some devices
but in several other devices, the images height and ratio changes and the image is displayed incorrectly.
gridview is displayed incorrectly on some devices
We would be happy if you give us a solution and help us. This is a critical problem as the gridcell image height changes and gets longer in some devices.
You can try with changing the scale type of Imageview. Write this line
android:scaleType="centerCrop"
instead of
android:scaleType="fitXY"
#nazmul-hasan-masum, Thanks. I used your solution but at first the problem didn't get solved so I changed the imageview and text unit from px to the equivalent dp and everything is ok right now.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/singleCell"
android:layout_width="345px"
android:layout_height="400px"
android:background="#E6E6E6">
<ImageView
android:contentDescription="#string/hello_world"
android:id="#+id/profileImg"
android:layout_width="fill_parent"
android:layout_height="128dp"
android:scaleType="centerCrop"
android:layout_marginLeft="1px"
android:layout_marginRight="1px"
android:layout_marginTop="2px"/>
<TextView
android:id="#+id/friend_name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Name"
android:textColor="#000000"
android:textStyle="bold"
android:layout_marginTop="130dp"
android:layout_marginLeft="20px"
android:textSize="13sp">
</TextView>
</FrameLayout>
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 an layout with a background that already made for host my app's image buttons. my image buttons are in a row of middle in this layout. my emulator is 480*800 px hdpi that dp is:320*533.
when i adjust buttons from xml, everything is OK. but when run, my buttons change smaller than from size of in xml and layout is not ordered. please help me. what can i do?
myt xml code for this layout is:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/main">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/bottom_panel"
>
</ScrollView>
<LinearLayout
android:id="#+id/bottom_panel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
android:paddingBottom="75dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/help_ic"
android:src="#drawable/help_main_hdpi"
android:layout_marginTop="0dp"
android:layout_gravity="right"
android:layout_weight="1"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/feed_ic"
android:src="#drawable/feed_main_hdpi"
android:layout_marginTop="0dp"
android:layout_gravity="right"
android:layout_weight="1"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/search_ic"
android:src="#drawable/search_main_hdpi"
android:layout_marginTop="0dp"
android:layout_gravity="right"
android:layout_weight="1"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/read_ic"
android:src="#drawable/read_main_hdpi"
android:layout_marginTop="0dp"
android:layout_gravity="right"
android:layout_weight="1"
android:paddingBottom="0dp" />
</LinearLayout>
As you have given weight to your ImageView,set
android:layout_width="0dp"
instead of "wrap_content" for the ImageView and give the total weightsum to the parent LinearLayout i.e 4 in your case.
Try this, I hope It will help you.
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.
I'm try learn to more about the Android layout system; this is a learning experience for me. I'm currently trying to create a layout which basically amounts to two linear layouts: A fill_parent vertical, with an inner fill_width horizontal, so that I have an ImageView banner [in the outer], then seven ImageButton columns filling the width of the view [in the inner].
My issue comes, as I need the ImageButton's content to proportionally fill the entire button view [the columns], but respect the ImageButton boundaries, so that if either a small or big image is the source, it will be centered in the ImageButton, filling both it's vertical and horizontal dimensions, and be centered. -I have no control over the source images.
I thought that CenterCrop would do it, but nada for me...
ImageView.ScaleType CENTER_CROP Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).
Any related thoughts on what I have; ignore the outer outer layout please:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout android:id="#+id/linearLayout2"
android:layout_height="fill_parent" android:orientation="vertical"
android:layout_width="fill_parent" android:background="#color/special_grey"
android:layout_margin="0dp">
<ImageView android:id="#+id/imageView1"
android:layout_height="wrap_content" android:layout_gravity="center"
android:layout_width="wrap_content" android:layout_margin="10dp"
android:src="#drawable/banner_logo" />
<LinearLayout android:id="#+id/linearLayout1"
android:layout_margin="5dp" android:layout_gravity="center"
android:layout_width="fill_parent" android:layout_height="250dp" android:baselineAligned="true">
<ImageButton android:minWidth="20dp"
android:adjustViewBounds="true" android:layout_margin="0dp"
android:src="#drawable/sample_0" android:maxWidth="100dp"
android:id="#+id/imageButton1" android:layout_weight="1"
android:scaleType="centerCrop" android:cropToPadding="true"
android:layout_gravity="center" android:layout_width="0dp"
android:padding="0dp" android:layout_height="250dp" />
<ImageButton android:minWidth="20dp"
android:adjustViewBounds="true" android:layout_margin="0dp"
android:src="#drawable/sample_1" android:maxWidth="100dp"
android:id="#+id/imageButton2" android:layout_weight="1"
android:cropToPadding="true"
android:layout_width="0dp"
android:padding="0dp" android:layout_height="250dp" android:scaleType="centerCrop" android:scrollbarAlwaysDrawHorizontalTrack="false" android:scrollbarAlwaysDrawVerticalTrack="false" android:layout_gravity="fill"/>
<ImageButton android:minWidth="20dp"
android:adjustViewBounds="true" android:layout_margin="0dp"
android:src="#drawable/sample_2" android:maxWidth="100dp"
android:id="#+id/imageButton3" android:layout_weight="1"
android:cropToPadding="true" android:layout_gravity="center"
android:layout_width="0dp" android:padding="0dp"
android:layout_height="250dp" />
<ImageButton android:minWidth="20dp"
android:adjustViewBounds="true" android:layout_margin="0dp"
android:src="#drawable/sample_3" android:maxWidth="100dp"
android:id="#+id/imageButton4" android:layout_weight="1"
android:cropToPadding="true" android:layout_gravity="center"
android:layout_width="0dp" android:padding="0dp"
android:layout_height="250dp" />
<ImageButton android:minWidth="20dp"
android:adjustViewBounds="true" android:layout_margin="0dp"
android:src="#drawable/sample_4" android:maxWidth="100dp"
android:id="#+id/imageButton5" android:layout_weight="1"
android:cropToPadding="true" android:layout_gravity="center"
android:layout_width="0dp" android:padding="0dp"
android:layout_height="250dp" />
<ImageButton android:minWidth="20dp"
android:adjustViewBounds="true" android:layout_margin="0dp"
android:src="#drawable/sample_5" android:maxWidth="100dp"
android:id="#+id/imageButton6" android:layout_weight="1"
android:cropToPadding="true" android:layout_gravity="center"
android:layout_width="0dp" android:padding="0dp"
android:layout_height="250dp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
My comments are only small suggestions as I'm not really sure what you want to achieve with this layout or how it should look like eventually, maybe you could elaborate a little bit or add a small image for a better understanding.
I think your linearLayout1 is missing an orientation, but this shouldn't be critical as it should default to vertical (I think).
Couldn't you put the Image of your ImageView as a backgroundImage for your linearLayout2? Then you could skip the ImageView.
Then I would put most of the ImageButton attributes into a styles-definition. This allows you to change settings much easier and cleans up your code ([Android Developers: Applying Styles and Themes])1
As I have said before, maybe you could elaborate a little bit more about how it should look like, then it will be easier to help.