I was wondering, how can I make my ImageView width, match the scaled image content width.
I'm using wrap_content for ImageView.
This works very well, if the image content is small sized.
However, it doesn't work well, for a large portrait or large landscape image.
Here's my outcome.
1st row is what I wish to achieve. It is using a small image.
Respect image content width by using wrap_content.
Respect left TextViews' height, by using match_parent.
However, when comes to 2nd row and 3rd row, it is not something what I expect.
2nd row is using large portrait image. 3rd row is using large landscape image.
Doesn't respect image content width.
Image content is not right most.
For ImageView, I'm using the following XML
<ImageView
android:background="#ff0000"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/landscape" />
Here's my complete layout XML
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/about_card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="8dp"
app:cardElevation="2dp"
app:cardCornerRadius="2dp"
app:cardPreventCornerOverlap="false"
android:foreground="?attr/selectableItemBackground"
android:clickable="false" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginBottom="20dp">
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="?attr/secondaryTextColor"
android:text="CEO"
android:textSize="12sp"
android:layout_marginTop="#dimen/space_among_cards"
android:layout_marginBottom="6dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="?attr/primaryTextColor"
android:text="Mark_Zuckerberg"
android:textSize="16sp" />
</LinearLayout>
<ImageView
android:background="#ff0000"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/ic_refresh_black_18dp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginBottom="20dp">
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="?attr/secondaryTextColor"
android:text="CEO"
android:textSize="12sp"
android:layout_marginTop="#dimen/space_among_cards"
android:layout_marginBottom="6dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="?attr/primaryTextColor"
android:text="Mark_Zuckerberg"
android:textSize="16sp" />
</LinearLayout>
<ImageView
android:background="#ff0000"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/portrait" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="?attr/secondaryTextColor"
android:text="CEO"
android:textSize="12sp"
android:layout_marginTop="#dimen/space_among_cards"
android:layout_marginBottom="6dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="?attr/primaryTextColor"
android:text="Mark_Zuckerberg"
android:textSize="16sp" />
</LinearLayout>
<ImageView
android:background="#ff0000"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/landscape" />
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
Here's the image I'm using
Small image
Large portrait image
Large landscape image
Any idea how I can make ImageView behaves the following when using large image?
Respect the scaled image content width
Make image content right most
Update
I had tried to use android:adjustViewBounds="true". However, it get thing worst as you can see the large portrait image is pushing its left TextViews away.
Try this:
<ImageView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:background="#ff0000"
android:scaleType="fitEnd"
android:src="#drawable/portrait" />
Try using
adjustViewBounds="true"
On the ImageView, (see documentation), to make sure the view only uses the necessary width.
i have added weightSum to root layout and give weight to the child
layout.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/about_card_view"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginBottom="20dp"
android:weightSum="100">
<LinearLayout
android:layout_width="0dp"
android:layout_weight="40"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#02B8B9"
android:text="CEO"
android:textSize="12sp"
android:layout_marginTop="10dp"
android:layout_marginBottom="6dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#02B8B9"
android:text="Mark_Zuckerberg"
android:textSize="16sp" />
</LinearLayout>
<ImageView
android:background="#ff0000"
android:layout_width="0dp"
android:layout_weight="60"
android:layout_height="wrap_content"
android:src="#drawable/mic_pic" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginBottom="20dp"
android:weightSum="100">
<LinearLayout
android:layout_width="0dp"
android:layout_weight="40"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#02B8B9"
android:text="CEO"
android:textSize="12sp"
android:layout_marginTop="10dp"
android:layout_marginBottom="6dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#02B8B9"
android:text="Mark_Zuckerberg"
android:textSize="16sp" />
</LinearLayout>
<ImageView
android:background="#ff0000"
android:layout_width="0dp"
android:layout_weight="60"
android:layout_height="wrap_content"
android:src="#drawable/images1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="100">
<LinearLayout
android:layout_width="0dp"
android:layout_weight="40"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#02B8B9"
android:text="CEO"
android:textSize="12sp"
android:layout_marginTop="10dp"
android:layout_marginBottom="6dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#02B8B9"
android:text="Mark_Zuckerberg"
android:textSize="16sp" />
</LinearLayout>
<ImageView
android:background="#ff0000"
android:layout_width="0dp"
android:layout_weight="60"
android:layout_height="wrap_content"
android:src="#drawable/test_image" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
Related
Layout wrap content not working
Below is my XML code . I want to place the portion linear layout with grey colour just above the main image . Screenshot of my code here.
In devices with aspect ratio 16:9 design is correct , but in 18:9 and 18.5:9 the grey portion is on top side .
The topic text and icon must be top left side portion of main image .
The design i want here
Never mind top side . From bottom the hight must be wrap the size of image
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:background="#color/light_green"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#color/dark_green">
<LinearLayout
android:id="#+id/topLin"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#color/grey"
android:orientation="horizontal">
<TextView
android:id="#+id/nameTxt"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginStart="10dp"
android:ellipsize="end"
android:gravity="center|start"
android:maxLength="25"
android:singleLine="true"
android:text="Abin Stanly"
android:textColor="#color/white"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:adjustViewBounds="true"
android:src="#drawable/test" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignTop="#id/imageView"
android:layout_marginStart="20dp"
android:layout_marginTop="15dp">
<ImageView
android:id="#+id/icon"
android:layout_width="#dimen/icon_height"
android:layout_height="#dimen/icon_height"
android:layout_gravity="center"
android:src="#drawable/ic_love" />
<TextView
android:id="#+id/topicTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:gravity="center"
android:paddingEnd="10dp"
android:shadowColor="#color/grey"
android:shadowDx=".5"
android:shadowDy=".5"
android:shadowRadius="3.5"
android:text="Topic"
android:textColor="#color/white"
android:textStyle="bold" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
</LinearLayout>
Here the main layout is RelativeLayout and the children are both layout_alignParentBottom="true"
You can just switch the child layouts around until you get the required layout
Tip: The less layouts you use, the faster rendering will be on slow devices.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/light_green">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#color/grey">
<TextView
android:id="#+id/nameTxt"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginStart="10dp"
android:ellipsize="end"
android:gravity="center|start"
android:maxLength="25"
android:singleLine="true"
android:text="Abin Stanly"
android:textColor="#color/white"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<ImageView
android:id="#+id/icon"
android:layout_width="#dimen/icon_height"
android:layout_height="#dimen/icon_height"
android:layout_gravity="center"
android:src="#drawable/ic_love" />
</LinearLayout>
</RelativeLayout>
I have added weightSum to parent LinearLayout so you can easily divide screen according to your requirements.
Assigned View android:layout_weight="3" so it will cover 3/10th part of the screen, you can change it according to what you feels good for you.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:background="#android:color/holo_green_light"
android:orientation="vertical"
android:weightSum="10"
xmlns:android="http://schemas.android.com/apk/res/android">
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3"
android:background="#android:color/holo_green_light"
/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="7">
<TextView
android:id="#+id/nameTxt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxLength="25"
android:padding="11dp"
android:background="#android:color/darker_gray"
android:text="Abin Stanly"
android:textColor="#android:color/white"
android:textStyle="bold" />
<RelativeLayout
android:id="#+id/RelativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/nameTxt"
android:layout_alignParentBottom="true"
>
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:scaleType="centerCrop"
android:src="#drawable/mobile_world" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignTop="#id/imageView"
android:background="#android:color/black"
android:padding="11dp"
>
<ImageView
android:id="#+id/icon"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_gravity="center"
android:src="#drawable/back_arrow" />
<TextView
android:id="#+id/topicTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:gravity="center"
android:paddingEnd="10dp"
android:shadowColor="#android:color/darker_gray"
android:shadowDx=".5"
android:shadowDy=".5"
android:shadowRadius="3.5"
android:layout_gravity="center_vertical"
android:text="Topic"
android:textColor="#android:color/white"
android:textStyle="bold" />
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
</LinearLayout>
Output
Check this layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/holo_green_light">
<TextView
android:id="#+id/nameTxt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/imageView"
android:background="#android:color/darker_gray"
android:maxLength="25"
android:padding="10dp"
android:text="Abin Stanly"
android:textColor="#android:color/white"
android:textStyle="bold" />
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:scaleType="centerCrop"
android:src="#drawable/test" />
<TextView
android:id="#+id/topicTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageView"
android:layout_gravity="center_vertical"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:drawableStart="#drawable/ic_love"
android:drawablePadding="10dp"
android:gravity="center"
android:paddingEnd="10dp"
android:shadowColor="#android:color/darker_gray"
android:shadowDx=".5"
android:shadowDy=".5"
android:shadowRadius="3.5"
android:text="Topic"
android:textColor="#android:color/white"
android:textStyle="bold" />
</RelativeLayout>
I have the following xml. Basically I want to display the movie overview below the Layout whose id is equals to layoutOne.
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbarStyle="outsideOverlay">
<LinearLayout
android:id="#+id/layoutOne"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center_horizontal"
android:padding="16dp"
android:background="#color/primary"
>
<ImageView
android:id="#+id/movie_image"
android:layout_width="160dp"
android:layout_height="240dp"
android:scaleType="fitXY"
android:layout_gravity="center_vertical"
/>
<RelativeLayout
android:layout_width="wrap_content"
android:padding="16dp"
android:layout_gravity="center_vertical"
android:layout_height="wrap_content">
<TextView
android:id="#+id/movie_title"
android:layout_centerHorizontal="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16sp"
/>
<TextView
android:layout_below="#+id/movie_title"
android:layout_centerHorizontal="true"
android:id="#+id/movie_rating"
android:text="9/10"
android:textSize="24sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="20dp"
/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_below="#+id/movie_rating"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:layout_marginTop="13dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:drawable/ic_menu_my_calendar"/>
<TextView
android:layout_below="#+id/movie_rating"
android:layout_centerHorizontal="true"
android:id="#+id/movie_date"
android:text="2017-10-9"
android:textSize="16sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="20dp"
/>
</LinearLayout>
</RelativeLayout>
<TextView
android:id="#+id/title_overview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Great movie" />
</LinearLayout>
</ScrollView>
Here is what I get.
I want the sample text Great movie to be below that light pink layout. The tricky part here is that Scrollbar view allow only one child view. Any ideas?
Thanks,
Theo.
The Constraint of the RelativeLayout should fit the whole page. If you want to use ScrollView you should add the RelativeLayout to the ScrollView too.
Hence it would be like this :
<LinearLayout
android:id="#+id/layoutOne"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:gravity="center_horizontal"
android:padding="16dp"
android:background="#color/primary"
>
Later you can use the following to adjust the image:
<LinearLayout
android:layout_marginBottom="439dp"
android:layout_marginEnd="156dp"
android:layout_marginStart="156dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
>
I have designed in a linear layout with a listview it is supposed to have everything shown with the whole photo and it leaves the part of likey comment but only the photo comes out and in small photos if the part comes out but in other big photos it does not
It would be nice to implement picasso but I do not know how to do it or if it can
I attach the layouts:
this is the layout_post part of a recycler view
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:orientation="horizontal">
<TextView
android:layout_marginBottom="5dp"
android:id="#+id/tv_post_username"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginRight="8dp"
android:layout_marginTop="16dp"
android:layout_weight="1"
android:singleLine="true"
android:text="Username"
android:textColor="#android:color/black"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/tv_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="16dp"
android:layout_marginTop="16dp"
android:text="10h30" />
</LinearLayout>
<TextView
android:id="#+id/tv_post_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:text="Post text has some words that I could use for a placeholder like this" />
<ImageView
android:id="#+id/iv_post_display"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/imageholder" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/like_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal"
android:padding="16dp">
<ImageView
android:id="#+id/iv_like"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/chill"
android:layout_marginBottom="1dp"/>
<TextView
android:id="#+id/tv_likes"
android:layout_marginTop="2dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:text="0"
android:textSize="16sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/comment_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:gravity="center_vertical"
android:orientation="horizontal"
android:padding="16dp">
<ImageView
android:layout_width="wrap_content"
android:layout_marginTop="5dp"
android:layout_height="wrap_content"
android:src="#drawable/ic_mode_comment_black_24dp" />
<TextView
android:layout_marginTop="5dp"
android:id="#+id/tv_comments"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:text="0"
android:textSize="16sp" />
</LinearLayout>
</LinearLayout>
this is the rowpost
is a cardview that include the layoutpost
<RelativeLayout android:layout_height="match_parent"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#212121">
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"
android:layout_marginTop="20dp"
android:layout_marginBottom="60dp"
android:elevation="10dp">
<include layout="#layout/layout_post" />
</android.support.v7.widget.CardView>
the content view:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="95dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.android.octa.memetixs.Activities.main.PostActivity"
tools:showIn="#layout/app_bar_post">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="471dp">
<android.support.v4.view.ViewPager
android:id="#+id/myViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</RelativeLayout>
This is a small, low resolution photo here if it shows:
And here if everything is shown as it should be
If you use a LinearLayout without weightSum attribute then it simple stacks the child views one over the other Without adjusting its dimension to fit.
Use android:weightSum attribute in the LinearLayout and android:layout_weight + android:layout_height="0dp" for the child views, then if for example weightSum == 6 and a child has layout_weight == 1 then it will get 1/6 of space.
In one of my screens, I expect to acheive this kind of a layout
Highest importance being the images correctly scaled. These images i am giving are of adequate resolution and works fine on another fragment layout.
My layout.xml looks like 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:background="#drawable/stadiumbg"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#drawable/listview_item"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="left"
android:orientation="vertical" >
<ImageView
android:id="#+id/image1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:adjustViewBounds="true"
android:padding="5dp"
android:scaleType="fitCenter" />
<TextView
android:id="#+id/title1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="70%"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="80%"
android:textAppearance="?android:attr/textAppearanceLarge" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right"
android:orientation="vertical" >
<ImageView
android:id="#+id/image2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:adjustViewBounds="true"
android:padding="5dp"
android:scaleType="fitCenter" />
<TextView
android:id="#+id/title2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/listview_item"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vote" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Down Vote" />
</LinearLayout>
</LinearLayout>
Everything else is great. The drawable listview_item is something that has been given to provided rounded corners, and tested in a listview with the above said images. Perfectly fine.
But in this layout, both the images gets super downscaled. It is like this.
wasting all that space for no reason.
What I have tried:
adjustViewBounds set to false
Scaletype as fitXY
Any idea to get What I want?
Change the width and height of the ImageView. Instead of:
android:layout_width="wrap_content"
android:layout_height="wrap_content"
Use:
android:layout_width="200dp"
android:layout_height="200dp"
Change the numbers to fit what you want.
I currently have the following layout (see below). Now the issue I am having with it, is that i need the icons to fill up the screen (So i need to split the screen into 6 blocks. But the biggest problem is my images are stretching and that looks really bad. all the images are 256X256. What can I do to rather have more while space above or below than have them stretched?
Layout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:animateLayoutChanges="true"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.60"
android:orientation="horizontal"
android:weightSum="3" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<ImageButton
android:id="#+id/category_menu_button_food"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:background="#drawable/menu_icon"
android:contentDescription="Food Menu"
android:onClick="foodMenuItemClicked"
android:scaleType="centerInside" />
<TextView
android:id="#+id/category_menu_label_food"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.1"
android:ems="20"
android:gravity="center"
android:text="Menu"
android:textSize="25sp" >
<requestFocus />
</TextView>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<ImageButton
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:background="#drawable/search_icon"
android:contentDescription="Drinks Menu"
android:onClick="searchMenuItemClicked"
android:paddingTop="55dp"
android:scaleType="centerInside" />
<TextView
android:id="#+id/category_menu_label_food"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.1"
android:ems="20"
android:gravity="center"
android:text="Search"
android:textSize="25sp" >
</TextView>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<ImageButton
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:background="#drawable/cart_icon"
android:contentDescription="Favorites"
android:onClick="favoritesMenuItemClicked"
android:scaleType="centerInside" />
<TextView
android:id="#+id/category_menu_label_food"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.1"
android:ems="20"
android:gravity="center"
android:text="Cart"
android:textSize="25sp" >
</TextView>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.60"
android:orientation="horizontal"
android:weightSum="3" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<ImageButton
android:id="#+id/button4"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="10dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:background="#drawable/bill_icon"
android:contentDescription="View Bill"
android:onClick="billMenuItemClicked"
android:scaleType="centerInside" />
<TextView
android:id="#+id/category_menu_label_food"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.1"
android:ems="20"
android:gravity="center"
android:text="Bill"
android:textSize="25sp" >
</TextView>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<ImageButton
android:id="#+id/activity_category_menu_button_callWaiter"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:background="#drawable/callwaiter_icon"
android:contentDescription="Call Waiter"
android:onClick="callWaiterButtonClicked"
android:scaleType="centerInside" />
<TextView
android:id="#+id/category_menu_label_food"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.1"
android:ems="20"
android:gravity="center"
android:text="Call Waiter"
android:textSize="25sp" >
</TextView>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<ImageButton
android:id="#+id/button6"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="10dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:background="#drawable/exit_icon"
android:contentDescription="Exit App"
android:onClick="exitButtonClicked"
android:scaleType="centerInside" />
<TextView
android:id="#+id/category_menu_label_food"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.1"
android:ems="20"
android:gravity="center"
android:text="Exit App"
android:textSize="25sp" >
</TextView>
</LinearLayout>
</LinearLayout>
<Space
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<Space
android:layout_width="match_parent"
android:layout_height="wrap_content" />
Do not set the width and height of images , Leave the height/width attribute to WRAP_CONTENT in this way images will neither shrink nor stretch.
please try to change the width and height to wrap content instead of giving match parent.
or else change the scaletype to fitxy.
I think you can to use wrap_content for layout_width and layout_height of ImageView
and
you use RelativeLayout instead of LinearLayout.
you use RelativeLayout in Root of layout and two ReltavieLayout in sub of Root. and for not stretch your image, you should to use different size image for different size and density device.