How to create a custom EditText layout? - java

I want to create an EditText like the Image below.
This is what I want to achieve
This is my code (in the xml file of the layout):
<EditText
android:id="#+id/newThoughtThoughtText"
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:background="#drawable/lines"
android:gravity="top"
android:hint="#string/thought_first_text"
android:inputType="textMultiLine"
android:maxLines="15"
android:textColor="#color/color_gray" />
I have created a custom drawable layout file. But this only enables me to have one line at the end, and I need several lines inside the EditText.
How can I do this?
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#color/color_gray" />
</shape>
</item>
</layer-list>
Thanks in advance!

To achieve this you have to make changes in your drawable class which you have created.
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetLeft="-2dp"
android:insetRight="-2dp"
android:insetTop="-2dp">
<shape android:shape="rectangle" >
<stroke
android:width="1dp"
android:color="#000000" />
<solid android:color="#color/md_grey_200" />
</shape>
</inset>
This will give you border bottom and you can change color according to your requirement.
If you don't want to give border to the each EditText you can add one View after each EditText like this.
<View
style="#style/MenuDivider"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginEnd="5dp"
android:layout_marginStart="5dp"
android:layout_marginTop="15dp"
android:background="#color/black"/>
You can change the view height according and background to you.
Hope this will help you.

I managed to solve the problem and to design the editText as wished.
This topic helped me:
Android - How to make all lines in an edittext underlined?
I created my own custom EditText:
package com.example.appsiety.utils;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Rect;
import android.support.v4.content.ContextCompat;
import android.util.AttributeSet;
import com.example.appsiety.R;
public class EditTextThought extends android.support.v7.widget.AppCompatEditText {
private Paint mPaint = new Paint();
private Context context;
public EditTextThought(Context context) {
super(context);
this.context = context;
initPaint();
}
public EditTextThought(Context context, AttributeSet attrs) {
super(context, attrs);
this.context = context;
initPaint();
}
public EditTextThought(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
this.context = context;
initPaint();
}
private void initPaint() {
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setColor(ContextCompat.getColor(context, R.color.color_gray));
}
#Override protected void onDraw(Canvas canvas) {
int left = getLeft();
int right = getRight();
int paddingTop = getPaddingTop();
int paddingBottom = getPaddingBottom();
int paddingLeft = getPaddingLeft();
int paddingRight = getPaddingRight();
int height = getHeight();
int lineHeight = getLineHeight();
int count = (height-paddingTop-paddingBottom) / lineHeight;
for (int i = 0; i < count*2; i++) {
int baseline = lineHeight * (i+1) + paddingTop;
canvas.drawLine(left+paddingLeft, baseline, right-paddingRight, baseline, mPaint);
}
super.onDraw(canvas);
}
}
and then in my layout file i used it:
<view
class="com.example.appsiety.utils.EditTextThought"
android:id="#+id/newThoughtSituationText"
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:scrollbars="vertical"
android:fadingEdge="vertical"
android:gravity="top"
android:textSize="18sp"
android:fontFamily="#font/opensans_light"
android:textColorHint="#color/color_gray"
android:textColor="#color/color_gray"
android:hint="#string/situation_first_text"
android:background="#android:color/transparent"
android:inputType="textMultiLine|textVisiblePassword"
/>

Related

Marque Text Starting and Stopping [duplicate]

