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" />
Related
I am building an qr scanner in Android Studio and using cameraX Api and for preview using TextureView.
In layout i want shadow over textureview like in most qr scanner Apps.
my current screen is
my screen
and i want something like
phonepe qr
so how do i add overlay around the focus area.is it possible in layout or i have to use CustomView.
my current layout is
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<data>
</data>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorGrey">
<TextureView
android:id="#+id/texture_view"
android:layout_width="0dp"
android:layout_height="0dp"
android:visibility="visible"
app:layout_constraintTop_toTopOf="#+id/included"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
/>
<include
android:id="#+id/included"
layout="#layout/custom_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<View
android:id="#+id/texture_view_border"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/scanner_border"
app:layout_constraintBottom_toTopOf="#id/guideline_horizontal_mid"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toStartOf="#id/guideline_vertcal_right"
app:layout_constraintStart_toEndOf="#id/guideline_vertcal_left"
app:layout_constraintTop_toBottomOf="#id/guideline_horizontal_up" />
<TextView
android:id="#+id/qr_code_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="Scan QR code"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"
android:textColor="#color/colorWhite"
app:layout_constraintStart_toStartOf="#id/guideline_vertcal_left"
app:layout_constraintEnd_toEndOf="#id/guideline_vertcal_right"
app:layout_constraintTop_toBottomOf="#id/texture_view_border"
/>
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline_vertcal_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.1" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline_vertcal_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.90" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline_horizontal_up"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.20" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline_horizontal_mid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.80" />
<View
android:id="#+id/scanner_bar"
android:layout_width="0dp"
android:layout_height="2dp"
android:background="#color/colorLoginPrimary"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="#id/texture_view_border"
app:layout_constraintEnd_toEndOf="#id/texture_view_border"
app:layout_constraintStart_toStartOf="#id/texture_view_border"
app:layout_constraintTop_toTopOf="#id/texture_view_border" />
<View
android:layout_width="30dp"
android:layout_height="5dp"
android:background="#color/colorLoginPrimary"
app:layout_constraintStart_toStartOf="#id/texture_view_border"
app:layout_constraintTop_toTopOf="#id/texture_view_border" />
<View
android:layout_width="5dp"
android:layout_height="30dp"
android:background="#color/colorLoginPrimary"
app:layout_constraintStart_toStartOf="#id/texture_view_border"
app:layout_constraintTop_toTopOf="#+id/texture_view_border" />
<View
android:layout_width="30dp"
android:layout_height="5dp"
android:background="#color/colorLoginPrimary"
app:layout_constraintEnd_toEndOf="#id/texture_view_border"
app:layout_constraintTop_toTopOf="#id/texture_view_border" />
<View
android:layout_width="5dp"
android:layout_height="30dp"
android:background="#color/colorLoginPrimary"
app:layout_constraintEnd_toEndOf="#+id/texture_view_border"
app:layout_constraintTop_toTopOf="#id/texture_view_border" />
<View
android:id="#+id/view"
android:layout_width="30dp"
android:layout_height="5dp"
android:background="#color/colorLoginPrimaryDark"
app:layout_constraintBottom_toBottomOf="#id/texture_view_border"
app:layout_constraintStart_toStartOf="#id/texture_view_border" />
<View
android:layout_width="30dp"
android:layout_height="5dp"
android:background="#color/colorLoginPrimary"
app:layout_constraintBottom_toBottomOf="#id/texture_view_border"
app:layout_constraintEnd_toEndOf="#+id/texture_view_border" />
<View
android:layout_width="5dp"
android:layout_height="30dp"
android:background="#color/colorLoginPrimary"
app:layout_constraintBottom_toBottomOf="#+id/texture_view_border"
app:layout_constraintStart_toStartOf="#id/texture_view_border" />
<View
android:layout_width="5dp"
android:layout_height="30dp"
android:background="#color/colorLoginPrimary"
app:layout_constraintBottom_toBottomOf="#+id/texture_view_border"
app:layout_constraintEnd_toEndOf="#id/texture_view_border" />
</androidx.constraintlayout.widget.ConstraintLayout>
So i came up with this soution:
i added a custom layout class as follows
public class CircleOverlayView extends LinearLayout{
private Bitmap bitmap;
public CircleOverlayView(Context context) {
super(context);
}
public CircleOverlayView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public CircleOverlayView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
#TargetApi(Build.VERSION_CODES.LOLLIPOP)
public CircleOverlayView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
}
#Override
protected void dispatchDraw(Canvas canvas) {
super.dispatchDraw(canvas);
if (bitmap == null) {
createWindowFrame();
}
canvas.drawBitmap(bitmap, 0, 0, null);
}
protected void createWindowFrame() {
bitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);
Canvas osCanvas = new Canvas(bitmap);
RectF outerRectangle = new RectF(0, 0, getWidth(), getHeight());
RectF innerRectangle = new RectF(getWidth() * .10f, getHeight() * .20f, getWidth() * .90f, getHeight() * .70f);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setColor(getResources().getColor(R.color.colorBlack));
paint.setAlpha(150);
osCanvas.drawRect(outerRectangle, paint);
paint.setColor(Color.TRANSPARENT);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_OUT));
//osCanvas.drawRect(innerRectangle,paint);
osCanvas.drawRoundRect(innerRectangle, 45, 45, paint);
/* paint.setColor(Color.TRANSPARENT);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_OUT));
float centerX = getWidth() / 2;
float centerY = getHeight() / 2;
float radius = getResources().getDimensionPixelSize(R.dimen.fab_margin);
osCanvas.drawCircle(centerX, centerY, radius, paint);*/
}
#Override
public boolean isInEditMode() {
return true;
}
#Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
super.onLayout(changed, l, t, r, b);
bitmap = null;
}}
then in my layout added it over textureView
<data>
</data>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/included"
layout="#layout/custom_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextureView
android:id="#+id/texture_view"
android:layout_width="0dp"
android:layout_height="0dp"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/included" />
<com.example.studentapp.utils.CircleOverlayView
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/texture_view" />
<View
android:id="#+id/texture_view_border"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/scanner_border"
app:layout_constraintBottom_toTopOf="#id/guideline_horizontal_mid"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toStartOf="#id/guideline_vertcal_right"
app:layout_constraintStart_toEndOf="#id/guideline_vertcal_left"
app:layout_constraintTop_toBottomOf="#id/guideline_horizontal_up" />
<TextView
android:id="#+id/qr_code_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="Scan QR code"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"
android:textColor="#color/colorWhite"
app:layout_constraintBottom_toTopOf="#id/guideline_horizontal_mid"
app:layout_constraintEnd_toEndOf="#id/guideline_vertcal_right"
app:layout_constraintStart_toStartOf="#id/guideline_vertcal_left" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline_vertcal_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.1" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline_vertcal_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.90" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline_horizontal_up"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.20" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline_horizontal_mid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.80" />
<View
android:id="#+id/scanner_bar"
android:layout_width="0dp"
android:layout_height="2dp"
android:background="#color/colorLoginPrimary"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="#id/texture_view_border"
app:layout_constraintEnd_toEndOf="#id/texture_view_border"
app:layout_constraintStart_toStartOf="#id/texture_view_border"
app:layout_constraintTop_toTopOf="#id/texture_view_border" />
</androidx.constraintlayout.widget.ConstraintLayout>
so by above i was able to get phonepe like qr scanner by adding custom overlay over textureview.
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 using a gridview in my application in which I want to make my view centered if there only one element in my adapter and maximum of three elements in one row.But for some reason one element is not being centered.
Please help me in this.
this is my parent layout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
>
<RelativeLayout
android:id="#+id/cplist_title_layout"
android:layout_width="wrap_content"
android:layout_height="74dp"
android:gravity="center_vertical" >
<TextView
android:id="#+id/cplist_title"
android:layout_width="match_parent"
android:layout_height="74dp"
android:layout_marginLeft="32dp"
android:layout_marginRight="32dp"
android:gravity="left|center_vertical"
android:textColor="#color/RGB_0_176_241"
android:textSize="19dp" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/cplist_grid_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/cplist_title_layout"
android:paddingTop="8dp" >
<GridView
android:id="#+id/cp_gridView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="21dp"
android:layout_marginLeft="32dp"
android:layout_marginRight="32dp"
android:layout_marginTop="8dp"
android:numColumns="auto_fit"
android:verticalSpacing="0dp"
android:horizontalSpacing="0dp"
>
</GridView>
</RelativeLayout>
</RelativeLayout>
this is my grid view item layout
<RelativeLayout
android:id="#+id/detail_cplist_item_logo"
android:layout_width="match_parent"
android:layout_height="108dp"
android:gravity="center_vertical"
android:layout_marginLeft="10dp" >
<ImageView
android:id="#+id/detail_cplist_item_cplogo_bg"
android:layout_width="225dp"
android:layout_height="104dp"
android:layout_centerVertical="true"
android:background="#color/RGB_23_27_33"
android:gravity="center" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/detail_cplist_item_details"
android:layout_width="match_parent"
android:layout_height="59dp"
android:layout_below="#id/detail_cplist_item_logo"
android:gravity="center_vertical"
android:layout_marginLeft="10dp" >
<LinearLayout
android:id="#+id/detail_cplist_item_price"
android:layout_width="match_parent"
android:layout_height="31dp"
>
<TextView
android:id="#+id/detail_cp_price_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="6dp"
android:layout_marginTop="4dp"
android:gravity="left"
android:text="Free"
android:textColor="#color/RGB_100_217_217_217"
android:textSize="18dp" />
</LinearLayout>
<RelativeLayout
android:id="#+id/detail_cplist_item_quality_section"
android:layout_width="37dp"
android:layout_height="19dp"
android:layout_below="#id/detail_cplist_item_price"
android:layout_centerVertical="true"
android:layout_marginBottom="9dp"
>
<ImageView
android:id="#+id/detail_cplist_item_quality"
android:layout_width="37dp"
android:layout_height="19dp"
android:gravity="center"
android:src="#drawable/common_selector_icon_hd" />
</RelativeLayout>
<ImageView
android:id="#+id/detail_cplist_item_tag_tv"
android:layout_width="21dp"
android:layout_height="wrap_content"
android:layout_below="#id/detail_cplist_item_price"
android:layout_centerVertical="true"
android:layout_marginLeft="9dp"
android:layout_toRightOf="#id/detail_cplist_item_quality_section"
android:src="#drawable/tag_tv"
android:visibility="invisible" />
<ImageView
android:id="#+id/detail_cplist_item_tag_mobile"
android:layout_width="21dp"
android:layout_height="wrap_content"
android:layout_below="#id/detail_cplist_item_price"
android:layout_centerVertical="true"
android:layout_marginLeft="3dp"
android:layout_toRightOf="#id/detail_cplist_item_tag_tv"
android:src="#drawable/tag_mobile" />
<ImageView
android:id="#+id/detail_cplist_item_live_icon"
android:layout_width="37dp"
android:layout_height="19dp"
android:layout_below="#id/detail_cplist_item_price"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:layout_toRightOf="#id/detail_cplist_item_quality_section"
android:src="#drawable/tag_live"
android:visibility="invisible" />
</RelativeLayout>
Instead of gravity, set this:
android:layout_centerInParent="true"
Had the same problem... I solved it with overridden onMeasure()
public class GridViewEx extends GridView {
private int mRequestedNumColumns = 0;
public GridViewEx(Context context) {
super(context);
}
public GridViewEx(Context context, AttributeSet attrs) {
super(context, attrs);
}
public GridViewEx(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
#Override
public void setNumColumns(int numColumns) {
super.setNumColumns(numColumns);
if (numColumns != mRequestedNumColumns) {
mRequestedNumColumns = numColumns;
}
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
if (mRequestedNumColumns > 0) {
int width = (mRequestedNumColumns * getColumnWidth())
+ ((mRequestedNumColumns-1) * getHorizontalSpacing())
+ getListPaddingLeft() + getListPaddingRight();
setMeasuredDimension(width, getMeasuredHeight());
}
}
}
I was using
android:layout_below="#+id/msg"
works fine after i removed it and used
android:layout_centerInParent="true"
I want to create a notepad. I am referring to sample notepad that provided by android sdk. My problem is I failed to draw multiple lines on editText. I am successfully run the program but there is nothing shows on the editText and even worse I couldn't input a word onto it. Here is my code. Thank you for helping.
On view, I have double confirm with my class path.So, I don't think there is any problem with my class path.
<?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">
<TextView
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:id="#+id/layouteditbottom"
android:layout_alignParentBottom="true"
android:paddingBottom="18dp"
/>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:paddingBottom="5dp"
android:paddingTop="5dp"
android:layout_above="#+id/layouteditbottom">
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
android:text="#string/title"
android:id="#+id/title_text1" />
<EditText android:id="#+id/title"
android:layout_toRightOf="#+id/title_text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:imeOptions="actionNext"
android:textSize="18sp"/>
<View xmlns:android="http://schemas.android.com/apk/res/android"
class="com.example.apps2.MainActivity$LineEditText"
android:id="#+id/body"
android:layout_below="#+id/title"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:padding="5dp"
android:scrollbars="vertical"
android:fadingEdge="vertical"
android:gravity="top"
android:textSize="22sp"
android:capitalize="sentences"/>
</RelativeLayout>
</RelativeLayout>
Code below is java.
public class MainActivity extends Activity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
public static class LineEditText extends EditText{
// we need this constructor for LayoutInflater
public LineEditText(Context context, AttributeSet attrs) {
super(context, attrs);
mRect = new Rect();
mPaint = new Paint();
mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
mPaint.setColor(Color.BLUE);
}
private Rect mRect;
private Paint mPaint;
#Override
protected void onDraw(Canvas canvas) {
//int count = getLineCount();
int height = getHeight();
int line_height = getLineHeight();
int count = height / line_height;
if (getLineCount() > count)
count = getLineCount();//for long text with scrolling
Rect r = mRect;
Paint paint = mPaint;
int baseline = getLineBounds(0, r);//first line
for (int i = 0; i < count; i++) {
canvas.drawLine(r.left, baseline + 1, r.right, baseline + 1, paint);
baseline += getLineHeight();//next line
}
super.onDraw(canvas);
}
}
}
Just add a background image to your editText having the lines on it.
Edit
Create yourself a bitmap drawable with tileMode set to repeat, like so:
<?xml version="1.0" encoding="utf-8"?>
<bitmap
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#[package:]drawable/drawable_resource"
android:tileMode="repeat" />
For android:src specify an image with a line and some space that matches the height of one line of text (depending on your font-size).
Thank you for everyone who answered. I solved it by replacing the view from the outermost relativeLayout to the inner relativeLayout. Following code is the answer.
<?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">
<TextView
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:id="#+id/layouteditbottom"
android:layout_alignParentBottom="true"
android:paddingBottom="18dp"
/>
<RelativeLayout
android:id="#+id/toplayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingBottom="5dp"
android:paddingTop="5dp"
android:layout_alignParentTop="true">
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
android:text="#string/title"
android:id="#+id/title_text1" />
<EditText android:id="#+id/title"
android:layout_toRightOf="#+id/title_text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:imeOptions="actionNext"
android:textSize="18sp"/>
<TextView
android:id="#+id/notelist_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:paddingRight="10sp"
android:textSize="18sp" />
</RelativeLayout>
<view
xmlns:android="http://schemas.android.com/apk/res/android"
class="com.example.note1.NoteEdit$LineEditText"
android:id="#+id/body"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/layouteditbottom"
android:layout_below="#+id/toplayout"
android:background="#android:color/transparent"
android:capitalize="sentences"
android:fadingEdge="vertical"
android:gravity="top"
android:padding="5dp"
android:scrollbars="vertical"
android:textSize="22sp" />
</RelativeLayout>
Use android:lines="2" for fixing multilines and for fixing single line use android:singleLine="true" In your XML you have used single line remove that and use as shown in example.
Change your edittext as shown below
<EditText android:id="#+id/title"
android:layout_toRightOf="#+id/title_text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
//android:singleLine="true"
android:lines="2"// fix the multiline limit 2,3,4,5,6,7.....
android:imeOptions="actionNext"
android:textSize="18sp"/>
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)