Android - Center Textview in ImageView of Relative Layout - java

I have a relative layout with an ImageView in it and want to center the TextView in side the ImageView, in the activity layout xml file.
Here is the image view and then what I have tried for the TextView
This is inside of the relative layout:
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minHeight="170dp"
android:minWidth="170dp"
android:id="#+id/logoBackground"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginLeft="33dp"
android:layout_marginStart="33dp"
android:layout_marginTop="33dp"
android:contentDescription="#string/content_description_useless"
android:background="#ffffd0cd" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/capital_u"
android:id="#+id/textView"
android:textSize="30sp"
android:layout_alignTop="#+id/logoBackground"
android:layout_alignLeft="#+id/logoBackground"
android:layout_alignStart="#+id/logoBackground"
android:layout_marginLeft="43dp"
android:layout_marginStart="43dp"
android:layout_marginTop="65dp"/>
It looks okay I think but the marginTop is 65 shouldn't it be half of the height of the imageView?
Thanks for the help in advance.

It's not working because you're telling the TextView to be in the center of the parent RelativeLayout, but the ImageView is attached to the top-left of the parent.
One approach would be to force the TextView to be the exact size of the ImageView using RelativeLayout's alignXyz properties. You then set the gravity attribute to center, and that makes the text appear in the center of the TextView's bounds. This should work as long as the ImageView is larger than the TextView in all dimensions.
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/capital_u"
android:id="#+id/textView"
android:textSize="30sp"
android:layout_alignTop="#+id/logoBackground"
android:layout_alignLeft="#+id/logoBackground"
android:layout_alignRight="#+id/logoBackground"
android:layout_alignBottom="#+id/logoBackground"
android:gravity="center"/>
Will that work for you?

One problem I see is this line:
android:layout_centerInParent="#+id/logoBackground"
The value of layout_centerInParent should be true or false. I'm guessing it is evaluating to false and is in the upper left corner. If you set it to true it will center itself in the middle of the parent (the relative layout). To center it in the ImageView you would need to have the relative layout the same size as the ImageView.
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minHeight="170dp"
android:minWidth="170dp"
android:id="#+id/logoBackground"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginLeft="33dp"
android:layout_marginStart="33dp"
android:layout_marginTop="33dp"
android:contentDescription="#string/content_description_useless"
android:background="#ffffd0cd" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/capital_u"
android:id="#+id/textView"
android:textSize="30sp"
android:layout_centerInParent="true"/>
</RelativeLayout>

Try this to your textview : android:layout_centerInParent="true"
So that makes:
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minHeight="170dp"
android:minWidth="170dp"
android:id="#+id/logoBackground"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginLeft="33dp"
android:layout_marginStart="33dp"
android:layout_marginTop="33dp"
android:contentDescription="#string/content_description_useless"
android:background="#ffffd0cd" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/capital_u"
android:id="#+id/textView"
android:textSize="30sp"
android:layout_alignTop="#+id/logoBackground"
android:layout_alignLeft="#+id/logoBackground"
android:layout_alignStart="#+id/logoBackground"
android:layout_marginLeft="43dp"
android:layout_marginStart="43dp"
android:layout_marginTop="65dp"
android:layout_centerInParent="true"/>

Try this code :
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center">
<ImageView
android:scaleType="centerCrop"
android:layout_width="30dp"
android:layout_height="30dp"/>
<TextView
android:id="#+id/your_text_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="14sp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="1" />
</RelativeLayout>

For this purpose you have to use the Frame Layout.
For Reference, See here www.developer.android.com/reference/android/widget/FrameLayout.html
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:src="#drawable/ic_launcher"
android:layout_height="fill_parent"
android:layout_width="fill_parent"/>
<TextView
android:text="Frame Text"
android:textSize="30px"
android:textStyle="bold"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:gravity="center"/>
</FrameLayout>

Related

Listview Item layout pushes the linearlayout off the screen