I have LinearLayout and inside 2 TextView both have marquee and when I update text in first then second TextView restarts marquee.
<LinearLayout
android:id="#+id/panel"
android:layout_width="320dp"
android:layout_height="match_parent"
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:gravity="center_vertical"
android:orientation="vertical" >
<TextView
android:id="#+id/first"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="marquee"
android:gravity="bottom|center_horizontal"
android:marqueeRepeatLimit="marquee_forever"
android:singleLine="true" />
<TextView
android:id="#+id/second"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="marquee"
android:gravity="top|center_horizontal"
android:marqueeRepeatLimit="marquee_forever"
android:singleLine="true"
/>
</LinearLayout>
I found that if for R.id.first and R.id.second i set layout_width="320dp" the effect don't occurs.
But I want to set android:layout_width="match_parent" there is some workaround?
I found similar problem but without solution:
Android, RelativeLayout restarts Marquee-TextView when changing ImageView in same RelativeLayout
I had a similar problem and the solution IS to set fixed size for the Textview.
So why not do it progammatically? In my case, it solved the problem. Here is my solution in details :
The layout is a bit complex with a lot of changing values. Here is the interesting part :
layout.xml :
<!-- The height and visibility values change programatically -->
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="30dp"
android:layout_alignParentBottom="true"
android:visibility="gone" >
<FrameLayout>
...
// some code
...
</FrameLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<TextView
android:layout_width="wrap_content"
android:layout_height="fill_parent" />
<!-- My scrolling textview. see below. -->
<!-- The size will be set when -->
<!-- the layout will be draw, -->
<!-- after the Activity.onCreate(). -->
<!-- I removed ALL THE UNECESSARY (I mean -->
<!-- scrollHorizontally, focusable and focusableInTouchMode. -->
<!-- You don't need it !!!!) -->
<fr.cmoatoto.android.widget.ScrollingTextView
android:id="#+id/text"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:singleLine="true"
android:ellipsize="marquee"
android:marqueeRepeatLimit="marquee_forever" />
<ImageView
...
// some code
... />
</LinearLayout>
</RelativeLayout>
The ScrollingTextView has been defined in this answer
Here it is again :
ScrollingTextView.java :
public class ScrollingTextView extends TextView {
public ScrollingTextView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public ScrollingTextView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public ScrollingTextView(Context context) {
super(context);
}
#Override
protected void onFocusChanged(boolean focused, int direction, Rect previouslyFocusedRect) {
if(focused)
super.onFocusChanged(focused, direction, previouslyFocusedRect);
}
#Override
public void onWindowFocusChanged(boolean focused) {
if(focused)
super.onWindowFocusChanged(focused);
}
#Override
public boolean isFocused() {
return true;
}
}
And finally the Activity. As I said before, You need to set fixed width and height so we will do it programmatically with a listener in the onCreate() :
MyActivity.java :
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.layout);
TextView textView = ((TextView) findViewById(R.id.home_trafic_text));
textView.setText(getString(R.string.loading));
textView.setEnabled(true); // Thanks to Romain Guy
textView.addOnLayoutChangeListener(new OnLayoutChangeListener() {
#Override
public void onLayoutChange(View v, int left, int top, int right,
int bottom, int oldLeft, int oldTop, int oldRight, int oldBottom) {
LayoutParams params = v.getLayoutParams();
params.width = right - left;
params.height = bottom - top;
params.weight = 0;
v.removeOnLayoutChangeListener(this);
v.setLayoutParams(params);
}
});
}
Be careful if you need to change orientation or things like that but it works pretty well for me !
----EDIT FOR PRE-API-11---
Because OnLayoutChangeListener exists only from Api v11, there is a workaround (It works but I think it is less good) :
Remove the OnLayoutChangeListener from your activity :
MyActivity.java :
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.layout);
TextView textView = ((TextView) findViewById(R.id.home_trafic_text));
textView.setText(getString(R.string.loading));
textView.setEnabled(true); // Thanks to Romain Guy
}
and add a onSizeChanged in your ScrollingTextView :
ScrollingTextView.java :
public class ScrollingTextView extends TextView {
...
// Same code as before
...
#Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
LayoutParams params = (LayoutParams) getLayoutParams();
params.width = w;
params.height = h;
params.weight = 0;
setLayoutParams(params);
}
}
I hope it helps !
You should prevent putting both marquee in the same ViewGroup. In your case, you can wrap each marquee TextView with a LinearLayout (this won't work if using RelativeLayout).
just a simple Fix..:) no need to worry much...just fix width of textview as some 800dp or too higher width. it will solve reset issue

How to Resize the toolbar according to the length of the title?

