How to put a TEXTVIEW center on a IMAGEVIEW in Android Layout - android

I would like to know, how I can a put a text center on a image, here is the sample image,
I tried the below code, but its not working fine,
<LinearLayout
android:layout_width="100dip"
android:layout_height="fill_parent"
android:layout_marginRight="5dip"
android:gravity="center"
android:orientation="vertical" >
<TableLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TableRow
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/points"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:text="+2"
android:textColor="#fff"
android:textSize="16sp" />
<ImageView
android:id="#+id/btbt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/btbt" />
</TableRow>
</TableLayout>
</LinearLayout>
Please let me know a good solution.

you can use an imagebutton for this purpose
i will prefer using imagebutton
.. or
put this imageview in this order
<TableRow
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Relativelayout android:layout_width="wrap_content"
android:layout_height="match_parent" >
<TextView
android:id="#+id/points"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:text="+2"
android:textColor="#fff"
android:textSize="16sp" />
<ImageView
android:id="#+id/btbt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/btbt" />
</Relativelayout >
</TableRow>

You could try creating a textview with a background image. Something like:
<TextView
android:id="#+id/textview1"
xmlns:android="http://schemas.android.com/apk/res/android"
android:gravity="center"
android:textColor="#000000"
android:textStyle="bold"
android:text="Random Text"
android:background="#drawable/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

Related

LinearLayout align text to center view with drawableLeft

I am not able to align the image to textview.
What I want it to look like:
What it actually looks like:
Please ignore the background color, image size. The issue is related to aligning the image with the text view.
I have tried the following code:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="2">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableStart="#drawable/icon_checkin"
android:gravity="center"
android:text="#string/check_in"
android:drawablePadding="-20sp"
style="#style/roboto4F4F4Flight21"
/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableLeft="#drawable/icon_checkout"
android:text="#string/check_out"
style="#style/roboto4F4F4Flight21"
android:gravity="center"
/>
</LinearLayout>
Note: I have used android:drawablePadding="-20sp" but without success.
Also tried:
<TableLayout
android:id="#+id/linear_today_attendance"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:stretchColumns = "*"
>
<TableRow
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableStart="#drawable/icon_checkin"
android:gravity="center"
android:text="#string/check_in"
android:drawablePadding="-20sp"
style="#style/roboto4F4F4Flight21"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/icon_checkout"
android:text="#string/check_out"
style="#style/roboto4F4F4Flight21"
android:gravity="center"
/>
</TableRow>
</TableLayout>
Not the cleanest option, but it should work:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="2">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableStart="#drawable/icon_checkin"
android:text="#string/check_in"
style="#style/roboto4F4F4Flight21" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableStart="#drawable/icon_checkout"
android:text="#string/check_out"
style="#style/roboto4F4F4Flight21" />
</LinearLayout>
</LinearLayout>
Wrapping the TextView in a LinearLayout worked for me. Give it a shot.
// FYI, all columns are stretched using android:stretchColumns="*"
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center">
<TextView
android:gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/ic_add_black_24dp"/>
</LinearLayout>
// and again same thing for the next item
<LinearLayout...>
<TextView.../>
</LinearLayout>
</TableRow>

Image left to TextView, Textview should be in center

I need to take a textview within Tablelayout with a image icon left to TextView. The TableLayout have width has fill_parent, so that whole area is clickable.
<TableLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_gravity="top"
android:drawablePadding="5dp"
android:drawableStart="#drawable/down_arrow"
android:gravity="start|center"
android:text="#string/hello_world" />
</TableLayout>
I tried to bring the Textview with image to center, but not able to do that.
Kindly help me to achieve the same.
Thanks
Vikash
try this :
<TableLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TableRow
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:drawablePadding="5dp"
android:drawableStart="#drawable/ic_launcher_0"
android:gravity="start|center"
android:text="#string/hello_world" />
</TableRow>
</TableLayout>
Use this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffffff" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="32dp"
android:src="#drawable/app_icon" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imageView1"
android:layout_marginBottom="24dp"
android:layout_marginLeft="20dp"
android:layout_toRightOf="#+id/imageView1"
android:text="TextView" />
</RelativeLayout>

How to align views at the bottom of the List view?