I am new to android and am trying to create a list view row item as follows:
On the far left of the listview item I need two stacked text views
In the center of the listview item I need an additional two stacked text view
On the far right I need a checkbox
I want to make the width of the center textviews a constant size, irrespective to the length of text.
Every time I adjust the middle linear layout, it pushes the checkbox off the screen unless I manually give it a width (which will not work for multiple screen sizes). Can someone please help?
I've tried using weights and all but I can't figure it out.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:gravity="left"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/starttime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
android:layout_marginTop="5dp"
android:padding="2dp"
android:singleLine="true"
android:text="10:35am"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#929692"
android:textSize="12sp" />
<TextView
android:id="#+id/endtime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
android:singleLine="true"
android:text="11:55am"
android:textColor="#929692"
android:textSize="12sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/middle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
android:layout_toRightOf="#id/left"
android:orientation="vertical">
<TextView
android:id="#+id/sessionname"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="5dp"
android:ellipsize="end"
android:padding="2dp"
android:singleLine="true"
android:text="ok this is where my text goes it is very long
and it will push stuff off"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#000000"
android:textSize="14sp" />
<TextView
android:id="#+id/location"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:ellipsize="end"
android:singleLine="true"
android:text="#android:string/ok"
android:textColor="#929692" />
</LinearLayout>
<LinearLayout
android:id="#+id/right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
android:layout_toRightOf="#id/middle"
android:orientation="vertical">
<CheckBox
android:id="#+id/list_checkbox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:checked="false" />
</LinearLayout>
</RelativeLayout>
Used constraintlayout and it worked!

Align views in a relative layout to the bottom of the screen

I am trying to align a text area with username and phone along with a button to the bottom of the screen by adding margin-top on id with
android:id="#+id/textView1"
attribute but no effect as shown in the following snippet
<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"
>
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textView2"
android:layout_centerHorizontal="true"
android:src="#drawable/ic_launcher"
/>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/phone"
android:layout_centerVertical="true"
android:text="Username"
/>
<EditText
android:id="#+id/username"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/textView1"
android:layout_below="#+id/textView1"
android:ems="10" />
<TextView
android:id="#+id/TextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/username"
android:layout_below="#+id/username"
android:text="Phone No" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentTop="true"
android:layout_marginTop="16dp"
android:gravity="center"
android:text=" User Registration"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textStyle="bold" />
<EditText
android:id="#+id/phone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/TextView01"
android:layout_centerHorizontal="true"
android:ems="10"/>
<Button
android:id="#+id/register"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#+id/phone"
android:layout_below="#+id/phone"
android:text="Register" />
</RelativeLayout>
The screen below shows the output
I want from the username textview down to the register button to be align to the bottom of the screen. I have tried adding margin but did not work
Did you try to use a relative layout.
If you have a relative layout that fills the whole screen you should be able to use android:layout_alignParentBottom to move the button to the bottom of the screen.

Android ScrollView is not scrolling with a relative layout

I have the following xml layout but my scrollview is not scrolling when I run the app. What am I doing wrong? I am trying to use a Relative layout in the scrollview instead of a Linear Layout Here is the xml..
<ScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Medium Text"
android:id="#+id/main_title"
android:textSize="30sp"
android:textStyle="bold"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<ImageView
android:layout_width="180dp"
android:layout_height="270dp"
android:id="#+id/movie_poster"
android:layout_weight="0.59"
android:layout_below="#+id/main_title"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="30dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Ratings:"
android:id="#+id/textView"
android:layout_alignTop="#+id/movie_poster"
android:layout_toRightOf="#+id/movie_poster"
android:layout_toEndOf="#+id/movie_poster"
android:layout_marginLeft="52dp"
android:layout_marginStart="52dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text=" 6.5"
android:textStyle="bold"
android:id="#+id/movie_rating"
android:layout_alignTop="#+id/textView"
android:layout_toRightOf="#+id/textView"
android:layout_toEndOf="#+id/textView" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text=" 2015-01-01"
android:textStyle="bold"
android:id="#+id/movie_release_date"
android:layout_below="#+id/textView"
android:layout_alignLeft="#+id/textView" />
<TextView
android:layout_width="wrap_content"
android:layout_height="180dp"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Medium Text"
android:id="#+id/movie_description"
android:layout_below="#+id/movie_poster"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>
</ScrollView>
That is because you set the height of the ScrollView to fill_parent.
Try using a LinearLayout with weight so it fills the space left over from the other views.
If you do not want to set it to a specific height, you can also add
android:fillViewport="true"
to your ScrollView

My imageview is not getting fill-parent

