Giter Site home page Giter Site logo

textinputview's Introduction

TextInputView

MavenCentral Android Arsenal

A different approach to the TextInputLayout

Instead of preserving extra space for repositioning its hint, the TextInputView will place it into the embedded EditText. The Material Design Guidelines are being respected by adapting primary- and accent colors as well as the style of the target hint.

Preview

Features

  • More space for you: Reduce the extra space for a permanent hint to an absolute minimum
  • Customization: Adjust textSize, textColor, padding and overlap action of the hint
  • Gravity: Support for Gravity.START (Gravity.LEFT), Gravity.END (Gravity.RIGHT) - and even Gravity.CENTER
  • Compound drawables: Support for setError() and other compound drawables
  • RTL: Support for right-to-left configurations
  • Minimum footprint: No dependencies (other than org.jetbrains.kotlin:kotlin-stdlib-jre7)

Getting Started

Gradle
buildscript {
    repositories {
        mavenCentral()
    }
}
```gradle
dependencies {
    implementation 'com.faltenreich:textinputview:<version>'
}
XML
<com.faltenreich.textinputview.TextInputView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:overlapAction="push">
    
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Every pixel counts"/>
        
</com.faltenreich.textinputview.TextInputView>
Java
public class MainActivity extends AppCompatActivity {

    public MainActivity {
        super(R.layout.activity_main);
    }
    
    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        TextInputView textInputView = new TextInputView(editText);
    }
}
Kotlin
class MainActivity : AppCompatActivity(R.layout.activity_main) {
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val textInputView = TextInputView(editText)
    }
}

Configuration

Property Type Description
android:textColor color Applied when the embedded EditText loses focus (defaults to textColor of the hint)
android:textSize dimension Text size of the hint (defaults to textSize of the hint)
android:tint color Applied when the embedded EditText gets focused (defaults to tint of the hint)
overlapAction enum Applied when the input of the embedded EditText overlaps the hint (options: push, toggle) (defaults to toggle)

FAQ

Why this library?

I adore the Material Design Guidelines. For me they are an incredible source of wisdom for non-designers. No longer do I have to spent dozens of hours for the fine details of my user interfaces. Now I have more time to do the thing I love the most: developing sourcecode that keeps everything together.

The InputTextLayout is one of the many fine Material Design Components. It helps users navigating a form by providing a permanent hint. One particular problem with the InputTextLayout is the additional screen space it preserves for positioning its hint. Not only does this lead to vertically larger user interfaces, but the preserved space stays completely empty until a user input has been given - and is therefor temporarily useless.

How does the TextInputView work?

The TextInputLayout wraps a given EditText and replaces its hint with a TextView that stays within the bounds of the original view. Therefor it does not preserve additional screen space and stays there as long as it fits into the original EditText alongside the user input - otherwise it will be pushed to the side (or optionally be hidden immediately). The latter should rarely occur as the user input of most forms stays relatively short.

What about gravity?

The gravity of the embedded EditText may be set to Gravity.START, Gravity.END, Gravity.CENTER - or to the obsolete Gravity.LEFT and Gravity.RIGHT, if you insist. The hint of the TextInputView will adjust accordingly and either be moved to the left or right to make place for the user input.

What about EditText.setError() or other compound drawables?

The hint of the TextInputView will be positioned right before (drawableEnd) or after (drawableStart) a compound drawable, including its compoundDrawablePadding.

What about RTL?

Right-to-left input is supported throughout using the Android resource system (res/values-ldrtl). The calculations are flipped in order to respect the inverted alignments.

Third-party licenses

This software uses following technologies with great appreciation:

License

Copyright 2021 Philipp Fahlteich

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.