<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="match_parent"
android:background="#drawable/main_bg"
>
<RelativeLayout android:layout_width="fill_parent"
android:layout_height="47dip" android:layout_alignParentTop="true"
android:background="#drawable/tab_bar" android:id="#+id/rel_jobDesc">
<TextView android:layout_width="wrap_content" android:id="#+id/txt_SEARCH_TITLE"
android:layout_height="wrap_content" android:layout_centerInParent="true"
android:text="Description" android:textStyle="bold" android:textSize="20dip"
android:textColor="#fff"></TextView>
</RelativeLayout>
<ListView
android:id="#+id/list"
android:cacheColorHint="#00000000"
android:layout_marginTop="60dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/job_match_bg" >
</ListView>
<Button
android:id="#+id/btn_more"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#drawable/viewmore"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
I am new i android developement and i don't have idea to develop this plz help
and also i want to add at Bottom
textView width fiil_parent
and left Button and text at center and right Button
sorry for bad English Any help is appreciated.
Thank you in advance
moreButton
textView
L-Button text R_button
if you are looking for L-Button Text R-Button you need to add a linearLayout horizontally, then add a button- text- button and add weights to them to make it look nicer try this code:
<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="match_parent"
android:background="#drawable/main_bg"
>
<RelativeLayout android:layout_width="fill_parent"
android:layout_height="47dip" android:layout_alignParentTop="true"
android:background="#drawable/tab_bar" android:id="#+id/rel_jobDesc">
<TextView android:layout_width="wrap_content" android:id="#+id/txt_SEARCH_TITLE"
android:layout_height="wrap_content" android:layout_centerInParent="true"
android:text="Description" android:textStyle="bold" android:textSize="20dip"
android:textColor="#fff"></TextView>
</RelativeLayout>
<ListView
android:id="#+id/list"
android:cacheColorHint="#00000000"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/linearLayout1" //*** this is important to make the list float over button-text-button
android:layout_below="#+id/rel_jobDesc"
android:background="#drawable/job_match_bg" >
</ListView>
<LinearLayout // here what you care about
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
>
<Button
android:id="#+id/btn_more"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:text="Left" />
<TextView
android:id="#+id/Left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="TExt!!"
/>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:text="Right" />
</LinearLayout>
</RelativeLayout>
you should have the following PIC: P.S: I dont have the pics so i changed the background color
Get the idea, and stir the code the way you like. if you didnt get the idea, feel free to ask me. Hope I got what you want.
---------------------------------Edit------------------------------------------
here is to add a new line above the linearLayout and under the ListView
<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="match_parent"
android:background="#drawable/main_bg"
>
<RelativeLayout android:layout_width="fill_parent"
android:layout_height="47dip" android:layout_alignParentTop="true"
android:background="#drawable/tab_bar" android:id="#+id/rel_jobDesc">
<TextView android:layout_width="wrap_content" android:id="#+id/txt_SEARCH_TITLE"
android:layout_height="wrap_content" android:layout_centerInParent="true"
android:text="Description" android:textStyle="bold" android:textSize="20dip"
android:textColor="#fff"></TextView>
</RelativeLayout>
<ListView
android:id="#+id/list"
android:cacheColorHint="#00000000"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/AboveLinear" //*** this is important to make the list float over button-text-button
android:layout_below="#+id/rel_jobDesc"
android:background="#drawable/job_match_bg" >
</ListView>
<TextView //this is the text the is between linear and list
android:id="#+id/AboveLinear"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/linearLayout1"
android:layout_centerHorizontal="true"
android:text="Right here what ever you want" />
<LinearLayout // here what you care about
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
>
<Button
android:id="#+id/btn_more"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:text="Left" />
<TextView
android:id="#+id/Left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="TExt!!"
/>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:text="Right" />
</LinearLayout>
</RelativeLayout>
it will look like this:
Glad I could help, Please be aware of the ID i gave to the components
use this property for for button
android:layout_alignBottom="#+id/list"

Align two imageView with textView XML in android

