Image, text/text and image in Android

Image, text/text and image in Android - android

I am trying to get the following design. Consider that it is a list item.
But my following design, it does not give me that design.The textviews come on the top of left image.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_person_black_24dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:id="#+id/userimage" />
<TextView
android:text="Text1"
android:layout_toRightOf="#id/userimage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/username"/>
<TextView
android:text="Text2"
android:layout_below="#id/name"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_keyboard_arrow_right_black"
android:layout_alignParentRight="true"
android:layout_centerVertical="true" />
</RelativeLayout >

Instead of a LinearLayout use a RelativeLayout, and for the TextViews use:
android:layout_toRightOf="#id/userimage" and
android:layout_alignTop="#id/userimage" or
android:layout_alignBottom="#id/userimage"

Here you go:
<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content"
android:background="#FFFFFF"
android:orientation="horizontal">
<ImageView
android:id="#+id/userimage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_person_black_24dp"
tools:background="#mipmap/ic_launcher" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignBottom="#id/userimage"
android:layout_toEndOf="#id/userimage"
android:layout_toStartOf="#id/arrow"
android:orientation="vertical">
<TextView
android:id="#+id/username"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center|start"
tools:text="Text1" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center|start"
tools:text="Text2" />
</LinearLayout>
<ImageView
android:id="#+id/arrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_keyboard_arrow_right_black"
tools:background="#mipmap/ic_launcher" />
</RelativeLayout>
Try to play with different layouts when you have time, it will help you greatly in the future.
Edit:
Better solution for centering TextViews.

Your problem in text2 use it , it would work
<TextView
android:text="Text2"
android:layout_below="#id/username"
android:layout_toRightOf="#id/userimage"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />

Try this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="6dip" >
<ImageView
android:id="#+id/userimage"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentTop="true"
android:layout_marginRight="6dip"
android:contentDescription="TODO"
android:src="#drawable/ic_person_black_24dp" />
<ImageView
android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="6dip"
android:contentDescription="TODO"
android:src="#drawable/ic_keyboard_arrow_right_black" />
<TextView
android:id="#+id/username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_above="#id/secondline"
android:layout_alignParentTop="true"
android:layout_toRightOf="#id/userimage"
android:layout_toLeftOf="#id/icon"
android:singleLine="true"
android:gravity="center_vertical"
android:text="Example username"
android:textSize="16sp" />
<TextView
android:id="#+id/secondline"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_weight="1"
android:layout_alignParentRight="true"
android:layout_toRightOf="#id/userimage"
android:layout_toLeftOf="#id/icon"
android:singleLine="true"
android:text="Description"
android:textSize="12sp" />
</RelativeLayout>
I used some dp sizes that you did not use and added a few other things, but I guess you can change it so that it suits your desire. I did try use the same names as you did. Overall this should work if you tweak it a bit.

Related

Shadow in Android

