2015-09-06 13 views
14

Ich versuche Toolbar mit EditText innerhalb es so zu machen:Toolbar mit EditText Material Design

Toolbar with EditText

Im Moment kann ich ähnliche etwas, was tun, sondern nur mit statischen Titel, Alle Ideen, um loszulegen ?

+0

kann man einfach nicht EditTexts in einem AppBarLayout setzen? https://developer.android.com/reference/android/support/design/widget/AppBarLayout.html – Kenneth

+0

Ja, aber ich möchte, dass der EditText in normalen TextView verwandelt und reibungslos kleiner wird, wenn der Benutzer hoch scrollt. – MoHaKa

+0

Verwenden Sie Appbarlayout und reduzierbare Symbolleiste – 3xplore

Antwort

0

Ich denke, dass Sie Ihre eigenen Toolbarlyout erstellen müssen und legen Sie es auf der Aktivitätsleiste fest. versuchen Sie dies:

http://javatechig.com/android/actionbar-with-custom-view-example-in-android Sie müssen nur Ihre Komponente erstellen. ich, dass Hoffnung für Sie nützlich sein wird;)

+0

Haben Sie eine Idee, um einen reibungslosen Bildlauf zu ermöglichen, während der Benutzer nach oben und unten scrollt? – MoHaKa

+0

Ich möchte die EditText in normale TextView und reibungslos kleiner werden, wenn der Benutzer nach oben scrollt. – MoHaKa

+0

Warum wechseln Sie nicht einfach mit einem TextView, der sich an der gleichen Position befindet, die Sichtbarkeit und animieren Sie diese beim Scrollen? –

-1

AppBarLayout wäre die beste Wahl sein

Ref https://developer.android.com/reference/android/support/design/widget/AppBarLayout.html

Beispiel http://www.feelzdroid.com/2015/07/android-appbarlayout-scrolling-example.html

offensichtlich müssten Sie Anpassungen dieses

Hoffnung tun hilft

+0

QAMAR, ich habe diese Links bereits überprüft, das einzige, was sie tun, ist die Implementierung einer Toolbar mit reduzierbaren statischen Titel, die ich bereits erreicht habe. – MoHaKa

21

ich h ave dies wie unten getan:

enter image description here

Es Toolbar als AppBar ist (aka ActionBar) an der Spitze und der zweiten Symbolleiste darunter mit zwei EditText. Die erste Symbolleiste befindet sich unter CollapsingToolbarLayout, falls Sie möchten, dass sie minimiert wird.

Java:

public class MainActivity extends AppCompatActivity { 
    Toolbar toolbar; 
    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.activity_main); 

     toolbar = (Toolbar) findViewById(R.id.toolbar_1); 
     setSupportActionBar(toolbar); 
     getSupportActionBar().setDisplayHomeAsUpEnabled(true); 
     getSupportActionBar().setTitle(""); 
    } 


    @Override 
    public boolean onCreateOptionsMenu(Menu menu) { 
     // Inflate the menu; this adds items to the action bar if it is present. 
     getMenuInflater().inflate(R.menu.main, menu); 
     return true; 
    } 

} 

activity_main.xml:

<android.support.design.widget.CoordinatorLayout 
    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:fitsSystemWindows="true"> 

    <android.support.design.widget.AppBarLayout 
     android:id="@+id/appbar" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content"  > 

     <android.support.design.widget.CollapsingToolbarLayout 
      android:id="@+id/collapsing_tool_bar_layout" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      app:elevation="0dp" 
      app:expandedTitleTextAppearance="@style/Widget.AppCompat.ActionBar.TabText" 
      app:layout_scrollFlags="scroll|enterAlways" 
      app:statusBarScrim="?attr/colorAccent"> 


      <android.support.v7.widget.Toolbar 
       android:id="@+id/toolbar_1" 
       android:layout_width="match_parent" 
       android:layout_height="?attr/actionBarSize" 
       android:background="@color/primary" 
       android:minHeight="?attr/actionBarSize" 
       android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" 
       app:layout_collapseMode="none" 
       app:layout_scrollFlags="scroll|exitUntilCollapsed" 
       app:popupTheme="@style/ThemeOverlay.AppCompat.Light"> 
      </android.support.v7.widget.Toolbar> 

     </android.support.design.widget.CollapsingToolbarLayout> 

     <android.support.v7.widget.Toolbar 
      android:id="@+id/toolbar_2" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:background="@color/primary" 
      android:minHeight="?attr/actionBarSize" 
      android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" 
      app:layout_collapseMode="none" 
      app:elevation="0dp" 
      app:layout_scrollFlags="scroll|exitUntilCollapsed" 
      app:popupTheme="@style/ThemeOverlay.AppCompat.Light"> 

      <LinearLayout 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:orientation="vertical" 
       android:paddingLeft="32dp" 
       android:paddingTop="16dp" 
       android:paddingBottom="56dp" 
       android:paddingRight="16dp"> 

       <android.support.design.widget.TextInputLayout 
        android:id="@+id/lNameLayout" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:layout_below="@+id/fNameLayout" 
        android:layout_marginTop="10dp"> 

        <EditText 
         android:id="@+id/ltitle" 
         android:layout_width="match_parent" 
         android:layout_height="wrap_content" 
         android:ems="10" 
         android:hint="Title"/> 
       </android.support.design.widget.TextInputLayout> 

       <android.support.design.widget.TextInputLayout 
        android:id="@+id/lNameLayout2" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:layout_below="@+id/fNameLayout" 
        android:layout_marginTop="10dp" 
        android:layout_marginBottom="10dp"> 

        <EditText 
         android:id="@+id/ldesc" 
         android:layout_width="match_parent" 
         android:layout_height="wrap_content" 
         android:ems="10" 
         android:hint="Description"/> 
       </android.support.design.widget.TextInputLayout> 


      </LinearLayout> 
     </android.support.v7.widget.Toolbar> 

    </android.support.design.widget.AppBarLayout> 