I have a problem with my xml for android.
I have this layout to use it in each line of a Listview (that works fine).
I want to put two lines (head and body) of text, and align Right of the first line I have to put two ImageView. (Also have first of all a hidden textView)
Something like this:
My problem is when I try to put both imageViews (with only one it shows fine, but with two don't show nothing).
this is my xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/TvIdGroup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="12sp"
android:textStyle="bold"
android:visibility="gone" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<TextView
android:id="#+id/TvName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:textSize="30sp"
android:textStyle="bold" />
<ImageView
android:id="#+id/ImgNewConvGroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:src="#drawable/new_messages" />
<ImageView
android:id="#+id/ImgNewGroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:src="#drawable/new_group" />
</LinearLayout>
<TextView
android:id="#+id/TvDescription"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="22sp"
android:textStyle="normal" />
</LinearLayout>
sorry for my english and thank you in advance!
If I am understanding correctly then I believe this should be close to what you are looking for:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/TvIdGroup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Test"
android:textSize="12sp"
android:textStyle="bold"
android:visibility="gone" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:id="#+id/TvName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="Test"
android:textSize="30sp"
android:textStyle="bold" />
<ImageView
android:id="#+id/ImgNewConvGroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:gravity="right"
android:src="#drawable/new_messages" />
<ImageView
android:id="#+id/ImgNewGroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/ImgNewConvGroup"
android:gravity="right"
android:src="#drawable/new_group" />
</RelativeLayout>
<TextView
android:id="#+id/TvDescription"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Test"
android:textSize="22sp"
android:textStyle="normal" />
</LinearLayout>
Try it out and let me know if that works for you, I changed the inner layout from LinearLayout to RelativeLayout and created what I believe you are looking for in relational locations.
Note: Be cautious of your TextView extending far enough to go behind the ImageViews, if that happens then it might be better to (set for the ImageViews):
android:layout_below="#+id/TvName"
on both and remove:
android:layout_centerVertical="true"
<TextView
android:id="#+id/TvIdGroup"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="TV"
android:textSize="12sp"
android:textStyle="bold"
android:visibility="visible" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/TvName"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_weight="1"
android:text="TVName"
android:textSize="30sp"
android:textStyle="bold" />
<ImageView
android:id="#+id/ImgNewConvGroup"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="2"
android:gravity="right"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/ImgNewGroup"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="2"
android:gravity="right"
android:src="#drawable/ic_launcher" />
</LinearLayout>
<TextView
android:id="#+id/TvDescription"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TVDescription"
android:textSize="22sp"
android:textStyle="normal" />
Take a look if is what are you looking for.
Is a lot of code just will write the structure
<LinearLayout android:orientation="vertical">
<LinearLayout android:orientation="horizontal">
<LinearLayout android:orientation="horizontal">
<TextView/>
</LinearLayout>
<LinearLayout android:orientation="horizontal" android:gravity="right">
<ImageView/>
<ImageView/>
</LinearLayout>
</LinearLayout>
<LinearLayout android:orientation="vertical">
<TextView/>
</LinearLayout>
</LinearLayout>

both textview show value on same location how do i change or space inbetween them?

in my barcode xml result file both text view show result on samre location and overlap each other how do i make space in between them?? i try android_layout gravity=center or left rightr is not work only this work android:layout_gravity="center_horizontal"
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<SurfaceView android:id="#+id/preview_view"
android:layout_width="fill_parent"
android:layout_gravity="center"
android:layout_height="fill_parent"
android:layout_centerInParent="true"/>
<com.zijunlin.Zxing.Demo.view.ViewfinderView
android:id="#+id/viewfinder_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/transparent"/>
<TextView android:id="#+id/txtResult"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="hello"
android:textSize="14sp"/>
<TextView
android:id="#+id/txtResult2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="aaaa" />
<Button
android:id="#+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="25dip"
android:layout_marginRight="30dip"
android:text="View Detail" />
</FrameLayout>
Put your 2 TextView and Button inside a LinearLayout with orientation vertical. And 1 more point, When using FrameLayout, don't forget to add the attribute layout_gravity in your code.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<SurfaceView android:id="#+id/preview_view"
android:layout_width="fill_parent"
android:layout_gravity="center"
android:layout_height="fill_parent"
android:layout_centerInParent="true"/>
<com.zijunlin.Zxing.Demo.view.ViewfinderView
android:id="#+id/viewfinder_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/transparent"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<TextView
android:id="#+id/txtResult"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:text="hello"
android:textSize="14sp" />
<TextView
android:id="#+id/txtResult2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:text="aaaa" />
</LinearLayout>
<Button
android:id="#+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="25dip"
android:layout_marginRight="30dip"
android:text="View Detail" />
</FrameLayout>
put the textview like the way above ....
Inherit ViewfinderView from RelativeLayout and use layout_toRightOf, layout_toLeftOf, layout_below or layout_above, whatever you need.
<com.zijunlin.Zxing.Demo.view.ViewfinderView
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
<TextView android:id="#+id/txtResult"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/txtResult2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/txtResult"/>
</com.zijunlin.Zxing.Demo.view.ViewfinderView>

Categories

Resources