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"/>
Related
I've been having some problems with this particular layout for the better part of an hour, and I can't seem to get it to layout as expected. I've done the usual googling around this sort of format for the tab, and nothing seems to be exactly what I'm after.
I have a TabLayout where the tabs are laid out vertically, with an ImageView and a TextView using the default View of the tab.
It looks like this:
Ideally all I want to be able to do is to mimic this layout and anchor a TextView as a badge counter to the top right of the icon.
Like this:
So with that in mind I found a decent approximation of how the default tab layouts actually appear and it used the default ID's so I don't have to assign them programmatically which I thought was pretty nifty:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginBottom="4dp"
android:layout_marginTop="4dp">
<ImageView
android:id="#android:id/icon"
android:layout_gravity="center"
android:layout_width="24dp"
android:layout_height="24dp"
android:scaleType="centerInside" />
<TextView
android:id="#android:id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#drawable/tab_selector"
android:ellipsize="end"
android:textAllCaps="true"
android:gravity="center"
android:maxLines="2" />
</LinearLayout>
<TextView
android:id="#+id/badgeCounter"
android:layout_width="wrap_content"
android:layout_height="20dp"
android:minWidth="20dp"
android:textAlignment="center"
android:background="#drawable/count_background"
android:textSize="15sp" />
</RelativeLayout>
After a lot of tinkering and trying different things, I got to this:
<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content"
android:layout_marginBottom="4dp"
android:layout_marginTop="4dp"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/iconFrame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="2dp"
android:layout_centerHorizontal="true"
android:layout_above="#android:id/text1">
<ImageView
android:id="#android:id/icon"
android:layout_width="24dp"
android:layout_height="24dp"
android:scaleType="centerInside"
android:src="#drawable/tab_home" />
</FrameLayout>
<TextView
android:id="#android:id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#drawable/tab_selector"
android:ellipsize="end"
android:textAllCaps="true"
android:gravity="center"
android:maxLines="2"
android:text="Home"
android:layout_marginBottom="7dp"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true" />
<TextView
android:id="#+id/badgeCounter"
android:layout_width="wrap_content"
android:layout_height="20dp"
android:minWidth="20dp"
android:layout_toRightOf="#+id/iconFrame"
android:textColor="#color/FeatureFontColour"
android:textAlignment="center"
android:background="#drawable/count_background"
android:textSize="15sp"
android:layout_alignTop="#+id/iconFrame" />
</RelativeLayout>
No matter what I try, I can't get the badge TextView to appear in the right place, I've tried removing the linear layout so that I can set it to Layout_RightOf the #android:id/icon, I've tried wrapping the icon in a frame and setting Layout_RightOf that instead just incase the icon was not positioned before the badge TextView was created etc.
This is as close as I can get (Spoiler, not that close):
Any help would be appreciated, I'm not sure what exactly I'm missing, but odds are it's something really obvious.
Try this:
<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content"
android:layout_marginBottom="4dp"
android:layout_marginTop="4dp"
android:clipChildren="false"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/iconFrame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:clipToPadding="false"
android:layout_marginBottom="2dp"
android:layout_centerHorizontal="true"
android:clipChildren="false"
android:layout_above="#android:id/text1">
<ImageView
android:id="#android:id/icon"
android:layout_width="24dp"
android:layout_height="24dp"
android:scaleType="centerInside"
android:src="#drawable/tab_home" />
<TextView
android:id="#+id/badgeCounter"
android:layout_width="wrap_content"
android:layout_height="20dp"
android:minWidth="20dp"
android:textColor="#color/FeatureFontColour"
android:textAlignment="center"
android:background="#drawable/count_background"
android:layout_gravity="right"
android:layout_marginRight="-10dp"
android:layout_marginTop="-10dp"
android:textSize="15sp"/>
</FrameLayout>
<TextView
android:id="#android:id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#drawable/tab_selector"
android:ellipsize="end"
android:textAllCaps="true"
android:gravity="center"
android:maxLines="2"
android:text="Home"
android:layout_marginBottom="7dp"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true" />
</RelativeLayout>
You can play with the margin right/top values to fine tune it.
Creating a layer drawable to display menu item on layer one and badge on top of it
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#drawable/ic_cart"
android:gravity="center" />
<item
android:id="#+id/ic_badge"
android:drawable="#drawable/ic_cart" />
</layer-list>
Creating menu for our activity to display the count on the menu items.
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="com.example.mobikul.MainActivity" >
<item
android:id="#+id/action_cart"
android:icon="#drawable/ic_menu_cart"
android:title="#string/action_cart"
app:showAsAction="always" />
Creating a flexible and efficient custom BagdeDrawable class to draw a view that looks like a count
public class BadgeDrawable extends Drawable {
private Paint mBadgePaint;
private Paint mBadgePaint1;
private Paint mTextPaint;
private Rect mTxtRect = new Rect();
private String mCount = "";
private boolean mWillDraw;
public BadgeDrawable(Context context) {
float mTextSize = context.getResources().getDimension(R.dimen.badge_text_size);
mBadgePaint = new Paint();
mBadgePaint.setColor(Color.RED);
mBadgePaint.setAntiAlias(true);
mBadgePaint.setStyle(Paint.Style.FILL);
mBadgePaint1 = new Paint();
mBadgePaint1.setColor(ContextCompat.getColor(context.getApplicationContext(), R.color.grey_ivory5));
mBadgePaint1.setAntiAlias(true);
mBadgePaint1.setStyle(Paint.Style.FILL);
mTextPaint = new Paint();
mTextPaint.setColor(Color.WHITE);
mTextPaint.setTypeface(Typeface.DEFAULT);
mTextPaint.setTextSize(mTextSize);
mTextPaint.setAntiAlias(true);
mTextPaint.setTextAlign(Paint.Align.CENTER);
}
#Override
public void draw(Canvas canvas) {
if (!mWillDraw) {
return;
}
Rect bounds = getBounds();
float width = bounds.right - bounds.left;
float height = bounds.bottom - bounds.top;
// Position the badge in the top-right quadrant of the icon.
/*Using Math.max rather than Math.min */
float radius = ((Math.max(width, height) / 2)) / 2;
float centerX = (width - radius - 1) +5;
float centerY = radius -5;
if(mCount.length() <= 2){
// Draw badge circle.
canvas.drawCircle(centerX, centerY, (int)(radius+7.5), mBadgePaint1);
canvas.drawCircle(centerX, centerY, (int)(radius+5.5), mBadgePaint);
}
else{
canvas.drawCircle(centerX, centerY, (int)(radius+8.5), mBadgePaint1);
canvas.drawCircle(centerX, centerY, (int)(radius+6.5), mBadgePaint);
}
mTextPaint.getTextBounds(mCount, 0, mCount.length(), mTxtRect);
float textHeight = mTxtRect.bottom - mTxtRect.top;
float textY = centerY + (textHeight / 2f);
if(mCount.length() > 2)
canvas.drawText("99+", centerX, textY, mTextPaint);
else
canvas.drawText(mCount, centerX, textY, mTextPaint);
}
/*
Sets the count (i.e notifications) to display.
*/
public void setCount(String count) {
mCount = count;
// Only draw a badge if there are notifications.
mWillDraw = !count.equalsIgnoreCase("0");
invalidateSelf();
}
#Override
public void setAlpha(int alpha) {
// do nothing
}
#Override
public void setColorFilter(ColorFilter cf) {
// do nothing
}
#Override
public int getOpacity() {
return PixelFormat.UNKNOWN;
}
}
for more referance visit this websitevisit here
The thing you missed here is as follows,
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/lnrButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginBottom="4dp"
android:layout_marginTop="4dp">
<ImageView
android:id="#android:id/icon"
android:layout_gravity="center"
android:layout_width="24dp"
android:layout_height="24dp"
android:scaleType="centerInside" />
<TextView
android:id="#android:id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#drawable/tab_selector"
android:ellipsize="end"
android:textAllCaps="true"
android:gravity="center"
android:maxLines="2" />
</LinearLayout>
<TextView
android:id="#+id/badgeCounter"
android:layout_width="wrap_content"
android:layout_height="20dp"
android:alignRight = "#+id/lnrButton"
android:alignTop = "#+id/lnrButton"
android:minWidth="20dp"
android:textAlignment="center"
android:background="#drawable/count_background"
android:textSize="15sp" />
</RelativeLayout>
Following is you missed
android:alignRight = "#+id/lnrButton"
android:alignTop = "#+id/lnrButton"
or if you want to come the badge on the image means, remove all LinearLayout and make it Relativelaout and instead of lnrButton use imageview id
I have few TextViews with drawable icons on left side.
layout:
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/card_margin">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="#dimen/detail_padding">
<TextView
android:id="#+id/location"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/title_margin"
android:drawableLeft="#drawable/ic_location"
android:drawablePadding="#dimen/drawable_padding"
android:drawableStart="#drawable/ic_location" />
<TextView
android:id="#+id/status"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/title_margin"
android:drawableLeft="#drawable/ic_status"
android:drawablePadding="#dimen/drawable_padding"
android:drawableStart="#drawable/ic_status"/>
<TextView
android:id="#+id/description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/title_margin"
android:drawableLeft="#drawable/ic_description"
android:drawablePadding="#dimen/drawable_padding"
android:drawableStart="#drawable/ic_description"/>
</LinearLayout>
</android.support.v7.widget.CardView>
Screenshot:
If the text is too big, icon stand in the center of textview. I want to set icon aligned top of textview. Is it possible?
You must keep the layout as RelativeLayout
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/card_margin">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="#dimen/detail_padding">
<TextView
android:id="#+id/location"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/title_margin"
android:drawableLeft="#drawable/ic_location"
android:drawablePadding="#dimen/drawable_padding"
android:drawableStart="#drawable/ic_location" />
<TextView
android:id="#+id/status"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/title_margin"
android:drawableLeft="#drawable/ic_status"
android:drawablePadding="#dimen/drawable_padding"
android:drawableStart="#drawable/ic_status"/>
<TextView
android:id="#+id/description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/title_margin"
android:drawableLeft="#drawable/ic_description"
android:drawablePadding="#dimen/drawable_padding"
android:drawableStart="#drawable/ic_description"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
You can set
android:layout_toRightOf="#+id/imageId"
on the textview, and
android:layout_alignParentLeft="true"
on the image.
hope this helps.
Just use ImageView
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="#dimen/detail_padding">
<TextView
android:id="#+id/location"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/title_margin"
android:drawableLeft="#drawable/ic_location"
android:drawablePadding="#dimen/drawable_padding"
android:drawableStart="#drawable/ic_location" />
<TextView
android:id="#+id/status"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/title_margin"
android:drawableLeft="#drawable/ic_status"
android:drawablePadding="#dimen/drawable_padding"
android:drawableStart="#drawable/ic_status" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="#dimen/drawable_padding"
android:src="#drawable/ic_description" />
<TextView
android:id="#+id/description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/title_margin" />
</LinearLayout>
</LinearLayout>
For doing this you will have to create a custom Drawable that wraps your Drawable, and then manipulate the drawing of your custom Drawable by overriding the method onDraw(Canvas).
There is a sample below. This aligns the image to the top, but you can also make it align to the bottom, left or right of the TextView by implementing the required logic in the onDraw(Canvas)-method. You might also want to build in a margin in the onDraw(Canvas), to make your design implementation pixel perfect.
Sample usage:
GravityTopDrawable gravityDrawable = new GravityTopDrawable(innerDrawable);
// NOTE: next 2 lines are important!
innerDrawable.setBounds(0, 0, innerDrawable.getIntrinsicWidth(), innerDrawable.getIntrinsicHeight());
gravityDrawable.setBounds(0, 0, innerDrawable.getIntrinsicWidth(), innerDrawable.getIntrinsicHeight());
mTextView.setCompoundDrawables(gravityDrawable, null, null, null);
Sample code:
public class GravityTopDrawable extends Drawable {
// inner Drawable
private final Drawable mDrawable;
public GravityTopDrawable(Drawable drawable) {
mDrawable = drawable;
}
#Override
public int getIntrinsicWidth() {
return mDrawable.getIntrinsicWidth();
}
#Override
public int getIntrinsicHeight() {
return mDrawable.getIntrinsicHeight();
}
#Override
public void draw(Canvas canvas) {
int halfCanvas= canvas.getHeight() / 2;
int halfDrawable = mDrawable.getIntrinsicHeight() / 2;
// align to top
canvas.save();
canvas.translate(0, -halfCanvas + halfDrawable);
mDrawable.draw(canvas);
canvas.restore();
}
}
I'm drawing lines in relative Layout.To do this, I add line views add to relative layout. But when I add drawed lines to relative layouts the Relative Layout's height changes. Why ? Thanks in advance for your help ! :)
layout.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent"
android:layout_height="fill_parent"
tools:context="com.mobisoft.kelimebul.Local.Oyun"
android:backgroundTint="#ffffcd8d"
android:backgroundTintMode="multiply"
android:background="#ffff9f63"
android:padding="7dp"
android:id="#+id/s"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/relative"
android:touchscreenBlocksFocus="true"
android:nestedScrollingEnabled="true"
android:layout_weight="1">
<GridView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/gameBoard"
android:listSelector="#00000000"
android:background="#color/tahta_rengi"
android:scrollbars="none"
android:fastScrollAlwaysVisible="false"
android:fastScrollEnabled="false"
android:focusable="false"
android:focusableInTouchMode="false"
android:drawSelectorOnTop="true" />
</RelativeLayout>
<HorizontalScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/horizontalScrollView"
android:background="#color/tahta_rengi"
android:layout_weight="1">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/scrolinear">
</LinearLayout>
</HorizontalScrollView>
<RelativeLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#color/backgroundColor"
android:backgroundTint="#color/backgroundColorTint"
android:visibility="visible"
android:layout_weight="1">
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginRight="5dp"
android:layout_centerHorizontal="true">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/timeIcon"
android:src="#drawable/clock"
android:scaleType="fitCenter"
android:layout_gravity="center_horizontal"
android:layout_marginRight="4dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:id="#+id/time"
android:gravity="center_vertical|center|right|center_horizontal"
android:textSize="#dimen/score_textsize"
android:layout_gravity="right"
android:textAlignment="center"
android:layout_alignParentRight="true" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#string/RemainingWordN"
android:id="#+id/textView5"
android:textSize="#dimen/score_textsize" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:id="#+id/remainingNumber"
android:textSize="#dimen/score_textsize" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
Activity.java // Some part code of this activity
DrawView drawView;
drawView = new DrawView(getApplicationContext(), locs, view.getWidth(), colors.get(lineColor));
RelativeLayoutOfLines.addView(drawView); // Add view to relativeLayouts
DrawView.java
public class DrawView extends View {
Paint paint = new Paint();
float locs[];
int strokeWidth;
int color;
public DrawView(Context context, float locs[], int strokeWidth, int color) {
super(context);
this.locs = locs;
this.strokeWidth = strokeWidth;
this.color = color;
}
#Override
public void onDraw(Canvas canvas) {
paint.setColor(getContext().getResources().getColor(color));
paint.setAlpha(100);
paint.setStrokeWidth(strokeWidth);
canvas.drawLine(locs[0], locs[1], locs[2], locs[3], paint); // left, top, right, bottom
canvas.save();
canvas.restore();
}
}
Before Drawing:
https://www.dropbox.com/s/oo79d8rvp4sa2nj/s.PNG?dl=0
After Drawing :
https://www.dropbox.com/s/vawjsxcbi6gd2go/s2.PNG?dl=0
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" />
I am trying to draw lines and rectangles and the line works perfectly, but when I try to draw the rectangles they doesn't show, so I commented the method and put the rectangles in the background of the layouts, but even they didn't show.
MainActivity.class
protected void onCreate (Bundle savedInstanceState {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
line = (LinearLayout)findViewById(R.id.line);
doLine DoLine = new doLine(line.getContext (),0.2,0.4,0.4);
line.addView(DoLine);
}
DoLine.class
public DoLine (Context context, double first, double second, double third){
super (context);
one = first;
two = second;
three = three;
}
#SuppressLink("DrawAllocation")
public void onDraw (Canvas canvas){
canvas.drawRGB (255,255,255);
Paint pincel1 = new Paint;
pincel1.setColor(getResources().getColor(R.color.yellow));
canvas.drawRect(0,10, getWidth(),40,pincel1);
pincel1.setColor(getResources().getColor(R.colot.green));
canvas.drawRect((float)(getWidth()*one),10, getWidth(),40,pincel1);
pincel1.setColor(getResources().getColor(R.color.blue));
canvas.drawRect((float)(getWidth()*one),10, (float)(getWidth()-(getWidth()*three)),40, pincel1);
activity_main.xml
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#dcdcdc"
android:orientation="vertical"
tools:context=".MainActivity" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:background="#fdfdfd"
android:orientation="vertical"
android:padding="3dp" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="35dp"
android:background="#90ffb200"
android:padding="5dp" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginRight="5dp"
android:gravity="right"
android:text="#string/title"
android:textSize="17sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/line"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingLeft="5dp"
android:paddingRight="5dp" >
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingLeft="5dp">
<LineraLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal
<LinearLayout
android:id="#+id/rectyellow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#drawable/yellow
</LinearLayout>
<TextView
android:id="#+id/oneText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="one" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
<LinearLayout
android:id="#+id/rectblue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#drawable/blue"
</LinearLayout>
<TextView
android:id="#+id/twoText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="two" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
<LinearLayout
android:id="#+id/rectgreen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#drawable/green"
</LinearLayout>
<TextView
android:id="#+id/threeText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Three" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
I have been researching for many many days to find a solution and today i found it, I just needed to change the height of the layout to 40dp
android:layout_height="wrap_content"// change this to 40dp
mainActivity.xml
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#dcdcdc"
android:orientation="vertical"
tools:context=".MainActivity" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:background="#fdfdfd"
android:orientation="vertical"
android:padding="3dp" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="35dp"
android:background="#90ffb200"
android:padding="5dp" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginRight="5dp"
android:gravity="right"
android:text="#string/title"
android:textSize="17sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/line"
android:layout_width="match_parent"
android:layout_height="wrap_content"// change this to 40dp
android:orientation="vertical"
android:paddingLeft="5dp"
android:paddingRight="5dp" >
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingLeft="5dp">
<LineraLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal
<LinearLayout
android:id="#+id/rectyellow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#drawable/yellow
</LinearLayout>
<TextView
android:id="#+id/oneText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="one" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
<LinearLayout
android:id="#+id/rectblue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#drawable/blue"
</LinearLayout>
<TextView
android:id="#+id/twoText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="two" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
<LinearLayout
android:id="#+id/rectgreen"
android:layout_width="wrap_content"
android:orientation="horizontal"
android:background="#drawable/green"
</LinearLayout>
<TextView
android:id="#+id/threeText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Three" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
https://www.dropbox.com/s/8dvmgv1k37tnm9f/Sin%20t%C3%ADtulo.png
it's right:
public class MainActivity extends Activity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
LinearLayout line = (LinearLayout)findViewById(R.id.line);
DoLine doLine = new DoLine(line.getContext (),0.2,0.4,0.4);
line.addView(doLine);
}
public class DoLine extends View {
double one;
double two;
double three;
public DoLine(Context context, double first, double second, double third) {
super(context);
one = first;
two = second;
three = third;
}
#SuppressLint("DrawAllocation")
public void onDraw(Canvas canvas) {
canvas.drawRGB(255, 255, 255);
Paint pincel1 = new Paint();
pincel1.setColor(Color.YELLOW);
canvas.drawRect(0, 10, getWidth(), 40, pincel1);
pincel1.setColor(Color.GREEN);
canvas.drawRect((float) (getWidth() * one), 10, getWidth(), 40, pincel1);
pincel1.setColor(Color.BLUE);
canvas.drawRect((float) (getWidth() * one), 10, (float) (getWidth() - (getWidth() * three)), 40, pincel1);
}
}
}