Center ImageView and TextView Side by side - android

I want to center all contents layout to center but this is problem I am having:
As you can see, I want to center image and text in their parent but want to have image to left of text.
Here is layout code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/app_light_green" >
<ImageView
android:id="#+id/toastImage"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_centerInParent="true"
android:paddingTop="1dp"
android:src="#drawable/exclamation" />
<TextView
android:id="#+id/toastText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center"
android:paddingBottom="3dp"
android:paddingLeft="5dp"
android:paddingRight="3dp"
android:paddingTop="2dp"
android:textColor="#color/app_darker_green"
android:textSize="#dimen/sixteen_sp" />
</RelativeLayout>

You can use a horizontal Linearlayout and add your TextView and ImageView inside it and then add the Linearlayout in Relativelayout and make it center.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout01"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:orientation="horizontal" >
<ImageView
android:id="#+id/toastImage"
android:layout_width="24dp"
android:src="#drawable/exclamation"
android:layout_height="24dp"
android:paddingTop="1dp" />
<TextView
android:id="#+id/toastText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:paddingBottom="3dp"
android:paddingLeft="5dp"
android:paddingRight="3dp"
android:paddingTop="2dp"
android:textColor="#color/app_darker_green"
android:textSize="#dimen/sixteen_sp"/>
</LinearLayout>
</RelativeLayout>

Try using framelayout.
In framelayout, add imageview and textview, assign gravity to be left for imageview and gravity to be center for textview. And atlast give some left margin to imageview in order to align it with textview.
Alternate soln with relativelayout is,
in your imageview tag use property
align_toLeftOf=“#+id/R.id.Textview1"
And remove center in parent from imageview.
Your problem will be solved.
Please ignore the syntax I have typed this answer from phone. :)

i am also bringing minel..just for simplicity
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/app_light_green" >
<TextView
android:id="#+id/toastText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center"
android:paddingBottom="3dp"
android:paddingLeft="5dp"
android:drawableLeft="#drawable/exclamation"
android:paddingRight="3dp"
android:paddingTop="2dp"
android:textColor="#color/app_darker_green"
android:textSize="#dimen/sixteen_sp" />
</RelativeLayout>
with mine you do not have to worry about imageview, you just position your textview in the center that's all..

Related

Fixing the position in a scroll layout

I am using a scroll layout with a layout inflator to fill data from a database. Everything works fine then the screen opens, but when I scroll up, the items scroll past the beginning of where the margin is set at the beginning. I am doing this because I am using a static backgound image that I want to always stay in the same position. Is there a way for me to fix the scroll view?
Here is the XML for the main page.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView android:id="#+id/ScrollView01"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent" android:layout_width="fill_parent"
android:background="#drawable/backimage"
>
<LinearLayout
android:id="#+id/mylayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="70dp"
android:orientation="vertical" >
</LinearLayout>
</ScrollView>
and this is the XML for each item I inflate to add to the scrollview
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:orientation="vertical"
android:layout_width="fill_parent" android:layout_height="wrap_content" xmlns:android="http://schemas.android.com/apk/res/android"><ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:gravity="right"
android:padding="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="10dp"
android:src="#drawable/nocarpic" />
<TextView
android:id="#+id/TextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:paddingBottom="10dp"
android:paddingLeft="20dp"
android:paddingTop="10dp"
android:text="#+id/TextView01" >
</TextView>
<TextView
android:id="#+id/TextView02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginLeft="20dp"
android:paddingBottom="10dp"
/>
<LinearLayout
android:id="#+id/horizontalLine"
android:layout_width="fill_parent"
android:layout_height="1dip"
android:background="#8B0000"
android:paddingRight="2dp"
/>
</RelativeLayout>
If you mean that you want the scrolling content to clip 70dp below the top of the ScrollView, try removing the margin on the LinearLayout and instead setting android:paddingTop="70dp" on the ScrollView. ViewGroups clip child views to padding by default.

android width of linearlayout the same as image