My image view doesn't set fill-parent in my layout. I have some images with a size of 500*375 and 300*215. I set my image view to fill-parent completely, but it appears in the center of the page without a complete fill..
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:id="#+id/main_matn_layout"
android:background="#drawable/backmainmatn"
android:layout_height="match_parent">
<ir.adad.AdView
android:id="#+id/ad"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/star"
android:layout_toRightOf="#+id/main_matn_i_next"
android:layout_toLeftOf="#+id/main_matn_i_pre"
android:layout_above="#+id/imgb"
/>
<ImageButton android:id="#+id/imgb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="center"
android:background="#drawable/star"
android:layout_toRightOf="#+id/main_matn_i_next"
android:layout_toLeftOf="#+id/main_matn_i_pre"
/>
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#+id/ad"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/main_matn_titr"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_alignParentRight="true"
android:layout_marginRight="10dp"
android:gravity="right"
android:textColor="#android:color/black"
android:layout_marginTop="20dp"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="30sp"/>
<ImageView
android:id="#+id/main_matn_share"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:src="#drawable/share"/>
<ImageView
android:id="#+id/main_matn_img"
android:layout_width="fill_parent"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_height="fill_parent"
/>
<TextView
android:id="#+id/main_matn_matn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_margin="20dp"
android:textColor="#android:color/black"
android:gravity="right"
android:text="TextView"/>
</LinearLayout>
</ScrollView>
<ImageView
android:id="#+id/main_matn_i_next"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:src="#drawable/back"/>
<ImageView
android:id="#+id/main_matn_i_pre"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:src="#drawable/next"/>
I want to make my imageview fill-parent.
<ImageView
android:id="#+id/main_matn_img"
android:layout_width="fill_parent"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_height="fill_parent"
/>
In the emulator it appears correctly, but when I run my project it doesn't.
First off, fill_parent is deprecated, you should use match_parent instead.
That said, I'm guessing this could be a scaleType issue. To check that your ImageView is actually filling its parent, I suggest setting a background color:
android:background="#FF0000"
To make sure the bitmap actually fills its ImageView container, try the scaleType which better fits your needs:
android:scaleType="centerCrop"

How to fix the button position in Linear Layout

I define two components (One text View and one Button) in Linear layout.
<LinearLayout
android:id="#+id/layout_1"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/edit_view1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize = "15sp"
android:layout_weight="5"
android:layout_marginTop="20dp"
android:layout_alignParentLeft="true"
android:gravity="center"
android:hint="Write Greeting" />
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_toRightOf="#+id/edit_view1"
android:layout_alignParentRight="true"
android:background="#android:color/transparent"
android:src="#drawable/e301"/>
</LinearLayout>
If I write long text, the position of my ImageButton is changed. I want to fix the position. Any suggestion?
Replace your layout contents as :
<LinearLayout
android:id="#+id/layout_1"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/edit_view1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize = "15sp"
android:layout_weight="5"
android:layout_marginTop="20dp"
android:gravity="center"
android:hint="Write Greeting" />
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#android:color/transparent"
android:src="#drawable/e301"/>
</LinearLayout>
You can't use RelativeLayout's properties of alignment inside Linear layout.
See your modified code:
<LinearLayout
android:id="#+id/layout_1"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:weightSum="3"
xmlns:android="http://schemas.android.com/apk/res/android">
<TextView
android:singleLine="false"
android:id="#+id/edit_view1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize = "15sp"
android:layout_marginTop="20dp"
android:text="etegtdrgrgbvcvbghgfffffffffffffffffffffffffffff"
android:gravity="center"
android:hint="Write Greeting"
android:layout_weight="2"/>
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#android:color/transparent"
android:src="#drawable/ic_launcher"
/>
</LinearLayout>
Keep layout width as 0 dp using weight and weightSum, so it will adjust. Also, keep sengleLine as false for textview.
Output:
Hope this helps.
Try below code:-
<LinearLayout
android:id="#+id/layout_1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/edit_view1"
android:layout_width="0dp"
android:layout_weight="5"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginTop="20dp"
android:gravity="center"
android:hint="Write Greeting"
android:textSize="15sp" />
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/edit_view1"
android:background="#android:color/transparent"
android:src="#drawable/e301" />
</LinearLayout>
Using weight then you must have width = 0dp(horizontal) and heigth = 0dp(vertically)
Use weights: you didn't define weightSum of layout so your weights are now useless. Set parent layout's weightSum to 6 (in order to use your values) or 100 and set children's weights as percents. And change children views' widths to 0dp.
[optional] Set button's width to match_parent so it'll take all remaining space.
In LinearLayout layout_toRightOf, layout_alignParentRight, layout_alignParentLeft are redundant. Use gravity for children views instead. (for Button it'll be `gravity="right").
Use the below coding. Tell me if you want better alignment. I have used default default image for alignment. If you want better than this, then give buttom image also.
<LinearLayout
android:id="#+id/layout_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" >
<TextView
android:id="#+id/edit_view1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginTop="20dp"
android:gravity="center"
android:hint="Write Greeting dfdsfdsfsdfadsfdfadf"
android:textSize="15sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="3" >
<ImageButton
android:id="#+id/imageButton1"
android:gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:src="#drawable/ic_launcher" />
</RelativeLayout>
</LinearLayout>

Categories