enter image description here
As you can see there is a shadow around the ticket. I cannot make this because I am using the library (TicketView) and there is a problem with Scallops
HERE IS MY CODE
<?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:background="#f3f6f9">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="18dp"
android:layout_marginTop="52.5dp"
android:layout_marginEnd="18dp"
android:orientation="vertical"
android:elevation="14dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="37.5dp"
android:background="#drawable/gradient_tickets">
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_margin="10dp"
android:elevation="2dp"
android:text="Bus 79"
android:textColor="#fefefe"
android:textSize="12sp"
tools:layout_editor_absoluteX="37dp"
tools:layout_editor_absoluteY="69dp" />
<ImageView
android:id="#+id/img1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_margin="10dp"
android:scaleX="0.6"
android:scaleY="0.6"
android:src="#drawable/arrow_list" />
<TextView
android:id="#id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/text1"
android:layout_marginTop="40dp"
android:layout_marginBottom="10dp"
android:text="11/03/2017"
android:textColor="#a4158a"
android:textSize="12sp" />
<TextView
android:id="#+id/text4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#+id/img1"
android:layout_alignParentRight="false"
android:layout_alignParentBottom="false"
android:layout_marginTop="40dp"
android:text="$0.30"
android:textColor="#a4158a"
android:textSize="12sp" />
</RelativeLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<com.vipulasri.ticketview.TicketView
android:id="#+id/ticketView"
android:layout_width="wrap_content"
android:layout_height="142dp"
app:ticketBackgroundColor="#FFFFFF"
app:ticketDividerColor="#16191c"
app:ticketDividerDashGap="4dp"
app:ticketDividerDashLength="3dp"
app:ticketDividerPadding="1.5dp"
app:ticketDividerType="dash"
app:ticketDividerWidth="0.5dp"
app:ticketOrientation="horizontal"
app:ticketScallopPositionPercent="25.7"
app:ticketScallopRadius="7dp"
app:ticketShowBorder="false"
app:ticketShowDivider="true"
/>
<TextView
android:id="#+id/txt1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20.5dp"
android:layout_marginTop="16.5dp"
android:elevation="2dp"
android:text="12/03/2017"
android:textColor="#a4158a"
android:textSize="10sp" />
<TextView
android:id="#+id/txt2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignEnd="#+id/ticketView"
android:layout_alignRight="#+id/ticketView"
android:layout_marginTop="16.5dp"
android:layout_marginEnd="17dp"
android:layout_marginRight="17dp"
android:elevation="2dp"
android:text="$0.30"
android:textColor="#a4158a"
android:textSize="10sp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="31dp"
android:layout_marginTop="47dp"
android:layout_marginRight="31dp"
android:layout_marginBottom="45dp"
android:elevation="3dp"
android:src="#drawable/barcode_img" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
</FrameLayout>
I need to have a shadow there but I cannot manage to do it. Also I used the TicketView which is for making the form of the ticket. Could u please say what I need to add there in order to have such a shadow?

You can use CardView. There is a parameter which app:cardElevation.
But if it's not possible, You can create a drawable and you can create shadow with using gradient.

why is my relativeLayout doesn't appear below its sibling linearLayout?

I have the following 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:background="#color/blue_bg">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="vertical" >
<com.my.view.text.MyTextView
android:id="#+id/whyResgisterHeaderText"
style="#style/textOnBg"
android:layout_marginTop="25dp"
android:text="WHY REGISTER?"
android:textStyle="bold" />
<com.my.view.text.MyTextView
android:id="#+id/whyResgisterBodyText"
style="#style/textOnBg"
android:text="Help us keep your account safe"
android:textStyle="normal" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginTop="5dp"
android:src="#drawable/signup_illu_why" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center" >
<Button
android:id="#+id/gotItButton"
android:layout_width="250dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:layout_marginTop="5dp"
android:background="#drawable/btn_selector"
android:padding="0dp" />
<com.my.view.text.MyTextView
android:id="#+id/gotItText"
style="#style/textOnBg"
android:layout_marginTop="25dp"
android:text="Got it"
android:textColor="#00bcfe"
android:textSize="16dp"
android:textStyle="italic" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical" >
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#70a5b3" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<com.my.view.text.MyTextView
style="#style/textOnBg"
android:layout_toLeftOf="#+id/skipIcon"
android:text="Skip"
android:textStyle="normal" />
<ImageView
android:id="#id/skipIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:src="#drawable/signup_skip_icon" />
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
I want my screen to look like:
but it looks like:
1) why cannot I see the fotter relativeLayout (with the "skip")
2) how can I center the gotItText textView? why isn't it center with current properties?

Because your root layout is a RelativeLayout.
You should declare an ID for the first LinearLayout, and then use layout_below property on the second one. Remember, their positions are relatives so if you don't specify the location of the second Linear, it will be paint over the first one.
If you want to get one linear below the other automatically use a LinearLayout as main root.

