As described, my List item is a FrameLayout, there are two views inside.
ColorView is a custom view I made for show color in whole view.
(FrameLayout's height is "wrap_content")
It seems work well on my ICS device, but doesn't work on my Android 2.2 emulator and Android 1.6 G1.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<org.mariotaku.twidere.view.ColorView
android:id="#+id/status_background"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:background="#drawable/ic_label_user"/>
<RelativeLayout
android:id="#+id/status_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="6dp"
android:paddingRight="6dp"
android:paddingTop="6dp">
<org.mariotaku.twidere.view.RoundCorneredImageView
android:id="#+id/profile_image"
android:layout_width="#dimen/profile_image_size"
android:layout_height="#dimen/profile_image_size"
android:layout_marginLeft="6dp"
android:scaleType="fitCenter"/>
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignWithParentIfMissing="true"
android:layout_marginLeft="6dp"
android:layout_toLeftOf="#+id/time"
android:layout_toRightOf="#+id/profile_image"
android:singleLine="true"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="?android:attr/textColorPrimary"
android:textStyle="bold"/>
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/name"
android:layout_alignParentRight="true"
android:layout_alignWithParentIfMissing="true"
android:layout_below="#+id/name"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="?android:attr/textColorSecondary"/>
<TextView
android:id="#+id/time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/name"
android:layout_alignParentRight="true"
android:layout_alignWithParentIfMissing="true"
android:drawablePadding="3dp"
android:gravity="center_vertical|right"
android:textColor="?android:attr/textColorSecondary"/>
<ImageView
android:id="#+id/image_preview"
android:layout_width="#dimen/preview_image_size"
android:layout_height="#dimen/preview_image_size"
android:layout_alignWithParentIfMissing="true"
android:layout_below="#+id/text"
android:layout_marginLeft="16dp"
android:layout_marginTop="3dp"
android:layout_toRightOf="#+id/profile_image"
android:background="#drawable/image_preview_background"
android:drawablePadding="3dp"
android:scaleType="fitCenter"
android:visibility="gone"/>
<TextView
android:id="#+id/reply_retweet_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignWithParentIfMissing="true"
android:layout_below="#+id/image_preview"
android:layout_toRightOf="#+id/profile_image"
android:drawablePadding="3dp"
android:paddingLeft="6dp"
android:paddingTop="3dp"
android:textColor="?android:attr/textColorSecondary"/>
</RelativeLayout>
<TextView
android:id="#+id/list_gap_text"
android:layout_width="wrap_content"
android:layout_height="48dp"
android:layout_gravity="center"
android:gravity="center"
android:text="#string/tap_to_load_more"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textStyle="bold"
android:visibility="gone"/>
</FrameLayout>
does it have any workaround or other way to solve this?
EDIT
code for ColorView
package org.mariotaku.twidere.view;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.util.AttributeSet;
import android.view.View;
public class ColorView extends View {
private int mColor = Color.TRANSPARENT;
public ColorView(Context context) {
this(context, null);
}
public ColorView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public ColorView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public void setColor(int color) {
mColor = color;
invalidate();
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawColor(mColor);
}
}
We just had to deal with a similar problem. We noticed that using match_height on a view that is part of a ListView item will not work as expected. The following code should work:
<?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="match_parent" >
<FrameLayout
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/color_bar" >
<!-- Put the content views of your item here. You do not have to use frame layout, it can be any kind of view. -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="8dp"
android:text="#string/app_name" />
</FrameLayout>
<View
android:id="#id/color_bar"
android:layout_width="10dp"
android:layout_height="match_parent"
android:layout_alignBottom="#id/content"
android:layout_alignParentRight="true"
android:layout_alignTop="#id/content"
android:background="#android:color/darker_gray" />
</RelativeLayout>
The trick is basically to align the coloured view to the top and bottom of the content view. Whatever the height of the content is, it will be adopted by the coloured view.
On a side note, as stated in the Android's documentation, you should not use a FrameLayout to contain more than one child.
EDIT
My colleague made me notice that if we use a LinearLayout as the root element of the listview item, match_parent works as expected:
<?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="horizontal" >
<TextView
android:id="#+id/content"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:padding="8dp"
android:text="#string/app_name" />
<View
android:id="#+id/color_bar"
android:layout_width="10dp"
android:layout_height="match_parent"
android:background="#android:color/darker_gray" />
</LinearLayout>
I tested this on a device with Android 2.2 and it worked correctly.
so sad, nobody knows how to deal with this.
but finally I used a workaround to solve this problem.
new layout XML:
<?xml version="1.0" encoding="utf-8"?>
<org.mariotaku.twidere.view.ColorLabelRelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="6dp">
<org.mariotaku.twidere.view.RoundCorneredImageView
android:id="#+id/profile_image"
android:layout_width="#dimen/profile_image_size"
android:layout_height="#dimen/profile_image_size"
android:scaleType="fitCenter"/>
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignWithParentIfMissing="true"
android:layout_marginLeft="3dp"
android:layout_toLeftOf="#+id/time"
android:layout_toRightOf="#+id/profile_image"
android:singleLine="true"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="?android:attr/textColorPrimary"
android:textStyle="bold"/>
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/name"
android:layout_alignParentRight="true"
android:layout_alignWithParentIfMissing="true"
android:layout_below="#+id/name"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="?android:attr/textColorSecondary"/>
<TextView
android:id="#+id/time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/name"
android:layout_alignParentRight="true"
android:layout_alignWithParentIfMissing="true"
android:drawablePadding="3dp"
android:gravity="center_vertical|right"
android:textColor="?android:attr/textColorSecondary"/>
<ImageView
android:id="#+id/image_preview"
android:layout_width="#dimen/preview_image_size"
android:layout_height="#dimen/preview_image_size"
android:layout_alignWithParentIfMissing="true"
android:layout_below="#+id/text"
android:layout_marginLeft="16dp"
android:layout_marginTop="3dp"
android:layout_toRightOf="#+id/profile_image"
android:background="#drawable/image_preview_background"
android:drawablePadding="3dp"
android:scaleType="fitCenter"
android:visibility="gone"/>
<TextView
android:id="#+id/reply_retweet_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignWithParentIfMissing="true"
android:layout_below="#+id/image_preview"
android:layout_toRightOf="#+id/profile_image"
android:drawablePadding="3dp"
android:paddingLeft="6dp"
android:paddingTop="3dp"
android:textColor="?android:attr/textColorSecondary"/>
<TextView
android:id="#+id/list_gap_text"
android:layout_width="wrap_content"
android:layout_height="42dp"
android:layout_centerInParent="true"
android:gravity="center"
android:text="#string/tap_to_load_more"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textStyle="bold"
android:visibility="gone"/>
</org.mariotaku.twidere.view.ColorLabelRelativeLayout>
code for ColorLabelRelativeLayout:
/*
* Twidere - Twitter client for Android
*
* Copyright (C) 2012 Mariotaku Lee <mariotaku.lee#gmail.com>
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
package org.mariotaku.twidere.view;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.widget.RelativeLayout;
public class ColorLabelRelativeLayout extends RelativeLayout {
private final Paint mPaintLeft = new Paint(), mPaintRight = new Paint(), mPaintBackground = new Paint();
private final Rect mRectLeft = new Rect(), mRectRight = new Rect(), mRectBackground = new Rect();
private final float mDensity;
public ColorLabelRelativeLayout(Context context) {
this(context, null);
}
public ColorLabelRelativeLayout(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public ColorLabelRelativeLayout(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
setWillNotDraw(false);
mDensity = context.getResources().getDisplayMetrics().density;
mPaintLeft.setColor(Color.TRANSPARENT);
mPaintRight.setColor(Color.TRANSPARENT);
mPaintBackground.setColor(Color.TRANSPARENT);
}
public void drawLabel(int left, int right, int background) {
mPaintBackground.setColor(background);
mPaintLeft.setColor(left);
mPaintRight.setColor(right);
invalidate();
}
public void drawLeft(int color) {
drawLabel(color, mPaintRight.getColor(), mPaintBackground.getColor());
}
public void drawRight(int color) {
drawLabel(mPaintLeft.getColor(), color, mPaintBackground.getColor());
}
public void drawBackground(int color) {
drawLabel(mPaintLeft.getColor(), mPaintRight.getColor(), color);
}
#Override
public void onDraw(Canvas canvas) {
canvas.drawRect(mRectBackground, mPaintBackground);
canvas.drawRect(mRectLeft, mPaintLeft);
canvas.drawRect(mRectRight, mPaintRight);
super.onDraw(canvas);
}
#Override
public void onSizeChanged(int w, int h, int oldw, int oldh) {
mRectBackground.set(0, 0, w, h);
mRectLeft.set(0, 0, (int)(4 * mDensity), h);
mRectRight.set(w - (int)(4 * mDensity), 0, w, h);
super.onSizeChanged(w, h, oldw, oldh);
}
}
it works really well for me.
Is a requirement to use the ColorView? I ask this because if you don't use it for anything else it's just a waste to use it. You have the parent FrameLayout and you should set the drawable used on the ColorView as the background for the parent FrameLayout.
Create a custom Layout extends FrameLayout, or other layouts whatever, then override the onLayout method.
#Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
super.onLayout(changed, l, t, r, b);
Log.d("onLayout", getWidth() + "x" + getHeight());
final View statusView = findViewById(R.id.status_background);
if (statusView.getVisibility() == VISIBLE) {
final LayoutParams p = (LayoutParams) statusView.getLayoutParams();
if (p.width != getWidth() || p.height != getHeight()) {
p.width = getWidth();
p.height = getHeight();
statusView.post(new Runnable() {
#Override
public void run() {
statusView.setLayoutParams(p);
}
});
}
}
}
An update to #softlete answer:
<?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="wrap_content"
android:background="#android:color/transparent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp">
<RelativeLayout
android:id="#+id/messageContent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_marginRight="20dp"
android:layout_marginLeft="20dp"
android:padding="5dp"
android:background="#drawable/message_bg">
<TextView
android:id="#+id/message"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginRight="20dp"
android:text="un mensaje supremamente largo debe ir aqui para probar el layout"
android:textColor="#android:color/black"
android:textSize="16dp"/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/imageContainer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:paddingTop="10dp"
android:paddingBottom="10dp">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/image"
android:layout_width="40dp"
android:layout_height="40dp"
android:src="#drawable/com_facebook_profile_default_icon" />
</RelativeLayout>
</RelativeLayout>
</LinearLayout>
The "Minimum height" is given by the margins(top+bottom) of #+id/imageContainer plus +height of #+id/image(can use any view/layout that you want)
Related
I am building an app that accesses a WordPress website API to list the posts, which has a preview like this:
The big white space at the top is the image of the post, which I implemented by copying a code I found online, creating a class that extends ImageView and modifying somethings, making the image 100% wide, because previously I couldn't achieve it.
It works, but the image is overlapping the other elements:
This is the code I've copied and adapted:
public class ProportionalImageView extends AppCompatImageView {
public ProportionalImageView(Context context) {
super(context);
}
public ProportionalImageView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public ProportionalImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
Drawable d = getDrawable();
if (d != null) {
int w = MeasureSpec.getSize(widthMeasureSpec);
int h = w * d.getIntrinsicHeight() / d.getIntrinsicWidth();
setMeasuredDimension(w, h);
}
else super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
}
What I want to achieve is to make the image 100% wide but keep the proportion and not overlap, of course.
My layout file, for each square:
<?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="280dp"
android:layout_marginBottom="32sp"
android:background="#android:color/white">
<skillpoint.com.skillpoint.ProportionalImageView
android:id="#+id/imgImageUrl"
android:layout_width="match_parent"
android:layout_height="180dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:adjustViewBounds="true" />
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:layout_below="#+id/imgImageUrl"
android:background="#color/colorAccent" />
<TextView
android:id="#+id/tvTitle"
style="#style/Post.Preview"
android:layout_below="#+id/imgImageUrl"
android:text="Lorem Ipsum"
android:textColor="#color/colorTextColorPrimaryDark"
android:textSize="22sp" />
<TextView
android:id="#+id/tvDate"
style="#style/Post.Preview"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/tvTitle"
android:layout_margin="0dp"
android:text="00/00/0000"
android:textColor="#color/colorTextColorPrimaryDark"
android:textSize="12sp" />
<TextView
android:id="#+id/tvContent"
style="#style/Post.Preview"
android:layout_below="#+id/tvDate"
android:text="Lorem ipsum dolor sit amet"
android:textColor="#color/colorTextColorSecondaryDark"
android:textSize="13sp" />
</RelativeLayout>
Custom ImageView class is overlapping other elements in screen
Because your RelativeLayout has static height just change it to android:layout_height="wrap_content" you issue will be solved check the below images
Use
android:layout_height="wrap_content"
instead of
android:layout_height="280dp"
Try this Remove static height from your RelativeLayout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="visible">
<com.example.user33.workingtestapp.ProportionalImageView
android:id="#+id/imgImageUrl"
android:layout_width="match_parent"
android:layout_height="180dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:src="#drawable/disha" />
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:layout_below="#+id/imgImageUrl"
android:background="#color/colorAccent" />
<TextView
android:id="#+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imgImageUrl"
android:text="Lorem Ipsum"
android:textColor="#ff00"
android:textSize="22sp" />
<TextView
android:id="#+id/tvDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/tvTitle"
android:layout_margin="0dp"
android:text="00/00/0000"
android:textSize="12sp" />
<TextView
android:id="#+id/tvContent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/tvDate"
android:text="Lorem ipsum dolor sit amet"
android:textSize="13sp" />
</RelativeLayout>
OUTPUT
without static hight
with static hight
I am trying to achieve the result as shown in Pic1. Tried setting gravity, paddingleft etc but the drawable image comes in the right end and not next to Text(SHown in Pic 2). Can anyone suggest how to align the image next to TextView? Also how to set the size of drawable?
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#drawable/separator"
android:padding="10dp">
<TextView
android:id="#+id/sms"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:layout_weight="1"
android:drawableEnd="#drawable/message"
android:drawableRight="#drawable/message"
android:gravity="center"
android:paddingLeft="3dp"
android:paddingRight="3dp"
android:text="SMS" />
<TextView
android:id="#+id/call"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableEnd="#drawable/call"
android:drawableRight="#drawable/call"
android:gravity="center"
android:text="CALL" />
<TextView
android:id="#+id/email"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:drawableEnd="#drawable/mail"
android:drawablePadding="3dp"
android:drawableRight="#drawable/mail"
android:text="MAIL" />
Try to build around this.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:orientation="horizontal"
android:padding="10dp">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1">
<TextView
android:id="#+id/sms"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:gravity="center"
android:drawableRight="#drawable/message"
android:text="SMS" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1">
<TextView
android:id="#+id/call"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableRight="#drawable/call"
android:gravity="center"
android:text="CALL" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1">
<TextView
android:id="#+id/email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableRight="#drawable/mail"
android:gravity="center"
android:text="MAIL" />
</LinearLayout>
</LinearLayout>
The main problem is that, you are setting the layoutWidth=0dp and weight 1. This makes every TextView take maximum width according to the weight. The drawableRight/drawableEnd sets the drawable resource to be drawn at the rightmost edge of the view. If you want to keep this layout just wrap it in another viewGroup like #Dhinakaran has shown. Better approach would be to use a tab layout.
Instead of using multiple Linear Layouts, you can use a Relative Layout.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="bottom"
android:layout_weight=".33"
android:gravity="center_horizontal|center_vertical">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="Small Text"
android:textAppearance="?android:attr/textAppearanceSmall"/>
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toEndOf="#+id/textView"
android:layout_toRightOf="#+id/textView"
android:src="#android:drawable/btn_star"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="bottom"
android:layout_weight=".33"
android:gravity="center_horizontal|center_vertical">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="Small Text"
android:textAppearance="?android:attr/textAppearanceSmall"/>
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toEndOf="#+id/textView2"
android:layout_toRightOf="#+id/textView2"
android:src="#android:drawable/btn_star"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="bottom"
android:layout_weight=".33"
android:gravity="center_horizontal|center_vertical">
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="Small Text"
android:textAppearance="?android:attr/textAppearanceSmall"/>
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toEndOf="#+id/textView3"
android:layout_toRightOf="#+id/textView3"
android:src="#android:drawable/btn_star"/>
</RelativeLayout>
</LinearLayout>
Result
Created a custom button which doesnt require layout nestings and can align drawable images as required.
Layout file button.xml:
<Button xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/custom_button"
style="#style/custom_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:drawablePadding="5dp"
android:gravity="center" />
Custom Button Class:
public class DrawableAlignedButton extends RelativeLayout {
private View view;
private Button button;
/**
* #param context
* used to inflate the View.
* #param attrs
* XML defined attributes.
*/
public DrawableAlignedButton(final Context context, final AttributeSet attrs) {
super(context, attrs);
init(context, attrs);
}
/**
* #param context
* used to inflate the View.
*/
public DrawableAlignedButton(final Context context) {
super(context);
init(context, null);
}
/**
* #param context
* used to inflate the View.
* #param attrs
* XML defined attributes.
* #param style
* the style for the View.
*/
public DrawableAlignedButton(final Context context, final AttributeSet attrs, final int style) {
super(context, attrs, style);
init(context, attrs);
}
private void init(final Context context, final AttributeSet attributeSet) {
view = ((Activity) getContext()).getLayoutInflater().inflate(R.layout.button, this, true);
button = (Button) view.findViewById(R.id.custom_button);
String buttonText = null;
int drawableStart = 0;
int drawableEnd = 0;
if (attributeSet != null) {
final TypedArray a = context.getTheme().obtainStyledAttributes(attributeSet, R.styleable.CustomButtonStyle, 0, 0);
buttonText = a.getString(R.styleable.CustomButtonStyle_buttonText);
drawableStart = a.getResourceId(R.styleable.CustomButtonStyle_buttonDrawableStart, 0);
drawableEnd = a.getResourceId(R.styleable.CustomButtonStyle_buttonDrawableEnd, 0);
a.recycle();
}
FontUtil.getInstance(context).useNormalRegularFont(button);
if (buttonText != null) {
button.setText(buttonText);
}
button.setCompoundDrawablesRelativeWithIntrinsicBounds(drawableStart, 0, drawableEnd, 0);
}
/**
* Sets the button text.
*
* #param text
* the text to be set.
*/
public void setButtonText(final String text) {
if (button != null) {
button.setText(text);
}
}
/**
* Sets the drawable to the button.
*
* #param drawableStart
* the drawable to set at the beginning of the text.
* #param drawableEnd
* the drawable to set at the end of the text.
*/
public void setDrawableStart(final int drawableStart, final int drawableEnd) {
if (button != null) {
button.setCompoundDrawablesRelativeWithIntrinsicBounds(drawableStart, 0, drawableEnd, 0);
}
}
}
How to use it in the XML :
<com.package.view.DrawableAlignedButton
xmlns:drawableAlignedButton="http://schemas.android.com/apk/res-auto"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/transparent_button_selector"
drawableAlignedButton:buttonDrawableStart="#drawable/small_active"
drawableAlignedButton:buttonText="Button Text" />
I would like to know how to do this horizontal line with text in the middle, look this screenshot :
Someone have an idea to do that on Android ? I found how to do a horizontal line, but never with text.
Thanks !
Just change the colors to match the ones on your image. I also suggest you use a gradient as the background for those dummy views, it looks a whole lot better then the screenshot if you put a little time into it.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true">
<TextView
android:id="#+id/tvText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:text="lala"
android:textColor="#FFFFFF"/>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_centerVertical="true"
android:layout_marginLeft="16dp"
android:layout_toLeftOf="#id/tvText"
android:background="#FF0000"
/>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_centerVertical="true"
android:layout_marginRight="16dp"
android:layout_toRightOf="#id/tvText"
android:background="#FF0000"
/>
</RelativeLayout>
public class CenterLineTextView extends android.support.v7.widget.AppCompatTextView {
private final Rect mBounds = new Rect();
private final Paint mPaint = new Paint();
private int mPadding;
private int mStroke;
public CenterLineTextView(Context context) {
super(context);
init();
}
public CenterLineTextView(Context context, #Nullable AttributeSet attrs) {
super(context, attrs);
init();
}
public CenterLineTextView(Context context, #Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
if (isInEditMode()) {
return;
}
setGravity(Gravity.CENTER);
mStroke = getContext().getResources().getDimensionPixelSize(R.dimen.divider);
mPadding = getContext().getResources().getDimensionPixelSize(R.dimen.login_or_padding);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mPaint.setStrokeWidth(mStroke);
mPaint.setColor(getPaint().getColor());
getPaint().getTextBounds(getText().toString(), 0, getText().length(), mBounds);
canvas.drawLine(0, getHeight() / 2, (getWidth() - mBounds.right) / 2 - mPadding, getHeight() / 2, mPaint);
canvas.drawLine(mPadding + (getWidth() + mBounds.right) / 2, getHeight() / 2, getWidth(), getHeight() / 2, mPaint);
}
}
You can do it with only one View for line and one TextView for text. Just add android:layout_centerHorizontal="true" in XML of TextView.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_margin="12dp"
android:background="#android:color/black" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="2dp"
android:background="#android:color/white"
android:layout_centerHorizontal="true"
android:text="or" />
</RelativeLayout>
seperator line with text in middle
Try this
set the width of the view accordingly
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp">
<View
android:id="#+id/topDivider"
android:layout_width="50dp"
android:layout_height="1dp"
android:layout_below="#id/internal"
android:background="#color/bright_blue"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Middle text here"
android:layout_gravity="center_horizontal"
android:id="#+id/lv_shopName" />
<View
android:id="#+id/topDivider"
android:layout_width="50dp"
android:layout_height="1dp"
android:layout_below="#id/internal"
android:background="#color/bright_blue"/>
</LinearLayout>
<LinearLayout
android:id="#+id/linerlayout"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<View
android:layout_marginRight="2dp"
android:id="#+id/divider"
android:layout_width="wrap conent"
android:layout_height="1dp"
android:background="#00000000" />
<TextView
android:id="#+id/ll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
Text="abc"/>
<View
android:layout_marginLeft="2dp"
android:id="#+id/divider"
android:layout_width="wrap conent"
android:layout_height="1dp"
android:background="#00000000" />
This is the class where i draw the picture onto this canvas, and on this class I’m trying to set the canvas's background to an existing xml layout that I designed.
The idea of what I want to do is like this made-up function: canvas.setBackground(R.layout.game); on the onDraw method.
The java class:
package com.example.snakesnladders;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.view.View;
public class MyBringBack extends View {
Bitmap playerW;
public MyBringBack(Context context) {
super(context);
playerW = BitmapFactory
.decodeResource(getResources(), R.drawable.white);
}
#Override
protected void onDraw(Canvas canvas) {
// TODO Auto-generated method stub
super.onDraw(canvas);
canvas.drawBitmap(playerW, 0, 0, null);
}
}
The XML file:
<?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="match_parent"
android:background="#drawable/easymap"
android:orientation="vertical" >
<TextView
android:id="#+id/whitePlayer"
android:layout_width="32dp"
android:layout_height="32dp"
android:background="#drawable/white"
android:visibility="gone" />
<TextView
android:id="#+id/blackPlayer"
android:layout_width="32dp"
android:layout_height="32dp"
android:visibility="gone"
android:background="#drawable/black" />
<Button
android:id="#+id/btRoll"
android:layout_width="160dp"
android:layout_height="50dp"
android:layout_alignParentLeft="true"
android:layout_alignTop="#+id/cubePic"
android:background="#drawable/buttonshape"
android:text="Roll"
android:textColor="#FFFFFF" />
<TextView
android:id="#+id/cubePic"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="42dp"
android:layout_marginRight="22dp"
android:background="#drawable/cube" />
<TextView
android:id="#+id/tvTurn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/cubePic"
android:layout_alignRight="#+id/btRoll"
android:text="Your turn!"
android:textColor="#color/green"
android:textSize="32dp"
android:textStyle="italic" />
</RelativeLayout>
quick and dirty: Insert the the MyBringBack view in your xml and set height and width to match_parent as last element with a transparent Background
Upüdate your MyBringBack with these constructors:
public MyBringBack (Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
initView();
}
public MyBringBack (Context context, AttributeSet attrs) {
super(context, attrs);
initView();
}
public MyBringBack (Context context) {
super(context);
initView();
}
private void initView() {
//DO WHAT YOU WANT ON INIT
playerW = BitmapFactory
.decodeResource(getResources(), R.drawable.white);
}
And XML Like this
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/easymap"
android:orientation="vertical" >
<TextView
android:id="#+id/whitePlayer"
android:layout_width="32dp"
android:layout_height="32dp"
android:background="#drawable/white"
android:visibility="gone" />
<TextView
android:id="#+id/blackPlayer"
android:layout_width="32dp"
android:layout_height="32dp"
android:visibility="gone"
android:background="#drawable/black" />
<Button
android:id="#+id/btRoll"
android:layout_width="160dp"
android:layout_height="50dp"
android:layout_alignParentLeft="true"
android:layout_alignTop="#+id/cubePic"
android:background="#drawable/buttonshape"
android:text="Roll"
android:textColor="#FFFFFF" />
<TextView
android:id="#+id/cubePic"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="42dp"
android:layout_marginRight="22dp"
android:background="#drawable/cube" />
<TextView
android:id="#+id/tvTurn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/cubePic"
android:layout_alignRight="#+id/btRoll"
android:text="Your turn!"
android:textColor="#color/green"
android:textSize="32dp"
android:textStyle="italic" />
<your.package.MyBringBack
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/my_bring_back"
android:background="#android:color/transparent" />
</RelativeLayout>
I have the following layout file:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_alignParentTop="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/second_grey">
<RelativeLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:id="#+id/categoryName"
android:text="#string/sport"
android:textSize="24sp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginRight="12dp"
android:padding="2dp"
android:id="#+id/button"
android:text="#string/see_more"
android:textSize="12sp"
android:background="#drawable/blue"
android:textColor="#android:color/white" />
</RelativeLayout>
<LinearLayout
android:orientation="horizontal"
android:baselineAligned="false"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="0.99">
<RelativeLayout
android:layout_height="wrap_content"
android:background="#drawable/card"
android:layout_width="0dp"
android:layout_weight="0.33">
<com.favega.groups.SquareLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imgContainer1">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="8dp"
android:id="#+id/img1"
android:src="#drawable/img_football" />
</com.favega.groups.SquareLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/football"
android:padding="8dp"
android:id="#+id/tv1"
android:layout_below="#+id/imgContainer1"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
</RelativeLayout>
<RelativeLayout
android:layout_height="wrap_content"
android:background="#drawable/card"
android:layout_width="0dp"
android:layout_weight="0.33">
<com.favega.groups.SquareLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imgContainer2">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="8dp"
android:id="#+id/img2"
android:src="#drawable/img_football" />
</com.favega.groups.SquareLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/basketball"
android:padding="8dp"
android:id="#+id/tv2"
android:layout_below="#+id/imgContainer2"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
</RelativeLayout>
<RelativeLayout
android:layout_height="wrap_content"
android:background="#drawable/card"
android:layout_width="0dp"
android:layout_weight="0.33">
<com.favega.groups.SquareLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imgContainer3">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="8dp"
android:id="#+id/img3"
android:src="#drawable/img_football" />
</com.favega.groups.SquareLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tennis"
android:padding="8dp"
android:id="#+id/tv3"
android:layout_below="#+id/imgContainer3"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
</RelativeLayout>
</LinearLayout>
And I put it in a ListView in this layout:
<ListView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/categories"></ListView>
then, with a simple Adapter, I just set the layout of each element to the layout file.
It looks like this:
But if I just do instead of the ListView, it looks like this
EDIT: Notice the change of Sport for Fútbol, that's just my mistake, it has nothing to do with the actual layout.
EDIT2:
#Override
public View getView(int position, View convertView, ViewGroup parent) {
Category category = mList.get(position);
if (convertView == null)
convertView = ((Activity) mContext).getLayoutInflater().inflate(R.layout.category, parent, false);
TextView categoryName = (TextView) convertView.findViewById(R.id.categoryName);
categoryName.setText(category.name);
categoryName.setTypeface(Typeface.createFromAsset(mContext.getAssets(), "fonts/Roboto-Italic.ttf"));
return convertView;
}
EDIT3:
package com.favega.groups;
import android.annotation.TargetApi;
import android.content.Context;
import android.util.AttributeSet;
import android.widget.LinearLayout;
public class SquareLayout extends LinearLayout {
public SquareLayout(Context context) {
super(context);
}
#TargetApi(11)
public SquareLayout(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public SquareLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
#Override
public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, widthMeasureSpec);
int width = MeasureSpec.getSize(widthMeasureSpec);
int height = MeasureSpec.getSize(heightMeasureSpec);
int size = width > height ? height : width;
setMeasuredDimension(size, size);
}
}
int size = width > height ? height : width;
setMeasuredDimension(size, size);
Clearly you are setting Measured Dimension to the smallest of width and height!
Since you gave width and height as match_parent, we can assume that one of the value got as zero from parent. As your intention is to make a square image, I prefer you relate this SquareLayout to the child(image) itself rather that the parent. By using wrap_content.
Set each tag of view in converView.setTag(viewName); before returning covertView.
Try May help.Thanks!!