Añadir imagen en 3 pestañas
¿Cómo puedo agregar imágenes a la pestaña? Actualmente soy capaz de mover la pestaña a la parte inferior, pero no tengo idea de cómo cambiar la LL Tab1
, LL Tab2
, LL Tab3
a icon.Am I en el camino correcto? Cualquier ayuda sería muy apreciada.
Código xml
- Algunos problemas y dificultades en PagerTabStrip
- Android ActionBar Tabs color de fondo modo dividido
- Android Añadir pestaña dentro del fragmento
- Utilice la pestaña con la nueva barra de herramientas (AppCompat v7-21)
- Ayuda de la pestaña de Android. ¿Cómo configurar la 2ª pestaña como predeterminada cuando se abre la aplicación?
<?xml version="1.0" encoding="utf-8"?> <TabHost xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/tabhost" android:layout_width="fill_parent" android:layout_height="fill_parent" > <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" android:padding="5dp" > <FrameLayout android:id="@android:id/tabcontent" android:layout_width="fill_parent" android:layout_height="fill_parent" android:padding="5dp" android:layout_weight="1" > <LinearLayout android:id="@+id/ll_tab1" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" /> <LinearLayout android:id="@+id/ll_tab2" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" /> <LinearLayout android:id="@+id/ll_tab3" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" /> </FrameLayout> <TabWidget android:id="@android:id/tabs" android:background="@color/light_gray" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="0"/> </LinearLayout> </TabHost>
¿Alguien puede ayudar? Muchas gracias !
- ¿Cuáles son estos controles que puedo utilizar en mi android-app?
- ActionBar Tabs con fragmentos en rotación
- Desactivar el gesto de desplazamiento que abre el cajón de navegación en android
- Android: Cambiar las actividades en un diseño de pestañas deslizable
- TabLayout contenido de la pestaña de actualización con una vista personalizada
- Ocultar un diseño cuando el foco en él se pierde en XML
- Android: Cómo hacer una pestaña de la pestaña como el mercado de Android?
- Número de pestañas en ActionBar
Pruebe a utilizar TabLayout
de Android Design Support Library para cumplir con las directrices de diseño de material de las pestañas .
TabLayout
la biblioteca deTabLayout
implementa ambas pestañas fijas, donde el ancho de la vista se divide por igual entre todas las pestañas, así como pestañas desplazables, donde las pestañas no tienen un tamaño uniforme y pueden desplazarse horizontalmente.
Para implementar TabLayout
consulte esta guía y cómo agregar el icono de las pestañas deslizables para establecer iconos en pestañas mediante setIcon
.
final int[] ICONS = new int[]{ R.drawable.ic_action_document, R.drawable.ic_action_tick, R.drawable.ic_action_trash}; .... TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs); tabLayout.setupWithViewPager(mViewPager); tabLayout.getTabAt(0).setIcon(ICONS[0]); tabLayout.getTabAt(1).setIcon(ICONS[1]); tabLayout.getTabAt(2).setIcon(ICONS[2]);
Para establecer las pestañas en la parte inferior de un TabLayout
comprobar – ¿Cómo puedo configurar pestañas en la parte inferior y también ocultar la barra de acción superior? Donde usted pone el TabLayout en un relativoLayout y lo alinea al fondo del padre:
<android.support.design.widget.TabLayout android:id="@+id/tab_layout" app:tabMode="fixed" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="?attr/colorPrimary" android:elevation="6dp" app:tabTextColor="#d3d3d3" app:tabSelectedTextColor="#ffffff" app:tabIndicatorColor="#ff00ff" android:minHeight="?attr/actionBarSize" android:layout_alignParentBottom="true" />
Aunque puede poner el diseño de la pestaña en la parte inferior, trate de no usar barras de pestañas inferiores si es posible según la guía Pure Android .
Otras plataformas utilizan la barra de pestañas inferior para cambiar entre las vistas de la aplicación. Por convención de la plataforma, las pestañas de Android para el control de la vista se muestran en las barras de acción en la parte superior de la pantalla en su lugar.
import android.os.Bundle; import android.support.design.widget.TabLayout; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.Toolbar; import java.util.ArrayList; import java.util.List; public class MainActivity extends AppCompatActivity { private Toolbar toolbar; private TabLayout tabLayout; private ViewPager viewPager; private int[] tabIcons = { R.drawable.ic_tab_favourite, R.drawable.ic_tab_call, R.drawable.ic_tab_contacts }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); getSupportActionBar().setDisplayHomeAsUpEnabled(true); viewPager = (ViewPager) findViewById(R.id.viewpager); setupViewPager(viewPager); tabLayout = (TabLayout) findViewById(R.id.tabs); tabLayout.setupWithViewPager(viewPager); setupTabIcons(); } private void setupTabIcons() { tabLayout.getTabAt(0).setIcon(tabIcons[0]); tabLayout.getTabAt(1).setIcon(tabIcons[1]); tabLayout.getTabAt(2).setIcon(tabIcons[2]); } private void setupViewPager(ViewPager viewPager) { ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager()); adapter.addFragment(new OneFragment(), "ONE"); adapter.addFragment(new TwoFragment(), "TWO"); adapter.addFragment(new ThreeFragment(), "THREE"); viewPager.setAdapter(adapter); } class ViewPagerAdapter extends FragmentPagerAdapter { private final List<Fragment> mFragmentList = new ArrayList<>(); private final List<String> mFragmentTitleList = new ArrayList<>(); public ViewPagerAdapter(FragmentManager manager) { super(manager); } @Override public Fragment getItem(int position) { return mFragmentList.get(position); } @Override public int getCount() { return mFragmentList.size(); } public void addFragment(Fragment fragment, String title) { mFragmentList.add(fragment); mFragmentTitleList.add(title); } @Override public CharSequence getPageTitle(int position) { return mFragmentTitleList.get(position); } } }
Diseño de la pestaña 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="match_parent"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:layout_scrollFlags="scroll|enterAlways" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabMode="fixed" app:tabGravity="fill"/> </android.support.design.widget.AppBarLayout> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> </android.support.design.widget.CoordinatorLayout>
Fragmentos (Clase) utilizados en esta pestaña
import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class OneFragment extends Fragment{ public OneFragment() { // Required empty public constructor } @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // Inflate the layout for this fragment return inflater.inflate(R.layout.fragment_one, container, false); } }
Archivo XML fragment_one.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".fragments.OneFragment"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/one" android:textSize="40dp" android:textStyle="bold" android:layout_centerInParent="true"/> </RelativeLayout>
TwoFragment.java
import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class TwoFragment extends Fragment{ public TwoFragment() { // Required empty public constructor } @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // Inflate the layout for this fragment return inflater.inflate(R.layout.fragment_two, container, false); } }
Fragment_two.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".fragments.TwoFragment"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/one" android:textSize="40dp" android:textStyle="bold" android:layout_centerInParent="true"/> </RelativeLayout>
Puede crear tercer fragmento de clase, y el diseño como he hecho anteriormente.
Ejecutarlo. Espero que esto funcione
Prueba esto,
Puth este activity_main.xml y establecer la altura personalizada a TabLayout.
<android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="@dimen/custom_tab_layout_height" app:tabMode="fixed" app:tabGravity="fill"/>
Cree un diseño xml denominado custom_tab.xml bajo res ⇒ layout. En este diseño hemos definido la vista personalizada para la pestaña.
<?xml version="1.0" encoding="utf-8"?> <TextView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/tab" android:textColor="@color/colorAccent" android:textSize="@dimen/tab_label" android:fontFamily="@string/font_fontFamily_medium"/>
Abra MainActivity.java y modifique el código como se indica a continuación. Aquí si usted observa el método de setupTabIcons (), he rendido el diseño de custom_tab.xml en cada lengüeta usando debajo líneas de código.
TextView tabOne = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null); tabOne.setText("ONE"); tabOne.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.ic_tab_favourite, 0, 0); tabLayout.getTabAt(0).setCustomView(tabOne); TextView tabTwo = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null); tabTwo.setText("TWO"); tabTwo.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.ic_tab_call, 0, 0); tabLayout.getTabAt(1).setCustomView(tabTwo); TextView tabThree = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null); tabThree.setText("THREE"); tabThree.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.ic_tab_contacts, 0, 0); tabLayout.getTabAt(2).setCustomView(tabThree);
Prueba esto, muy interesante. Debe ser la solución
http://www.androidhive.info/2015/09/android-material-design-working-with-tabs/
Bueno, puede colocar un ImageView en su Linearlayout que es cada ficha, o puede establecer un dibujable como un fondo para su LinearLayout. Si su imagen actuará como un fondo, obviamente querrá añadir esa imagen como fondo y no añadir un ImageView como un niño a su LinearLayout. Si va a ser contenido sin embargo, no un fondo, usted debe agregar un ImageView a cada LinearLayout como usted agregaría un niño de cualquier otro tipo a un padre Ver.
- ¿Cómo acceder a `this` dentro de un renderRow de un ListView?
- Clase de aplicación que se ejecuta en el hilo de interfaz de usuario o?