Edited you code, replaced the custom EditTexts, and removed the styles, set new heights to the layout and it seems to be working as you want.
<?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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="vertical" >
<TextView
android:id="#+id/whyResgisterHeaderText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="25dp"
android:text="WHY REGISTER?"
android:textStyle="bold" />
<TextView
android:id="#+id/whyResgisterBodyText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Help us keep your account safe"
android:textStyle="normal" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginTop="5dp" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center" >
<Button
android:id="#+id/gotItButton"
android:layout_width="250dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:layout_marginTop="5dp"
android:padding="0dp" />
<TextView
android:id="#+id/gotItText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="25dp"
android:text="Got it"
android:textColor="#00bcfe"
android:textSize="16dp"
android:textStyle="italic" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical" >
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#70a5b3" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/skipIcon"
android:text="Skip"
android:textStyle="normal" />
<ImageView
android:id="#id/skipIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" />
</RelativeLayout>
</LinearLayout>
</RelativeLayout>

GridLayout - Aligning Element

I am trying to reduce the space between 2 columns, have tried using negative margins, but did not work. Is there a way to bring the 2 elements in the image closer ?
<?xml version="1.0" encoding="utf-8"?>
<GridLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:useDefaultMargins="true"
android:alignmentMode="alignBounds"
android:columnOrderPreserved="false"
android:layout_gravity="center"
android:orientation="horizontal"
android:stretchMode="columnWidth"
android:background="#color/orange"
android:textSize="12sp"
android:columnCount="8">
<ImageButton
android:id="#+id/settings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnSpan="1"
android:layout_gravity="left"
android:src="#drawable/settings" />
<TextView
android:id="#+id/currentCityName"
android:layout_column="2"
android:textSize="22sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="City name"
android:layout_columnSpan="4"
android:layout_gravity="center_horizontal"
/>
<ImageButton
android:id="#+id/refresh"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="7"
android:layout_columnSpan="1"
android:layout_gravity="right"
android:src="#drawable/reload" />
<ImageView
android:id="#+id/currentWeatherImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnSpan="8"
android:layout_rowSpan="3"
android:layout_gravity="center_horizontal"
android:src="#drawable/cloud" />
<ImageView
android:id="#+id/humidityIcon"
android:layout_width="20dp"
android:paddingTop="10dp"
android:paddingLeft="0dp"
android:paddingRight="0dp"
android:layout_marginRight="0dp"
android:layout_gravity="left"
android:background="#000000"
android:src="#drawable/humidity" />
<TextView
android:id="#+id/humidity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="13sp"
android:paddingTop="10dp"
android:paddingLeft="0dp"
android:layout_marginLeft="0dp"
android:layout_gravity="left"
android:background="#FFFFFF"
/>
<TextView
android:id="#+id/temperature"
android:layout_columnSpan="4"
android:layout_rowSpan="2"
android:textSize="49sp"
android:layout_marginLeft="10dp"
android:layout_marginRight="5dp"
android:layout_gravity="center_horizontal"/>
<ImageView
android:id="#+id/windSpeedIcon"
android:layout_width="30dp"
android:layout_marginRight="1dp"
android:paddingRight="1dp"
android:layout_gravity="right"
android:src="#drawable/wind" />
<TextView
android:id="#+id/windSpeed"
android:textSize="12sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
/>
<!-- android:layout_width="40dp" -->
<TextView
android:id="#+id/precipitationIcon"
android:textSize="28sp"
android:layout_width="40dp"
/>
<TextView
android:id="#+id/precipitation"
android:layout_column="0"
android:textSize="13sp"
android:layout_width="40dp"
/>
<TextView
android:id="#+id/windDirection16Point"
android:textSize="13sp"
android:layout_width="80dp"
android:layout_columnSpan="2"
/>
<TextView
android:id="#+id/weatherDescription"
android:layout_gravity="center_horizontal"
android:layout_row="7"
android:layout_columnSpan="8"/>
<TextView
android:id="#+id/section_label"
android:layout_margin="5dp"
android:layout_columnSpan="8" />
<EditText
android:minLines="4"
android:maxLines="4"
android:id="#+id/edit"
android:layout_columnSpan="8"/>

I suggest implementing the entire view using a RelativeLayout, should be the best solution for the entire view.

