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>
Related
I have a relative layout that sits at the bottom of screen
It has 3 elements horizontal
firstElement - fixed width
middleElement - width as fill_parent
last element - fixed width
MiddleElement is edit text with maxLines = 5. It starts with fixed width and then expands as typed.
With the layout below, I use center_vertical for left/right and they adjust accordingly to center.
My goal is to keep left/right elements to bottom while the edit text expands. I could not make it work,
Below is just one example of layout I tried. I have tried align_parentBottom, layout_gravity=bottom, gravity=bottom.
I could not make it work.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/bottomComponent"
android:background="#color/red"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="50dp">
<LinearLayout
android:background="#color/green_theme"
android:id="#+id/firstElement"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:gravity="center"
android:clickable="true"
android:layout_width="50dp"
android:layout_height="50dp">
<LinearLayout
android:gravity="center"
android:orientation="vertical"
android:layout_gravity="center"
android:layout_width="20dp"
android:layout_height="20dp">
<ImageView
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:scaleType="fitCenter"
android:src="#drawable/firstImage" />
</LinearLayout>
</LinearLayout>
<EditText
android:id="#+id/middleElement"
android:layout_centerVertical="true"
android:layout_marginTop="7.5dp"
android:layout_marginBottom="7.5dp"
android:maxLines="5"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:minHeight="35dp"
android:layout_toLeftOf="#+id/lastElement"
android:layout_toRightOf="#+id/firstElement"
android:paddingLeft="6dp"
android:paddingRight="0dp"/>
<Button
android:id="#+id/lastElement"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_width="65dp"
android:layout_height="50dp"
android:textColor="#color/title_gray"
android:background="#color/green_theme"
android:textSize="18dp"
android:textAllCaps="false"
android:text="#string/lastElement" />
</RelativeLayout>
Ok this post solved my issue Android LinearLayout fill-the-middle
What I did not know that for linearlayout layout_weight=1 will work as fill_parent in relative layout
I have a very simply horizontal LinearLayout with one ImageView and one TextView and both layout_gravity is set to top. Both views do indeed align at the top of the layout, but the TextView is always slightly lower, and to get to align with the ImageView I have to give it a negative layout_marginTop.
Am I missing something here?
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="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.67"
android:layout_gravity="top"
android:layout_margin="16dp"
android:textSize="16sp"
android:text="This is some text\nwith several\nline breaks"/>
<ImageView
android:id="#+id/card_image"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.33"
android:layout_gravity="top"
android:layout_margin="16dp"
android:src="#drawable/placeholder"/>
</LinearLayout>
Result
Instead of android:layout_height="wrap_content"for textview try with android:layout_height="match_parent" and set its gravity to top
I don't know how to align 3 elements side by side. I would like to have :
One view with a thin width on the left
One linearLayout with text content on the middle
One imageView always on the right
Like this :
And today, i got this :
Here is my code :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/gris_clair"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#color/blanc" >
<View
android:id="#+id/view1"
android:layout_width="7dp"
android:layout_height="90dp"
android:background="#color/green_normal" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
<ImageView
android:id="#+id/imageView1"
android:layout_width="80dp"
android:layout_height="90dp"
android:layout_gravity="right"
android:scaleType="centerCrop"
android:src="#drawable/test2" />
</LinearLayout>
</LinearLayout>
You can simplify your layout by setting the root LinearLayout to a horizontal orientation:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/gris_clair"
android:layout_margin="5dp"
android:orientation="horizontal" >
<View
android:id="#+id/view1"
android:layout_width="7dp"
android:layout_height="match_parent"
android:background="#color/green_normal" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="TextView" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="80dp"
android:layout_height="90dp"
android:layout_gravity="right"
android:scaleType="centerCrop"
android:src="#drawable/test2" />
</LinearLayout>
You may want to tweak the colors or sizes to fit your desired end result.
I set the parent View's height to wrap the content, first two Views to match the parent view's height and the image to your size. This means that your image will decide the parent View's height.
If you want to evenly space/scale the views horizontally on your screen and use up all the space they have available you should look at the android:layout_weight attribute. You would set android:layout_width="0dp" for each View you want to scale with screen size and add android:layout_weight="x" where x is a number.
The number you choose will depend on how you want to divide up the available space each View will use. As an example if you wanted one View to use 1/3rd of the available space with a second using 2/3rds then set the first to 1 and the second to 2. 1+2=3 so 1 of a total 3 units and 2 of a total 3 units.
For your textview use weight to fill up space:
<TextView
android:id="#+id/textView1"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="TextView" />
You can use relative layout for that. and for the image view add alignparentright rule.
<RelativeLayout >
<View />
<LinearLayout/>
</LinearLayout>
<ImageView
android:alignParentRight="true" />
</RelativeLayout>
or use the weight for linearlayout, put 1 for textview and rest 0.
You can easy solve this problem using weight in LinearLayout, or make your parent RelativeLayout and place middle layout toLeftOf your left view and toRightOf your right view.
You can use relative Layout instead of linear layout to design custom design of your page.
It might help you.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/gris_clair"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#color/blanc" >
<View
android:id="#+id/view1"
android:layout_width="7dp"
android:layout_height="90dp"
android:background="#color/green_normal" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView1"
android:layout_width="80dp"
android:layout_height="90dp"
android:scaleType="centerCrop"
android:src="#drawable/test2"
android:layout_alignParentRight="true"
/>
</RelativeLayout>
</LinearLayout>
check this it might help you
I'm using the following RelativeLayout for creating an item in GridView
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativeLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp"
android:background="#drawable/border">
<ImageView
android:id="#+id/icon_service"
android:layout_width="290dp"
android:layout_height="268dp"
android:layout_alignParentTop="true"
android:src="#drawable/icon"
android:layout_centerHorizontal="true">
</ImageView>
<TextView
android:text="My text"
android:layout_height="80dp"
android:id="#+id/service"
android:layout_width="wrap_content"
android:layout_below="#+id/icon_service"
android:layout_marginTop="2dp"
android:layout_centerHorizontal="true"
android:gravity="top|center"
android:textSize="24sp"
android:textColor="#ff0000"
android:ellipsize="marquee">
</TextView>
</RelativeLayout>
which gives me this:
Instead, what I want is this:
Your Image view is at right position,
Below, instead of putting textview directly..
put a linearlayout their with orientation horizontal,
and make two childs of this LinearLayout, TextView and ImageView...
thats it..
You are providing only one ImageView and expecting for two imageviews see your code..for achiving your desired result take one linear layout ,give it wightsum = 10 and orientation vertical and take one Image and another linerlayout inside this.give weight for imageview 7 and linearlayout 3..then the set the second one linearlayout weightsum equal to 6 and take one textview and one imageview inside the second layout and set textview weight equal to 4 and and imageview equal to 2..see the result if not equal to your expecting...customize the weightsums...like
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="10"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="7"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3"
android:weightSum="6"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="4"/>
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"/>
</LinearLayout>
</LinearLayout>
Im trying to get two ImageViews side by side with a gap around the image. Ive been using Padding, Margin etc and all have had the same effect (See Image Below)
as you can see the image on the right is shifted upwards, how do i stop this?
Here's the layout file im using:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<!-- Top Row -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/tab_headlines"
android:src="#drawable/headlines"
android:layout_margin="5sp"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/tab_headlines"
android:src="#drawable/headlines"
/>
</LinearLayout>
I am going to be using more rows of images hence the extra LinearLayout
Use layout_weight to divide your layout equally. Try the following code:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<!-- Top Row -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="6dp"
android:layout_marginRight="3dp"
android:layout_weight="1"
android:contentDescription="#string/tab_headlines"
android:src="#drawable/headlines" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="3dp"
android:layout_marginRight="6dp"
android:layout_weight="1"
android:contentDescription="#string/tab_headlines"
android:src="#drawable/headlines" />
</LinearLayout>
</LinearLayout>
Also, never use sp for specifying layout dimensions. Use dp instead.
You have given layout_margin for left side image and didn't give for the right side image.That's where the issue lies. If you want only two images in a row and if the image size is same for the both then you can make use of layout_weight attribute and give padding for space in between them.
so,try this. It will work.
<!-- Top Row -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:contentDescription="#string/tab_headlines"
android:src="#drawable/headlines"
android:padding="3dp"
/>
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:contentDescription="#string/tab_headlines"
android:src="#drawable/headlines"
android:padding="3dp"
/>
</LinearLayout>
To fix Vertical alignment :
Use android:layout_height="match_parent" in your ImageView
by using android:layout_height="match_parent" inside ImageView it will be matched to its parent your LinearLayout which is android:layout_height="wrap_content"
Now Question arises why the height will be same for both ImageViews ?
Reason your parent LinearLayout's Height will be automatically chosen from ImageView Whose height is greater because of android:layout_height="wrap_content" in your LinearLayout !
and by using android:layout_height="match_parent" you will be using same height for ImageView whose height is smaller !
To Fix Horizontal alignment :
use android:layout_weight="equal weight value for btoh"
change your code to
<ImageView
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:contentDescription="#string/tab_headlines"
android:src="#drawable/headlines"
android:layout_margin="5sp"
/>
<ImageView
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:contentDescription="#string/tab_headlines"
android:src="#drawable/headlines"
/>