According to the fragment in which I am setting the title of my Toolbar, but some titles are very long and the App puts three points:
What I want is to display the full title, not decrease the size of the letter, if not increase the size of the toolbar so that if the title does not reach in a line that is put in a second as if it were a wrapcontent.
How is it possible to do this?
My toolbar in XML:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:id="#+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:theme="#style/Toolbar" />
</LinearLayout>
Setting the title via Java
((NavigationDrawerActivity) activity)
.getSupportActionBar().setTitle(mytext);
I have developed a custom toolbar that tries to fit text as much as possible. You should set this custom Toolbar as action bar like this: https://developer.android.com/training/appbar/setting-up.
Here is my custom toolbar code:
MyToolbar.java:
package com.aminography.textapp;
import android.content.Context;
import android.support.annotation.Nullable;
import android.support.v7.widget.AppCompatTextView;
import android.support.v7.widget.Toolbar;
import android.util.AttributeSet;
import android.view.LayoutInflater;
public class MyToolbar extends Toolbar {
private AppCompatTextView mTitleTextView;
public MyToolbar(Context context) {
super(context);
mTitleTextView = LayoutInflater.from(context).inflate(R.layout.toolbar_title_layout, this).findViewById(R.id.titleTextView);
addView(mTitleTextView);
}
public MyToolbar(Context context, #Nullable AttributeSet attrs) {
super(context, attrs);
mTitleTextView = LayoutInflater.from(context).inflate(R.layout.toolbar_title_layout, this).findViewById(R.id.titleTextView);
addView(mTitleTextView);
}
public MyToolbar(Context context, #Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mTitleTextView = LayoutInflater.from(context).inflate(R.layout.toolbar_title_layout, this).findViewById(R.id.titleTextView);
addView(mTitleTextView);
}
#Override
public void setTitle(int resId) {
mTitleTextView.setText(resId);
}
#Override
public void setTitle(CharSequence title) {
mTitleTextView.setText(title);
}
#Override
public void setTitleTextColor(int color) {
mTitleTextView.setTextColor(color);
}
}
toolbar_title_layout.xml:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="16dp"
android:paddingRight="16dp">
<android.support.v7.widget.AppCompatTextView
android:id="#+id/titleTextView"
style="#style/TextAppearance.AppCompat.Widget.ActionBar.Title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:autoSizeMinTextSize="9sp"
app:autoSizeStepGranularity="0.5sp"
app:autoSizeTextType="uniform" />
</FrameLayout>

How do I make a custom LinearLayout?