</android.support.design.widget.CoordinatorLayout> 

Colors:

<?xml version="1.0" encoding="utf-8"?> 
<resources> 
    <color name="primary">#303F9F</color> 
    <color name="primary_dark">#3F51B5</color> 
    <color name="accent">#00E5FF</color> 

</resources> 

Und styles.xml:

<resources> 
    <style name="AppTheme" parent="AppTheme.Base"/> 
    <style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar"> 
     <item name="colorPrimary">@color/primary</item> 
     <item name="colorPrimaryDark">@color/primary_dark</item> 
     <item name="colorAccent">@color/accent</item> 
     <item name="colorControlNormal">#FFF</item> 
    </style>  
</resources> 

Verwenden Sie android:theme="@style/AppTheme" für die Anwendung in Manifest und android:theme="@style/AppTheme.Base" for MainActivity`.

+0

Vielen Dank für den Versuch, mir zu helfen, ich möchte nur fragen, was passiert, wenn der Benutzer hoch scrollt? – MoHaKa

+0

Es hängt von Ihnen ab, verwenden Sie 'scrollFlags', um es zu steuern. Sie können beide Tabs oder eins fixieren oder sie beim Scrollen ausblenden. –

+2

aber Titel wird nicht Symbolleistentitel in der obigen Implementierung, wenn Sie scrollen –

0

Sie können ein lineares Layout mit der gleichen Farbe Ihrer Symbolleiste verwenden. Das Toolbar-Attribut android:elevation muss 0px sein.

Aktivität (xml)

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
       android:orientation="vertical" 
               android:layout_width="match_parent" 
               android:layout_height="match_parent"> 

    <include 
     layout="@layout/toolbar_task" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
    ></include> 

    <fragment xmlns:android="http://schemas.android.com/apk/res/android" 
       xmlns:tools="http://schemas.android.com/tools" android:id="@+id/fragment_task" 
       android:name="com.hashicode.simpletodo.fragment.TaskFragment" tools:layout="@layout/fragment_task" 
       android:layout_width="match_parent" android:layout_height="match_parent" /> 

</LinearLayout> 

Toolbar (xml)

<?xml version="1.0" encoding="utf-8"?> 
<android.support.v7.widget.Toolbar 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:id="@+id/toolbar" 
    android:layout_height="wrap_content" 
    android:layout_width="match_parent" 
    android:fitsSystemWindows="true" 
    android:minHeight="?attr/actionBarSize" 
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" 
    android:background="?attr/colorPrimaryDark" 
    android:elevation="0px"> 
</android.support.v7.widget.Toolbar> 

Fragment (xml)

<?xml version="1.0" encoding="utf-8"?> 
<android.support.design.widget.CoordinatorLayout 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="match_parent" 
               android:orientation="vertical"> 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:orientation="vertical"> 

     <LinearLayout 
      android:id="@+id/taskname_area" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:background="@color/PrimaryDarkColor" 
      android:orientation="vertical"> 

      <android.support.design.widget.TextInputLayout 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:paddingBottom="36dp" 
       android:paddingLeft="72dp" 
       android:paddingRight="16dp"> 

       <EditText 
        android:id="@+id/task_name" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:hint="@string/task.name" 
        android:textSize="30dp"/> 

      </android.support.design.widget.TextInputLayout> 

     </LinearLayout> 

     <!-- some code --> 

     </android.support.design.widget.CoordinatorLayout> 

Aktivität (Java)

public class TaskActivity extends AppCompatActivity { 


    @Override 
    protected void onCreate(@Nullable Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     initializeTodo(savedInstanceState); 
     setContentView(R.layout.activity_task); 
     //set the toolbar 
     setSupportActionBar((Toolbar) findViewById(R.id.toolbar)); 
     getSupportActionBar().setDisplayHomeAsUpEnabled(true); 
     getSupportActionBar().setTitle(null); 
    } 

Das Ergebnis:

enter image description here