I am trying to set a text and 2 or more icons in one single line. Requirement is that Text should be left aligned and icons should to right of the text. If the text is big then it should not overlap the icons.
The problem of this code is that, when i change text of title, width of the title stay the biggest it was and as a result icons stay not aligned to title.
if I needed one icon to the right of the text I would use compoundDrawable of TextView and i wouldn't have problem;
This is my code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal"
android:paddingLeft="#dimen/padding_title_in_list"
android:paddingRight="#dimen/padding_title_in_list" >
<TextView
android:id="#+id/banner_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="2dp"
android:layout_marginTop="2dp"
android:layout_weight="1"
android:maxLines="1"
android:textColor="#color/text_title_gray"
android:textSize="#dimen/text_size_title_in_list_promo" />
<ImageView
android:id="#+id/icon_paid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:background="#drawable/icon_paid"
android:contentDescription="#null" />
<ImageView
android:id="#+id/icon_hd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:background="#drawable/icon_hd"
android:contentDescription="#null" />
<ImageView
android:id="#+id/icon_restrict"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:background="#drawable/icon_restrict"
android:contentDescription="#null" />
</LinearLayout>
Related
I have this problem while using https://labs.udacity.com/android-visualizer/, I can't move the bottom buttons (from the left, bottom side, that it wouldnt be stuck to the sides of the screen but had a bit of a gap.I added the picture, those are the buttons with white background, foto ->Sides
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#2b580c">
<TextView
android:textStyle="bold"
android:text="VTMC - Mūsų nuotraukos"
android:layout_width="match_parent"
android:layout_height="70dp"
android:textColor="#android:color/white"
android:textSize="22sp"
android:background="#2b580c"
android:gravity="center"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="300dp"
android:scaleType="centerCrop"
android:src="#drawable/grass"/>
<Button
android:textStyle="bold"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Atgal"
android:background="#FFFFFF"
android:textSize="20sp"
android:padding="4dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
/>
<Button
android:textStyle="bold"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Kitas"
android:background="#FFFFFF"
android:textSize="20sp"
android:padding="4dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
/>
</LinearLayout>
From what I understand you want the buttons to be in the bottom corners yet have some space between the buttons and the corner of the screen.
Add a margin to the buttons
android:layout_margin="(size)"
If you want to customize if further you can add a margin to the right,left,bottom, or top.
Delete
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
from first button and
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
from second one.
So I have a custom Header view that contains several widgets. My idea is to have a frame layout with ImageView (icon) aligned parent start and ImageButton (menu) aligned parent end. Also, TextView (title) to right of ImageView.. Those should always be visible.
To right of ImageView(icon) there should be a TextView (title) whose text should expand based on visibility of other widgets on the right side of it..
So the order from left to right goes like this: ImageView(icon) - TextView (title) - ImageView (unread messages) - ImageView (battery) - ImageButton (menu)
The problem is, the text from TextView goes behind the widgets on the right side of it, like it's visible on this image:
Here is my xml preview :
And this is the actual xml:
<RelativeLayout 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="58dp"
android:background="#color/view_controller_header">
<FrameLayout
android:id="#+id/frame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:layout_margin="10dp">
<ImageView
android:id="#+id/imageViewIC"
android:layout_width="#dimen/view_controller_header_icon_width"
android:layout_height="#dimen/view_controller_header_icon_height"
android:layout_gravity="center" />
<TextView
android:id="#+id/textViewKK"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:focusable="false"
android:gravity="center"
android:padding="10dp"
android:shadowColor="#color/text_shadow"
android:shadowDx="-1"
android:shadowDy="-1"
android:shadowRadius="1"
android:textColor="#color/main_text_color"
android:textSize="#dimen/view_controller_header_kk_texSize"
android:visibility="gone" />
<ProgressBar
android:id="#+id/progressBarVC"
style="?android:attr/progressBarStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:visibility="gone" />
</FrameLayout>
<TextView
android:id="#+id/textViewDName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_gravity="center"
android:layout_marginRight="#dimen/view_controller_header_margin2"
android:layout_toRightOf="#id/frame"
android:ellipsize="end"
android:fontFamily="sans-serif"
android:gravity="center|left"
android:maxLines="2"
android:textColor="#color/main_text_color"
android:textSize="17sp"
tools:text="This is the text that is too long .........." />
<ImageButton
android:id="#+id/imgSubMenu"
android:layout_width="50dp"
android:layout_height="match_parent"
android:layout_alignParentEnd="true"
android:layout_gravity="center"
android:background="?android:selectableItemBackground"
android:scaleType="center"
android:src="#drawable/ic_more_vert_white_24dp" />
<LinearLayout
android:id="#+id/bat"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_toStartOf="#id/imgSubMenu"
android:gravity="center"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageViewBattery"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="3dp"
android:layout_weight="1"
android:scaleType="centerInside"
android:visibility="visible"
app:srcCompat="#drawable/ic_battery_full" />
<TextView
android:id="#+id/textViewBattery"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:visibility="visible"
tools:text="100%" />
</LinearLayout>
<TextView
android:id="#+id/unreadMessages"
android:layout_width="22dp"
android:layout_height="22dp"
android:layout_centerInParent="true"
android:layout_toStartOf="#id/bat"
android:background="#color/color_widget_security_back_red"
android:gravity="center"
android:textStyle="bold"
android:visibility="visible"
tools:text="2" />
Any ideas, why does this text goes behind those widgets? I want it to resize if batery and unread messages are visible, like it goes into two lines instead of one, or to show ... if it's too long..
Probably you forgot add one more properties text as below :
android:layout_toLeftOf
android:layout_toLeftOf="#+id/imgSubMenu"
As per you requirement you want show text right to left icon and left to right menu icon but you add one relative reference toRight not toLeft so it's overlap on right side menu icon
I would like to position the text in my button like this:
At the moment the text is positioned in the bottom left corner of the button:
I have four rows of this type of buttons and in every row there is two buttons. Here is my code for one row of buttons:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/main_fashion_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/thumbnail_channel_fashion"
android:text="Fashion"
android:textColor="#FFFFFF"
android:gravity="bottom"
android:layout_weight="1"/>
<Button
android:id="#+id/main_science_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/thumbnail_channel_science"
android:text="Science"
android:textColor="#FFFFFF"
android:gravity="bottom"
android:layout_weight="1"/>
</LinearLayout>
how can I add some padding to the left and below of the text without moving the background image? Margin seems to add white space around button and padding creates space between background image and button's edges.
Thanks for help!
You can use this
<TextView
android:id="#+id/main_fashion_button"
android:layout_width="150dp"
android:layout_height="150dp"
android:background="#mipmap/ic_launcher"
android:text="Fashion"
android:textColor="#FFFFFF"
android:gravity="bottom"
android:padding="10dp">
Check this out
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageButton
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#null"
android:src="#drawable/image" />
<TextView
android:id="#+id/imageViewText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical|left"
android:layout_alignBottom="#+id/imageButton"
android:text="FASHION"
android:padding="16dp"
android:textColor="#fff" />
</RelativeLayout>
Im trying to create this layout (sorry for the quality, it's all what I have):
So far I have built this
<?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:padding="12dp">
<ImageView xmlns:tools="http://schemas.android.com/tools"
android:layout_width="48dp"
android:layout_height="48dp"
android:id="#+id/UserPhotoImageView"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_marginRight="16dp" />
<TextView
android:text="UserName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="normal"
android:typeface="normal"
android:textSize="16dp"
android:layout_toRightOf="#+id/UserPhotoImageView"
android:layout_alignTop="#+id/CalendarImageView"
android:id="#+id/UserNameTextView"
android:textColor="#333333" />
<TextView
android:text="Date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:typeface="normal"
android:textSize="12dp"
android:id="#+id/DateTextView"
android:gravity="top"
android:layout_toLeftOf="#+id/CalendarImageView"
android:layout_alignTop="#+id/CalendarImageView" />
<ImageView
android:layout_width="16dp"
android:layout_height="16dp"
android:gravity="top"
android:id="#+id/CalendarImageView"
android:layout_alignParentRight="true"
android:layout_marginLeft="6dp"
android:src="#drawable/ic_calendar_icon"
android:backgroundTint="#ffffffff" />
<TextView
android:text="Comment"
android:layout_below="#+id/UserNameTextView"
android:layout_alignLeft="#+id/UserNameTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:typeface="normal"
android:textSize="14dp"
android:id="#+id/UserCommentTextView" />
</RelativeLayout>
Which give me the first part as I want to achive this:
Now for the last row, I know how to make a rounded image but how can i place the image and the text behind a colored bar?
I would create a RelativeLayout for this part (circle image with color bar and text)
you can add a View (could be an ImageView) in this relative layout, to show behind your image. and give it background with color of your choice.
Example:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"> <!--change here to what you need-->
<!--your colored bar-->
<View
android:layout_width="match_parent"
android:layout_height="30dp" <!--control the thickness of your bar-->
android:layout_centerVertical="true"
android:background="#3333aa" />
<!--face image-->
<ImageView
android:id="#+id/imageFace"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="15dp"
android:background="#color/#2323ea" />
<!--text view-->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginRight="15dp"
android:layout_toLeftOf="#id/imageFace"
android:text="name" />
</RelativeLayout>
add your own customizations but this is a general example
Wrap both in a FrameLayout.
I guessed at the dimensions, but this should get you in the ballpark.
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/UserCommentTextView">
<TextView
android:id="#+id/name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:paddingRight="96dp"
android:gravity="right|end"
android:background="#color/purple"
tools:text="Name"/>
<!-- replace with whatever component you are using for circle image view -->
<CircleImageView
android:id="#+id/circle_image_view"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_gravity="right|end"
android:layout_marginRight="16dp"
android:background="#color/purple"
tools:src="#drawable/gwynneth"/>
</FrameLayout>
EDIT
Alternatively, if you wanted to eliminate the FrameLayout, you could integrate those two views right into your RelativeLayout with these changes:
For the positioning, I would go with android:layout_alignParentTop="true" and then a top margin to push the views down beneath your other views. You have a slight issue in that you want these to be below both the user image and the comment text, but since the comment text could expand so the bottom is lower than the image, it's hard to say which view you should anchor on. You might want to set a maxHeight on the comment to keep it from getting too big.
Since you don't have the FrameLayout to center on anymore, you would have to give the TextView an absolute size in order to line it up with the circle image view. If you're okay with that, you can just put these right in your RelativeLayout then set their top margins so that they align correctly:
<TextView
android:id="#+id/name"
android:layout_width="match_parent"
android:layout_height="32dp"
android:layout_alignParentTop="true"
android:layout_marginTop="80dp"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:paddingRight="96dp"
android:paddingEnd="96dp"
android:gravity="right|end"
android:background="#color/purple"
tools:text="Name"/>
<!-- replace with whatever component you are using for circle image view -->
<CircleImageView
android:id="#+id/circle_image_view"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginTop="64dp"
android:layout_marginRight="16dp"
android:layout_marginEnd="16dp"
android:background="#color/purple"
tools:src="#drawable/gwynneth"/>
So I understand that you want to draw that purple thick line and put on top of it a Imageview.
The easiest way, the whay i usually do to overlapp two or more layouts/ views is this: lets say we have 3 views( View 1, View 2 and View 3). If you put them in this order(1,2,3)in a Relative layout, and set them the same position in the Layout, the result will be that the View 3 will be on top of other 2.
So as a conclusion, if you want to overlapp two or more Views just put the View you want to be on top( the picture in your case) before the view you want to be overlapped( the purple line)
Having a lot of trouble getting an icon to huddle into the position I want it in. I looked at 3 different Stack Overflow questions and tried placing the image in a RelativeLayout, LinearLayout, and a TableRow. All with various XML options. Never managed to get the icon to go right and center itself between top and bottom of the allotted space. In the pic below, red is where it is now, blue is where I want it. Here's a pic (of how it looks now, which is incorrect) and the code (imageView1 is what I want to align):
And the code:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent"
android:id="#+id/loginScrollView">
<TableLayout android:layout_width="fill_parent"
android:layout_height="wrap_content" android:orientation="vertical"
android:padding="5dp">
<ImageView android:id="#+id/logoImageView"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:src="#drawable/logo" android:contentDescription="#string/app_name" />
<TextView android:id="#+id/demoTextView"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="#string/logDetails" android:gravity="center_horizontal|center" />
<EditText android:id="#+id/emailEditText"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:hint="#string/loginHint" android:imeOptions="actionNext"
android:inputType="textEmailAddress" android:padding="20dp" />
<EditText android:id="#+id/passEditText"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:hint="#string/password" android:imeOptions="actionDone"
android:inputType="textPassword" android:padding="20dp" />
<TableRow android:id="#+id/rememberTableRow"
android:layout_width="wrap_content" android:layout_height="wrap_content">
<TextView android:id="#+id/rememberTextView"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="#string/rememberDetails" android:layout_gravity="center" />
<CheckBox android:id="#+id/rememberCheckBox"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:padding="20dp" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="showPopup"
android:src="#drawable/abs__ic_menu_moreoverflow_holo_dark" android:layout_weight="1" android:layout_gravity="center|right"/>
</TableRow>
<TableRow android:id="#+id/buttonTableRow"
android:layout_width="match_parent" android:layout_height="wrap_content">
<Button android:id="#+id/registerButton" android:layout_width="0dip"
android:layout_height="wrap_content" android:layout_gravity="bottom"
android:layout_weight="1" android:text="#string/register" />
<Button android:id="#+id/loginButton" android:layout_width="0dip"
android:layout_height="wrap_content" android:layout_gravity="bottom"
android:layout_weight="1" android:text="#string/login" />
</TableRow>
</TableLayout>
</ScrollView>
Here are the SO questions I've already looked at and tried to use as solutions:
Aligning ImageView to right of the layout android
Aligning with center in android with hierarchical Layouts
Android ImageButton not displaying on right side of the screen
There are multiple options, as far as I can tell. I'll give you two:
First option is to set a scaletype on the ImageView containing the overflow icon. You make it take up all remaining available space and set the scaletype to fitEnd. This will position the icon all the way at the right.
<ImageView android:id="#+id/imageView1"
android:layout_width="0dp" android:layout_height="wrap_content"
android:layout_gravity="center_vertical" android:scaleType="fitEnd"
android:layout_weight="1" android:onClick="showPopup"
android:src="#drawable/abs__ic_menu_moreoverflow_normal_holo_dark" />
You can accomplish the same effect by setting a weight of 1 on the CheckBox, which will make it 'push' the ImageView with the overflow icon all the way to the right (thanks to a TableRow behaving similarly to a LinearLayout). You can then simply make the ImageView wrap its content. You may want to double check if there are no weird side effects to the clickable region in this case though.
<TableRow android:id="#+id/rememberTableRow"
android:layout_width="wrap_content" android:layout_height="wrap_content">
<TextView android:id="#+id/rememberTextView"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_gravity="center" android:text="#string/rememberDetails" />
<CheckBox android:id="#+id/rememberCheckBox"
android:layout_width="0dp" android:layout_height="wrap_content"
android:layout_weight="1" android:padding="20dp" />
<ImageView android:id="#+id/imageView1"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_gravity="center_vertical" android:onClick="showPopup"
android:src="#drawable/abs__ic_menu_moreoverflow_normal_holo_dark" />
</TableRow>