I am trying to make a layout with an image on the left side, then a text, and two images on the right side. I show you how it likes now:
I want to put the two right icons on the right side, next to the limit of the screen. Then, if you see, when the text has more than one line, the two icons disappear and when the text is too long the icons are very small. I want a static space for every one of the icons.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="6dip">
<ImageView
android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:layout_marginRight="6dip"
android:layout_centerVertical="true"
android:src="#drawable/ic_launcher"
android:focusable="false"
android:focusableInTouchMode="false"
android:contentDescription="#string/cdLogo" />
<LinearLayout
android:id="#+id/lista2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:orientation="vertical"
android:paddingRight="20dip"
android:layout_toRightOf="#id/icon"
android:layout_marginRight="30dip">
<TextView
android:id="#+id/tituloevento"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:gravity="left"
android:textStyle="bold" />
<TextView
android:id="#+id/distritoevento"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:gravity="left"
android:textSize="12sp"/>
<TextView
android:id="#+id/coorp0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone" />
<TextView
android:id="#+id/coorp1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone" />
<TextView
android:id="#+id/esgratis"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone" />
</LinearLayout>
<LinearLayout
android:id="#+id/caracteristicas"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_toRightOf="#id/lista2"
android:layout_alignParentRight="true">
<ImageView
android:id="#+id/iconoMapa"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/cdTieneCoor"
android:layout_weight="0.5"/>
<ImageView
android:id="#+id/iconoGratis"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/cdGratisPago"
android:layout_weight="0.5"/>
</LinearLayout>
</RelativeLayout>
I suggest you to use a LinearLayout as the top container, and distribute the space of the child elements with weight attributes. When using weight, you must set layout_width to 0dp for horizontal layouts or layout_heigth to 0dp for vertical layouts.
For example:
<?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="horizontal" >
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="5" >
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2" >
</LinearLayout>
</LinearLayout>
Related
What I am trying to do is wrap the textview around the imageview so that way the text isn't just on the left or right side of the image. Is it possible to do this through XML? As it is a popup dialog with a picture, so doing it through code will be a pain as it is multiple images depending on what they click. See picture for example.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#android:color/background_light">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_margin="1dp"
android:background="#android:color/darker_gray">
>
<ScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_margin="20dp">
<Button
android:id="#+id/dismiss"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Close" />
<ImageView
android:id="#+id/IV1"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/IV1"
android:layout_below="#+id/dismiss"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/TV15"
android:id="#+id/TV15"
android:layout_below="#+id/dismiss"
android:layout_toRightOf="#+id/IV1"
android:layout_toEndOf="#+id/IV1"
android:paddingLeft="5dp"
android:paddingTop="5dp"/>
</RelativeLayout>
</ScrollView>
</LinearLayout>
Use FrameLayout. Change the order of ImageView and TextView to set what should come top of the other.
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerInParent="true">
<ImageView
android:id="#+id/menu_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#mipmap/ic_launcher" />
<TextView
android:id="#+id/menu_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:lines="1"
android:text="this is my sample" />
</FrameLayout>
I am trying to make some text views with checkboxes in LinearLayout. I want for result like this:
TextView Ckeckbox
TextViewwwwww Ckeckbox
TextV Ckeckbox
But currently I have this:
TextView Checkbox
TextViewwwww Checkbox
TextView Checkbox
Here is my xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:orientation="horizontal">
<TextView
android:id="#+id/itemTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<CheckBox
android:id="#+id/checkItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</LinearLayout>
And this xml gives me same result:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:orientation="horizontal">
<TextView
android:id="#+id/itemTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="start"/>
<CheckBox
android:id="#+id/checkItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="end"/>
</LinearLayout>
You can use the layout_weight attribute on your TextView only to automatically designate the TextView to fill any space which the CheckBox does not occupy. For example, the following will set your checkboxes to the end (provided they have no text associated with them) and then lets the TextView fill the rest of the layout.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:orientation="horizontal">
<TextView
android:id="#+id/itemTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<CheckBox
android:id="#+id/checkItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
Additionally, you should use match_parent instead of fill_parent as fill_parent is deprecated.
Try this:
<LinearLayout 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:orientation="vertical"
tools:context="com.example.ipdemo.MainActivity" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/itemTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="TextView" />
<CheckBox
android:id="#+id/checkItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="TextView" />
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>
</LinearLayout>
Use layout weights and try this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:orientation="horizontal"
android:weightSum="5">
<TextView
android:id="#+id/itemTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="wdjhwdjwo"/>
<CheckBox
android:id="#+id/checkItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="4"/>
</LinearLayout>
You should be using layout_weight attribute to achieve the effect
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<TextView
android:id="#+id/itemTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" />
<CheckBox
android:id="#+id/checkItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>
So horizontally both the views will be occupying half of the screen size. You could adjust layout_weight to achieve the desired outcome.
There maybe other ways to do this, but I think this method is the best way.
Use layout_gravity="right" instead of gravity="end" if you're working with vertical layouts.
Your CheckBox tag should look like:
<CheckBox
android:id="#+id/checkItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"/>
EDIT: On horizontal layouts, try layout_weight="1", that will make both of your elements fill half of the layout space.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:orientation="horizontal">
<TextView
android:id="#+id/itemTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<CheckBox
android:id="#+id/checkItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
</LinearLayout>
check the following use android:layout_weight="1" in both view
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:orientation="horizontal">
<TextView
android:id="#+id/itemTitle"
android:layout_width="fill_parent"
android:layout_weight="1"
android:layout_height="wrap_content"
/>
<CheckBox
android:id="#+id/checkItem"
android:layout_width="fill_parent"
android:layout_weight="1"
android:layout_height="wrap_content"
/>
</LinearLayout>
I am working to update my app with CardCiew widget, I already update some simple layout.
The problem that when I use a LinearLayout set with layout_weight attribute I get a different result I want.
layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/list_selector"
android:orientation="horizontal"
android:id="#+id/technologie_ll_item">
<android.support.v7.widget.CardView
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_weight="10"
android:layout_height="wrap_content"
android:layout_width="wrap_content">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/iv_logo_technologie"
android:layout_width="75dp"
android:layout_height="75dp"
app:border_width="2dp"
app:border_color="#99069d78"
android:src="#drawable/after"
android:paddingLeft="0dp" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_weight="5"
android:layout_height="fill_parent"
android:gravity="center_vertical"
android:orientation="vertical">
<TextView
android:id="#+id/tv_nom_technologie"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="17dp"
android:textAllCaps="true"
android:paddingLeft="10dp"
android:gravity="center_vertical"
android:text="Orthodontics"/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="fill_parent"
android:gravity="right"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/indic" />
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
Result
Maybe this can help you.
Approach 1
(Note i have changed your CircleImageView with a Imageview so i could make it works without errors ;))
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="#+id/technologie_ll_item">
<android.support.v7.widget.CardView
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout
android:weightSum="10"
android:layout_height="wrap_content"
android:layout_width="match_parent">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2">
<ImageView
android:id="#+id/iv_logo_technologie"
android:layout_width="75dp"
android:layout_height="75dp"
android:paddingLeft="0dp" />
</LinearLayout>
<TextView
android:id="#+id/tv_nom_technologie"
android:layout_width="0dp"
android:layout_weight="7"
android:layout_height="wrap_content"
android:textSize="17sp"
android:textAllCaps="true"
android:paddingLeft="10dp"
android:layout_gravity="center_vertical"
android:text="Orthodontics" />
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="fill_parent"
android:gravity="right"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
As you can see you will have 1 LinearLayout which android:weightSum is 10 (just to make the proportion better) that holds the 3 components. The first LinearLayout container that holds the CircleImageView (aka ImageView in my code) will have a android:layout_weight of 2, the text will have a android:layout_weight of 7, and the arrow container will have a android:layout_weight of 1.
Maybe you can get rid of the LinearLayout that holds the arrow, and set the weight directly in the ImageView, i think that if you apply the arrow as android:src it will be resized respecting the scale of the image given, but I am not sure about this now.
Approach 2:
Another solution will be the RelativeLayout, as the code below:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="#+id/technologie_ll_item">
<android.support.v7.widget.CardView
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- CircleImageView here -->
<ImageView
android:id="#+id/iv_logo_technologie"
android:layout_width="75dp"
android:layout_height="75dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:paddingLeft="0dp" />
<!-- Arrow drawable here -->
<ImageView
android:id="#+id/arrow"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<!-- Text here, between circle and arrow -->
<TextView
android:id="#+id/tv_nom_technologie"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="17sp"
android:layout_toRightOf="#id/iv_logo_technologie"
android:layout_toLeftOf="#id/arrow"
android:textAllCaps="true"
android:paddingLeft="10dp"
android:layout_centerVertical="true"
android:text="Orthodontics" />
</RelativeLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
With this you remove the LinearLayout and you will have only 3 components, maybe better for perfomance.
Hope some of this will help you mate.
Regards!
I want to create a view with two parts:
1. Avatar, which is always displayed at right/center_vertial on screen.
2. Name, which is always displayed at left on screen (do not overlap on Avatar).
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/username" />
</LinearLayout>
<LinearLayout
android:id="#id/avatar"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="right|center_vertical"
android:orientation="vertical" >
<ImageView
android:id="#+id/avatar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|center_vertical"
android:scaleType="center"
android:src="#drawable/useravatar" />
</LinearLayout>
</LinearLayout>
The problem is when Name is too long, it overlaps on Avatar. How can I fix this problem?
You should use RelativeLayout and a android:layout_toLeftOf="#id/avatar" attribute for the TextView.
You're better off using a Relative Layout for this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#+id/avatar"
android:text="Some User Name" />
<ImageView
android:id="#+id/avatar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_gravity="right|center_vertical"
android:scaleType="center"
android:src="#drawable/thumbr" />
</RelativeLayout>
I have a main layout in which I include two inner layouts. I am specifying the width of the included layouts to match_parent but they don't occupy the entire width of the parent.
I may have more components in each inner LinearLayout for e.g., three left buttons and three right buttons. Below is a simplified example of my code
See example below:
main_layout.xml
<LinearLayout 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:paddingTop="5dp"
android:baselineAligned="false"
android:orientation="vertical" >
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.95" >
<TableRow
android:id="#+id/tableRow1"
android:layout_weight="0.8"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp" >
<include layout="#layout/child_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_weight="0.2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp" >
<include layout="#layout/child_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</TableRow>
</TableLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_weight="0.05"
android:gravity="center"
android:orientation="vertical">
<Button
android:layout_width="80dp"
android:layout_height="40dp"
android:textSize="14sp"
android:textStyle="bold"
android:text="Bottom" />
</LinearLayout>
</LinearLayout>
child_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="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/leftLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:orientation="vertical" >
<Button
android:layout_width="80dp"
android:layout_height="40dp"
android:textSize="14sp"
android:textStyle="bold"
android:text="Left" />
</LinearLayout>
<LinearLayout
android:id="#+id/rightLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:orientation="vertical" >
<Button
android:layout_width="80dp"
android:layout_height="40dp"
android:textSize="14sp"
android:textStyle="bold"
android:text="Right" />
</LinearLayout>
</RelativeLayout>
Notice that the left and right buttons are overlapped in the image.. How do I expand the included layout to fill the entire width of the parent so that the left and right buttons appear on left and right. Thank You.
You can also get rid of several LinearLayouts and RelativeLayout and do this instead:
<?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" >
<Button
android:layout_width="80dp"
android:layout_height="40dp"
android:textSize="14sp"
android:textStyle="bold"
android:text="Left" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" />
<Button
android:layout_width="80dp"
android:layout_height="40dp"
android:textSize="14sp"
android:textStyle="bold"
android:text="Right" />
</LinearLayout>
In your child layout, take out your LinearLayouts then assign them to left and right of parent
<Button
android:layout_width="80dp"
android:layout_height="40dp"
android:textSize="14sp"
android:textStyle="bold"
android:text="Left"
android:layout_alignParntLeft="true" />
<Button
android:layout_width="80dp"
android:layout_height="40dp"
android:textSize="14sp"
android:textStyle="bold"
android:text="Right"
android:layout_alignParntRight="true"/>
If I understand what you want then this should work. This will get them on the left and right but depending on if you want them on the same "line" or above or below each other then there are other attributes you can set
RelativeLayout
LinearLayout can be very easy and useful when needed but using a RelativeLayout can often times eliminate nested LinearLayouts and useless ViewGroups