We Keep Coding

How to create a custom EditText layout?

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"
/>

My Toolbar compound view doesn't align with parent view group properly

I am in need of a custom toolbar for a new app that I am writing. When I try to add the view to my main layout it doesn't align properly. Can someone please explain why?
public class LjCustomToolbar extends Toolbar {
private Context context;
private LayoutInflater layoutInflater;
private TextView toolbar_title;
public LjCustomToolbar(Context context) {
super(context);
initialize(context);
}
public LjCustomToolbar(Context context, AttributeSet attrs) {
super(context, attrs);
initialize(context);
}
public LjCustomToolbar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initialize(context);
}
private void initialize(Context context) {
this.context = context;
layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
layoutInflater.inflate(R.layout.custom_toolbar, this);
}
}
custom_toolbar.xml
<Toolbar
style="#style/LjToolBarDefault"
xmlns:android="http://schemas.android.com/apk/res/android">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Profile"
style="#style/LjBodyNormalText"
android:textColor="#color/white"
android:layout_gravity="center"
android:id="#+id/toolbar_title_text" />
</Toolbar>
activity_main.xml
<RelativeLayout 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:gravity="center_horizontal"
android:background="#color/lj_color_primary">
<us.lj.CustomViews.LjCustomToolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</RelativeLayout>
Click here to see my current layout

Can you show a screenshot, to see what is not working.
Why do you want to customize the Toolbar? If you want to add another views inside the toolbar you can do it in xml as all other UI elements

Android : No resource identifier found for attribute 'headerView'

Using Android Studio, I get this error in my activity layout : Error:(9) No resource identifier found for attribute 'headerView' in package 'com.merahjambutech.zuki.deteksi'
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
xmlns:compat="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android">
<com.merahjambutech.zuki.deteksi.view.PullToZoomListViewEx
android:id="#+id/paralax_social_list_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="#android:color/transparent"
app:headerView="#layout/header_parallax_social" />
</LinearLayout>
I'm very sure the layout header_parallax_social.xml is available in my project files (res/layout), here's the code of header_parallax_social:
<?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/android"
android:layout_width="match_parent"
android:layout_height="160dp" >
<ImageView
android:id="#+id/header_parallax_social_new_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_centerVertical="true"
android:layout_gravity="center_horizontal"
android:contentDescription="#string/cd_main_image"
android:scaleType="centerCrop"
android:src="#drawable/parallax_social_small" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:orientation="vertical" >
</LinearLayout>
</RelativeLayout>
I have tried to change xmlns:app and anything like that, but still not found solution...

You have to set custom attribute i.e. headerView for your Listview in attrs.xml in values folder :
attrs.xml
<resources>
<declare-styleable name="PullToZoomListViewEx"> declare your custom listview class name here
<attr name="headerView" format="reference"/>
</declare-styleable>
</resources>
By doing this i hope app:headerView="#layout/header_parallax_social" will not show any error but to show header view in a listview you have to do some changes in your custom Listview class and it should looks like
public class PullToZoomListViewEx extends ListView{
private int headerId;
public PullToZoomListViewEx(Context context) {
super(context);
}
public PullToZoomListViewEx(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public PullToZoomListViewEx(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.PullToZoomListViewEx, defStyle, defStyle);
try {
headerId = a.getResourceId(R.styleable.PullToZoomListViewEx_headerView, View.NO_ID);
if (headerId != View.NO_ID) {
LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View header = inflater.inflate(headerId, null);
addHeaderView(header);
}
} finally {
a.recycle();
}
}
}
or
If you want to avoid above efforts, You can programmatically set a header view to a Listview like this :
LayoutInflater inflater = getLayoutInflater();
ViewGroup header = (ViewGroup)inflater.inflate(R.layout.header,myListView, false);
//replace R.layout.header with R.layout.header_parallax_social and myListView with your listview object
myListView.addHeaderView(header, null, false);
Hope this helps.

Custom linear layout not showing

I am making a custom layout, but it's not showing, and i do not know why.
Here is the XML file where the class is defined
<com.example.name.gw2applicaton.SpecializationView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="65dp"
android:layout_height="match_parent">
<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:text="yop2" />
<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:text="yop2" />
</LinearLayout>
</com.example.name.gw2applicaton.SpecializationView>
Here is the class, just a constructor
public class SpecializationView extends LinearLayout {
public SpecializationView(Context context) {
super(context);
LayoutInflater inflater = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
inflater.inflate(R.layout.layout_specialization, this, true);
}
}
And finally where the class is used
<?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="match_parent"
android:orientation="horizontal">
<com.example.name.gw2applicaton.SpecializationView
android:id="#+id/view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_vertical">
</com.example.name.gw2applicaton.SpecializationView>
</LinearLayout>
</LinearLayout>
The SpecializationView is not visible, I do not know why.
What am I doing wrong here?

That's not how it works for a custom view, as you are trying to do. Use this convention instead:
<?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="match_parent"
android:orientation="horizontal">
<!-- just include the layout you defined else where -->
<include layout="#layout/layout_specialization"/>
</LinearLayout>
Where layout_specialization.xml is:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="65dp"
android:layout_height="match_parent">
<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:text="yop2" />
<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:text="yop2" />
</LinearLayout>
Note: You should use custom view definitions when you need to modify an existing view or viewgroup to have special programatic functionality, such as positioning, dynamic content, niche widget, etc... When you want to use a view like you are where it is just using existing widget functionality, do as I described. The include xml tag is great for defining an xml layout and re-using it through your project so there is a minimized duplication of code.
EDIT:
The reason you layout is not showing by the way is you have only defined the constructor for programmatically creating a view (via java code, not xml). To allow for an xml definition of your custom view extend the class as follows with the additional constructors needd:
public class SpecializationView extends LinearLayout {
/* Programmatic Constructor */
public SpecializationView(Context context) {
super(context);
init(context, null, 0);
}
/* An XML Constructor */
public SpecializationView(Context context, AttributeSet attrs) {
super(context, attrs);
init(context, attrs, 0);
}
/* An XML Constructor */
public SpecializationView(Context context, AttributeSet attrs, int resId) {
super(context, attrs, resId);
init(context, attrs, resId);
}
/**
* All initialization happens here!
*/
private void init(Context context, AttributeSet attrs, int resId){
LayoutInflater inflater = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
inflater.inflate(R.layout.layout_specialization, this, true);
}
}
This definition now includes the xml ability to create the custom view (which should now probably work for you). The reason it will work is now you send the attribute set, or the attributes definied via xml to the constructor. Since you didn't include it, it doesn't know what to do for your custom view when defined in xml and you cannot access the layout's attributes that you may define as custom.

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.