I have my layout :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:orientation="vertical"
android:gravity="center_horizontal"
>
<ImageView
android:id="#+id/id_new_big_list_item_image"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:layout_centerHorizontal="true" />
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:orientation="vertical"
android:background="#drawable/round_corners_new_bottom" >
<TextView
android:id="#+id/id_new_big_list_item_name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="12sp"
android:textColor="#color/new_restaurant_name"
android:paddingTop="5dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingBottom="0dp" />
</LinearLayout>
</LinearLayout>
I need to show image at the top (center horizontal) and below linearlayout with textview. Image can have different width, but i want to set the width of the linearlayout the same as image has. But if text is too long, the width becomes more. How can i do that? if text's width more than image width is, make 2 lines of text.
Is it possible??
here snap of my layout :
set ImageView's layout_width="wrap_content" and remove the 2nd LinearLayout enclosing the TextView
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:orientation="vertical"
android:gravity="center_horizontal" >
<ImageView
android:id="#+id/id_new_big_list_item_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:layout_centerHorizontal="true" />
<TextView
android:id="#+id/id_new_big_list_item_name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="12sp"
android:textColor="#color/new_restaurant_name"
android:paddingTop="5dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingBottom="0dp" />
</LinearLayout>
Your Image should be wrap_contant and depends on it size. TextView will place in all parent.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:orientation="vertical"
android:gravity="center_horizontal" >
<ImageView
android:id="#+id/id_new_big_list_item_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true" />
<TextView
android:background="#drawable/round_corners_new_bottom"
android:id="#+id/id_new_big_list_item_name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="12sp"
android:textColor="#color/new_restaurant_name" />
</LinearLayout>
Good luck!
Here instead of taking a LinearLayout use a RelativeLayout.
And set the Bounds of your EditText to be Left & right aligned to the ImageView Width.So that when the length of the text is exceeding the height of the EditText is incremented in Vertical than that of Horizontal.

Center list item vertically on ListView

I'm developing an Android application.
On one activity I have a List with list items. Those list items will have a TextView (I'm using my own layout because probably I will need to add more widgets to it).
This is ListActivity xml:
<?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" >
<ListView
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="469dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="40dp">
</ListView>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/orderErrorMsg"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:textSize="16dp" >
</TextView>
</RelativeLayout>
</LinearLayout>
And this is ListItem xml:
<?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"
android:orientation="vertical">
<TextView
android:id="#+id/orderToFillName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:textSize="20dp" />
</LinearLayout>
And, finally, this is the result:
Why TextView is not centered vertically?
You have "wrap_content" on the layout_height of the TextView = there is no space to center vertically on since the TextView is wrapped tightly.
Try changing the layout_height to "match_parent" or place gravity="center_vertical" attribute in the LinearLayout instead.
<TextView
android:id="#+id/orderToFillName"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:textSize="20dp" />
the answer is really simple: you have to add this to your TextView's XML:
android:gravity="center"
Currently you're not setting the text's position in the TextView but just the View's position.
Best wishes,
Tim
Try this way:
<TextView
android:id="#+id/orderToFillName"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity= "center_vertical|center_horizontal"
android:textSize="20dp" />
or
android:gravity="center"

Android: Layout List header

I have a header for a list that contains two image buttons. I want one of those image buttons to be on the left, and the other to be on the right. This is what my xml file looks like right now but it does not work, it just puts the two image buttons on the left together. I have also tried without the additional LinearLayouts but no luck.
<?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"
android:gravity="fill_horizontal"
android:background="#drawable/list_header_background">
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:gravity="left"
android:background="#drawable/list_header_background">
<ImageButton
android:id="#+id/refreshBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="4dp"
android:src="#drawable/ic_refresh"
android:background="#drawable/list_header_background"
/>
</LinearLayout>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:gravity="right"
android:background="#drawable/list_header_background">
<ImageButton
android:id="#+id/battleBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="4dp"
android:src="#drawable/ic_battle"
android:background="#drawable/list_header_background"
/>
</LinearLayout>
</LinearLayout>
As kabuko wrote, the RelativeLayout width is equal to the parent width. When we have a child view inside that RelativeLayout, we can use the android:layout_alignParentXXXXXX="true" parameter in order to align it (the child) accordingly to the parent.
<?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="fill_parent"
android:orientation="horizontal"
android:background="#drawable/list_header_background">
<ImageButton
android:id="#+id/refreshBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="4dp"
android:src="#drawable/ic_refresh"
android:layout_alignParentLeft="true"
android:background="#drawable/list_header_background"
/>
<ImageButton
android:id="#+id/battleBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="4dp"
android:src="#drawable/ic_battle"
android:layout_alignParentRight="true"
android:background="#drawable/list_header_background"
/>
</RelativeLayout>
You probably want to use a RelativeLayout with layout_alignParentLeft and layout_alignParentRight on the buttons.

Why my text is always located on the top of screen not center?

I have a simple layout like below (which only shows a text "TEST"):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffffff"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="TEST"
android:textColor="#0099cc"
/>
</LinearLayout>
</LinearLayout>
I suppose with this layout, my text "TEST" should be located in the middle of the screen. But the text "TEST" is located on the top of the screen. Why?
I used layout_gravity and gravity with value center, why my "TEST" text located on the top?
use android:gravity="center" in your main layout
just try it.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffffff"
android:gravity="center"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="TEST"
android:textColor="#0099cc"
/>
</LinearLayout>
</LinearLayout>
Hi leem android:gravity consult with the content of specific view that means your android:gravity="middle" place the text middle of text view not a middle of screen. your layout_gravity define the where should your view is going to be place? mean you have to set android:layout_gravity="center_vertical|center_horizontal" of textview to view your text middle of screen
Very simple.. In the first linear layout section of your xml file. Just add android:gravity="center" and it will work..

Categories

Resources