Fit imageView and textView in one small layout in Android - android

I have a tiny linearlayout that I have to fit an imageView and a textView in. I know this is a terrible way to make an app. I'm just trying to test to see if this would work. The code below only shows the imageview and not the textView. Any ideas?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="90dp"
android:layout_height="90dp"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="TextView" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:src="#drawable/my_icon" />
</LinearLayout>
</LinearLayout>

The answer ended up being to give the textView a weight of 0 and the imageView a weight of 1. That way, textView showed up perfectly but only took as much space as it needed, and the imageView took up the rest of the space. Perfect1

It depends what you want it to look like. If you want the LinearLayout to be split in half, then in your ImageView set
android:layout_weight="1"
The views inside the LinearLayout get space in proportion to their layout_weight so if your ImageView has layout_weight="0" it will get 0 proportion of the View.

You should use weight like that:
android:layout_weight="2" in LinearLayout
and layout_weight="1" in imageView and textView
so that both of your view will occupy half of space

Please try this
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:text="TextView" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:src="#drawable/my_icon" />

Related

android gridlayout column width exceed parent (gridlayout) width

I am using gridlayout to group my views. inside it, I have two columns. one column has a child which is relativelayout and the other column has a child which is linearlayout.
My linearlayout orientation is vertical. it has two views, textview and an imageview.
The issue is when I type text in the textview, and the text is long, I cannot see
some characters in the textview
imageview which is below the textview
textview width is extending and and hiding some of it's characters and also imageview before entering 2nd line(textview is muitiline)
I don't want to use margin to solve this issue because if I use it, and the text in textview is short, unwanted space will appear at the right side of textview.
<android.support.v7.widget.GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:columnCount="2"
app:rowCount="1" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_gravity="fill" >
</RelativeLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_gravity="fill">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="12345...50" >
</TextView>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/vladmir putin"/>
</LinearLayout>
</android.support.v7.widget.GridLayout>
How can i solve the issue of textview width exceeding gridlayout width?
if i type 1234 everything is ok. but if i type from 1 to 50, i can't see some numbers like from 30 to 32 and imageview?.
To solve this problem, I used RelativeLayout instead of LinearLayout and aligned my textview to the start of the imageview
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.GridLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:columnCount="2"
app:rowCount="1"
>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_gravity="fill" >
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_gravity="fill">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/profile"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:text="12345...50"
android:layout_toStartOf="#id/profile">
</TextView>
<ImageView
android:layout_width="100dp"
android:layout_height="wrap_content"
android:src="#drawable/profile"
android:id="#+id/profile"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true" />
</RelativeLayout>

Prevent Image from scaling even though the imageView height = "match_parent"

I have this linear layout,
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="1dp"
android:layout_marginRight="1dp"
android:background="#color/white"
android:layout_marginTop="1dp"
android:weightSum="1" >
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.8"
android:gravity="left|center"
android:padding="5dp"
android:text="Policy No."
android:textStyle="bold" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.2"
android:src="#drawable/ic_launcher" />
</LinearLayout>
Now i want the image to not scale but the ImageView to match the height of the parent, the TextView height is set to wrap content and that cant be changed. Also, i can't set the imageView height as wrap_content, since it'll change the height of the overall Linear Layout and i can't afford that.
![Image of problem]http://imgur.com/gaef828
Now what i want is to have the image's size remain the same as it is the second row, even though the first row's height has increased.
Thanks in advance, any help would be appreciated.
add :
android:scaleType="centerInside"
to your ImageView
To perform no scaling, use
android:scaleType="center"
http://developer.android.com/reference/android/widget/ImageView.ScaleType.html
To get what you want, you can do this:
First give your imageviews same fixed height so they won't scale:
android:layout_height="25dp"
Than put gravity to center_vertical:
android:layout_gravity="center_vertical"
So now you have for each imageview:
<ImageView
android:id="#+id/imageView1"
android:layout_width="0dp"
android:layout_height="25dp"
android:layout_weight="0.2"
android:src="#drawable/ic_launcher"
android:layout_gravity="center_vertical" />
It now no longer matters how may lines your textview has, your imageview will stay the same!
Ouput:
Hope this will help you with your problem.

make a textview width proportional to imageview above

my layout is very simple. i use a vertical relative layout which contains an imageview on top of 2 textviews (heading and text). In portrait it looks fine. However in landscape it happens, that the imageview will not fill out the whole width of the screen but the text below still does. that doesnt look good. is there a simply way i can make the text width as wide as the imageview above, so all views will have the same right boarder on any screen size?
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:scaleType="fitStart"
android:adjustViewBounds="true"
android:src="#drawable/picture" />
<TextView
style="#style/DescriptionTitle"
android:id="#+id/textView1"
android:layout_alignLeft="#id/imageView1"
android:layout_below="#id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/heading" />
<TextView
style="#style/DescriptionText"
android:id="#+id/textView2"
android:layout_alignLeft="#id/imageView1"
android:layout_below="#id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/text" />
</RelativeLayout>
</ScrollView>
Add android:layout_alignRight="#id/imageView1" to your TextView. You may need to use android:layout_width="0dp"; also on the same TextView.
insted of using android:src="#drawable/picture"
use android:background="#drawable/picture" hope it will work for you

Android - RelativeLayout - position a checkbox on the center of an image

I would like to know how can I center a checkbox to an image on my RelativeLayout view - there is no property like this..
Here's my code:
http://pastebin.com/tGAxju3Z
Please notice: the image is bigger then the checkbox.
Use FrameLayout for the following
<FrameLayout
android:id="#+id/button1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/image1"
>
<Button
android:id="#+id/button2"
android:layout_gravity="center"
android:src="#drawable/image2" />
</FrameLayout>
If you are using a relative layout, it will be better if you take a linearlayout with its background as an image and then place the checkbox on the linearlayout...
Make sure the layout_height of CheckBox is the same as the layout_height of your ImageView, same for the layout_width, and add the gravity. Be sure the ImageView and Checkbox are in another layout (with layout_width and layout_height set to wrap_content), than the TextView.
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="5dp"
android:layout_gravity="center"
android:background="#e2e2e2"
>
<ImageView
android:contentDescription="Icon"
android:layout_width="74dp"
android:layout_height="64dp"
android:id="#+id/imgThumbnail"
android:scaleType="centerInside"
/>
<CheckBox
android:id="#+id/chkEdit"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:visibility="visible"
/>
</RelativeLayout>
<TextView />
Tip: Add android:background="#FF0000" (=RED) and android:background="#00FF00" (=GREEN) to the different widgets, so you can exactly see what is covered by the item.

Android: ImageView scale to screen width within a ScrollView

I'm quite new to android programming and I stumbled upon a problem with my layout.
At first, I had a Linearlayout with a textview, 2 buttons and a imageview scaled to fit the screen.
Now I wanted to put this under a scrollview, so the imageview could be scaled larger (to the width of the screen).
Without the scrollview everything just went fine, but with the scrollview, my imageview is not scaled anymore.
What am I doing wrong? I tried numerous solutions on StackOverflow but I can't get it to work with a ScrollView. Thanks in advance!
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<TextView
android:id="#+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="#string/pageno" />
<Button
android:id="#+id/button1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="#string/texta" />
<Button
android:id="#+id/button2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="#string/textb" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/page1" />
</LinearLayout>
</ScrollView>
Make LinearLayout/RelativeLayout as parent view. In that make a scroll view and set alignparentTop=true. This scrollView will contain a single layout in which all other views will be placed.

Categories

Resources