tag:blogger.com,1999:blog-32914175050311217492024-01-06T14:23:10.770-08:00Android Example android tutorials and examples code androidTienanhithttp://www.blogger.com/profile/08735830163069154762noreply@blogger.comBlogger21125tag:blogger.com,1999:blog-3291417505031121749.post-43541566664188248622020-10-11T00:59:00.005-07:002020-10-11T00:59:26.917-07:00EditText set max length programmatically | Android Kotlin<p> MainActivity.kt</p><p></p><blockquote><p>class MainActivity : AppCompatActivity() {</p><p> override fun onCreate(savedInstanceState: Bundle?) {</p><p> super.onCreate(savedInstanceState)</p><p> setContentView(R.layout.activity_main)</p><p> // set edit text max length to 5 programmatically</p><p> editText.setMaxLength(5)</p><p> }</p><p><br /></p><p>}</p><p>// extension function to set edit text maximum length</p><p><br /></p><p>fun EditText.setMaxLength(maxLength: Int){</p><p><br /></p><p> filters = arrayOf<InputFilter>(LengthFilter(maxLength))</p><p><br /></p><p>}</p></blockquote><p></p><p><br /></p><p>activity_main.xml</p><p><br /></p><p></p><blockquote><p><?xml version="1.0" encoding="utf-8"?></p><p><br /></p><p><androidx.constraintlayout.widget.ConstraintLayout</p><p><br /></p><p> xmlns:android="http://schemas.android.com/apk/res/android"</p><p><br /></p><p> xmlns:app="http://schemas.android.com/apk/res-auto"</p><p><br /></p><p> xmlns:tools="http://schemas.android.com/tools"</p><p><br /></p><p> android:id="@+id/constraintLayout"</p><p><br /></p><p> android:layout_width="match_parent"</p><p><br /></p><p> android:layout_height="match_parent"</p><p><br /></p><p> android:background="#FEFEFA"</p><p><br /></p><p> tools:context=".MainActivity"></p><p><br /></p><p><br /></p><p><br /></p><p> <EditText</p><p><br /></p><p> android:id="@+id/editText"</p><p><br /></p><p> android:layout_width="0dp"</p><p><br /></p><p> android:layout_height="wrap_content"</p><p><br /></p><p> android:layout_marginStart="12dp"</p><p><br /></p><p> android:layout_marginEnd="12dp"</p><p><br /></p><p> android:inputType="text|textVisiblePassword"</p><p><br /></p><p> android:padding="12dp"</p><p><br /></p><p> app:layout_constraintBottom_toBottomOf="parent"</p><p><br /></p><p> app:layout_constraintEnd_toEndOf="parent"</p><p><br /></p><p> app:layout_constraintStart_toStartOf="parent"</p><p><br /></p><p> app:layout_constraintTop_toTopOf="parent"</p><p><br /></p><p> app:layout_constraintVertical_bias="0.12" /> </p></blockquote><blockquote><p><br /></p><p></androidx.constraintlayout.widget.ConstraintLayout></p></blockquote><div class="separator" style="clear: both; text-align: center;"><img border="0" data-original-height="320" data-original-width="207" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSvfE2Uayfi-UeAs-YHSuF5dj9hR42K7Tmh8wTlkM8bxCOCduzFCCS8lCqu00PvWtifMOWtaoI7FUsHLMx-1u6ErdpFLaCbSsdDYR6xMv9fqzK13F0gsmL9DtVdVQ3AXp8vaR4g0trHjs/w207-h320/Capture.JPG" /></div><p></p>Tienanhithttp://www.blogger.com/profile/08735830163069154762noreply@blogger.com0tag:blogger.com,1999:blog-3291417505031121749.post-28302269763368059392019-08-12T19:30:00.000-07:002019-08-12T19:30:26.409-07:00How to center Vertical and Horizontal div in cssHello to you today I will introduce a <b>code css</b> that we frequently encounter when designing websites that <b>center vertical and horizontal in css</b>, this is very simple but if you do not know they can do follow the steps below.<br />
<h4>
Step 1. Create a div parent css</h4>
<blockquote class="tr_bq">
.content{<br /> width: 500px;<br /><span style="white-space: pre;"> </span>height: 400px;<br /><span style="white-space: pre;"> </span>background: yellow;<br /> }</blockquote>
<b>Step 2. Add class content in html</b><br />
<blockquote class="tr_bq">
<div class ="content"></div></blockquote>
<h4>
Step 3. Create a class div child css</h4>
<blockquote class="tr_bq">
.center{<br /> position: relative;<br /> float: left;<br /> top: 50%;<br /> left: 50%;<br /> transform: translate(-50%, -50%);<br /> }</blockquote>
<h4>
Step 4. Add class center in html</h4>
<blockquote class="tr_bq">
<img class="center"src="url or icon of you" width="50px" height="50px"/> </blockquote>
After all source <b><i>center vertical and horizontal in css</i></b> below:<br />
<blockquote class="tr_bq">
<html><br /> <head><br /> <title>Center Vertical and Horizontal in CSS</title><br /> <style><br /> .content{<br /> width: 500px;<br /><span style="white-space: pre;"> </span>height: 400px;<br /><span style="white-space: pre;"> </span>background: yellow;<br /> }<br /> .center{<br /> position: relative;<br /> float: left;<br /> top: 50%;<br /> left: 50%;<br /> transform: translate(-50%, -50%);<br /> }<br /> </style><br /> </head><br /> <body><br /> <div class ="content"><br /> <img class="center"src="https://icon-library.net/images/hamburger-menu-icon-png-white/hamburger-menu-icon-png-white-15.jpg" width="50px" height="50px"/><br /> </div><br /> </body><br /></html></blockquote>
<b>source image center div</b>:<br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="How to center Vertical and Horizontal div in css" border="0" data-original-height="400" data-original-width="522" height="245" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCBRWaYxBspuo7yAKcb974xNfZru-yo0DYN0WPa75Jmc24yUZX3kxhx_PcrWPH9p_4w_FM4Idwj_-JdZGORtS-m8Y7M2Q_GkdBR4S7fweTlchNfUVm9KEfPKynChgPLqtWQKNB-qA97Hyd/s320/center+vertical+and+horizontal+css.PNG" title="How to center Vertical and Horizontal div in css" width="320" /></div>
<br />Tienanhithttp://www.blogger.com/profile/08735830163069154762noreply@blogger.com0tag:blogger.com,1999:blog-3291417505031121749.post-65413006650195414532019-07-30T22:53:00.000-07:002019-07-30T22:53:12.233-07:00Change EditText bottom border color AndroidHello everyone today I will introduce you to <b>Change Android EditText bottom border color</b>, the following are issues and questions from many people encounter.<br />
I am creating an EditText in my layout xml file, But I want to <b>change color line in EditText </b>from Holo to (for example) red. How that can be done?<br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="Change EditText bottom border color Android" border="0" data-original-height="493" data-original-width="949" height="166" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWLNI50Jy3oAQItLsRscO2p9ZMYhq9XHzikawQHOl-ci3ehJ-WNBgRN2utoiQZZkMTpZAikJLth2ftP1aAA5D3OFSD-O9zoneiMsw_OmGHlhdbzoqdgJ-vIJZkjKA-EfM6plPcnaELvUR0/s320/change+edittext+color.jpg" title="Change EditText bottom border color Android" width="320" /></div>
<br />
you can change the following code <b>change EditText boder color.</b><br />
<i>Step 1. Create layout activity-layout.xml</i><br />
<blockquote class="tr_bq">
<RelativeLayout<br /> xmlns:android="http://schemas.android.com/apk/res/android"<br /> xmlns:tools="http://schemas.android.com/tools"<br /> android:id="@+id/rl"<br /> android:layout_width="match_parent"<br /> android:layout_height="match_parent"<br /> android:padding="10dp"<br /> tools:context=".MainActivity"<br /> android:background="#c9cac1"<br /> ><br /> <EditText<br /> android:id="@+id/et"<br /> android:layout_width="wrap_content"<br /> android:layout_height="wrap_content"<br /> android:hint="Input your country"<br /> android:background="@drawable/edittext_bg"<br /> android:padding="10dp"<br /> /><br /></RelativeLayout></blockquote>
<br />
<i>Step 2. Create res/drawable/edittext_bg.xml</i><br />
<blockquote class="tr_bq">
<?xml version="1.0" encoding="utf-8"?><br /><layer-list xmlns:android="http://schemas.android.com/apk/res/android"><br /> <item><br /> <shape android:shape="rectangle"><br /> <stroke<br /> android:color="#ff1e0c"<br /> android:width="2dp"<br /> /><br /> </shape><br /> </item><br /> <item<br /> android:bottom="2dp"<br /> ><br /> <shape android:shape="rectangle"><br /> <solid android:color="#fffbce"/><br /> </shape><br /> </item><br /></layer-list></blockquote>
<b>The following are the results of the program change EditText botom bodercolor Android.</b><br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="Change EditText bottom border color Android" border="0" data-original-height="262" data-original-width="565" height="148" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW7QS5R9bus513Scz3Rzb6s8oQUXuQE25UREDdUURhRSLB0f_qwOgDjfm-v6DLzDZkLz2L8T3KNP7bMTYBiTxht9adFmUVrq-Kv-XSp9BbXCQWVz5ONlDYq0A07B6ZeIKAojSbC0w1VLgM/s320/AndroidEditTextBottomBorderColorandroid.png" title="Change EditText bottom border color Android" width="320" /></div>
<b><br /></b>
<b><br /></b>Tienanhithttp://www.blogger.com/profile/08735830163069154762noreply@blogger.com0tag:blogger.com,1999:blog-3291417505031121749.post-87585230435597600032019-02-18T19:00:00.000-08:002019-02-18T19:00:22.393-08:00Angular 7 - Tutorial reader json in Angular exampleToday I will continue to show you how to <b>read a json Angula</b>r file to get the data from <b><a href="https://android--example.blogspot.com/search/label/Angular">angular7</a></b> the easiest way, and the following is a detailed guide on how to program and link. The specific json api you can follow.<br />
<iframe height="500" src="https://stackblitz.com/edit/angular-reader-json" width="100%"> </iframe>
Step 1. Link api json<br />
<a href="https://raw.githubusercontent.com/anhtt-asiantech/gnd.io/fb75e146f01b567129bd2acb7bdeff9d6ab9c6a0/public/demos/routes/data/families/birds.json" rel="nofollow">https://raw.githubusercontent.com/anhtt-asiantech/gnd.io/fb75e146f01b567129bd2acb7bdeff9d6ab9c6a0/public/demos/routes/data/families/birds.json</a><br />
<br />
Step 2. Create a class Bird.ts<br />
<div style="background-color: #1e1e1e; color: #d4d4d4; font-family: "Fira Code", Menlo, Monaco, "Courier New", monospace; font-size: 12px; line-height: 18px; white-space: pre;">
<div>
<span style="color: #569cd6;">export</span> <span style="color: #569cd6;">class</span> <span style="color: #3dc9b0;">Bird</span><span style="color: gainsboro;">{</span></div>
<div>
id <span style="color: gainsboro;">:</span> <span style="color: #569cd6;">number</span><span style="color: gainsboro;">;</span></div>
<div>
name <span style="color: gainsboro;">:</span> <span style="color: #569cd6;">string</span><span style="color: gainsboro;">;</span></div>
<div>
<span style="color: #569cd6;">type</span> <span style="color: gainsboro;">:</span> <span style="color: #569cd6;">string</span><span style="color: gainsboro;">;</span></div>
<div>
<span style="color: #3dc9b0;">ScientificName</span> <span style="color: gainsboro;">:</span><span style="color: #569cd6;">string</span><span style="color: gainsboro;">;</span></div>
<div>
<span style="color: gainsboro;">}</span></div>
</div>
<br />
Step 3. Folder app<br />
1. app.module.ts<br />
Import libary httpClientModule<br />
<div style="background-color: #1e1e1e; color: #d4d4d4; font-family: "Fira Code", Menlo, Monaco, "Courier New", monospace; font-size: 12px; line-height: 18px; white-space: pre;">
<div>
<span style="color: #569cd6;">import</span> <span style="color: gainsboro;">{</span> <span style="color: #3dc9b0;">NgModule</span> <span style="color: gainsboro;">}</span> <span style="color: #569cd6;">from</span> <span style="color: #ce9178;">'@angular/core'</span><span style="color: gainsboro;">;</span></div>
<div>
<span style="color: #569cd6;">import</span> <span style="color: gainsboro;">{</span> <span style="color: #3dc9b0;">BrowserModule</span> <span style="color: gainsboro;">}</span> <span style="color: #569cd6;">from</span> <span style="color: #ce9178;">'@angular/platform-browser'</span><span style="color: gainsboro;">;</span></div>
<div>
<span style="color: #569cd6;">import</span> <span style="color: gainsboro;">{</span> <span style="color: #3dc9b0;">FormsModule</span> <span style="color: gainsboro;">}</span> <span style="color: #569cd6;">from</span> <span style="color: #ce9178;">'@angular/forms'</span><span style="color: gainsboro;">;</span></div>
<br />
<div>
<span style="color: #569cd6;">import</span> <span style="color: gainsboro;">{</span> <span style="color: #3dc9b0;">AppComponent</span> <span style="color: gainsboro;">}</span> <span style="color: #569cd6;">from</span> <span style="color: #ce9178;">'./app.component'</span><span style="color: gainsboro;">;</span></div>
<div>
<span style="color: #569cd6;">import</span> <span style="color: gainsboro;">{</span> <span style="color: #3dc9b0;">HelloComponent</span> <span style="color: gainsboro;">}</span> <span style="color: #569cd6;">from</span> <span style="color: #ce9178;">'./hello.component'</span><span style="color: gainsboro;">;</span></div>
<div>
<span style="color: #569cd6;">import</span> <span style="color: gainsboro;">{</span> <span style="color: #3dc9b0;">HttpClientModule</span> <span style="color: gainsboro;">}</span> <span style="color: #569cd6;">from</span> <span style="color: #ce9178;">'@angular/common/http'</span><span style="color: gainsboro;">;</span></div>
<div>
<span style="color: #f44747;">@</span><span style="color: #3dc9b0;">NgModule</span><span style="color: gainsboro;">({</span></div>
<div>
imports<span style="color: gainsboro;">:</span> <span style="color: gainsboro;">[</span> <span style="color: #3dc9b0;">BrowserModule</span><span style="color: gainsboro;">,</span> <span style="color: #3dc9b0;">FormsModule</span><span style="color: gainsboro;">,</span><span style="color: #3dc9b0;">HttpClientModule</span> <span style="color: gainsboro;">],</span></div>
<div>
declarations<span style="color: gainsboro;">:</span> <span style="color: gainsboro;">[</span> <span style="color: #3dc9b0;">AppComponent</span><span style="color: gainsboro;">,</span> <span style="color: #3dc9b0;">HelloComponent</span> <span style="color: gainsboro;">],</span></div>
<br />
<div>
bootstrap<span style="color: gainsboro;">:</span> <span style="color: gainsboro;">[</span> <span style="color: #3dc9b0;">AppComponent</span> <span style="color: gainsboro;">]</span></div>
<div>
</div>
<div>
<span style="color: gainsboro;">})</span></div>
<div>
<span style="color: #569cd6;">export</span> <span style="color: #569cd6;">class</span> <span style="color: #3dc9b0;">AppModule</span> <span style="color: gainsboro;">{</span> <span style="color: gainsboro;">}</span></div>
</div>
2. app.component.css.<br />
<div style="background-color: #1e1e1e; color: #d4d4d4; font-family: "Fira Code", Menlo, Monaco, "Courier New", monospace; font-size: 12px; line-height: 18px; white-space: pre;">
<div>
<span style="color: #569cd6;">p</span> <span style="color: gainsboro;">{</span></div>
<div>
<span style="color: #9cdcfe;">font-family:</span> <span style="color: #ce9178;">Lato</span><span style="color: gainsboro;">;</span></div>
<div>
<span style="color: gainsboro;">}</span></div>
</div>
3. app.component.html<br />
<div style="background-color: #1e1e1e; color: #d4d4d4; font-family: "Fira Code", Menlo, Monaco, "Courier New", monospace; font-size: 12px; line-height: 18px; white-space: pre;">
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">style</span><span style="color: grey;">=</span><span style="color: #ce9178;">"text-align:left;width:500px;"</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">h1</span><span style="color: grey;">></span></div>
<div>
{{ title }}!</div>
<div>
<span style="color: grey;"></</span><span style="color: #569cd6;">h1</span><span style="color: grey;">></span></div>
<br />
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">table</span> *<span style="color: #9cdcfe;">ngIf</span><span style="color: grey;">=</span><span style="color: #ce9178;">"arrBirds"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #608b4e;"><!-- ADD HEADERS --></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">tr</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">th</span><span style="color: grey;">></span>ID<span style="color: grey;"></</span><span style="color: #569cd6;">th</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">th</span><span style="color: grey;">></span>Name of Bird<span style="color: grey;"></</span><span style="color: #569cd6;">th</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">th</span><span style="color: grey;">></span>Type of Bird<span style="color: grey;"></</span><span style="color: #569cd6;">th</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"></</span><span style="color: #569cd6;">tr</span><span style="color: grey;">></span></div>
<br />
<div>
<span style="color: #608b4e;"><!-- BIND ARRAY TO TABLE --></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">tr</span> *<span style="color: #9cdcfe;">ngFor</span><span style="color: grey;">=</span><span style="color: #ce9178;">"let bird of arrBirds"</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span>{{bird.ID}}<span style="color: grey;"></</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span>{{bird.Name}}<span style="color: grey;"></</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span>{{bird.Type}}<span style="color: grey;"></</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"></</span><span style="color: #569cd6;">tr</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"></</span><span style="color: #569cd6;">table</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div>
</div>
4. app.component.ts<br />
<div style="background-color: #1e1e1e; color: #d4d4d4; font-family: "Fira Code", Menlo, Monaco, "Courier New", monospace; font-size: 12px; line-height: 18px; white-space: pre;">
<div>
<span style="color: #569cd6;">import</span> <span style="color: gainsboro;">{</span> <span style="color: #3dc9b0;">Component</span> <span style="color: gainsboro;">}</span> <span style="color: #569cd6;">from</span> <span style="color: #ce9178;">'@angular/core'</span><span style="color: gainsboro;">;</span></div>
<div>
<span style="color: #569cd6;">import</span> <span style="color: gainsboro;">{</span> <span style="color: #3dc9b0;">HttpClient</span><span style="color: gainsboro;">,</span> <span style="color: #3dc9b0;">HttpHeaders</span> <span style="color: gainsboro;">}</span> <span style="color: #569cd6;">from</span> <span style="color: #ce9178;">'@angular/common/http'</span><span style="color: gainsboro;">;</span></div>
<div>
<span style="color: #569cd6;">import</span> <span style="color: gainsboro;">{</span> <span style="color: #3dc9b0;">HttpErrorResponse</span> <span style="color: gainsboro;">}</span> <span style="color: #569cd6;">from</span> <span style="color: #ce9178;">'@angular/common/http'</span><span style="color: gainsboro;">;</span></div>
<div>
<span style="color: #569cd6;">import</span> <span style="color: gainsboro;">{</span> <span style="color: #3dc9b0;">HttpClientModule</span><span style="color: gainsboro;">,</span> <span style="color: #3dc9b0;">HTTP_INTERCEPTORS</span> <span style="color: gainsboro;">}</span> <span style="color: #569cd6;">from</span> <span style="color: #ce9178;">'@angular/common/http'</span><span style="color: gainsboro;">;</span></div>
<div>
<span style="color: #569cd6;">import</span> <span style="color: gainsboro;">{</span><span style="color: #3dc9b0;">Bird</span><span style="color: gainsboro;">}</span> <span style="color: #569cd6;">from</span> <span style="color: #ce9178;">'./Bird'</span><span style="color: gainsboro;">;</span></div>
<div>
<span style="color: #f44747;">@</span><span style="color: #3dc9b0;">Component</span><span style="color: gainsboro;">({</span></div>
<div>
selector<span style="color: gainsboro;">:</span> <span style="color: #ce9178;">'app-root'</span><span style="color: gainsboro;">,</span></div>
<div>
templateUrl<span style="color: gainsboro;">:</span> <span style="color: #ce9178;">'./app.component.html'</span><span style="color: gainsboro;">,</span></div>
<div>
styleUrls<span style="color: gainsboro;">:</span> <span style="color: gainsboro;">[</span><span style="color: #ce9178;">'./app.component.css'</span><span style="color: gainsboro;">]</span></div>
<div>
<span style="color: gainsboro;">})</span></div>
<div>
<span style="color: #569cd6;">export</span> <span style="color: #569cd6;">class</span> <span style="color: #3dc9b0;">AppComponent</span> <span style="color: gainsboro;">{</span></div>
<div>
title <span style="color: gainsboro;">=</span> <span style="color: #ce9178;">'Reader json '</span><span style="color: gainsboro;">;</span></div>
<div>
arrBirds<span style="color: gainsboro;">:</span> <span style="color: #3dc9b0;">Array</span><span style="color: gainsboro;"><</span><span style="color: #3dc9b0;">Bird</span><span style="color: gainsboro;">>;</span></div>
<div>
bird <span style="color: gainsboro;">:</span> <span style="color: #3dc9b0;">Bird</span><span style="color: gainsboro;">;</span></div>
<div>
<span style="color: #569cd6;">constructor</span><span style="color: gainsboro;">(</span><span style="color: #569cd6;">private</span> httpClient <span style="color: gainsboro;">:</span> <span style="color: #3dc9b0;">HttpClient</span><span style="color: gainsboro;">){</span></div>
<div>
<span style="color: gainsboro;">}</span></div>
<div>
ngOnInit <span style="color: gainsboro;">(){</span></div>
<div>
<span style="color: #569cd6;">this</span><span style="color: gainsboro;">.</span>httpClient<span style="color: gainsboro;">.</span><span style="color: #569cd6;">get</span><span style="color: gainsboro;">(</span><span style="color: #ce9178;">'https://raw.githubusercontent.com/anhtt-asiantech/gnd.io/fb75e146f01b567129bd2acb7bdeff9d6ab9c6a0/public/demos/routes/data/families/birds.json'</span><span style="color: gainsboro;">).</span>subscribe<span style="color: gainsboro;">(</span></div>
<div>
data <span style="color: gainsboro;">=></span> <span style="color: gainsboro;">{</span></div>
<div>
<span style="color: #608b4e;">//this.arrBirds = data as string []; // FILL THE ARRAY WITH DATA.</span></div>
<div>
<span style="color: #569cd6;">this</span><span style="color: gainsboro;">.</span>arrBirds <span style="color: gainsboro;">=</span> data <span style="color: #569cd6;">as</span> <span style="color: #3dc9b0;">Array</span><span style="color: gainsboro;"><</span><span style="color: #3dc9b0;">Bird</span><span style="color: gainsboro;">>;</span></div>
<div>
<span style="color: #608b4e;">// let resources = data["resources"];</span></div>
<div>
<span style="color: #569cd6;">for</span><span style="color: gainsboro;">(</span><span style="color: #569cd6;">let</span> i <span style="color: gainsboro;">=</span><span style="color: #b5cea8;">0</span><span style="color: gainsboro;">;</span>i<span style="color: gainsboro;"><</span><span style="color: #569cd6;">this</span><span style="color: gainsboro;">.</span>arrBirds<span style="color: gainsboro;">.</span>length<span style="color: gainsboro;">;</span>i<span style="color: gainsboro;">++){</span></div>
<div>
<span style="color: #569cd6;">let</span> resource <span style="color: gainsboro;">=</span> data<span style="color: gainsboro;">[</span>i<span style="color: gainsboro;">];</span></div>
<div>
console<span style="color: gainsboro;">.</span>log<span style="color: gainsboro;">(</span>resource<span style="color: gainsboro;">[</span><span style="color: #ce9178;">"Name"</span><span style="color: gainsboro;">]);</span></div>
<div>
<span style="color: gainsboro;">}</span></div>
<div>
</div>
<div>
</div>
<div>
<span style="color: gainsboro;">},</span></div>
<div>
<span style="color: gainsboro;">(</span>err<span style="color: gainsboro;">:</span> <span style="color: #3dc9b0;">HttpErrorResponse</span><span style="color: gainsboro;">)</span> <span style="color: gainsboro;">=></span> <span style="color: gainsboro;">{</span></div>
<div>
console<span style="color: gainsboro;">.</span>log <span style="color: gainsboro;">(</span>err<span style="color: gainsboro;">.</span>message<span style="color: gainsboro;">);</span></div>
<div>
<span style="color: gainsboro;">}</span></div>
<div>
<span style="color: gainsboro;">);</span></div>
<div>
</div>
<div>
<span style="color: gainsboro;">}</span></div>
<div>
</div>
<div>
<span style="color: gainsboro;">}</span></div>
</div>
<br />
Demo Tutorial reader json angular example.<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" data-original-height="569" data-original-width="1053" height="172" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbj-5C2YGVCrlJI7hUCoB6CMCfmxtHTR6lSIbZ1w0d86F8MNE9CI2PtSJdufGX-MKP0KTXW7tYIvfcd1dsHMdlNb8i16qYp8rUZ9ImneRjnwYBl86zT2PMcodZd8UPtuczZk50yo7Ct_xt/s320/Capture.PNG" width="320" /></div>
<br />Tienanhithttp://www.blogger.com/profile/08735830163069154762noreply@blogger.com0tag:blogger.com,1999:blog-3291417505031121749.post-9829674499398405342019-02-18T18:42:00.000-08:002019-02-18T18:42:45.933-08:00Angular 7 - Tutorial angular 7 form login exampleThe following I will introduce and present you the lessons, examples of Angular 7,today I will present the steps to create an Angular login login page.<br />
<iframe height="400" src="https://stackblitz.com/edit/angular7-form-login-angular-tutorial" width="100%"> </iframe>
Step 1. Create file styles.css<br />
<pre class="css"><!-- nếu code là CSS -->
<div style="background-color: #1e1e1e; color: #d4d4d4; font-family: "Fira Code", Menlo, Monaco, "Courier New", monospace; font-size: 12px; line-height: 18px;">
<div>
<span style="color: #569cd6;">*</span><span style="color: gainsboro;">{</span></div>
<div>
<span style="color: #9cdcfe;">margin:</span> <span style="color: #b5cea8;">0</span><span style="color: gainsboro;">;</span></div>
<div>
<span style="color: #9cdcfe;">padding:</span> <span style="color: #b5cea8;">0</span><span style="color: gainsboro;">;</span></div>
<div>
<span style="color: gainsboro;">}</span></div>
<div>
<span style="color: #569cd6;">body</span><span style="color: gainsboro;">{</span></div>
<div>
<span style="color: #9cdcfe;">color:</span> <span style="color: #ce9178;">white</span><span style="color: gainsboro;">;</span></div>
<div>
<span style="color: #9cdcfe;">font-size:</span> <span style="color: #b5cea8;">18px</span><span style="color: gainsboro;">;</span></div>
<div>
<span style="color: #9cdcfe;">font-family:</span> <span style="color: #ce9178;">'Courier New'</span><span style="color: gainsboro;">,</span> <span style="color: #ce9178;">Courier</span><span style="color: gainsboro;">,</span> <span style="color: #ce9178;">monospace</span><span style="color: gainsboro;">;</span></div>
<div>
<span style="color: #9cdcfe;">background-color:</span> <span style="color: #ce9178;">dimgrey</span><span style="color: gainsboro;">;</span></div>
<div>
<span style="color: gainsboro;">}</span></div>
</div>
</pre>
Step2 . import libary in file app.module.ts<br />
<pre class="css"><!-- nếu code là CSS -->
<div style="background-color: #1e1e1e; color: #d4d4d4; font-family: "Fira Code", Menlo, Monaco, "Courier New", monospace; font-size: 12px; line-height: 18px;">
<div>
<span style="color: #569cd6;">import</span> <span style="color: gainsboro;">{</span> <span style="color: #3dc9b0;">BrowserModule</span> <span style="color: gainsboro;">}</span> <span style="color: #569cd6;">from</span> <span style="color: #ce9178;">'@angular/platform-browser'</span><span style="color: gainsboro;">;</span></div>
<div>
<span style="color: #569cd6;">import</span> <span style="color: gainsboro;">{</span> <span style="color: #3dc9b0;">NgModule</span> <span style="color: gainsboro;">}</span> <span style="color: #569cd6;">from</span> <span style="color: #ce9178;">'@angular/core'</span><span style="color: gainsboro;">;</span></div>
<div>
<span style="color: #569cd6;">import</span> <span style="color: gainsboro;">{</span> <span style="color: #3dc9b0;">FormsModule</span> <span style="color: gainsboro;">}</span> <span style="color: #569cd6;">from</span> <span style="color: #ce9178;">'@angular/forms'</span><span style="color: gainsboro;">;</span></div>
<div>
<span style="color: #569cd6;">import</span> <span style="color: gainsboro;">{</span> <span style="color: #3dc9b0;">AppComponent</span> <span style="color: gainsboro;">}</span> <span style="color: #569cd6;">from</span> <span style="color: #ce9178;">'./app.component'</span><span style="color: gainsboro;">;</span></div>
<div>
<span style="color: #569cd6;">import</span> <span style="color: gainsboro;">{</span> <span style="color: #3dc9b0;">LoginComponent</span> <span style="color: gainsboro;">}</span> <span style="color: #569cd6;">from</span> <span style="color: #ce9178;">'../login/login.component'</span><span style="color: gainsboro;">;</span></div>
<div>
<span style="color: #569cd6;">import</span> <span style="color: gainsboro;">{</span> <span style="color: #3dc9b0;">HttpClientModule</span> <span style="color: gainsboro;">}</span> <span style="color: #569cd6;">from</span> <span style="color: #ce9178;">'@angular/common/http'</span><span style="color: gainsboro;">;</span></div>
<div>
<span style="color: #569cd6;">import</span> <span style="color: gainsboro;">{</span> <span style="color: #3dc9b0;">ReactiveFormsModule</span> <span style="color: gainsboro;">}</span> <span style="color: #569cd6;">from</span> <span style="color: #ce9178;">'@angular/forms'</span><span style="color: gainsboro;">;</span></div>
<div>
<span style="color: #f44747;">@</span><span style="color: #3dc9b0;">NgModule</span><span style="color: gainsboro;">({</span></div>
<div>
declarations<span style="color: gainsboro;">:</span> <span style="color: gainsboro;">[</span></div>
<div>
<span style="color: #3dc9b0;">AppComponent</span><span style="color: gainsboro;">,</span></div>
<div>
<span style="color: #3dc9b0;">LoginComponent</span></div>
<div>
<span style="color: gainsboro;">],</span></div>
<div>
imports<span style="color: gainsboro;">:</span> <span style="color: gainsboro;">[</span></div>
<div>
<span style="color: #3dc9b0;">BrowserModule</span><span style="color: gainsboro;">,</span> <span style="color: #3dc9b0;">HttpClientModule</span><span style="color: gainsboro;">,</span><span style="color: #3dc9b0;">FormsModule</span><span style="color: gainsboro;">,</span><span style="color: #3dc9b0;">ReactiveFormsModule</span></div>
<div>
<span style="color: gainsboro;">],</span></div>
<div>
providers<span style="color: gainsboro;">:</span> <span style="color: gainsboro;">[],</span></div>
<div>
bootstrap<span style="color: gainsboro;">:</span> <span style="color: gainsboro;">[</span><span style="color: #3dc9b0;">AppComponent</span><span style="color: gainsboro;">]</span></div>
<div>
<span style="color: gainsboro;">})</span></div>
<div>
<span style="color: #569cd6;">export</span> <span style="color: #569cd6;">class</span> <span style="color: #3dc9b0;">AppModule</span> <span style="color: gainsboro;">{</span> <span style="color: gainsboro;">}</span></div>
</div>
</pre>
Step 3. index.htm<br />
<pre class="css"><!-- nếu code là CSS -->
<div style="background-color: #1e1e1e; color: #d4d4d4; font-family: "Fira Code", Menlo, Monaco, "Courier New", monospace; font-size: 12px; line-height: 18px;">
<div>
<span style="color: #569cd6;"><!DOCTYPE</span><span style="color: #9cdcfe;"> html</span><span style="color: #569cd6;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">html</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">head</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">base</span> <span style="color: #9cdcfe;">href</span><span style="color: grey;">=</span><span style="color: #ce9178;">"/"</span> <span style="color: grey;">/></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">title</span><span style="color: grey;">></span>Angular 7 User Registration and Login Example<span style="color: grey;"></</span><span style="color: #569cd6;">title</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">meta</span> <span style="color: #9cdcfe;">name</span><span style="color: grey;">=</span><span style="color: #ce9178;">"viewport"</span> <span style="color: #9cdcfe;">content</span><span style="color: grey;">=</span><span style="color: #ce9178;">"width=device-width, initial-scale=1"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #608b4e;"><!-- bootstrap css --></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">link</span> <span style="color: #9cdcfe;">href</span><span style="color: grey;">=</span><span style="color: #ce9178;">"//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"</span> <span style="color: #9cdcfe;">rel</span><span style="color: grey;">=</span><span style="color: #ce9178;">"stylesheet"</span> <span style="color: grey;">/></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">style</span><span style="color: grey;">></span></div>
<div>
<span style="color: #569cd6;">a</span> <span style="color: gainsboro;">{</span> <span style="color: #9cdcfe;">cursor:</span> <span style="color: #ce9178;">pointer</span> <span style="color: gainsboro;">}</span></div>
<div>
<span style="color: grey;"></</span><span style="color: #569cd6;">style</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"></</span><span style="color: #569cd6;">head</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">body</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">my-app</span><span style="color: grey;">></span>Loading...<span style="color: grey;"></</span><span style="color: #569cd6;">my-app</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"></</span><span style="color: #569cd6;">body</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"></</span><span style="color: #569cd6;">html</span><span style="color: grey;">></span></div>
</div>
</pre>
Step 4. Create folder login<br />
1. File Login.component.css<br />
<pre class="css"><!-- nếu code là CSS -->
<div style="background-color: #1e1e1e; color: #d4d4d4; font-family: "Fira Code", Menlo, Monaco, "Courier New", monospace; font-size: 12px; line-height: 18px;">
<div>
<span style="color: #569cd6;">h1</span><span style="color: gainsboro;">{</span></div>
<div>
<span style="color: #9cdcfe;">text-align:</span> <span style="color: #ce9178;">center</span><span style="color: gainsboro;">;</span></div>
<div>
<span style="color: #9cdcfe;">color:</span> <span style="color: #ce9178;">chartreuse</span><span style="color: gainsboro;">;</span></div>
<div>
<span style="color: gainsboro;">}</span></div>
<div>
<span style="color: #569cd6;">.formLogin</span><span style="color: gainsboro;">{</span></div>
<div>
<span style="color: #9cdcfe;">width:</span> <span style="color: #b5cea8;">50%</span><span style="color: gainsboro;">;</span></div>
<div>
<span style="color: #9cdcfe;">margin:</span> <span style="color: #b5cea8;">0</span> <span style="color: #ce9178;">auto</span><span style="color: gainsboro;">;</span></div>
<div>
<span style="color: gainsboro;">}</span></div>
<div>
<span style="color: #569cd6;">.formLogin</span> <span style="color: #569cd6;">p</span><span style="color: gainsboro;">{</span></div>
<div>
<span style="color: #9cdcfe;">color:</span> <span style="color: #ce9178;">red</span><span style="color: gainsboro;">;</span></div>
<div>
<span style="color: gainsboro;">}</span></div>
</div>
</pre>
2. File login.component.html<br />
<pre class="css"><!-- nếu code là CSS -->
<div style="background-color: #1e1e1e; color: #d4d4d4; font-family: "Fira Code", Menlo, Monaco, "Courier New", monospace; font-size: 12px; line-height: 18px;">
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">h1</span><span style="color: grey;">></span>Login<span style="color: grey;"></</span><span style="color: #569cd6;">h1</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span><span style="color: grey;">=</span><span style="color: #ce9178;">"formLogin"</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">form</span> [<span style="color: #9cdcfe;">formGroup</span>]<span style="color: grey;">=</span><span style="color: #ce9178;">"loginForm"</span> (<span style="color: #9cdcfe;">ngSubmit</span>)<span style="color: grey;">=</span><span style="color: #ce9178;">"onSubmit()"</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span><span style="color: grey;">=</span><span style="color: #ce9178;">"form-group"</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">p</span> *<span style="color: #9cdcfe;">ngIf</span><span style="color: grey;">=</span><span style="color: #ce9178;">"flagsCheck"</span><span style="color: grey;">></span>{{message}}<span style="color: grey;"></</span><span style="color: #569cd6;">p</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span><span style="color: grey;">=</span><span style="color: #ce9178;">"form-group"</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">label</span> <span style="color: #9cdcfe;">for</span><span style="color: grey;">=</span><span style="color: #ce9178;">"username"</span><span style="color: grey;">></span>Username<span style="color: grey;"></</span><span style="color: #569cd6;">label</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">input</span> <span style="color: #9cdcfe;">type</span><span style="color: grey;">=</span><span style="color: #ce9178;">"text"</span> <span style="color: #9cdcfe;">formControlName</span><span style="color: grey;">=</span><span style="color: #ce9178;">"username"</span> <span style="color: #9cdcfe;">class</span><span style="color: grey;">=</span><span style="color: #ce9178;">"form-control"</span> [<span style="color: #9cdcfe;">ngClass</span>]<span style="color: grey;">=</span><span style="color: #ce9178;">"{ 'is-invalid': submitted && f.username.errors }"</span> <span style="color: grey;">/></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">div</span> *<span style="color: #9cdcfe;">ngIf</span><span style="color: grey;">=</span><span style="color: #ce9178;">"submitted && f.username.errors"</span> <span style="color: #9cdcfe;">class</span><span style="color: grey;">=</span><span style="color: #ce9178;">"invalid-feedback"</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">div</span> *<span style="color: #9cdcfe;">ngIf</span><span style="color: grey;">=</span><span style="color: #ce9178;">"f.username.errors.required"</span><span style="color: grey;">></span>Username is required<span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span><span style="color: grey;">=</span><span style="color: #ce9178;">"form-group"</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">label</span> <span style="color: #9cdcfe;">for</span><span style="color: grey;">=</span><span style="color: #ce9178;">"password"</span><span style="color: grey;">></span>Password<span style="color: grey;"></</span><span style="color: #569cd6;">label</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">input</span> <span style="color: #9cdcfe;">type</span><span style="color: grey;">=</span><span style="color: #ce9178;">"password"</span> <span style="color: #9cdcfe;">formControlName</span><span style="color: grey;">=</span><span style="color: #ce9178;">"password"</span> <span style="color: #9cdcfe;">class</span><span style="color: grey;">=</span><span style="color: #ce9178;">"form-control"</span> [<span style="color: #9cdcfe;">ngClass</span>]<span style="color: grey;">=</span><span style="color: #ce9178;">"{ 'is-invalid': submitted && f.password.errors }"</span> <span style="color: grey;">/></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">div</span> *<span style="color: #9cdcfe;">ngIf</span><span style="color: grey;">=</span><span style="color: #ce9178;">"submitted && f.password.errors"</span> <span style="color: #9cdcfe;">class</span><span style="color: grey;">=</span><span style="color: #ce9178;">"invalid-feedback"</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">div</span> *<span style="color: #9cdcfe;">ngIf</span><span style="color: grey;">=</span><span style="color: #ce9178;">"f.password.errors.required"</span><span style="color: grey;">></span>Password is required<span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span><span style="color: grey;">=</span><span style="color: #ce9178;">"form-group"</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">button</span> [<span style="color: #9cdcfe;">disabled</span>]<span style="color: grey;">=</span><span style="color: #ce9178;">"loading"</span> <span style="color: #9cdcfe;">class</span><span style="color: grey;">=</span><span style="color: #ce9178;">"btn btn-primary"</span> (<span style="color: #9cdcfe;">click</span>) <span style="color: grey;">=</span><span style="color: #ce9178;">"checkLogin()"</span> <span style="color: grey;">></span>Login<span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">a</span> <span style="color: #9cdcfe;">router</span> <span style="color: #9cdcfe;">link</span><span style="color: grey;">=</span><span style="color: #ce9178;">"/"</span> <span style="color: #9cdcfe;">class</span><span style="color: grey;">=</span><span style="color: #ce9178;">"btn btn-link"</span><span style="color: grey;">></span>Register<span style="color: grey;"></</span><span style="color: #569cd6;">a</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"></</span><span style="color: #569cd6;">form</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div>
</div>
</pre>
3. File login.component.ts<br />
<pre class="css"><!-- nếu code là CSS -->
<div style="background-color: #1e1e1e; color: #d4d4d4; font-family: "Fira Code", Menlo, Monaco, "Courier New", monospace; font-size: 12px; line-height: 18px;">
<div>
<span style="color: #569cd6;">import</span> <span style="color: gainsboro;">{</span> <span style="color: #3dc9b0;">Component</span><span style="color: gainsboro;">,</span> <span style="color: #3dc9b0;">OnInit</span> <span style="color: gainsboro;">}</span> <span style="color: #569cd6;">from</span> <span style="color: #ce9178;">'@angular/core'</span><span style="color: gainsboro;">;</span></div>
<div>
<span style="color: #569cd6;">import</span> <span style="color: gainsboro;">{</span> <span style="color: #3dc9b0;">FormBuilder</span><span style="color: gainsboro;">,</span> <span style="color: #3dc9b0;">FormGroup</span><span style="color: gainsboro;">,</span> <span style="color: #3dc9b0;">Validators</span> <span style="color: gainsboro;">}</span> <span style="color: #569cd6;">from</span> <span style="color: #ce9178;">'@angular/forms'</span><span style="color: gainsboro;">;</span></div>
<div>
<span style="color: #f44747;">@</span><span style="color: #3dc9b0;">Component</span><span style="color: gainsboro;">({</span></div>
<div>
selector<span style="color: gainsboro;">:</span> <span style="color: #ce9178;">'app-login'</span><span style="color: gainsboro;">,</span></div>
<div>
templateUrl<span style="color: gainsboro;">:</span> <span style="color: #ce9178;">'./login.component.html'</span><span style="color: gainsboro;">,</span></div>
<div>
styleUrls<span style="color: gainsboro;">:</span> <span style="color: gainsboro;">[</span><span style="color: #ce9178;">'./login.component.css'</span><span style="color: gainsboro;">]</span></div>
<div>
<span style="color: gainsboro;">})</span></div>
<div>
<span style="color: #569cd6;">export</span> <span style="color: #569cd6;">class</span> <span style="color: #3dc9b0;">LoginComponent</span> <span style="color: #569cd6;">implements</span> <span style="color: #3dc9b0;">OnInit</span> <span style="color: gainsboro;">{</span></div>
<div>
loginForm <span style="color: gainsboro;">:</span><span style="color: #3dc9b0;">FormGroup</span><span style="color: gainsboro;">;</span></div>
<div>
submitted <span style="color: gainsboro;">=</span> <span style="color: #569cd6;">false</span><span style="color: gainsboro;">;</span></div>
<div>
flagsCheck <span style="color: gainsboro;">=</span> <span style="color: #569cd6;">false</span><span style="color: gainsboro;">;</span></div>
<div>
message <span style="color: gainsboro;">=</span> <span style="color: #ce9178;">""</span><span style="color: gainsboro;">;</span></div>
<div>
<span style="color: #569cd6;">constructor</span><span style="color: gainsboro;">(</span><span style="color: #569cd6;">private</span> formBuilder <span style="color: gainsboro;">:</span><span style="color: #3dc9b0;">FormBuilder</span><span style="color: gainsboro;">)</span> <span style="color: gainsboro;">{</span> <span style="color: gainsboro;">}</span></div>
<div>
ngOnInit<span style="color: gainsboro;">()</span> <span style="color: gainsboro;">{</span></div>
<div>
<span style="color: #569cd6;">this</span><span style="color: gainsboro;">.</span>loginForm <span style="color: gainsboro;">=</span> <span style="color: #569cd6;">this</span><span style="color: gainsboro;">.</span>formBuilder<span style="color: gainsboro;">.</span>group<span style="color: gainsboro;">({</span></div>
<div>
username<span style="color: gainsboro;">:</span> <span style="color: gainsboro;">[</span><span style="color: #ce9178;">''</span><span style="color: gainsboro;">,</span> <span style="color: #3dc9b0;">Validators</span><span style="color: gainsboro;">.</span>required<span style="color: gainsboro;">],</span></div>
<div>
password<span style="color: gainsboro;">:</span> <span style="color: gainsboro;">[</span><span style="color: #ce9178;">''</span><span style="color: gainsboro;">,</span> <span style="color: #3dc9b0;">Validators</span><span style="color: gainsboro;">.</span>required<span style="color: gainsboro;">]</span></div>
<div>
<span style="color: gainsboro;">});</span></div>
<div>
<span style="color: gainsboro;">}</span></div>
<div>
<span style="color: #569cd6;">get</span> f<span style="color: gainsboro;">(){</span></div>
<div>
<span style="color: #569cd6;">return</span> <span style="color: #569cd6;">this</span><span style="color: gainsboro;">.</span>loginForm<span style="color: gainsboro;">.</span>controls<span style="color: gainsboro;">;</span></div>
<div>
<span style="color: gainsboro;">}</span></div>
<div>
onSubmit<span style="color: gainsboro;">(){</span></div>
<div>
<span style="color: #569cd6;">this</span><span style="color: gainsboro;">.</span>submitted <span style="color: gainsboro;">=</span> <span style="color: #569cd6;">true</span><span style="color: gainsboro;">;</span></div>
<div>
<span style="color: #569cd6;">if</span><span style="color: gainsboro;">(</span><span style="color: #569cd6;">this</span><span style="color: gainsboro;">.</span>loginForm<span style="color: gainsboro;">.</span>invalid<span style="color: gainsboro;">){</span></div>
<div>
<span style="color: #569cd6;">return</span><span style="color: gainsboro;">;</span></div>
<div>
</div>
<div>
<span style="color: gainsboro;">}</span></div>
<div>
</div>
<div>
<span style="color: gainsboro;">}</span></div>
<div>
</div>
<div>
checkLogin<span style="color: gainsboro;">(){</span></div>
<div>
<span style="color: #569cd6;">this</span><span style="color: gainsboro;">.</span>flagsCheck <span style="color: gainsboro;">=</span> <span style="color: #569cd6;">true</span><span style="color: gainsboro;">;</span></div>
<div>
<span style="color: #569cd6;">if</span><span style="color: gainsboro;">(</span><span style="color: #569cd6;">this</span><span style="color: gainsboro;">.</span>loginForm<span style="color: gainsboro;">.</span>controls<span style="color: gainsboro;">[</span><span style="color: #ce9178;">'username'</span><span style="color: gainsboro;">].</span>value <span style="color: gainsboro;">===</span><span style="color: #ce9178;">"tienanh"</span> <span style="color: gainsboro;">&&</span> <span style="color: #569cd6;">this</span><span style="color: gainsboro;">.</span>loginForm<span style="color: gainsboro;">.</span>controls<span style="color: gainsboro;">[</span><span style="color: #ce9178;">'password'</span><span style="color: gainsboro;">].</span>value <span style="color: gainsboro;">===</span><span style="color: #ce9178;">"123456"</span><span style="color: gainsboro;">){</span></div>
<div>
<span style="color: #569cd6;">this</span><span style="color: gainsboro;">.</span>message <span style="color: gainsboro;">=</span><span style="color: #ce9178;">"login success"</span></div>
<div>
<span style="color: gainsboro;">}</span><span style="color: #569cd6;">else</span><span style="color: gainsboro;">{</span></div>
<div>
<span style="color: #569cd6;">this</span><span style="color: gainsboro;">.</span>message <span style="color: gainsboro;">=</span><span style="color: #ce9178;">"Username or password is incorrect"</span><span style="color: gainsboro;">;</span></div>
<div>
<span style="color: gainsboro;">}</span></div>
<div>
<span style="color: gainsboro;">}</span></div>
<div>
<span style="color: gainsboro;">}</span></div>
</div>
</pre>
Step 5. Folder app<br />
1. app.component.css<br />
<pre class="css"><!-- nếu code là CSS -->
<div style="background-color: #1e1e1e; color: #d4d4d4; font-family: "Fira Code", Menlo, Monaco, "Courier New", monospace; font-size: 12px; line-height: 18px;">
<div>
<span style="color: #569cd6;">#container</span><span style="color: gainsboro;">{</span></div>
<div>
<span style="color: #9cdcfe;">width:</span> <span style="color: #b5cea8;">100%</span><span style="color: gainsboro;">;</span></div>
<div>
<span style="color: #9cdcfe;">height:</span> <span style="color: #b5cea8;">500px</span><span style="color: gainsboro;">;</span></div>
<div>
<span style="color: #9cdcfe;">margin:</span> <span style="color: #b5cea8;">0</span> <span style="color: #ce9178;">auto</span><span style="color: gainsboro;">;</span></div>
<div>
<span style="color: #9cdcfe;">background-color:</span> <span style="color: #ce9178;">burlywood</span><span style="color: gainsboro;">;</span></div>
<div>
<span style="color: gainsboro;">}</span></div>
</div>
</pre>
2. app.component.html<br />
<pre class="css"><!-- nếu code là CSS -->
<div style="background-color: #1e1e1e; color: #d4d4d4; font-family: "Fira Code", Menlo, Monaco, "Courier New", monospace; font-size: 12px; line-height: 18px;">
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">id</span><span style="color: grey;">=</span><span style="color: #ce9178;">"container"</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">app-login</span><span style="color: grey;">></</span><span style="color: #569cd6;">app-login</span><span style="color: grey;">></span></div>
<div>
<span style="color: #608b4e;"><!-- credits --></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span><span style="color: grey;">=</span><span style="color: #ce9178;">"text-center"</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">p</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">a</span> <span style="color: #9cdcfe;">href</span><span style="color: grey;">=</span><span style="color: #ce9178;">""</span> <span style="color: #9cdcfe;">target</span><span style="color: grey;">=</span><span style="color: #ce9178;">"_top"</span><span style="color: grey;">></span>Angular 7 - Create Login in Angular example &tutorial<span style="color: grey;"></</span><span style="color: #569cd6;">a</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"></</span><span style="color: #569cd6;">p</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">p</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">a</span> <span style="color: #9cdcfe;">href</span><span style="color: grey;">=</span><span style="color: #ce9178;">"http://android--example.blogspot.com/"</span> <span style="color: #9cdcfe;">target</span><span style="color: grey;">=</span><span style="color: #ce9178;">"_top"</span><span style="color: grey;">></span>Tutorial Angular 7<span style="color: grey;"></</span><span style="color: #569cd6;">a</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"></</span><span style="color: #569cd6;">p</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div>
</div>
</pre>
3. app.component.ts<br />
<pre class="css"><!-- nếu code là CSS -->
<div style="background-color: #1e1e1e; color: #d4d4d4; font-family: "Fira Code", Menlo, Monaco, "Courier New", monospace; font-size: 12px; line-height: 18px;">
<div>
<span style="color: #569cd6;">import</span> <span style="color: gainsboro;">{</span> <span style="color: #3dc9b0;">Component</span> <span style="color: gainsboro;">}</span> <span style="color: #569cd6;">from</span> <span style="color: #ce9178;">'@angular/core'</span><span style="color: gainsboro;">;</span></div>
<div>
<span style="color: #f44747;">@</span><span style="color: #3dc9b0;">Component</span><span style="color: gainsboro;">({</span></div>
<div>
selector<span style="color: gainsboro;">:</span> <span style="color: #ce9178;">'my-app'</span><span style="color: gainsboro;">,</span></div>
<div>
templateUrl<span style="color: gainsboro;">:</span> <span style="color: #ce9178;">'./app.component.html'</span><span style="color: gainsboro;">,</span></div>
<div>
styleUrls<span style="color: gainsboro;">:</span> <span style="color: gainsboro;">[</span> <span style="color: #ce9178;">'./app.component.css'</span> <span style="color: gainsboro;">]</span></div>
<div>
<span style="color: gainsboro;">})</span></div>
<div>
<span style="color: #569cd6;">export</span> <span style="color: #569cd6;">class</span> <span style="color: #3dc9b0;">AppComponent</span> <span style="color: gainsboro;">{</span></div>
<div>
name <span style="color: gainsboro;">=</span> <span style="color: #ce9178;">'Angular'</span><span style="color: gainsboro;">;</span></div>
<div>
<span style="color: gainsboro;">}</span></div>
</div>
</pre>
<pre class="css"></pre>
Demo Login Angular.<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" data-original-height="519" data-original-width="769" height="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi19nUpn1DBUuw5Q9C2_hFjcT16qbSMw3CX40vVDogoAVeBs9_pPW2MPZCeoRl-47bCfV8UDc-zMro2J8SePjIVFUjwE6nTT50XhKeyqJQ5BNs-g2HNKz0QGXmQcjksIo5d8SsmP2cKfBzC/s320/Capture.PNG" width="320" /></div>
<br />Tienanhithttp://www.blogger.com/profile/08735830163069154762noreply@blogger.com2tag:blogger.com,1999:blog-3291417505031121749.post-80393848574839633562019-01-18T07:55:00.001-08:002019-01-22T17:44:38.701-08:00How to animation in XML on AndroidAndroid offers to developers a <b>great Animation API</b> that lets them to create easily<b> frame animation in XML</b> or programmatically. In the following tutorial, you’re going to learn how to create a frame animation in XML. For this tutorial, we’re going to use a monster character that we want to animate.<br />
<b>Step 1. Create all animation of characte</b><br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" data-original-height="64" data-original-width="64" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjB58yFkVzhPCg0Rr_-5GczUIG-CJKYrFYtD8ASvkreT9tb62OWl1CRjyq7QPaLhsY3kfrPGw_Mm6jLmMsDFwEKCJMH2jU7NqKtPqQJFxFRppyEIHBotMB_lox_1XKYi-C9TB2DexsCTLX/s1600/monster0.png" /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" data-original-height="64" data-original-width="64" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFShC-P-BaDWrEuP6zfpvgxmVirPeNojy_8tHwfyBuHCQQKfxuURh1Dx74SL0Bzh2p1ZhRcEm9nYOpEgp40h5OSB6PqtDtlFa2Xtnp7AnFe_EXfx33_Lz-yFo_dIa59aWpZZGHVqVYcccm/s1600/monster1.png" /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" data-original-height="64" data-original-width="64" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCmxML3cAOoaw6ZRgC3eSiToRBW1IK6Pe696FgAUsfRKY5Uvxh8BUvRvB1UgkzxXXm0Mn9ogZ3YzGCwjLTw_7SPRoKXNApD2Bzenrb797f3b1a7qUuRd_bVAG6B1SKgT5mlTb8rqbHBTir/s1600/monster2.png" /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" data-original-height="64" data-original-width="64" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRcKFZ1KXOs8udRLKy03exI2Jv692fG-9np35Da2n2wbcusrhHT9f6SSxdJ1Os4nWP_FlWkJFIZRG_Y7Tu0LNaUZQOXO3V70tKUnY-4ODplfSQHmRHrd6iKTEptvH5LAOUr1AUUBaOsvNN/s1600/monster3.png" /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" data-original-height="64" data-original-width="64" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGwPHANtG96jhSpCXODtzyrb9_nWI9KQCCpH_a0TxIb3lsBT8FxXgO-1y7SOzhAtshVFUgNkvpckWSz5jEbwpu1R3FfZHiQPWDYH0Us4Eca1IyfRtXy904VwrsTNbODErT-LIJxzuFsDMp/s1600/monster4.png" /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" data-original-height="64" data-original-width="64" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzBuQ97_cbPGBeJEWpd8JV9N_FJWwjmOn0AAEggDesy2sxq0V8u4ArbTsk6hEVovbOe4UqieLlkVTlDj4CohGDAeoPFChtXyJFWn6kbzSof57QnF4OrOL_6aFGROL5qckZWaFXvwEQ7XZc/s1600/monster5.png" /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" data-original-height="64" data-original-width="64" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT8on2QOOvw1D0wcG4lBaidVfQB6fvDxX_6JBt5l4mgyJVIFLWLOvzHiC54SRRSGXhYOge_UhOmT0B3_YV9j4zQ0Pf97PA2wOsRPTYw0jJJt9NCKzPWVQJ8RgD9QWwT1Ybnw7ElfgClxVF/s1600/monster6.png" /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" data-original-height="64" data-original-width="64" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ6mVWKlrzRfw0PantaDg1GxsetMMnrhEo6eig32XoqJ8opyaLSges9Oqkj4dVlbJkHgQffiIhwWn7YSB82gFER-Atd6Y2xBIMXcHc_WGm5M0L08C-Ovle3PpPIaCVcKbdXpg8i4EPy0Uh/s1600/monster7.png" /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" data-original-height="64" data-original-width="64" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDCjUtmKM0LMdH5nZqhHgq6rX3a6yShBCpxQwsfvNpdyhyphenhyphenIUObIeRskCLojmTL_tcsa2dqy_56uOB7gst8W0xSyUWJ6RsJGaAIT0bik8ywEZLfqdsbUzPZ-v4P8XuAItOwwN6udmCR3nXP/s1600/monster8.png" /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" data-original-height="64" data-original-width="64" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhykxw7Nx0Z9542lsUExDK3jGO2A4UX_zzyLOFXwCvnQUjqgvJwUW5AQldyhGb_Ypajc4-D5Jm1a3jBCgSbVnPGJc2gyafcle1Un-DTZf8kSwnKY-cJbCxCWsKt62mOn9K5ap_G19taaBbu/s1600/monster9.png" /> </div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b>Step 2. Create animation in XML</b></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<b> </b>
<br />
<code><?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="false" >
<item
android:drawable="@drawable/monster0"
android:duration="250"/>
<item
android:drawable="@drawable/monster1"
android:duration="250"/>
<item
android:drawable="@drawable/monster2"
android:duration="250"/>
<item
android:drawable="@drawable/monster3"
android:duration="250"/>
<item
android:drawable="@drawable/monster4"
android:duration="250"/>
<item
android:drawable="@drawable/monster5"
android:duration="250"/>
<item
android:drawable="@drawable/monster6"
android:duration="250"/>
<item
android:drawable="@drawable/monster7"
android:duration="250"/>
<item
android:drawable="@drawable/monster8"
android:duration="250"/>
<item
android:drawable="@drawable/monster9"
android:duration="250"/>
</animation-list>
</code>
<b>Step 3. Create the layout activity_main.xml</b><br />
<code><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:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:background="#FFFFFF"
tools:context="com.ssaurel.animationsprite.MainActivity" >
<ImageView
android:id="@+id/img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="@drawable/run_monster" />
</RelativeLayout>
</code>
<b>Step 4. Run animation on class Main_activity.class</b><br />
<code>public class MainActivity extends Activity {
private ImageView img;
@SuppressLint("NewApi") @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
img = (ImageView) findViewById(R.id.img);
img.post(new Runnable() {
@Override
public void run() {
((AnimationDrawable) img.getBackground()).start();
}
});
}
}
</code>
Tienanhithttp://www.blogger.com/profile/08735830163069154762noreply@blogger.com0tag:blogger.com,1999:blog-3291417505031121749.post-46667649002626905892019-01-11T07:04:00.000-08:002019-01-11T07:04:01.725-08:00Android rotate zoom drag image in imageview on touch example<br />
<h2 style="text-align: center;">
ImageView Rotate, Zoom in and out, and Drag on touch</h2>
<div style="text-align: left;">
<br /></div>
<span style="color: red;"><b>Step 1: MainActivity.class
</b></span><br />
<pre class="css">import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.PointF;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.widget.ImageView;
public class MainActivity extends Activity implements OnTouchListener {
// these matrices will be used to move and zoom image
private Matrix matrix = new Matrix();
private Matrix savedMatrix = new Matrix();
// we can be in one of these 3 states
private static final int NONE = 0;
private static final int DRAG = 1;
private static final int ZOOM = 2;
private int mode = NONE;
// remember some things for zooming
private PointF start = new PointF();
private PointF mid = new PointF();
private float oldDist = 1f;
private float d = 0f;
private float newRot = 0f;
private float[] lastEvent = null;
private ImageView view, fin;
private Bitmap bmap;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
view = (ImageView) findViewById(R.id.imageView);
fin = (ImageView) findViewById(R.id.imageView1);
view.setOnTouchListener(this);
}
public boolean onTouch(View v, MotionEvent event) {
// handle touch events here
view = (ImageView) v;
switch (event.getAction() & MotionEvent.ACTION_MASK) {
case MotionEvent.ACTION_DOWN:
savedMatrix.set(matrix);
start.set(event.getX(), event.getY());
mode = DRAG;
lastEvent = null;
break;
case MotionEvent.ACTION_POINTER_DOWN:
oldDist = spacing(event);
if (oldDist > 10f) {
savedMatrix.set(matrix);
midPoint(mid, event);
mode = ZOOM;
}
lastEvent = new float[4];
lastEvent[0] = event.getX(0);
lastEvent[1] = event.getX(1);
lastEvent[2] = event.getY(0);
lastEvent[3] = event.getY(1);
d = rotation(event);
break;
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_POINTER_UP:
mode = NONE;
lastEvent = null;
break;
case MotionEvent.ACTION_MOVE:
if (mode == DRAG) {
matrix.set(savedMatrix);
float dx = event.getX() - start.x;
float dy = event.getY() - start.y;
matrix.postTranslate(dx, dy);
} else if (mode == ZOOM) {
float newDist = spacing(event);
if (newDist > 10f) {
matrix.set(savedMatrix);
float scale = (newDist / oldDist);
matrix.postScale(scale, scale, mid.x, mid.y);
}
if (lastEvent != null && event.getPointerCount() == 2 || event.getPointerCount() == 3) {
newRot = rotation(event);
float r = newRot - d;
float[] values = new float[9];
matrix.getValues(values);
float tx = values[2];
float ty = values[5];
float sx = values[0];
float xc = (view.getWidth() / 2) * sx;
float yc = (view.getHeight() / 2) * sx;
matrix.postRotate(r, tx + xc, ty + yc);
}
}
break;
}
view.setImageMatrix(matrix);
bmap= Bitmap.createBitmap(view.getWidth(), view.getHeight(), Bitmap.Config.RGB_565);
Canvas canvas = new Canvas(bmap);
view.draw(canvas);
//fin.setImageBitmap(bmap);
return true;
}
public void ButtonClick(View v){
fin.setImageBitmap(bmap);
}
/**
* Determine the space between the first two fingers
*/
private float spacing(MotionEvent event) {
float x = event.getX(0) - event.getX(1);
float y = event.getY(0) - event.getY(1);
float s=x * x + y * y;
return (float)Math.sqrt(s);
}
/**
* Calculate the mid point of the first two fingers
*/
private void midPoint(PointF point, MotionEvent event) {
float x = event.getX(0) + event.getX(1);
float y = event.getY(0) + event.getY(1);
point.set(x / 2, y / 2);
}
/**
* Calculate the degree to be rotated by.
*
* @param event
* @return Degrees
*/
private float rotation(MotionEvent event) {
double delta_x = (event.getX(0) - event.getX(1));
double delta_y = (event.getY(0) - event.getY(1));
double radians = Math.atan2(delta_y, delta_x);
return (float) Math.toDegrees(radians);
}
}
</pre>
<span style="color: red;"><b>Step 2: activity_main.xml
</b></span><br />
<pre class="css"><?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android" >
<FrameLayout
android:layout_width="fill_parent"
android:id="@+id/frm"
android:layout_height="250dp">
<ImageView android:id="@+id/imageView"
android:layout_width="fill_parent"
android:layout_height="250dp"
android:src="@drawable/cat"
android:scaleType="matrix" />
</FrameLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_below="@+id/frm"
android:layout_height="match_parent">
<Button
android:layout_width="wrap_content"
android:text="Finalise"
android:onClick="ButtonClick"
android:layout_height="wrap_content" />
<ImageView android:id="@+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="250dp"
android:src="@drawable/cat"
/>
</LinearLayout>
</RelativeLayout>
</pre>
Step 3:<br />
For our XML file, we have created two ImageViews and a button widget. The first ImageView will perform the transformations (rotate, zoom, drag). On button click, our transformed imageView will be set to the second ImageView as Bitmap Image as explained in the Java code below.
<br />
<pre class="css">public void ButtonClick(View v){
fin.setImageBitmap(bmap);
}
</pre>
Step 4: The code example below shows how to get a bitmap Image from the transformed ImageView.
<br />
<pre class="css"><span class="code"> bmap= Bitmap.createBitmap(view.getWidth(), view.getHeight(), Bitmap.Config.RGB_565);
Canvas canvas = new Canvas(bmap);
view.draw(canvas);</span>
</pre>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" data-original-height="299" data-original-width="592" height="162" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizX-dEMA4uZV9Gd-BEjDTFKURmfFmYRejnsboan5MnS7pGckScxA2Vl2HFZldEqDH4d7WZAdQrxxHfq7BEEUVt6dLJkNpRL6iEbpkfhkcu5hBfZbvgsZnNFm7wImcPo4FUlpH4aKfqrxyL/s320/Capture.PNG" width="320" /></div>
Tienanhithttp://www.blogger.com/profile/08735830163069154762noreply@blogger.com6tag:blogger.com,1999:blog-3291417505031121749.post-55087809131471581072019-01-10T21:41:00.002-08:002019-01-10T21:41:28.861-08:00How to CalendarView like Google Calendar in Android<h2 class="post-title entry-title" style="text-align: center;">
<span style="font-weight: normal;">CalendarView like Google Calendar in Android</span></h2>
<div class="post-title entry-title" style="text-align: left;">
<span style="color: blue;"><b>Step: 1</b></span></div>
<div class="post-title entry-title" style="text-align: left;">
<br /></div>
<div class="post-title entry-title" style="text-align: left;">
<span style="font-weight: normal;">Add Dependency to build.gradle</span></div>
<div class="post-title entry-title" style="text-align: left;">
<span style="font-weight: normal;"><br /></span></div>
<pre class="css">compile 'com.github.sundeepk:compact-calendar-view:1.8.3'
</pre>
Step: 2
Create an XML Layout like below with CompactCalendarView
<br />
<pre class="css"><?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
<com.github.sundeepk.compactcalendarview.CompactCalendarView
android:id="@+id/compactcalendar_view"
android:layout_width="match_parent"
android:layout_height="250dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
app:compactCalendarBackgroundColor="#00bcd4"
app:compactCalendarCurrentDayBackgroundColor="#1a8cd7"
app:compactCalendarCurrentSelectedDayBackgroundColor="#E57373"
app:compactCalendarTextColor="#FFF"
app:compactCalendarTextSize="12sp" />
</LinearLayout>
</pre>
Step: 3
Create a Activity
<br />
<pre class="css">import android.graphics.Color;
import android.os.Bundle;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.widget.Toast;
import com.github.sundeepk.compactcalendarview.CompactCalendarView;
import com.github.sundeepk.compactcalendarview.domain.CalendarDayEvent;
import java.text.SimpleDateFormat;
import java.util.Calendar;
import java.util.Date;
import java.util.Locale;
public class MainActivity extends AppCompatActivity {
private Toolbar toolbar;
CompactCalendarView compactCalendarView;
private SimpleDateFormat dateFormatForMonth = new SimpleDateFormat("MMMM- yyyy", Locale.getDefault());
private Calendar currentCalender = Calendar.getInstance(Locale.getDefault());
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
final ActionBar actionBar = getSupportActionBar();
actionBar.setHomeAsUpIndicator(R.drawable.ic_menu_white_24px);
actionBar.setDisplayHomeAsUpEnabled(true);
// Setting default toolbar title to empty
actionBar.setTitle(null);
compactCalendarView = (CompactCalendarView) findViewById(R.id.compactcalendar_view);
compactCalendarView.drawSmallIndicatorForEvents(true);
compactCalendarView.setUseThreeLetterAbbreviation(true);
//set initial title
actionBar.setTitle(dateFormatForMonth.format(compactCalendarView.getFirstDayOfCurrentMonth()));
//set title on calendar scroll
compactCalendarView.setListener(new CompactCalendarView.CompactCalendarViewListener() {
@Override
public void onDayClick(Date dateClicked) {
Toast.makeText(MainActivity.this, "Date : " + dateClicked.toString(), Toast.LENGTH_SHORT).show();
}
@Override
public void onMonthScroll(Date firstDayOfNewMonth) {
// Changes toolbar title on monthChange
actionBar.setTitle(dateFormatForMonth.format(firstDayOfNewMonth));
}
});
addDummyEvents();
// gotoToday();
}
// Adding dummy events in calendar view for April, may, june 2016
private void addDummyEvents() {
addEvents(compactCalendarView, Calendar.APRIL);
addEvents(compactCalendarView, Calendar.MAY);
addEvents(compactCalendarView, Calendar.JUNE);
// Refresh calendar to update events
compactCalendarView.invalidate();
}
// Adding events from 1 to 6 days
private void addEvents(CompactCalendarView compactCalendarView, int month) {
currentCalender.setTime(new Date());
currentCalender.set(Calendar.DAY_OF_MONTH, 1);
Date firstDayOfMonth = currentCalender.getTime();
for (int i = 0; i < 6; i++) {
currentCalender.setTime(firstDayOfMonth);
if (month > -1) {
currentCalender.set(Calendar.MONTH, month);
}
currentCalender.add(Calendar.DATE, i);
setToMidnight(currentCalender);
compactCalendarView.addEvent(new CalendarDayEvent(currentCalender.getTimeInMillis(), Color.argb(255, 255, 255, 255)), false);
}
}
private void setToMidnight(Calendar calendar) {
calendar.set(Calendar.HOUR_OF_DAY, 0);
calendar.set(Calendar.MINUTE, 0);
calendar.set(Calendar.SECOND, 0);
calendar.set(Calendar.MILLISECOND, 0);
}
public void gotoToday() {
compactCalendarView.setCurrentDate(Calendar.getInstance(Locale.getDefault()).getTime());
}
}
</pre>
<br />
Explain : <a href="https://android--example.blogspot.com/">code Android</a> <br />
Method 1: Adding dummy events in calendar view for April, may, june 2016<br />
<pre class="css"> private void addDummyEvents() {
addEvents(compactCalendarView, Calendar.APRIL);
addEvents(compactCalendarView, Calendar.MAY);
addEvents(compactCalendarView, Calendar.JUNE);
// Refresh calendar to update events
compactCalendarView.invalidate();
}
</pre>
Method 2: Adding events from 1 to 6 days<br />
<pre class="css"> private void addEvents(CompactCalendarView compactCalendarView, int month) {
currentCalender.setTime(new Date());
currentCalender.set(Calendar.DAY_OF_MONTH, 1);
Date firstDayOfMonth = currentCalender.getTime();
for (int i = 0; i < 6; i++) {
currentCalender.setTime(firstDayOfMonth);
if (month > -1) {
currentCalender.set(Calendar.MONTH, month);
}
currentCalender.add(Calendar.DATE, i);
setToMidnight(currentCalender);
compactCalendarView.addEvent(new CalendarDayEvent(currentCalender.getTimeInMillis(), Color.argb(255, 255, 255, 255)), false);
}
}
</pre>
Method 3: Set calendar<br />
<pre class="css"> private void setToMidnight(Calendar calendar) {
calendar.set(Calendar.HOUR_OF_DAY, 0);
calendar.set(Calendar.MINUTE, 0);
calendar.set(Calendar.SECOND, 0);
calendar.set(Calendar.MILLISECOND, 0);
}
</pre>
Method 4: get today<br />
<pre class="css">public void gotoToday() {
compactCalendarView.setCurrentDate(Calendar.getInstance(Locale.getDefault()).getTime());
}
</pre>
Link gitHub: https://github.com/SundeepK/CompactCalendarView<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" data-original-height="563" data-original-width="324" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5cDGtVkLIbpla05bszlJsoOuPDPgdntmhRBxaxaIDb34dRiRAYk26QMA6KJst2_kFW40rwqaQW7OfFOb7jQyW8FhNVIvNCUyvZYATZ2Xpkv1AMIzSCL3PPTHM_mF2zN03GmOyML8bryWj/s320/Capture.PNG" width="184" /></div>
Tienanhithttp://www.blogger.com/profile/08735830163069154762noreply@blogger.com0tag:blogger.com,1999:blog-3291417505031121749.post-40478319616460681082019-01-04T06:23:00.000-08:002019-01-04T06:34:29.719-08:00How to Select Image from Gallery with Intents in android<h2 style="text-align: center;">
How to Select Image from Gallery with Intents in android</h2>
<div style="text-align: left;">
<b>Choose an image from the gallery</b> that’ll be displayed by the application (and even uploaded to your servers) after the selection is made. In this article we’ll see how to invoke a single interface from which the user is able to select images across all his apps (like Gallery, Photos, ES File Explorer, etc.) and folders (Google Drive, Recent, Downloads, etc.) using Intents.<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/TxkWKwpw1DQ/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/TxkWKwpw1DQ?feature=player_embedded" width="320"></iframe></div>
</div>
<div style="text-align: left;">
<br /></div>
<pre class="css"> Intent intent = new Intent();
intent.setType("image/*");
intent.setAction(Intent.ACTION_GET_CONTENT);
startActivityForResult(Intent.createChooser</pre>
<pre class="css"> (intent, "Select Picture"), PICK_IMAGE_REQUEST);
</pre>
<i><b>PICK_IMAGE_REQUEST</b></i> is the request code defined as an instance variable.<br />
<pre class="css"> </pre>
<pre class="css">private int PICK_IMAGE_REQUEST = 1;
</pre>
Now once the selection has been made, we’ll show up the image in the Activity/Fragment user interface, <b>using an ImageView</b>. For this, we’ll have to override <span style="color: red;"><b>onActivityResult()</b></span>:<br />
<pre class="css"> </pre>
<pre class="css"> @Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
super.onActivityResult(requestCode, resultCode, data);
if (requestCode == PICK_IMAGE_REQUEST && resultCode == RESULT_OK && data != null && data.getData() != null) {
Uri uri = data.getData();
try {
Bitmap bitmap = MediaStore.Images.Media.getBitmap(getContentResolver(), uri);
img_view.setImageBitmap(bitmap);
} catch (IOException e) {
e.printStackTrace();
}
}
}
</pre>
<div style="text-align: center;">
<img alt="How to Select Image from Gallery with Intents in android" border="0" data-original-height="618" data-original-width="411" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvd-1Mn0e-jN8z48HZRRLLNfXSOAMRBeGG-UEqzpQlzvFAxGk6J6Se6dmq-Zf__c6vFsrXVv0JQ1hfU1u5pwJnUEi0x5pAtlY3t60KjLb-P8cE0ZPFJf997Lv4t3elwDFY_seVwP27aqWI/s320/Capture.PNG" title="How to Select Image from Gallery with Intents in android" width="213" />
</div>
Tienanhithttp://www.blogger.com/profile/08735830163069154762noreply@blogger.com0tag:blogger.com,1999:blog-3291417505031121749.post-65571655493215932772019-01-03T07:39:00.000-08:002019-01-03T07:54:28.527-08:00How to custom button rectangle in Android<h2 style="text-align: center;">
How to custom button rectangle in Android</h2>
<div style="text-align: left;">
Video use:<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe width="320" height="266" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/CqPOj0c396A/0.jpg" src="https://www.youtube.com/embed/CqPOj0c396A?feature=player_embedded" frameborder="0" allowfullscreen></iframe></div>
<br />
Type 1.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
</div>
<pre class="css"><?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<gradient
android:startColor="#F7D358"
android:centerColor="#DF7401"
android:endColor="#F7D358"
android:angle="90"/>
<padding android:left="7dp"
android:top="7dp"
android:right="7dp"
android:bottom="7dp" />
<stroke
android:width="2dip"
android:color="#FFFFFF" />
<corners android:radius= "8dp" />
</shape>
</pre>
<br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="How to custom button rectangle in Android" border="0" data-original-height="404" data-original-width="254" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuBf_vNzLRlfdU6bN4iUNnvw_EtH9DTgfOTAr5QFa1-0NBG0g8FJnnrzbaG9u2teznoQDHeRRxX_pWN11zVvB6ZrGhlP3buy3A7kibPuWleaedeLCP8Y96Kuhb2Lu-3A69Vb1R7C2uX1gD/s320/Capture.PNG" title="How to custom button rectangle in Android" width="201" /></div>
Type 2.<br />
<pre class="css"><?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<gradient
android:startColor="#00CCFF"
android:centerColor="#0000CC"
android:endColor="#00CCFF"
android:angle="90"/>
<padding android:left="7dp"
android:top="7dp"
android:right="7dp"
android:bottom="7dp" />
<stroke
android:width="2dip"
android:color="#FFFFFF" />
<corners android:radius= "8dp" />
</shape>
</pre>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<img alt="How to custom button rectangle in Android" border="0" data-original-height="403" data-original-width="270" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ4eOwe0D7BZ-vdV7NQPBcUzjwjriGiyGWIAx2aYD7Yox80UZ3RahNqsTl10hqJLEM52W4PH-w9bgV_YbVI_d_Mnn4r09h3Y-wolMM9urpfBuHnT-mFvj5LcAALR6Xi2Hn1CrCwXPDokzB/s320/Capture.PNG" title="How to custom button rectangle in Android" width="214" /></div>
<pre class="css"></pre>
Tienanhithttp://www.blogger.com/profile/08735830163069154762noreply@blogger.com0tag:blogger.com,1999:blog-3291417505031121749.post-7136859829469205172019-01-02T07:02:00.001-08:002019-01-02T07:09:07.206-08:00How to custom round imageview in android example<h2 style="text-align: center;">
How to custom round imageview in android example</h2>
<div class="separator" style="clear: both; text-align: center;">
<img alt="How to custom round imageview in android example" border="0" data-original-height="442" data-original-width="373" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdnagsPWeFnzdOeZkZXPD3c9uKQ4aV4lY9IlQxPS6dL9LWoNGsiP9GZqfGA6tpibvNFQ0QaO0s3QsNX0UBDpHK-0UeGsyiQTJUss-eqdcbHFT6gfuls2l9_741obs-laB6izs_zPmvdtVg/s200/Capture.PNG" title="How to custom round imageview in android example" width="168" /> </div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="text-align: left;">
<span style="background-color: #999999;">res/drawble/custom_round_image.xml</span></div>
<div style="text-align: left;">
<br /></div>
<pre class="css"><selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#eae1ff" />
<corners android:radius="2dp"/>
<size
android:height="70dp"
android:width="70dp" />
<padding
android:bottom="0dp"
android:left="0dp"
android:right="0dp"
android:top="0dp" />
</shape>
</item>
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#DF0174" />
<corners android:radius="2dp"/>
<size
android:height="70dp"
android:width="70dp" />
<padding
android:bottom="0dp"
android:left="0dp"
android:right="0dp"
android:top="0dp" />
</shape>
</item>
</selector>
</pre>
<span style="background-color: #999999;">res/layout/activity_main.xml</span><br />
<span style="background-color: #999999;"><span style="background-color: white;"></span> </span><br />
<span style="background-color: #999999;"><span style="background-color: white;"></span> </span>
<br />
<pre class="css"> </pre>
<pre class="css"> <ImageView
android:id="@+id/img_logo_create"
android:contentDescription="@string/app_name"
android:layout_width="wrap_content"
android:background="@drawable/custom_round_image"
android:src="@drawable/ic_play_circle_filled_black_48dp"
android:layout_gravity="center"
android:scaleType="centerInside"
android:layout_height="wrap_content" />
</pre>
Success :<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" data-original-height="357" data-original-width="219" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibjW5skDAP5s4I_PCMo21j62Feb2H0L62ohm_5e4Itlt2yYR8s8BuDSPpuTVVibLwsK5Sj31P5HEG7nMW-kTDq2e3MoZSbvnSpIt_nhgIChum31E93NVaO45MIJ6ILdN3jUXfN1PUoB97Z/s320/Capture.PNG" width="195" /> </div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Video code: </div>
<div class="separator" style="clear: both; text-align: left;">
<br /> <iframe width="320" height="266" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/8V5HxHY3gaQ/0.jpg" src="https://www.youtube.com/embed/8V5HxHY3gaQ?feature=player_embedded" frameborder="0" allowfullscreen></iframe></div>
<br />Tienanhithttp://www.blogger.com/profile/08735830163069154762noreply@blogger.com0tag:blogger.com,1999:blog-3291417505031121749.post-38472059186655387052019-01-02T05:42:00.002-08:002019-01-02T05:49:56.436-08:00How to create shadow effect on textview in Android example<h2 style="text-align: center;">
How to create shadow effect on Textview in Android example </h2>
Hi every one<b>, </b>today i introduce about <b>shadow effect text in textview android</b> after is code.<br />
<span style="background-color: #cccccc;">res/layout/activity_main.layout.xml</span><br />
<br />
<pre class="css"><?xml version="1.0" encoding="utf-8"?>
<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:padding="10dp"
android:background="@drawable/bg"
tools:context=".MainActivity">
<TextView
android:id="@+id/tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView shadow Effect "
android:textSize="30dp"
android:textStyle="bold"
android:textColor="#fffa2bff"
android:shadowColor="#ff6cc450"
android:shadowRadius="5"
android:layout_margin="10dp"
android:gravity="center"
android:padding="5dp"
android:shadowDy="-5"
/>
<TextView
android:id="@+id/tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/tv"
android:text="TextView shadow Effect "
android:textSize="30dp"
android:textStyle="bold"
android:layout_margin="10dp"
android:gravity="center"
android:textColor="#fffa2bff"
android:shadowColor="#ff6cc450"
android:shadowRadius="5"
android:shadowDy="5"
android:padding="5dp"
/>
<TextView
android:id="@+id/tv3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/tv2"
android:text="TextView shadow Effect "
android:textSize="30dp"
android:layout_margin="10dp"
android:gravity="center"
android:textStyle="bold"
android:textColor="#fffa2bff"
android:shadowColor="#ff6cc450"
android:shadowRadius="5"
android:shadowDx="5"
android:padding="5dp"
/>
<TextView
android:id="@+id/tv4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/tv3"
android:text="TextView shadow Effect "
android:textSize="30dp"
android:layout_margin="10dp"
android:gravity="center"
android:textStyle="bold"
android:textColor="#fffa2bff"
android:shadowColor="#ff6cc450"
android:shadowRadius="5"
android:shadowDx="-5"
android:padding="5dp"
/>
<TextView
android:id="@+id/tv5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/tv4"
android:text="TextView shadow Effect "
android:textSize="30dp"
android:textStyle="bold"
android:textColor="#fffa2bff"
android:shadowColor="#ff6cc450"
android:shadowRadius="5"
android:layout_margin="10dp"
android:gravity="center"
android:padding="5dp"
android:shadowDy="5"
android:shadowDx="5"
/>
</RelativeLayout>
</pre>
Succes: Run shadow effect in textview android.<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<img alt="How to create shadow effect on textview in Android example" border="0" data-original-height="688" data-original-width="465" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcgQF2k9d4-skcSvEysftoeUoqQiittIBkozK2qHUvyQoVjhPzDSPvayK5gOXKpecKb7W013tA7qhY3OSBcop_nuRh2NQ1HTXrdQwKeV4E75ghTemvhvpNDTHClGDAfJxcBpGSbSUt_Eju/s320/Capture.PNG" title="How to create shadow effect on textview in Android example" width="216" /></div>
<br />
Video code :<br />
<iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/A_eHLDY3YmU" width="560"></iframe>
<b> </b><br />
<b>Tags :</b> Text shadow in textview android, example shadow effect in textview android, android example code, textview in android shadowTienanhithttp://www.blogger.com/profile/08735830163069154762noreply@blogger.com0tag:blogger.com,1999:blog-3291417505031121749.post-46783645869517211752019-01-01T06:49:00.000-08:002019-01-01T06:49:11.994-08:00How to create a round/circle Button in Android<span class="tlid-translation translation"><span class="" title=""><span class="tlid-translation translation"><span title="">Today I will show you <b>how to create a round / circle Button in Android</b> to accomplish this problem, please follow the article below.</span> <span class="" title="">I wish you all good learning.</span></span></span></span><br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="How to create a round/circle Button in Android" border="0" data-original-height="371" data-original-width="420" height="282" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguQU8HVaeNjKXTYvAMEQ59aR2brhJQXbaLobYx6MPNj6ho3OM8hdKDcqVPivi92qFk5lee46cCPGeddQVGuDLCdR1bNfcJOiwssUVrZoJKjS6TMELvllTgPccb86AG-nCzj9tPkHKF_HzX/s320/Capture.PNG" title="How to create a round/circle Button in Android" width="320" /></div>
<br />
<h3>
<span class="tlid-translation translation"><span class="" title=""><span class="tlid-translation translation"><span class="" title="">Create buttom_cricle_round.xml in folder res\drawble.</span></span></span></span></h3>
<pre class="css"><?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<stroke android:color="#A86500" android:width="5dp" />
<solid android:color="#3CFF00"/>
<size android:width="250dp" android:height="250dp"/>
</shape>
</item>
</selector>
</pre>
<h4>
Create buttom on layout.xml
</h4>
<pre class="css">
<Button
android:id ="@+id/btn__demo"
android:layout_width="150dp"
android:layout_height="150dp"
android:text="Round Button"
android:layout_gravity="center"
android:background="@drawable/buttom_cricle_round"
android:padding="15dp"
/>
</pre>
Tags : Custom round button in android, <a href="https://android--example.blogspot.com/2018/12/android-example-circle-shape-in-xml.html">Custom circle in android</a><br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="How to create a round/circle Button in Android" border="0" data-original-height="637" data-original-width="414" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheOJ81XpxLAq7ji3eWLOxL1thSH_6EoeIZHlUb0BM1mwH_ci0deDsb7dRwemkCtwdBzNNui3rpT0UKj1yqtcHVsrjVvbCeBc_BdWQR29b2G__qS_uMx6P0A2I_4SCc7RpyLEDY4JcgqjGk/s320/Capture.PNG" title="How to create a round/circle Button in Android" width="207" /></div>
Tienanhithttp://www.blogger.com/profile/08735830163069154762noreply@blogger.com0tag:blogger.com,1999:blog-3291417505031121749.post-25304092987705325732018-12-29T20:10:00.001-08:002018-12-29T20:24:51.092-08:00Example Bitmap and BitmapFactory in android <b>Bitmap android</b> provides the following static methods to create a Bitmap object:<br />
Bitmap in android methods.<br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="Example Bitmap and BitmapFactory in android " border="0" data-original-height="406" data-original-width="273" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpYaDy4f0nACvTohO20vHiCvxUFzcBQoxt8oXbvQrGe_JPkLOhDPx-ndg5kfx4F78VKWTtXMBfJzthj01ZVwGMWgN2ge51UKLhyphenhyphenO5J-fiQlXUHEulqMcul37NmQDH0G1XT7jGAZCP8HF2H/s320/20170105104837467.gif" title="Example Bitmap and BitmapFactory in android " width="215" /></div>
<br />
<blockquote class="tr_bq">
1. CreateBitmap(Bitmap source, int x , int y, int width, int height).<br />
2. CreateScaledBitmap(Bitmap src, int dstWidth, int dstHeight, boolean filter).<br />
3. CreateBitmap(int width, int height, Bitmap.Config config)<br />
4. CreateBitmap(Bitmap source, int x, int y, int width, int height, Matrix m, boolean filter)</blockquote>
<b>BitmapFactory in android</b> provides the following methods to parse and create Bitmap objects from different data sources.<br />
<blockquote class="tr_bq">
1. decodeByteArray(byte[] data,int offset,int length);<br />
2. decodeFile(String pathName);<br />
3. decodeFileDescriptor(FileDescriptor fd);<br />
4. decodeResource(Resource res,int id);<br />
5. decodeStream(inputStream is);</blockquote>
<i><u><b>Android provides Bitmap </b></u></i>with two methods to determine if it is recycled and to force Bitmap to recycle itself.<br />
<blockquote class="tr_bq">
boolean isRecycled();<br />
void recycle();</blockquote>
Below code:<br />
<pre class="css">public class MainActivity extends Activity
{
String[] images = null;
AssetManager assets = null;
int currentImg = 0;
ImageView image;
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
image = (ImageView) findViewById(R.id.image);
try
{
assets = getAssets();
images = assets.list("");
}
catch (IOException e)
{
e.printStackTrace();
}
final Button next = (Button) findViewById(R.id.next);
next.setOnClickListener(new OnClickListener()
{
@Override
public void onClick(View sources)
{
if (currentImg >= images.length)
{
currentImg = 0;
}
while (!images[currentImg].endsWith(".png")
&& !images[currentImg].endsWith(".jpg")
&& !images[currentImg].endsWith(".gif"))
{
currentImg++;
if (currentImg >= images.length)
{
currentImg = 0;
}
}
InputStream assetFile = null;
try
{
assetFile = assets.open(images[currentImg++]);
}
catch (IOException e)
{
e.printStackTrace();
}
BitmapDrawable bitmapDrawable = (BitmapDrawable) image
.getDrawable();
if (bitmapDrawable != null
&& !bitmapDrawable.getBitmap().isRecycled()) // ①
{
bitmapDrawable.getBitmap().recycle();
}
image.setImageBitmap(BitmapFactory
.decodeStream(assetFile)); // ②
}
});
}
}
</pre>
<b>Tags :</b>example bitmap on android, demo bitmapfactory in android, example android bitmap, android bitmapfactory example.<br />
<b></b>Tienanhithttp://www.blogger.com/profile/08735830163069154762noreply@blogger.com0tag:blogger.com,1999:blog-3291417505031121749.post-62700355128317180412018-12-29T19:41:00.002-08:002018-12-29T19:41:40.217-08:00Use the drawBitmapMesh to distort the image in Android<div style="-webkit-text-stroke-width: 0px; color: black; font-family: "Times New Roman"; font-size: medium; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: 400; letter-spacing: normal; margin: 0px; orphans: 2; text-align: start; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">
Use the<span> </span><b>drawBitmapMesh in android</b> process images in the most unique way Now let's do them with the following steps.</div>
<div style="-webkit-text-stroke-width: 0px; color: black; font-family: "Times New Roman"; font-size: medium; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: 400; letter-spacing: normal; margin: 0px; orphans: 2; text-align: start; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">
<b>DrawBitmap on android</b><span> </span>is a method of handling images in a gentle and simple way.</div>
<div class="separator" style="clear: both; text-align: center;">
<img alt="drawBitmapMesh to distort the image in Android" border="0" data-original-height="427" data-original-width="279" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPpIyZIlBAnNpG2Mav9I5yIOv9dA8LF2tOxp6D4T67tAvuOcxryJgtMZ8cTswnrcqnm-ChGRVYSpTq_m0PA3jM4Q4rU5wyrfsiYuAuSD4u2l_ZRREKa6fH7hBG3SsLVIaonnT43XkIerEM/s320/Capture.PNG" title="drawBitmapMesh to distort the image in Android" width="209" /></div>
<div style="-webkit-text-stroke-width: 0px; color: black; font-family: "Times New Roman"; font-size: medium; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: 400; letter-spacing: normal; margin: 0px; orphans: 2; text-align: start; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">
<br /></div>
<div style="-webkit-text-stroke-width: 0px; color: black; font-family: "Times New Roman"; font-size: medium; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: 400; letter-spacing: normal; margin: 0px; orphans: 2; text-align: start; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">
Step 1:</div>
<div style="-webkit-text-stroke-width: 0px; color: black; font-family: "Times New Roman"; font-size: medium; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: 400; letter-spacing: normal; margin: 0px; orphans: 2; text-align: start; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">
Create class MyView extend View.</div>
<pre class="css" style="-webkit-text-stroke-width: 0px; color: black; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: 400; letter-spacing: normal; margin: 0px; orphans: 2; text-align: start; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px;">private class MyView extends View
{
private final int WIDTH = 20;
private final int HEIGHT = 20;
private final int COUNT = (WIDTH + 1) * (HEIGHT + 1);
private final float[] verts = new float[COUNT * 2];
private final float[] orig = new float[COUNT * 2];
public MyView(Context context, int drawableId)
{
super(context);
setFocusable(true);
bitmap = BitmapFactory.decodeResource(getResources()
, drawableId);
float bitmapWidth = bitmap.getWidth();
float bitmapHeight = bitmap.getHeight();
int index = 0;
for (int y = 0; y <= HEIGHT; y++)
{
float fy = bitmapHeight * y / HEIGHT;
for (int x = 0; x <= WIDTH; x++)
{
float fx = bitmapWidth * x / WIDTH;
orig[index * 2 + 0] = verts[index * 2 + 0] = fx;
orig[index * 2 + 1] = verts[index * 2 + 1] = fy;
index += 1;
}
}
setBackgroundColor(Color.WHITE);
}
@Override
protected void onDraw(Canvas canvas)
{
canvas.drawBitmapMesh(bitmap, WIDTH, HEIGHT, verts
, 0, null, 0,null);
}
private void warp(float cx, float cy)
{
for (int i = 0; i < COUNT * 2; i += 2)
{
float dx = cx - orig[i + 0];
float dy = cy - orig[i + 1];
float dd = dx * dx + dy * dy;
float d = (float) Math.sqrt(dd);
float pull = 100000 / ((float) (dd * d));
if (pull >= 1)
{
verts[i + 0] = cx;
verts[i + 1] = cy;
}
else
{
verts[i + 0] = orig[i + 0] + dx * pull;
verts[i + 1] = orig[i + 1] + dy * pull;
}
}
invalidate();
}
@Override
public boolean onTouchEvent(MotionEvent event)
{
warp(event.getX(), event.getY());
return true;
}
}
</pre>
<div style="-webkit-text-stroke-width: 0px; color: black; font-family: "Times New Roman"; font-size: medium; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: 400; letter-spacing: normal; margin: 0px; orphans: 2; text-align: start; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">
Step 2: Create class MainActivity extends Activity.</div>
<pre class="css" style="-webkit-text-stroke-width: 0px; color: black; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: 400; letter-spacing: normal; margin: 0px; orphans: 2; text-align: start; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px;">public class MainActivity extends Activity
{
private Bitmap bitmap;
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(new MyView(this, R.drawable.jinta));
}
}
</pre>
<div style="-webkit-text-stroke-width: 0px; color: black; font-family: "Times New Roman"; font-size: medium; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: 400; letter-spacing: normal; margin: 0px; orphans: 2; text-align: start; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">
All code coppy on android studio below.</div>
<div style="-webkit-text-stroke-width: 0px; color: black; font-family: "Times New Roman"; font-size: medium; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: 400; letter-spacing: normal; margin: 0px; orphans: 2; text-align: start; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">
<br /></div>
<pre class="css" style="-webkit-text-stroke-width: 0px; color: black; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: 400; letter-spacing: normal; margin: 0px; orphans: 2; text-align: start; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px;">public class MainActivity extends Activity
{
private Bitmap bitmap;
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(new MyView(this, R.drawable.jinta));
}
private class MyView extends View
{
private final int WIDTH = 20;
private final int HEIGHT = 20;
private final int COUNT = (WIDTH + 1) * (HEIGHT + 1);
private final float[] verts = new float[COUNT * 2];
private final float[] orig = new float[COUNT * 2];
public MyView(Context context, int drawableId)
{
super(context);
setFocusable(true);
bitmap = BitmapFactory.decodeResource(getResources()
, drawableId);
float bitmapWidth = bitmap.getWidth();
float bitmapHeight = bitmap.getHeight();
int index = 0;
for (int y = 0; y <= HEIGHT; y++)
{
float fy = bitmapHeight * y / HEIGHT;
for (int x = 0; x <= WIDTH; x++)
{
float fx = bitmapWidth * x / WIDTH;
orig[index * 2 + 0] = verts[index * 2 + 0] = fx;
orig[index * 2 + 1] = verts[index * 2 + 1] = fy;
index += 1;
}
}
setBackgroundColor(Color.WHITE);
}
@Override
protected void onDraw(Canvas canvas)
{
canvas.drawBitmapMesh(bitmap, WIDTH, HEIGHT, verts
, 0, null, 0,null);
}
private void warp(float cx, float cy)
{
for (int i = 0; i < COUNT * 2; i += 2)
{
float dx = cx - orig[i + 0];
float dy = cy - orig[i + 1];
float dd = dx * dx + dy * dy;
float d = (float) Math.sqrt(dd);
float pull = 100000 / ((float) (dd * d));
if (pull >= 1)
{
verts[i + 0] = cx;
verts[i + 1] = cy;
}
else
{
verts[i + 0] = orig[i + 0] + dx * pull;
verts[i + 1] = orig[i + 1] + dy * pull;
}
}
invalidate();
}
@Override
public boolean onTouchEvent(MotionEvent event)
{
warp(event.getX(), event.getY());
return true;
}
}
}
</pre>
<div style="-webkit-text-stroke-width: 0px; color: black; font-family: "Times New Roman"; font-size: medium; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: 400; letter-spacing: normal; margin: 0px; orphans: 2; text-align: start; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">
Tags: DramBitmapMesh android, example drawbitmap android, demo android bitmap, Use the drawBitmapMesh , android example, <a href="https://android--example.blogspot.com/">android example code</a>, android drawbitmap example</div>
Tienanhithttp://www.blogger.com/profile/08735830163069154762noreply@blogger.com0tag:blogger.com,1999:blog-3291417505031121749.post-17662722920104716222018-12-28T00:22:00.004-08:002018-12-28T00:22:44.788-08:00Android Textview multiline example<span class="tlid-translation translation"><b>TextView</b> is used to display text on Android application. By default, TextView displays text on one line and if long, TextView will automatically display with more lines to display its text in the most logical way.</span><br />
<span class="tlid-translation translation"> </span><span class="tlid-translation translation">Android developers can create a new line on TextView both in programming and syntax. Android developers can <b>create multi-line TextView</b> without dividing text into multiple lines according to android: minLines properties.</span><br />
<span class="tlid-translation translation"><span class="tlid-translation translation">The following <a href="https://android--example.blogspot.com/">android example code</a> shows us the TextView utility with the xml layout file and the string resource file.</span></span><br />
<span class="tlid-translation translation"><span class="tlid-translation translation">Create layout.xml </span></span><br />
<span class="tlid-translation translation"><span class="tlid-translation translation"> </span> </span>
<br />
<pre class="css"><?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">
<TextView
android:id="@+id/text_view1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="30sp"
android:background="#DA70D6"
android:text="This is line 1 \nThis is line 2 \nLine number 3"
/>
<TextView
android:id="@+id/text_view2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="30sp"
android:background="#DEB887"
android:text="This is line 1 \nThis is line 2 \nLine number 3"
android:maxLines="2"
/>
<TextView
android:id="@+id/text_view3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="30sp"
android:background="#8FBC8F"
android:text="This is line 1 \nThis is line 2"
android:minLines="3"
/>
<TextView
android:id="@+id/text_view4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="30sp"
android:background="#5F9EA0"
android:text="@string/Multiline_Text_By_N"
/>
</LinearLayout>
</pre>
Add string in file string.xml<br />
<br />
<pre class="css"><string name="Multiline_Text_By_N">
Line number 1 \nLine number 2
</string>
</pre>
<span class="tlid-translation translation" tabindex="-1"><span title=""></span></span><span class="tlid-translation-gender-indicator translation-gender-indicator"></span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgcRXUglpi6eiT-ih35lRewZC6pUjMlOECejCxupAUQdVfCqqjSBfjuiNiB9kyY0LngtPvEQKINpeqgrJRiCAjXyoDnodnzx8EOebc9SCeBJUK13rJuZ0tVfK15AHw-tMwu5cBQFckBbxy/s1600/Capture.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="638" data-original-width="415" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgcRXUglpi6eiT-ih35lRewZC6pUjMlOECejCxupAUQdVfCqqjSBfjuiNiB9kyY0LngtPvEQKINpeqgrJRiCAjXyoDnodnzx8EOebc9SCeBJUK13rJuZ0tVfK15AHw-tMwu5cBQFckBbxy/s320/Capture.PNG" width="208" /></a></div>
<span class="tlid-translation-gender-indicator translation-gender-indicator"><br /></span>
<span class="tlid-translation translation" tabindex="-1"><span title="">TextView new line programmatically</span></span><br />
<br />
<span class="tlid-translation-gender-indicator translation-gender-indicator">Create layout.xml next</span><br />
<span class="tlid-translation-gender-indicator translation-gender-indicator"><br /></span>
<br />
<pre class="css"><?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/text_view1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="30sp"
android:background="#F5F5DC"
android:text="Sample TextView 1"
/>
<TextView
android:id="@+id/text_view2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="30sp"
android:background="#E9967A"
android:text="Sample TextView 2"
/>
<TextView
android:id="@+id/text_view3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="30sp"
android:background="#DEB887"
android:text="Sample TextView 3"
/>
<TextView
android:id="@+id/text_view4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="30sp"
android:background="#7FFF00"
android:text="Sample TextView 4"
/>
<TextView
android:id="@+id/text_view5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="30sp"
android:background="#B0C4DE"
android:text="Sample TextView 5"
/>
<Button
android:id="@+id/push_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:text="Apply TextView New Line"
android:onClick="perform_action"
/>
</LinearLayout>
</pre>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" data-original-height="693" data-original-width="465" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioKrLUx7kF80kuttofSTbkvy4gmyw90w6TPIywxm7N5PIrIqgGtvRvD3Gb6Z54iBcnKRZK9Pan5OhrYI7-IDv-su5dvkGy4vqLKlySnilPfQp3oCvFzYv7KVF8yETYc7uTfFpq8YZ9gjTa/s320/Capture.PNG" width="214" /></div>
<br />
Create a class progam TextviewLine.class we <span class="tlid-translation translation" tabindex="-1"><span title="">use System.getProperty("line.separator") on java</span></span><br />
<pre class="css"> </pre>
<pre class="css">public class TextviewLine extends Activity {
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.text_layout);
init();
}
public void init(){
}
public void btn_click_app(View v)
{
TextView tv1 = (TextView) findViewById(R.id.text_view1);
//define multiline by \n line separator
tv1.setText("Line number 1 \nLine number 2 \nLine number 3");
TextView tv2 = (TextView) findViewById(R.id.text_view2);
tv2.setText("Line number 1");
//define new line by append android system line separator
tv2.append(System.getProperty("line.separator"));
tv2.append("Line number 2");
TextView tv3 = (TextView) findViewById(R.id.text_view3);
String str = "Line number 1"
+ System.getProperty("line.separator")
+ "Line number 2";
//define new line by android system line separator
tv3.setText(str);
TextView tv4 = (TextView) findViewById(R.id.text_view4);
//define new line by html <br />tag
String str2 = "Line number 1 <br /> Line number 2";
//need to import android.text.Html class
tv4.setText(Html.fromHtml(str2));
TextView tv5 = (TextView) findViewById(R.id.text_view5);
tv5.setText(R.string.Multiline_Text_By_N);
}
} </pre>
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" data-original-height="691" data-original-width="468" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEQVECxZYLp8hcy4BB5ItmcfAm-6Z2JwKWNq203N1Fx8s9ZW2WQquvZYRLF-eGHZoaSxXrHG1R9mHFw1EOQdy-LN46H_RgOpKI-lO2jR4aCLFYx-9_ZEpSqRw2LakHLGuW9ABj6ZY_jXIK/s320/Capture.PNG" width="216" /> </div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<b>Tags : </b>Multiline TextView in Android, How to make a TextView multiline programmatically in Android, TextView new line (multiline) in android, How to set the multiple lines in TextView Android StudioTienanhithttp://www.blogger.com/profile/08735830163069154762noreply@blogger.com0tag:blogger.com,1999:blog-3291417505031121749.post-43422599081124155002018-12-26T21:59:00.000-08:002018-12-26T21:59:14.380-08:00Text Scanner from image on android exampleText image is a type of text in the form of images, so that we can copy this text, we must use the camera to read this type of text and give it to users in text.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="Text Scanner from image on android example" border="0" data-original-height="267" data-original-width="483" height="176" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvau4lGuhIH-G3OEGbQ5yg1LNJNw3YT21QFZOP2y7464FLmH6sq-5ScXJ4ENWaeGZmrlqEVg5VBEWXBP0WT4IqjTUJVJl0_fTmDorlNVwprSY93lHZPub7x4qXa9HEZSlvYFM800T6Sk5F/s320/Capture.PNG" title="Text Scanner from image on android example" width="320" /></div>
<br />
Let's do them as follows<br />
<b>Step 1.</b><br />
Open android studio –> Select new Project --> Create name projiect--> Select OK<br />
<b>Step 2.</b><br />
Add library for gradle on file gradle.build you should repeat view <a href="https://android--example.blogspot.com/2018/12/library-textrecognizer-on-android.html">Library TextRecognizer on Android</a> here.<br />
<b>Step 3.</b><br />
Create layout activitymain.xml<br />
<pre class="css"><?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:text="Hello World!"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/imageView"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/text" />
<Button
android:id="@+id/button_camera"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginBottom="8dp"
android:text="@string/camera"
android:textAllCaps="false"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="@+id/button_gallery"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:text="@string/gallery"
android:textAllCaps="false"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</android.support.constraint.ConstraintLayout>
</pre>
<b>Step 4.</b><br />
Create a class have name MainText.class<br />
On this class have these method<br />
Method for Open device default Camera and take snap<br />
<pre class="css">private void openCamera() {
Intent cameraIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
File imageFile = null;
if (cameraIntent.resolveActivity(getPackageManager()) != null) {
try {
imageFile = createImageFile();
} catch (Exception e) {
e.printStackTrace();
}
if (imageFile != null) {
Uri mImageFileUri;
if (Build.VERSION.SDK_INT > Build.VERSION_CODES.KITKAT_WATCH) {
mImageFileUri = FileProvider.getUriForFile(this,
getResources().getString(R.string.file_provider_authority),
imageFile);
} else {
mImageFileUri = Uri.parse("file:" + imageFile.getAbsolutePath());
}
cameraIntent.putExtra(MediaStore.EXTRA_OUTPUT, mImageFileUri);
cameraIntent.putExtra(MediaStore.EXTRA_SCREEN_ORIENTATION, ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
startActivityForResult(cameraIntent, REQUEST_FOR_IMAGE_FROM_CAMERA);
}
}
}
</pre>
Method for Open default device gallery<br />
<pre class="css">private void openGallery() {
Intent photoPickerIntent = new Intent(Intent.ACTION_PICK);
photoPickerIntent.setType("image/*");
startActivityForResult(photoPickerIntent, REQUEST_FOR_IMAGE_FROM_GALLERY);
}
</pre>
Create a file for save photo from camera<br />
<pre class="css"> private File createImageFile() throws IOException {
@SuppressLint("SimpleDateFormat")
String timeStamp = new SimpleDateFormat("yyyyMMdd_HHmmss").format(new Date());
String imageFileName = "IMG_" + timeStamp;
File storageDirectory = Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_PICTURES);
try {
storageDirectory.mkdirs();
} catch (Exception e) {
e.printStackTrace();
}
return File.createTempFile(imageFileName, ".jpg", storageDirectory);
}
</pre>
Have method Override you should use it<br />
<pre class="css">@Override
protected void onActivityResult(final int requestCode, int resultCode, @Nullable Intent data) {
super.onActivityResult(requestCode, resultCode, data);
final Uri uri = data.getData();
try {
Bitmap bitmap = MediaStore.Images.Media.getBitmap(getContentResolver(), uri);
captureImage.setImageBitmap(bitmap);
} catch (IOException e) {
e.printStackTrace();
}
TextScanner.getInstance(this)
.init()
.load(uri)
.getCallback(new TextExtractCallback() {
@Override
public void onGetExtractText(List<String> textList) {
// Here ypu will get list of text
final StringBuilder text = new StringBuilder();
for (String s : textList) {
text.append(s).append("\n");
}
recognizeText.post(new Runnable() {
@Override
public void run() {
recognizeText.setText(text.toString());
}
});
}
});
}
</pre>
All code class Main.class
<br />
<pre class="css">import android.Manifest;
import android.annotation.SuppressLint;
import android.content.Intent;
import android.content.pm.ActivityInfo;
import android.graphics.Bitmap;
import android.net.Uri;
import android.os.Build;
import android.os.Environment;
import android.provider.MediaStore;
import android.support.annotation.Nullable;
import android.support.v4.content.FileProvider;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;
import com.karumi.dexter.Dexter;
import com.karumi.dexter.PermissionToken;
import com.karumi.dexter.listener.PermissionDeniedResponse;
import com.karumi.dexter.listener.PermissionGrantedResponse;
import com.karumi.dexter.listener.PermissionRequest;
import com.karumi.dexter.listener.single.PermissionListener;
import com.skyhope.textrecognizerlibrary.TextScanner;
import com.skyhope.textrecognizerlibrary.callback.TextExtractCallback;
import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.List;
public class MainActivity extends AppCompatActivity {
Button buttonGallery, buttonCamera;
TextView recognizeText;
ImageView captureImage;
public static final int REQUEST_FOR_IMAGE_FROM_GALLERY = 101;
public static final int REQUEST_FOR_IMAGE_FROM_CAMERA = 102;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
buttonGallery = findViewById(R.id.button_gallery);
buttonCamera = findViewById(R.id.button_camera);
recognizeText = findViewById(R.id.text);
captureImage = findViewById(R.id.imageView);
buttonGallery.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
openGallery();
}
});
buttonCamera.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Dexter.withActivity(MainActivity.this).withPermission(Manifest.permission.CAMERA).withListener(new PermissionListener() {
@Override
public void onPermissionGranted(PermissionGrantedResponse response) {
openCamera();
}
@Override
public void onPermissionDenied(PermissionDeniedResponse response) {
}
@Override
public void onPermissionRationaleShouldBeShown(PermissionRequest permission, PermissionToken token) {
}
}).check();
}
});
}
@Override
protected void onActivityResult(final int requestCode, int resultCode, @Nullable Intent data) {
super.onActivityResult(requestCode, resultCode, data);
final Uri uri = data.getData();
try {
Bitmap bitmap = MediaStore.Images.Media.getBitmap(getContentResolver(), uri);
captureImage.setImageBitmap(bitmap);
} catch (IOException e) {
e.printStackTrace();
}
TextScanner.getInstance(this)
.init()
.load(uri)
.getCallback(new TextExtractCallback() {
@Override
public void onGetExtractText(List<String> textList) {
// Here ypu will get list of text
final StringBuilder text = new StringBuilder();
for (String s : textList) {
text.append(s).append("\n");
}
recognizeText.post(new Runnable() {
@Override
public void run() {
recognizeText.setText(text.toString());
}
});
}
});
}
/**
* Method for Open device default Camera and take snap
*/
private void openCamera() {
Intent cameraIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
File imageFile = null;
if (cameraIntent.resolveActivity(getPackageManager()) != null) {
try {
imageFile = createImageFile();
} catch (Exception e) {
e.printStackTrace();
}
if (imageFile != null) {
Uri mImageFileUri;
if (Build.VERSION.SDK_INT > Build.VERSION_CODES.KITKAT_WATCH) {
mImageFileUri = FileProvider.getUriForFile(this,
getResources().getString(R.string.file_provider_authority),
imageFile);
} else {
mImageFileUri = Uri.parse("file:" + imageFile.getAbsolutePath());
}
cameraIntent.putExtra(MediaStore.EXTRA_OUTPUT, mImageFileUri);
cameraIntent.putExtra(MediaStore.EXTRA_SCREEN_ORIENTATION, ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
startActivityForResult(cameraIntent, REQUEST_FOR_IMAGE_FROM_CAMERA);
}
}
}
/**
* Method for Open default device gallery
*/
private void openGallery() {
Intent photoPickerIntent = new Intent(Intent.ACTION_PICK);
photoPickerIntent.setType("image/*");
startActivityForResult(photoPickerIntent, REQUEST_FOR_IMAGE_FROM_GALLERY);
}
/**
* Create a file for save photo from camera
*
* @return File
* @throws IOException Input output error
*/
private File createImageFile() throws IOException {
@SuppressLint("SimpleDateFormat")
String timeStamp = new SimpleDateFormat("yyyyMMdd_HHmmss").format(new Date());
String imageFileName = "IMG_" + timeStamp;
File storageDirectory = Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_PICTURES);
try {
storageDirectory.mkdirs();
} catch (Exception e) {
e.printStackTrace();
}
return File.createTempFile(imageFileName, ".jpg", storageDirectory);
}
}
</pre>
<b>Step 5</b><br />
And permission on androidmainfest.xml
<br />
<pre class="css"><uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.CAMERA" />
</pre>
Step 6.<br />Run projiect and view result.Tienanhithttp://www.blogger.com/profile/08735830163069154762noreply@blogger.com0tag:blogger.com,1999:blog-3291417505031121749.post-79430737343287530282018-12-26T20:06:00.000-08:002018-12-26T20:10:20.649-08:00Library TextRecognizer on Android<br />
<b>TextRecognizer</b> is This library extend google vision , and initilay it read text from image. for reading text from image you have to give image Uri or Bitmap.<br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="Library TextRecognizer on Android" border="0" data-original-height="254" data-original-width="370" height="219" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjBscgdxd2jOm5qGNfuuKxGLYMYKkYHxI-9ocXwP-CYzgL7yBP7uKLPXQkcQSub35z0L-gEXjPNpn9Jk1Xl_lL41xiD5NfcpzPdKLpB6Pou6PtumxpUCGlUzbZW5QJW4GDA4SmLKQUqNHN/s320/Capture.PNG" title="Library TextRecognizer on Android" width="320" /></div>
<br />
<div style="text-align: center;">
</div>
<br />
Setup libary on <a href="https://android--example.blogspot.com/">android studio</a><br />
<b>Gradle</b><br />
<pre class="css">allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
</pre>
<b>Add Gradle</b><br />
<br />
dependencies {<br />
implementation 'com.github.mahimrocky:TextRecognizer:1.0.0'<br />
}<br />
<pre class="css"></pre>
<b>Use Api on TextRecognizer</b><br />
<br />
<pre class="css">TextScanner.getInstance(this)
.init()
.load(uri) // uri or bitmap
.getCallback(new TextExtractCallback() {
@Override
public void onGetExtractText(List<String> textList) {
// Here you will get list of text
}
});
</pre>
Tienanhithttp://www.blogger.com/profile/08735830163069154762noreply@blogger.com0tag:blogger.com,1999:blog-3291417505031121749.post-40632437476719816702018-12-26T06:38:00.000-08:002018-12-26T06:38:20.906-08:00Custom Popup Window on Android studio<span class="tlid-translation translation"><span title="">The <b>Custom Popup Window</b> is a custom for views to display information and functions when users want to handle events in the popup.</span></span><br />
<span class="tlid-translation translation"><span title=""> </span></span><span class="tlid-translation translation"><span class="" title="">To make <u><b>example custom popup windows on android</b></u>, please follow the steps below.</span></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="Custom Popup Window on Android studio" border="0" data-original-height="607" data-original-width="413" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5hWBntrtu2EONkALRhTWoifiP5bh3HWdtEdao1FUwkOBa-9oMdTbHjcWoQMOM2lnlaXPgEmLzvsxxUwUb8fLE8XLIs9srmGaH8QJbRWm7z_LfWVc_exRPr49KxoPDuqh8_kEbeuCeERGO/s320/Capture.PNG" title="Custom Popup Window on Android studio" width="217" /></div>
<br />
<span class="tlid-translation translation"><span class="" title="">Step 1.</span></span><br />
<i><span class="tlid-translation translation"><span class="" title=""><span class="tlid-translation translation"><span class="" title="">Create a custom layout named customlayout.xml.</span></span></span></span></i><br />
<pre class="css"><?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="350dp"
android:layout_height="475dp"
android:background="#808080"
android:padding="5dp"
android:layout_gravity="center">
<TextView
android:id="@+id/txtclose"
android:layout_width="30dp"
android:layout_height="30dp"
android:textColor="@color/white"
android:text="X"
android:textStyle="bold"
android:layout_gravity="end"
android:gravity="center"
android:background="@drawable/custom_circle_shape"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/aa"
android:layout_gravity="center"
android:layout_marginTop="15dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Elina Grofild"
android:textStyle="bold"
android:textColor="@color/white"
android:layout_gravity="center_horizontal"
android:layout_marginTop="5dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Montreal,Canada"
android:textColor="@color/white"
android:layout_gravity="center_horizontal"
android:layout_marginTop="5dp"/>
</LinearLayout>
<LinearLayout
android:layout_marginTop="15dp"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:background="@color/orange"
android:gravity="center"
android:orientation="vertical"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="100dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="150"
android:textSize="18sp"
android:textColor="@color/white"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Followers"
android:textSize="18sp"
android:textColor="@color/white"/>
</LinearLayout>
<LinearLayout
android:background="@color/green"
android:gravity="center"
android:orientation="vertical"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="100dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="19"
android:textSize="18sp"
android:textColor="@color/white"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cities"
android:textSize="18sp"
android:textColor="@color/white"/>
</LinearLayout>
<LinearLayout
android:background="@color/bluelight"
android:gravity="center"
android:orientation="vertical"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="100dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="50"
android:textSize="18sp"
android:textColor="@color/white"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Posts"
android:textSize="18sp"
android:textColor="@color/white"/>
</LinearLayout>
</LinearLayout>
<Button
android:id="@+id/btnfollow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Follow Me"
android:layout_marginTop="25dp"
android:layout_gravity="center_horizontal"
style="@style/Base.TextAppearance.AppCompat.Button"
android:textColor="@color/white"/>
</LinearLayout>
</pre>
<span class="tlid-translation translation"><span class="" title=""><span class="tlid-translation translation"><span class="" title="">Step 2.</span></span></span></span><br />
<span class="tlid-translation translation"><span class="" title=""><span class="tlid-translation translation"><span class="" title=""><i> </i></span></span></span></span><span class="tlid-translation translation"><span class="" title=""><span class="tlid-translation translation"><span class="" title=""><i><span class="tlid-translation translation"><span class="" title="">Create a layout called activitylayout.xml</span></span></i></span></span></span></span><br />
<pre class="css"><?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorPrimaryDark"
android:orientation="vertical"
android:gravity="center">
<Button
android:onClick="ShowPopup"
android:textColor="@color/white"
android:text="show popup"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</pre>
<span class="tlid-translation translation"><span class="" title=""><span class="tlid-translation translation"><span class="" title=""><span class="tlid-translation translation"><span class="" title="">Step 3.</span></span></span></span></span></span><br />
<i><span class="tlid-translation translation"><span class="" title=""><span class="tlid-translation translation"><span class="" title=""><span class="tlid-translation translation"><span class="" title=""> </span></span></span></span></span></span><span class="tlid-translation translation"><span class="" title="">Create a class MainActivity.class</span></span></i><br />
<pre class="css">import android.app.Activity;
import android.app.Dialog;
import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.TextView;
import com.anhttvn.androidexample.R;
import androidx.annotation.Nullable;
public class CustomPopup extends Activity {
private Dialog mDialog;
private LinearLayout mLl_popup;
private Button btn_show;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activitypopup);
init();
clickShow();
}
private void init(){
mDialog = new Dialog(this);
mLl_popup = findViewById(R.id.ll_popup);
btn_show = findViewById(R.id.btn_show);
}
public void ShowPopup(View v) {
TextView txtclose;
mDialog.setContentView(R.layout.customlayout);
txtclose =mDialog.findViewById(R.id.txtclose);
txtclose.setText("M");
txtclose.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mDialog.dismiss();
}
});
mDialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
mDialog.show();
}
private void clickShow(){
btn_show.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
ShowPopup(mLl_popup);
}
});
}
}
</pre>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" data-original-height="612" data-original-width="415" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxgWo63D-FsNhrwwH3FSNjpDGCBizOZt3DoxnXzcnAireO5vvVn0t9ZxmEtbJRH37tnfrmllPMgYUgLQNPFwWGFg1T563hoV7i74A22A0lz_6m69DCDedQ2ux4wgz4jOg2Hxv3T65KMKhD/s320/Capture.PNG" width="216" /> </div>
<div class="separator" style="clear: both; text-align: left;">
<b>Tags : </b>Custom pupoup windown android, android example, Custom poppup windown on android.</div>
<br />Tienanhithttp://www.blogger.com/profile/08735830163069154762noreply@blogger.com0tag:blogger.com,1999:blog-3291417505031121749.post-51284874407209874262018-12-25T22:20:00.001-08:002018-12-26T00:58:24.929-08:00Android example - Android Popup Window Example <h3>
<span class="tlid-translation translation"><span class="" title="">Introducing the popup window in Android.</span></span></h3>
<span class="tlid-translation translation"><span class="" title=""><b>Popub windown Android</b> is a phenomenon that displays information or notifies when a user clicks the event in a certain attribute, <i><b>Popub windown</b></i> is often used in case of asking questions to users, or informing users.</span> <span class="" title="">something.</span></span><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><img alt="Android Popup Window Example " border="0" data-original-height="646" data-original-width="423" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDggmpPj_7Mp3YkIiZs7dnFOxfGaxh35sUpk_BQfBu1WmtFA-8wxrRtrPlh3S6pksSR0n5RUN27d_Vyq7XF6E8xHqj825BZr1XsaxVHi1BPB7Cq-IaSA4277l7CBf18lBVG_PiVzCkR9VG/s320/Capture.PNG" style="margin-left: auto; margin-right: auto;" title="Android Popup Window Example " width="209" /></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Android Popup Window Example </td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<span class="tlid-translation translation"><span class="" title="">Step 1<br />Create layout have name activity_main.xml on layout</span></span><br />
<pre class="css"><?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Android Popup Window Example "
android:layout_gravity="center"
android:textColor="#000"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="50dp"
android:text="Show Popup Window"
/>
</LinearLayout>
</pre>
<span class="tlid-translation translation"><span class="" title=""> Step 2<br />Create layout custom popubwindown with custom_layout_popub.xml</span></span><br />
<span class="tlid-translation translation"><span class="" title=""></span></span><br />
<pre class="css"><?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/rl_custom_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="2dp"
android:background="#808000"
>
<ImageButton
android:id="@+id/ib_close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_close_black_24dp"
android:background="@null"
/>
<TextView
android:id="@+id/tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Android example popub windown"
android:textColor="#fff"
android:layout_gravity="center"
android:padding="25sp"
/>
</LinearLayout>
</pre>
Step 3<br />
<span class="tlid-translation translation"><span class="" title="">Perform popup display window processing in class</span></span><br />
<pre class="css">import android.app.Activity;
import android.content.Context;
import android.os.Build;
import android.os.Bundle;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.ImageButton;
import android.widget.LinearLayout;
import android.widget.PopupWindow;
public class MainActivity extends Activity {
private Button btn_click_show;
private Context mContext;
private PopupWindow mPopupWindow;
private LinearLayout mRelativeLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mContext = getApplicationContext();
init();
clickShowPupub();
}
private void init(){
btn_click_show = findViewById(R.id.btn);
mRelativeLayout = (LinearLayout) findViewById(R.id.rl);
}
private void clickShowPupub(){
btn_click_show.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(LAYOUT_INFLATER_SERVICE);
// Inflate the custom layout/view
View customView = inflater.inflate(R.layout.custom_layout_popub,null);
mPopupWindow = new PopupWindow(
customView,
ViewGroup.LayoutParams.WRAP_CONTENT,
ViewGroup.LayoutParams.WRAP_CONTENT
);
if(Build.VERSION.SDK_INT>=21){
mPopupWindow.setElevation(5.0f);
}
ImageButton closeButton = (ImageButton) customView.findViewById(R.id.ib_close);
closeButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
// Dismiss the popup window
mPopupWindow.dismiss();
}
});
mPopupWindow.showAtLocation(mRelativeLayout, Gravity.CENTER,0,0);
}
});
}
}
</pre>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" data-original-height="639" data-original-width="421" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz3V7skcuD26yMLy9eR8oo9atjWNlI6N3gm6lERPGGgGllCENiP7dXFV7mrKSwyhyk-Mvpc1f_Qlbf6simYFOiUgbFyZE33cwQlEx2aVl8_qGxbXeJWqOl3Rp2TVIJNV-v0hfHOmkiV0hP/s320/Capture.PNG" width="210" /></div>
<br />Tienanhithttp://www.blogger.com/profile/08735830163069154762noreply@blogger.com0tag:blogger.com,1999:blog-3291417505031121749.post-6680891847321901062018-12-25T21:31:00.001-08:002018-12-25T21:31:45.567-08:00Android Example - Circle shape in XML drawable file on Android<h2 style="text-align: center;">
<a href="https://android--example.blogspot.com/">Android Example</a> Hi Everyone.</h2>
<b>Circle shape</b> <span class="tlid-translation translation"><span class="" title="">used to customize images in a circle or display text in a circle.</span></span><br />
<span class="tlid-translation translation"><span class="" title=""><span class="tlid-translation translation"><span class="" title="">Today I will introduce you to the lesson <b>Circle shape in XML drawable</b> this function applies a lot in each exercise and project of each of us, you can only follow the steps below.</span></span></span></span><br />
<span class="tlid-translation translation"><span class="" title=""><span class="tlid-translation translation"><span class="" title=""> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><img alt="Circle shape in XML drawable file on Android" border="0" data-original-height="427" data-original-width="261" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF4vsb-HGtpLDy_YpeX7SJaXXm_qlgf6uIWaOIPjXC3Q2ncNPpwf97Mzcwsx9ATEZUeLJTUaEuBsiHwbFO_1ZrzBwR7ukM4icpMpbsAAh7N4UdztuuDEavie8G1-dKLyQ8epCBbqrPzVft/s320/Capture.PNG" style="margin-left: auto; margin-right: auto;" title="Circle shape in XML drawable file on Android" width="195" /></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Circle shape in XML drawable file on Android</td></tr>
</tbody></table>
</span></span></span></span><br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<span style="background-color: #d9d2e9;"><span class="tlid-translation translation"><span class="" title=""><span class="tlid-translation translation"><span class="" title="">The fist : res/drawable/custom_circle_shape.xml on folder drawable.</span></span></span></span></span><br />
<pre class="css"><?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<solid android:color="#800080"/>
<!-- set width of cricle -->
<stroke android:color="#3b91d7" android:width="5dp"/>
<!-- set height of cricle -->
<size android:width="250dp" android:height="250dp"/>
</shape>
</item>
</selector>
</pre>
<span style="background-color: #ead1dc;"><span class="tlid-translation translation"><span class="" title=""><span class="tlid-translation translation"><span class="" title="">The second : activity_layout.xml on folder layout</span></span></span></span></span><br />
<span class="tlid-translation translation"><span class="" title=""><span class="tlid-translation translation"><span class="" title=""><br /></span></span></span></span>
<br />
<pre class="css"><?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Circle shape in XML drawable"
android:layout_gravity="center"
android:textColor="#000"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Circular Shape"
android:layout_gravity="center"
android:layout_marginTop="50dp"
android:layout_centerInParent="true"
android:background="@drawable/custom_circle_shape"
android:textColor="#fff"
/>
</LinearLayout>
</pre>
<br />
<b>Tags:</b> Android, Cricle shape, custom button, android exampleTienanhithttp://www.blogger.com/profile/08735830163069154762noreply@blogger.com1