You are tackling the wrong problem – you are asking how to reduce the space between columns in a grid layout, but maybe you should’t have used such a layout in the first place!
What you should have been using for your specific layout, is a combination of relative positioning and compound drawables (here, with android:drawableStart).
<?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="80dp"
android:background="#d89018"
android:paddingBottom="4dp"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:paddingTop="4dp"
>
<TextView
android:id="#+id/temperature"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:text="25 ℃"
android:textColor="#fff"
android:textSize="49sp"
/>
<TextView
android:id="#+id/humidity"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:drawableStart="#drawable/humidity"
android:gravity="center_vertical"
android:text="83 %"
android:textColor="#fff"
/>
<TextView
android:id="#+id/windSpeed"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:drawableStart="#drawable/wind"
android:gravity="center_vertical"
android:text="19 km/h"
android:textColor="#fff"
/>
<TextView
android:id="#+id/precipitation"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:drawableStart="#drawable/precipitation"
android:gravity="center_vertical"
android:text="0.1 mm"
android:textColor="#fff"
/>
<TextView
android:id="#+id/windDirection16Point"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignLeft="#id/windSpeed"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:drawableStart="#drawable/windDirection"
android:gravity="center_vertical"
android:text="NNW"
android:textColor="#fff"
/>
</RelativeLayout>
Not only this layout is simpler, you also let Android take care of all the spacing for you. To change the spacing between the compound drawable and the text, use android:drawablePadding in the layout’s code above; in Java code, that would be TextView.setCompoundDrawablePadding).
Icons used for the sample: water, windsock, rainy-weather and wind-rose.

I think what's happening is that your Views are being stretched because they are trying to match the width of another view in their columns.
Try decreasing the columnSpan of your Views or separate your layout into two separate GridLayouts.
Or, consider using a different layout altogether. I would recommend RelativeLayout here instead of GridLayout, but I don't know how this fits into a larger window.

try 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="100dp">
<LinearLayout
android:id="#+id/col1"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="2.4"
>
<LinearLayout
android:id="#+id/col1_row1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="83%"/>
</LinearLayout>
<LinearLayout
android:id="#+id/col1_row2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1.0mm"/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/col2"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="2.0"
android:gravity="center"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="25'"
android:textSize="50dp"
/>
</LinearLayout>
<LinearLayout
android:id="#+id/col3"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="2.4"
>
<LinearLayout
android:id="#+id/col3_row1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="19Km"/>
</LinearLayout>
<LinearLayout
android:id="#+id/col3_row2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="NNW"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>

I think you should change usedefaultMargins to false and give your own margins to the elements.
android:useDefaultMargins="false";

ListView Row Height Too Small

Below is an image of a ListView row that is too short. I've tried too many combinations and yield my frustration to StackOverflow.
How can I fix this and show the whole row? Here is the XML for the item.
<?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="fill_parent"
android:weightSum="1">
<LinearLayout android:id="#+id/item_left"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:paddingRight="2dp"
android:paddingLeft="2dp"
android:background="#drawable/item_left"
android:layout_gravity="fill_vertical">
<TextView
android:id="#+id/status_day"
android:layout_gravity="center_vertical"
android:layout_width="40dp"
android:layout_height="wrap_content"
android:textColor="#color/item_left_text"
android:textSize="25sp"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingLeft="2dp"
android:background="#drawable/item_right"
android:layout_weight="1">
<TextView
android:id="#+id/date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/item_right_text"
android:text="" />
<TextView
android:id="#+id/message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/item_right_text"
android:text="" />
</LinearLayout>
<ImageButton
android:id="#+id/options"
android:background="#drawable/item_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_menu_moreoverflow_normal_holo_light"
/>
</LinearLayout>
Any help is appreciated.

can you use this, set row layout height
android:layout_height="?android:attr/listPreferredItemHeight"

I set the height of the ImageButton to match_parent.
This fixed the issue oddly. Sigh.