I need to make a LinearLayout with title on top of it. Kinda look like this
https://imgur.com/Kwa7a47
Does anyone knows how to make one like this?
Edited :
Here is my border drawable which I set as my layout background
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:topRightRadius="30dp"
android:bottomLeftRadius="30dp" />
<stroke
android:width="2dp"
android:color="#000000"/>
</shape>
You can create a class that extend from Linerlayout. then in onCreate method you mast inflate a xml layout.
public class ValueSelector extends Linerlayout {
View rootView;
TextView valueTextView;
public ValueSelector(Context context) {
super(context);
init(context);
}
public ValueSelector(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
private void init(Context context) {
//do setup work here
rootView = inflate(context, R.layout.your_custom_view, this);
}
}
Then in your_layout_view.xml write your custom view like:
<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:orientation="vertical"
android:background="#drwable.boarder_bd"
tools:context=".LinearLayout" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="My Data"
android:paddingTop="10px"/>
</LinearLayout>

How to draw custom circle with a fill color in android?

I'm trying to draw this shape in my android app :
i want to draw a hollow circle with wide stroke,
i want to draw a hollow circle with wide stroke, and i want that each circle will fill in a custom way. if the user enter 57 then the circle stroke will be 57% yellow and in the middle of the shape will be text view.
is there a way to do it?
this is my code so far:
public class MyView extends View {
Paint paint;
Path path;
public MyView(Context context) {
super(context);
init();
}
public MyView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public MyView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}
private void init(){
paint = new Paint();
paint.setColor(Color.BLUE);
paint.setStrokeWidth(10);
paint.setStyle(Paint.Style.STROKE);
}
#Override
protected void onDraw(Canvas canvas) {
// TODO Auto-generated method stub
super.onDraw(canvas);
paint.setStyle(Paint.Style.STROKE);
canvas.drawCircle(50, 50, 30, paint);
}
}
and the xml
<?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="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:orientation="vertical"
android:padding="10dp" >
<TextView
style="#style/black_textview"
android:text="#string/status_m" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:baselineAligned="false"
android:orientation="horizontal" >
<FrameLayout
android:id="#+id/frame_graph_1"
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_marginTop="10dp"
android:layout_weight="1"
android:orientation="vertical" >
</FrameLayout>
<FrameLayout
android:id="#+id/frame_graph_2"
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_marginTop="10dp"
android:layout_weight="1"
android:orientation="vertical" >
</FrameLayout>
<FrameLayout
android:id="#+id/frame_graph_3"
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_marginTop="10dp"
android:layout_weight="1"
android:orientation="vertical" >
</FrameLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
and this is the main class
public class HomeGraphFragment extends Fragment {
FrameLayout frameGraph1 , frameGraph2 , frameGraph3;
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View v = inflater.inflate(R.layout.home_graph, container, false);
init(v);
return v;
}
private void init(View v) {
frameGraph1 = (FrameLayout)v.findViewById(R.id.frame_graph_1);
frameGraph2 = (FrameLayout)v.findViewById(R.id.frame_graph_2);
frameGraph3= (FrameLayout)v.findViewById(R.id.frame_graph_3);
frameGraph1.addView(new MyView(getActivity()));
}
}
You can customize your progress bar:
<item android:id="#android:id/background">
<rotate
android:fromDegrees="270"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="270" >
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:thicknessRatio="15.0" >
<solid android:color="#color/clr_secondary" />
</shape>
</rotate>
</item>
<item android:id="#android:id/secondaryProgress">
<rotate
android:fromDegrees="270"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="270" >
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:thicknessRatio="15.0" >
<solid android:color="#color/clr_secondary" />
</shape>
</rotate>
</item>
<item android:id="#android:id/progress">
<rotate
android:fromDegrees="270"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="270" >
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:thicknessRatio="15.0" >
<solid android:color="#color/clr_primary" />
</shape>
</rotate>
</item>
Finally set ProgressBar drawable to your drawable
android:progressDrawable="#drawable/blue_progress_bar"
To display text in center, set RelativeLayout as background and then add ProgressBar and TextView. Then set centerInParent="true" in your parent RelativeLayout
You can use SweepGradient, passing the your circle center coordinates as parameters.

Expand ImageView to maximum possible maintaining aspect ratio in Android

I have found lots of answers in this site but they are not working or just for single cases. In my case:
I would like to load an image and show it into a ImageView.
The width of the ImageView must be the maximum possible: parent layout width.
The height must be the one that allows re-scale the image maintaining the aspect ratio.
How do achieve this? Here is my layout with the ImageView inside (currently I have been using fitXY but the image does not preserve the aspect ratio, even if using adjustViewBounds:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/layoutPictureGalleryItem"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:background="#E0E0DE"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
tools:ignore="ContentDescription" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#FFFFFF" >
<TextView
android:id="#+id/textName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="esto es una prueba para ver cómo queda el layout"
android:textColor="#000000"
android:textSize="12sp"
android:typeface="serif"
android:padding="2dp" />
<TextView
android:id="#+id/textDescription"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone"
android:padding="2dp" />
</LinearLayout>
</LinearLayout>
Use this widget instead of your imageview and let the width match parent:
package com.myapp.widgets;
import android.content.Context;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.widget.ImageView;
public class ResizableImageView extends ImageView {
public ResizableImageView(Context context)
{
super(context);
}
public ResizableImageView(Context context, AttributeSet attrs)
{
super(context, attrs);
}
public ResizableImageView(Context context, AttributeSet attrs,
int defStyle)
{
super(context, attrs, defStyle);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
{
Drawable drawable = getDrawable();
if (drawable != null)
{
int width = MeasureSpec.getSize(widthMeasureSpec);
int diw = drawable.getIntrinsicWidth();
if (diw > 0)
{
int height = width * drawable.getIntrinsicHeight() / diw;
setMeasuredDimension(width, height);
}
else
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
else
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
}

Categories