Discussion
In this app we will create a simple layout where we will show a text "Hello world" and then add a edit text where user will be able to enter a name and after clicking the button given below the editText we will hide the button and editText and show the name user has entered. We will also create a scroll view where user's bio will be written and can be scroll down to view complete bio. So let's do that ! activity_main : <? xml version ="1.0" encoding ="utf-8" ?>
<layout
xmlns: android ="http://schemas.android.com/apk/res/android"
xmlns: app ="http://schemas.android.com/apk/res-auto" >
<LinearLayout
xmlns: tools ="http://schemas.android.com/tools"
android :layout_width ="match_parent"
android :layout_height ="match_parent"
android :orientation ="vertical"
android :paddingStart ="@dimen/padding_start"
android :paddingEnd ="@dimen/padding_start"
tools :context =".MainActivity" >
<TextView
android :id ="@+id/name_text"
style ="@style/NameStyle"
android :layout_width ="match_parent"
android :layout_height ="wrap_content"
android :layout_marginTop ="16dp"
android :text ="@string/name_text"
android :textAlignment ="center" />
<EditText
android :id ="@+id/nickname_edit"
style ="@style/NameStyle"
android :layout_width ="match_parent"
android :layout_height ="wrap_content"
android :ems ="10"
android :hint ="@string/what_is_your_nickname"
android :inputType ="textPersonName"
android :textAlignment ="center" />
<Button
android :id ="@+id/done_button"
style ="@style/Widget.AppCompat.Button.Colored"
android :layout_width ="wrap_content"
android :layout_height ="wrap_content"
android :layout_gravity ="center_horizontal"
android :layout_marginTop ="@dimen/layout_margin"
android :layout_marginBottom ="@dimen/layout_margin"
android :text ="@string/Done" />
<TextView
android :id ="@+id/nickname_text"
android :layout_width ="match_parent"
android :layout_height ="wrap_content"
android :text ="TextView"
android :visibility ="invisible" />
<ImageView
android :id ="@+id/star_image"
android :layout_width ="match_parent"
android :layout_height ="wrap_content"
android :contentDescription ="@string/star_image"
app :srcCompat ="@android:drawable/btn_star_big_on" />
<ScrollView
android :id ="@+id/bio_scroll"
android :layout_width ="match_parent"
android :layout_height ="match_parent"
android :layout_marginTop ="@dimen/layout_margin" >
<TextView
android :id ="@+id/long_text"
android :layout_width ="match_parent"
android :layout_height ="wrap_content"
android :layout_marginTop ="@dimen/layout_margin"
android :lineSpacingMultiplier ="1.2"
android :paddingTop ="@dimen/small_padding"
android :scrollbars ="none"
android :text ="@string/long_bio"
android :textSize ="23sp" />
</ScrollView>
</LinearLayout>
</layout> MainActivity.kt : package com.dheeraj.aboutme
import android.content.Context
import android.os.Bundle
import android.view.View
import android.view.inputmethod.InputMethodManager
import androidx.appcompat.app.AppCompatActivity
import androidx.databinding.DataBindingUtil
import com.dheeraj.aboutme.databinding.ActivityMainBinding
class MainActivity : AppCompatActivity() {
private lateinit var binding : ActivityMainBinding
override fun onCreate (savedInstanceState: Bundle?) {
super .onCreate(savedInstanceState)
binding = DataBindingUtil.setContentView( this, R.layout. activity_main )
/*findViewById<Button>(R.id.done_button).setOnClickListener {
addNickname(it)
}*/
binding . doneButton .setOnClickListener {
addNickname( it )
}
}
private fun addNickname (view: View) {
binding . apply {
invalidateAll()
binding . nicknameText . text = binding . nicknameEdit . text
binding . nicknameEdit . visibility = View. GONE
binding . doneButton . visibility = View. GONE
binding . nicknameText . visibility = View. VISIBLE
}
// Hide the keyboard.
val imm = getSystemService(Context. INPUT_METHOD_SERVICE ) as InputMethodManager
imm.hideSoftInputFromWindow(view. windowToken , 0 )
}
}
styles.xml : <resources>
<!-- Base application theme. -->
<style name ="AppTheme" parent ="Theme.AppCompat.Light.DarkActionBar" >
<!-- Customize your theme here. -->
<item name ="colorPrimary" > @color/colorPrimary </item>
<item name ="colorPrimaryDark" > @color/colorPrimaryDark </item>
<item name ="colorAccent" > @color/colorAccent </item>
</style>
<style name ="NameStyle" >
<item name ="android:fontFamily" > @font/poppins_medium </item>
<item name ="android:paddingTop" > @dimen/small_padding </item>
<item name ="android:textSize" > @dimen/text_size </item>
<item name ="android:textColor" > @android:color/black </item>
<item name ="android:layout_marginTop" > @dimen/layout_margin </item>
</style>
</resources>
dimen.xml : <resources>
<dimen name ="text_size" > 20sp </dimen>
<dimen name ="small_padding" > 8dp </dimen>
<dimen name ="layout_margin" > 16dp </dimen>
</resources> string.xml : <resources>
<string name ="app_name" > About me </string>
<string name ="star_image" > Star Image </string>
<string name ="name_text" > Hello World </string>
<string name ="long_bio" > Now it’s your turn to complete this exercise.
Add a ScrollView with a TextView showing information about yourself to the layout.
Style the TextView with NameStyle, and add additional styling to separate the scrollable text from the edges of the screen. The "Extract dimension resource" menu option is not available for this attribute, so you will have to add it to dimens.xml by hand.
If you want to start at this step, you can download this exercise code from: Step.03-Exercise-Add-ScrollView.
You will find plenty of //TODO comments to help you complete this exercise, and if you get stuck, go back and watch the video again.
</string>
<string name ="what_is_your_nickname" > What is your nickname </string>
<string name ="Done" > done </string>
</resources>
build.gradle : dataBinding {
enabled= true
}