your layout should be in such manner for your requirement i have pasted not same as your's layout but related to it check it
<?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" >
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="fill_parent"
android:layout_height="60dp" >
<ImageView
android:id="#+id/ivArrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="10dp"
android:focusable="false"
android:clickable="false"
android:src="#drawable/arrow" />
<RelativeLayout
android:id="#+id/ivIcon"
android:layout_width="wrap_content"
android:layout_height="60dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:focusable="false"
android:clickable="false"
android:background="#drawable/oddnumbg" >
<TextView
android:id="#+id/tvNo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="15dp"
android:textColor="#color/ReceiptNoLable"
android:text="No." />
<TextView
android:id="#+id/tvReceiptNo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:singleLine="true"
android:layout_below="#+id/tvNo"
android:gravity="center"
android:textColor="#color/ReceiptSavedColor"
android:textSize="18dp"
android:text="1234" />
</RelativeLayout>
<TextView
android:id="#+id/tvSubName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginLeft="15dp"
android:layout_marginTop="10dp"
android:layout_toRightOf="#+id/ivIcon"
android:text="RECEIVED FROM"
android:gravity="center"
android:focusable="false"
android:clickable="false"
android:textColor="#color/ReceiptNoLable"
/>
<TextView
android:id="#+id/tvName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#+id/ivIcon"
android:layout_below="#+id/tvSubName"
android:text="RECEIPT"
android:layout_marginLeft="15dp"
android:textColor="#color/ReceiptSavedColor"
android:textSize="30dp"
android:focusable="false"
android:layout_toLeftOf="#+id/tvReceiptPrize"
android:clickable="false"
android:singleLine="true"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/tvReceiptPrize"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/ivArrow"
android:background="#drawable/myreceiptprizebg"
android:gravity="center"
android:singleLine="true"
android:layout_marginRight="5dp"
android:textSize="20dp"
android:textColor="#fff"
android:text="$84.20" />
</RelativeLayout>
</LinearLayout>

just set the height of the outer layout, instead of using fill_parent
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:awesome="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height=50dp <!-- or anything which fits -->

Android RelativeLayout troubles

I am quite new to relative layouts and I am struggling with them ;)
What I am trying to do is that:
http://pineapple.cc/plan.jpg
But what I get is that:
http://pineapple.cc/result.jpg
This is my code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<ImageView
android:id="#+id/list_poi_image"
android:src="#drawable/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/list_poi_ll"
android:background="#000000" />
<LinearLayout
android:id="#+id/list_poi_ll"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:orientation="vertical">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView android:id="#+id/list_poi_name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/list_poi_date_created"
android:text="Name"/>
<TextView android:id="#+id/list_poi_date_created"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="Date created"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView android:id="#+id/list_poi_description"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/list_poi_date_planned"
android:text="Description"/>
<TextView android:id="#+id/list_poi_date_planned"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="Date planned"/>
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
What am I doing wrong ???
Thanks for your help !!

If you are wanting to use RelativeLayouts to the best of there abilities, there is no need to have RelativeLayouts/LinearLayouts within other RelativeLayouts/LinearLayouts.
For examples of how to use RelativeLayouts look at:
http://developer.android.com/resources/tutorials/views/hello-relativelayout.html
http://android-developers.blogspot.com/2009/02/android-layout-tricks-1.html
In terns of what your looking for the following is what you are looking for:
<?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="vertical" >
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/image"
android:text="Name"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/name"
android:layout_below="#+id/name"
android:text="Description"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/date_created"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/name"
android:layout_alignBottom="#+id/name"
android:layout_alignParentRight="true"
android:text="DateCreated"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/date_planned"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/description"
android:layout_alignBottom="#+id/description"
android:layout_alignParentRight="true"
android:text="DatePlanned"
android:textAppearance="?android:attr/textAppearanceMedium" />
</RelativeLayout>
Please note that the hard-coded Strings are in there to enable you to see the text. Ensure you remove these and use a strings.xml file.

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

Image, text/text and image in Android - android

Instead of a LinearLayout use a RelativeLayout, and for the TextViews use: android:layout_toRightOf="#id/userimage" and android:layout_alignTop="#id/userimage" or android:layout_alignBottom="#id/userimage"

Your problem in text2 use it , it would work <TextView android:text="Text2" android:layout_below="#id/username" android:layout_toRightOf="#id/userimage" android:layout_width="fill_parent" android:layout_height="wrap_content" />

Related

Shadow in Android

why is my relativeLayout doesn't appear below its sibling linearLayout?

GridLayout - Aligning Element

ListView Row Height Too Small

Android RelativeLayout troubles

Categories

Resources